css changes and modal

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

ui/src/CloudCost/CloudCost.js

@@ -15,6 +15,7 @@ import {
 
 import { toCurrency } from "../util";
 import CloudCostChart from "./CloudCostChart";
+import { primary } from "../constants/colors";
 
 const CloudCost = ({
   cumulativeData = [],
@@ -194,8 +195,14 @@ const CloudCost = ({
               </TableRow>
               {pageRows.map((row, key) => {
                 return (
-                  <TableRow key={key} onClick={() => drilldown(row)}>
-                    <TableCell align="left">{row.name}</TableCell>
+                  <TableRow
+                    key={key}
+                    onClick={() => drilldown(row)}
+                    style={{ cursor: "pointer" }}
+                  >
+                    <TableCell align="left" style={{ color: "#346ef2" }}>
+                      {row.name}
+                    </TableCell>
                     <TableCell align="right">
                       {round(row.kubernetesPercent * 100) + "%"}
                     </TableCell>

ui/src/CloudCost/CloudCostDetails.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Modal, Paper, Typography } from "@material-ui/core";
+import { Box, Modal, Paper, Typography } from "@material-ui/core";
 import Warnings from "../components/Warnings";
 import CircularProgress from "@material-ui/core/CircularProgress";
 
@@ -47,8 +47,8 @@ const CloudCostDetails = ({
         costMetric,
         nextFilters
       );
-      console.log(resp);
-      if (resp) {
+
+      if (resp.data) {
         setData(resp.data);
       } else {
         if (resp.message && resp.message.indexOf("boundary error") >= 0) {
@@ -67,6 +67,7 @@ const CloudCostDetails = ({
         setData([]);
       }
     } catch (err) {
+      console.log(err);
       if (err.message.indexOf("404") === 0) {
         setErrors([
           {
@@ -113,66 +114,64 @@ const CloudCostDetails = ({
     return dataPoint;
   });
 
-  console.log(drilldownData);
-
   return (
-    <Modal
-      open={true}
-      onClose={onClose}
-      title={`Costs over the last ${window}`}
-    >
-      <Paper>
-        <Typography style={{ marginTop: "1rem" }} variant="body1">
-          {selectedItem}
-        </Typography>
+    <div>
+      <Modal
+        open={true}
+        onClose={onClose}
+        title={`Costs over the last ${window}`}
+        style={{ margin: "10%" }}
+      >
+        <Paper>
+          <Typography style={{ marginTop: "1rem" }} variant="body1">
+            {selectedItem}
+          </Typography>
 
-        {loading && (
-          <div style={{ display: "flex", justifyContent: "center" }}>
-            <div style={{ paddingTop: 100, paddingBottom: 100 }}>
-              <CircularProgress />
+          {loading && (
+            <div style={{ display: "flex", justifyContent: "center" }}>
+              <div style={{ paddingTop: 100, paddingBottom: 100 }}>
+                <CircularProgress />
+              </div>
             </div>
-          </div>
-        )}
-        {!loading && errors.length > 0 && (
-          <div style={{ marginBottom: 20 }}>
-            <Warnings warnings={errors} />
-          </div>
-        )}
-        {data && (
-          <div style={{ display: "flex", marginTop: "2.5rem" }}>
-            <ResponsiveContainer
-              height={250}
-              id={"cloud-cost-drilldown"}
-              width={"100%"}
-            >
-              <BarChart
-                data={itemData}
-                margin={{
-                  top: 0,
-                  bottom: 10,
-                  left: 20,
-                  right: 0,
-                }}
+          )}
+          {!loading && errors.length > 0 && (
+            <div style={{ marginBottom: 20 }}>
+              <Warnings warnings={errors} />
+            </div>
+          )}
+          {data && (
+            <div style={{ display: "flex", marginTop: "2.5rem" }}>
+              <ResponsiveContainer
+                height={250}
+                id={"cloud-cost-drilldown"}
+                width={"100%"}
               >
-                <CartesianGrid vertical={false} />
-                <Legend verticalAlign={"bottom"} />
-                <XAxis
-                  dataKey={"time"}
-                  tickFormatter={(date) => format(date, "MM/dd/yyy")}
-                />
-                <YAxis tickFormatter={(tick) => `${toCurrency(tick)}`} />
-                <Bar dataKey={"cost"} fill={"#2196f3"} name={"Item Cost"} />
-                <Tooltip
-                  formatter={(value) =>
-                    `${toCurrency(value ?? 0, currency, 4, true)}`
-                  }
-                />
-              </BarChart>
-            </ResponsiveContainer>
-          </div>
-        )}
-      </Paper>
-    </Modal>
+                <BarChart
+                  data={itemData}
+                  margin={{
+                    top: 0,
+                    bottom: 10,
+                    left: 20,
+                    right: 0,
+                  }}
+                >
+                  <CartesianGrid vertical={false} />
+                  <Legend verticalAlign={"bottom"} />
+                  <XAxis dataKey={"time"} />
+                  <YAxis tickFormatter={(tick) => `${toCurrency(tick)}`} />
+                  <Bar dataKey={"cost"} fill={"#2196f3"} name={"Item Cost"} />
+                  <Tooltip
+                    formatter={(value) =>
+                      `${toCurrency(value ?? 0, currency, 4, true)}`
+                    }
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          )}
+        </Paper>
+      </Modal>
+    </div>
   );
 };
 

ui/src/CloudCost/tokens.js

@@ -36,4 +36,18 @@ const aggMap = {
   accountID: "Account",
 };
 
-export { windowOptions, aggregationOptions, costMetricOptions, aggMap };
+const costMetricToPropName = {
+  AmortizedNetCost: "amortizedNetCost",
+  AmortizedCost: "amortizedCost",
+  ListCost: "listCost",
+  NetCost: "netCost",
+  InvoicedCost: "invoicedCost",
+};
+
+export {
+  windowOptions,
+  aggregationOptions,
+  costMetricOptions,
+  aggMap,
+  costMetricToPropName,
+};

ui/src/services/cloudCostDayTotals.js

@@ -1,12 +1,13 @@
 import axios from "axios";
 import { getCloudFilters } from "../util";
+import { costMetricToPropName } from "../CloudCost/tokens";
 
-export function formatItemsForCost({ data, costType }) {
+function formatItemsForCost({ data, costType }) {
   return data.sets.map(({ cloudCosts, window }) => {
     return {
       date: window.start,
       cost: Object.values(cloudCosts).reduce(
-        (acc, costs) => acc + costs[costType].cost,
+        (acc, costs) => acc + costs[costType || "amortizedNetCost"].cost,
         0
       ),
     };
@@ -29,10 +30,10 @@ class CloudCostDayTotalsService {
           filters
         )}`
       );
-      const result_2 = await resp.data;
-      console.log(formatItemsForCost(result_2, costMetric));
+      const costMetricProp = costMetricToPropName[costMetric];
 
-      return { data: formatItemsForCost(result_2, costMetric) };
+      const result_2 = await resp.data;
+      return { data: formatItemsForCost(result_2, costMetricProp) };
     }
 
     return [];