Skip to content

Commit

Permalink
Azure and AWS tables and totals now working.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonathan-fries
jonathan-fries committed Oct 25, 2019
1 parent 8e92a16 commit 591fe89
Show file tree
Hide file tree
Showing 6 changed files with 136 additions and 25 deletions.
52 changes: 48 additions & 4 deletions client/src/components/price_display/compute_serverless_interactive/aws_table.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';

//import { Wave } from 'react-animated-text';
import Table from 'react-bootstrap/Table';

export default class AWSTable extends React.Component{

Expand All @@ -9,7 +8,52 @@ export default class AWSTable extends React.Component{
}

render(){
return <div></div>;
}

const awsInvocations = this.props.awsInvocationRecord;
const awsMemory = this.props.awsMemoryRecord;
//const googleCpu = this.props.googleCpuRecord;
const totalMonthly = this.props.totalMonthly;

return <div >
<h2>AWS</h2>
<Table striped bordered hover responsive="sm">
<thead>
<tr>
<td>AWS Item</td>
<td>Rate Per Unit</td>
<td>Unit</td>
<td>Units Consumed</td>
<td>Units Charged</td>
<td>Cost</td>
</tr>
</thead>
<tbody>
<tr>
<td>{awsInvocations.name}</td>
<td>${awsInvocations.pricePerUnit != 0.00 ? (awsInvocations.pricePerUnit).toFixed(8) : "--"}</td>
<td>{awsInvocations.unit}</td>
<td>{awsInvocations.name != "N/A" ? awsInvocations.unitsConsumed.toLocaleString('en') : "--"}</td>
<td>{awsInvocations.name != "N/A" ? awsInvocations.unitsCharged.toLocaleString('en') : "--"}</td>
<td>${awsInvocations.name != "N/A" ? awsInvocations.cost.toFixed(2) : "--"}</td>
</tr>
<tr>
<td>{awsMemory.name}</td>
<td>${awsMemory.pricePerUnit != 0.00 ? (awsMemory.pricePerUnit).toFixed(8) : "--"}</td>
<td>{awsMemory.unit}</td>
<td>{awsMemory.name != "N/A" ? awsMemory.unitsConsumed.toLocaleString('en') : "--"}</td>
<td>{awsMemory.name != "N/A" ? awsMemory.unitsCharged.toLocaleString('en') : "--"}</td>
<td>${awsMemory.name != "N/A" ? awsMemory.cost.toFixed(2) : "--"}</td>
</tr>
<tr>
<td><b>Total</b></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>${totalMonthly.toFixed(2)}</td>
</tr>
</tbody>
</Table>
</div>;
}
}
51 changes: 48 additions & 3 deletions client/src/components/price_display/compute_serverless_interactive/azure_table.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';

//import { Wave } from 'react-animated-text';
import Table from 'react-bootstrap/Table';

export default class AzureTable extends React.Component{

Expand All @@ -9,7 +8,53 @@ export default class AzureTable extends React.Component{
}

render(){
return <div></div>;

const azureInvocations = this.props.azureInvocationRecord;
const azureMemory = this.props.azureMemoryRecord;
//const googleCpu = this.props.googleCpuRecord;
const totalMonthly = this.props.totalMonthly;

return <div >
<h2>Azure</h2>
<Table striped bordered hover responsive="sm">
<thead>
<tr>
<td>Azure Item</td>
<td>Rate Per Unit</td>
<td>Unit</td>
<td>Units Consumed</td>
<td>Units Charged</td>
<td>Cost</td>
</tr>
</thead>
<tbody>
<tr>
<td>{azureInvocations.name}</td>
<td>${azureInvocations.pricePerUnit != 0.00 ? (azureInvocations.pricePerUnit).toFixed(8) : "--"}</td>
<td>{azureInvocations.unit}</td>
<td>{azureInvocations.name != "N/A" ? azureInvocations.unitsConsumed.toLocaleString('en') : "--"}</td>
<td>{azureInvocations.name != "N/A" ? azureInvocations.unitsCharged.toLocaleString('en') : "--"}</td>
<td>${azureInvocations.name != "N/A" ? azureInvocations.cost.toFixed(2) : "--"}</td>
</tr>
<tr>
<td>{azureMemory.name}</td>
<td>${azureMemory.pricePerUnit != 0.00 ? (azureMemory.pricePerUnit).toFixed(8) : "--"}</td>
<td>{azureMemory.unit}</td>
<td>{azureMemory.name != "N/A" ? azureMemory.unitsConsumed.toLocaleString('en') : "--"}</td>
<td>{azureMemory.name != "N/A" ? azureMemory.unitsCharged.toLocaleString('en') : "--"}</td>
<td>${azureMemory.name != "N/A" ? azureMemory.cost.toFixed(2) : "--"}</td>
</tr>
<tr>
<td><b>Total</b></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>${totalMonthly.toFixed(2)}</td>
</tr>
</tbody>
</Table>
</div>;
}

}
36 changes: 26 additions & 10 deletions client/src/components/price_display/compute_serverless_interactive/serverless_main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {webServiceRequest} from '../shared/web_service_request.js';
import DisplayState from './display_state.js';
import './serverless_main.scss';
import GoogleTable from './google_table.js';
import AzureTable from './azure_table.js';
import AWSTable from './aws_table.js';
import TotalCostComparison from './total_cost_comparison.js';

//import { Wave } from 'react-animated-text';
Expand Down Expand Up @@ -47,11 +49,11 @@ export default class ServerlessMain extends React.Component{
this.handleInvocationsChange = this.handleInvocationsChange.bind(this);
this.handleMemoryChange = this.handleMemoryChange.bind(this);

this.gcpComputedValues = this.gcpComputedValues.bind(this);
this.computedValues = this.computedValues.bind(this);

var ws = "https://api.pricekite.io/v1/gcp-compute-serverless-skus";

this.xhr = webServiceRequest(ws, false, (success, price, prices) =>{
this.xhr = webServiceRequest(ws, "GCP", (success, price, prices) =>{
if(success)
{
this.setState({gcp_prices:prices});
Expand All @@ -67,7 +69,7 @@ export default class ServerlessMain extends React.Component{

var ws_aws = "https://api.pricekite.io/v1/aws-compute-serverless-skus";

this.xhr_aws = webServiceRequest(ws_aws, true, (success, price, prices) =>{
this.xhr_aws = webServiceRequest(ws_aws, "AWS", (success, price, prices) =>{
if(success)
{
this.setState({aws_prices:prices});
Expand All @@ -83,7 +85,7 @@ export default class ServerlessMain extends React.Component{
//var ws_azure = "https://api.pricekite.io/v1/azure-compute-serverless-prices";
var ws_azure = "https://api.pricekite.io/v1/azure-compute-serverless-skus";

this.xhr_azure = webServiceRequest(ws_azure, true, (success, price, prices) =>{
this.xhr_azure = webServiceRequest(ws_azure, "Azure", (success, price, prices) =>{
if(success)
{
this.setState({azure_prices:prices});
Expand Down Expand Up @@ -166,17 +168,29 @@ export default class ServerlessMain extends React.Component{
const localAwsPrices = this.state.aws_current_price;
const localAzurePrices = this.state.azure_current_price;

var awsMemory = findRecordType(localAwsPrices, "Serverless Compute");
var awsInvocations = findRecordType(localAwsPrices, "Serverless Requests");

awsMemory = this.computedValues(awsMemory, "Memory Time", 400000, functionNumber, functionMemoryAmount, functionInvocations, functionAverageTime);
awsInvocations = this.computedValues(awsInvocations, "Invocations", 1000000, functionNumber, functionMemoryAmount, functionInvocations, functionAverageTime);

var azureMemory = findRecordType(localAzurePrices, "Execution Time");
var azureInvocations = findRecordType(localAzurePrices, "Total Executions");

azureMemory = this.computedValues(azureMemory, "Memory Time", 400000, functionNumber, functionMemoryAmount, functionInvocations, functionAverageTime);
azureInvocations = this.computedValues(azureInvocations, "Invocations", 1000000, functionNumber, functionMemoryAmount, functionInvocations, functionAverageTime);

var googleMemory = findRecordType(localGcpPrices, "Memory Time");
var googleCpu = findRecordType(localGcpPrices, "CPU Time");
var googleInvocations = findRecordType(localGcpPrices, "Invocations");

googleMemory = this.gcpComputedValues(googleMemory, "Memory Time", 400000, functionNumber, functionMemoryAmount, functionInvocations, functionAverageTime);
googleCpu = this.gcpComputedValues(googleCpu, "CPU Time", 200000, functionNumber, functionMemoryAmount, functionInvocations, functionAverageTime);
googleInvocations = this.gcpComputedValues(googleInvocations, "Invocations", 2000000, functionNumber, functionMemoryAmount, functionInvocations, functionAverageTime);
googleMemory = this.computedValues(googleMemory, "Memory Time", 400000, functionNumber, functionMemoryAmount, functionInvocations, functionAverageTime);
googleCpu = this.computedValues(googleCpu, "CPU Time", 200000, functionNumber, functionMemoryAmount, functionInvocations, functionAverageTime);
googleInvocations = this.computedValues(googleInvocations, "Invocations", 2000000, functionNumber, functionMemoryAmount, functionInvocations, functionAverageTime);

const gcpTotalAmount = googleInvocations.cost + googleMemory.cost + googleCpu.cost;
const awsTotalAmount = 14;
const azureTotalAmount = 15.50;
const awsTotalAmount = awsInvocations.cost + awsMemory.cost;
const azureTotalAmount = azureInvocations.cost + azureMemory.cost;

return <div>{ (awsLoading || azureLoading || gcpLoading) ? <Wave text="Thinking..." effect="fadeOut"/> : <div>
<div>
Expand Down Expand Up @@ -216,13 +230,15 @@ export default class ServerlessMain extends React.Component{
</Row>
</Container>
<DisplayState regionSelected={regionSelected} functionNumber ={functionNumber} functionAverageTime={functionAverageTime} functionInvocations={functionInvocations} functionMemoryAmount={functionMemoryAmount}></DisplayState>
<AWSTable awsMemoryRecord={awsMemory} awsInvocationRecord={awsInvocations} totalMonthly={awsTotalAmount}></AWSTable>
<AzureTable azureMemoryRecord={azureMemory} azureInvocationRecord={azureInvocations} totalMonthly={azureTotalAmount}></AzureTable>
<GoogleTable googleCpuRecord={googleCpu} googleMemoryRecord={googleMemory} googleInvocationRecord={googleInvocations} totalMonthly={gcpTotalAmount}></GoogleTable>
</div>}
</div>;
}


gcpComputedValues(record, type, discount, functionNumber, functionMemoryAmount, functionInvocations, functionAverageTime)
computedValues(record, type, discount, functionNumber, functionMemoryAmount, functionInvocations, functionAverageTime)
{
var newRecord = record;

Expand Down
6 changes: 3 additions & 3 deletions client/src/components/price_display/compute_serverless_interactive/total_cost_comparison.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@ export default class TotalCostComparison extends React.Component{
</tr>
<tr>
<td>AWS</td>
<td>{awsTotalCost}</td>
<td>${awsTotalCost.toFixed(2)}</td>
</tr>
<tr>
<td>Azr</td>
<td>{azureTotalCost}</td>
<td>Azure</td>
<td>${azureTotalCost.toFixed(2)}</td>
</tr>
</tbody>
</Table>;
Expand Down
4 changes: 4 additions & 0 deletions client/src/components/price_display/shared/find_record_Type.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ export function findRecordType(records, recordType){
if(records[i].name == recordType)
{
record = records[i];
if(record.provider == "AWS")
{
record.pricePerUnit = parseFloat(record.pricePerUnit);
}
}
}
return record;
Expand Down
12 changes: 7 additions & 5 deletions client/src/components/price_display/shared/web_service_request.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {findRegionRecords} from '../shared/find_region_record.js';

export function webServiceRequest(ws, body, callback)
export function webServiceRequest(ws, provider, callback)
{
var xhr = new XMLHttpRequest();

Expand All @@ -9,14 +9,16 @@ export function webServiceRequest(ws, body, callback)
if(xhr.status === 200){
console.log(xhr.responseText);
var local_prices = {};
if(body)
local_prices = JSON.parse(xhr.responseText)
if(provider == "AWS")
{
local_prices = JSON.parse(xhr.responseText);
local_prices = JSON.parse(local_prices.body);
}
else
else if(provider == "Azure")
{
local_prices = JSON.parse(xhr.responseText)
local_prices = JSON.parse(local_prices.body);
local_prices = local_prices.Items;

}

var local_price = findRegionRecords(1000, local_prices);
Expand Down

0 comments on commit 591fe89

Please sign in to comment.