Modified to use new Cloud cost View Endpoints

Signed-off-by: Thomas Evans <tevans3@icloud.com>

.gitignore

@@ -12,4 +12,7 @@ cmd/costmodel/costmodel-arm64
 pkg/cloud/azureorphan_test.go
 
 # VS Code
-.vscode
+.vscode
+
+#Apple
+*.DS_Store

ui/package.json

@@ -5,7 +5,7 @@
   "license": "Apache-2.0",
   "scripts": {
     "build": "npx parcel build src/index.html",
-    "serve": "npx parcel serve src/index.html",
+    "serve": "npx parcel serve src/index.html --no-cache",
     "clean": "rm -rf dist/*",
     "test": "echo \"Error: no test specified\" && exit 1",
     "preinstall": "npx npm-force-resolutions"

ui/src/CloudCost/CloudCost.js

@@ -14,8 +14,8 @@ import {
 } from "@material-ui/core";
 
 import { toCurrency } from "../util";
-import CloudCostChart from "./CloudCostChart";
-import { CloudCostRow } from "./CloudCostRow";
+import CloudCostChart from "./cloudCostChart";
+import { CloudCostRow } from "./cloudCostRow";
 
 const CloudCost = ({
   cumulativeData = [],
@@ -31,6 +31,8 @@ const CloudCost = ({
     },
   });
 
+  console.log("Totals", totalsRow);
+
   const classes = useStyles();
 
   function descendingComparator(a, b, orderBy) {

ui/src/CloudCost/CloudCostChart/index.js

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import Typography from "@material-ui/core/Typography";
 
-import RangeChart from "./RangeChart";
+import RangeChart from "./rangeChart";
 
 const CloudCostChart = ({ graphData, currency, n, height }) => {
   if (graphData.length === 0) {

ui/src/CloudCostReports.js

@@ -10,20 +10,20 @@ import { get, find } from "lodash";
 import { useLocation, useHistory } from "react-router";
 
 import { checkCustomWindow, toVerboseTimeRange } from "./util";
-import CloudCostEditControls from "./CloudCost/Controls/CloudCostEditControls";
+import CloudCostEditControls from "./cloudcost/controls/cloudCostEditControls";
 import Subtitle from "./components/Subtitle";
 import Warnings from "./components/Warnings";
-import CloudCostTopService from "./services/CloudCostTop";
+import CloudCostTopService from "./services/cloudCostTop";
 
 import {
   windowOptions,
   costMetricOptions,
   aggregationOptions,
   aggMap,
-} from "./CloudCost/tokens";
+} from "./cloudcost/tokens";
 import { currencyCodes } from "./constants/currencyCodes";
-import CloudCost from "./CloudCost/CloudCost";
-import { CloudCostDetails } from "./CloudCost/CloudCostDetails";
+import CloudCost from "./cloudcost/cloudCost";
+import { CloudCostDetails } from "./cloudcost/cloudCostDetails";
 
 const CloudCostReports = () => {
   const useStyles = makeStyles({
@@ -111,8 +111,8 @@ const CloudCostReports = () => {
         costMetric,
         filters
       );
-      if (resp.data) {
-        setCloudCostData(resp.data);
+      if (resp) {
+        setCloudCostData(resp);
       } else {
         if (resp.message && resp.message.indexOf("boundary error") >= 0) {
           let match = resp.message.match(/(ETL is \d+\.\d+% complete)/);
@@ -184,7 +184,7 @@ const CloudCostReports = () => {
 
   React.useEffect(() => {
     setWindow(searchParams.get("window") || "7d");
-    setAggregateBy(searchParams.get("agg") || "service");
+    setAggregateBy(searchParams.get("agg") || "provider");
     setCostMetric(searchParams.get("costMetric") || "AmortizedNetCost");
     setCurrency(searchParams.get("currency") || "USD");
   }, [routerLocation]);

ui/src/route.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
 import Reports from "./Reports.js";
-import CloudCostReports from "./CloudCostReports.js";
+import CloudCostReports from "./cloudCostReports.js";
 
 const Routes = () => {
   return (

ui/src/services/cloudCostDayTotals.js

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { getCloudFilters } from "../util";
-import { costMetricToPropName } from "../CloudCost/tokens";
+import { costMetricToPropName } from "../cloudcost/tokens";
 
 function formatItemsForCost({ data, costType }) {
   return data.sets.map(({ cloudCosts, window }) => {
@@ -26,7 +26,7 @@ class CloudCostDayTotalsService {
       const resp = await axios.get(
         `${
           this.BASE_URL
-        }/cloudCost/top?window=${window}&costMetric=${costMetric}${getCloudFilters(
+        }/cloudCost?window=${window}&costMetric=${costMetric}${getCloudFilters(
           filters
         )}`
       );

ui/src/services/cloudCostTop.js

@@ -14,25 +14,40 @@ class CloudCostTopService {
       aggregate,
       costMetric,
       filters,
+      limit: 1000,
     };
 
     if (aggregate.includes("item")) {
       const resp = await axios.get(
         `${
           this.BASE_URL
-        }/cloudCost/top?window=${window}&costMetric=${costMetric}${getCloudFilters(
+        }/cloudCost?window=${window}&costMetric=${costMetric}${getCloudFilters(
           filters
         )}`
       );
       const result_2 = await resp.data;
 
-      return { data: formatSampleItemsForGraph(result_2, costMetric) };
+      return formatSampleItemsForGraph(result_2, costMetric);
     }
 
-    const result = await axios.get(`${this.BASE_URL}/cloudCost/view`, {
+    const tableView = await axios.get(`${this.BASE_URL}/cloudCost/view/table`, {
       params,
     });
-    return result.data;
+    const totalsView = await axios.get(
+      `${this.BASE_URL}/cloudCost/view/totals`,
+      {
+        params,
+      }
+    );
+    const graphView = await axios.get(`${this.BASE_URL}/cloudCost/view/graph`, {
+      params,
+    });
+
+    return {
+      tableRows: tableView.data.data,
+      graphData: graphView.data.data,
+      tableTotal: totalsView.data.data.combined,
+    };
   }
 }
 

ui/src/util.js

@@ -1,5 +1,5 @@
 import { forEach, get, round } from "lodash";
-import { costMetricToPropName } from "./CloudCost/tokens";
+import { costMetricToPropName } from "./cloudcost/tokens";
 
 // rangeToCumulative takes an AllocationSetRange (type: array[AllocationSet])
 // and accumulates the values into a single AllocationSet (type: object)