some more wip

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

ui/src/CloudCost/CloudCost.js

@@ -22,6 +22,7 @@ const CloudCost = ({
   graphData = [],
   currency = "USD",
   drilldown,
+  sampleData = false,
 }) => {
   const useStyles = makeStyles({
     noResults: {
@@ -152,7 +153,7 @@ const CloudCost = ({
             <TableBody>
               <TableRow>
                 {headCells.map((cell) => {
-                  return (
+                  let tableCell = (
                     <TableCell
                       key={cell.id}
                       colSpan={cell.colspan}
@@ -166,6 +167,29 @@ const CloudCost = ({
                         : toCurrency(round(totalData[cell.id]), currency)}
                     </TableCell>
                   );
+                  if (sampleData && cell.label === "Sum of Sample Data") {
+                    tableCell = (
+                      <TableCell
+                        align={cell.numeric ? "right" : "left"}
+                        key={cell.id}
+                        style={{
+                          width: cell.width,
+                          paddingRight: cell.id === "totalCost" ? "2em" : "",
+                        }}
+                      >
+                        <TableSortLabel
+                          active={orderBy === cell.id}
+                          direction={orderBy === cell.id ? order : "asc"}
+                          onClick={createSortHandler(cell.id)}
+                        >
+                          {cell.label}
+                        </TableSortLabel>
+                      </TableCell>
+                    );
+
+                    return tableCell;
+                  }
+                  return <>{tableCell}</>;
                 })}
               </TableRow>
               {pageRows.map((row, key) => {

ui/src/CloudCost/CloudCostDetails.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Modal, Typography } from "@material-ui/core";
+import { Modal, Paper, Typography } from "@material-ui/core";
 import Warnings from "../components/Warnings";
 import CircularProgress from "@material-ui/core/CircularProgress";
 
@@ -31,6 +31,11 @@ const CloudCostDetails = ({
   const [errors, setErrors] = React.useState([]);
   const [fetch, setFetch] = React.useState(true);
 
+  const nextFilters = [
+    ...(filters ?? []),
+    { property: "providerIds", value: selectedProviderId },
+  ];
+
   async function fetchData() {
     setLoading(true);
     setErrors([]);
@@ -40,13 +45,10 @@ const CloudCostDetails = ({
         window,
         agg,
         costMetric,
-        [
-          ...(filters ?? []),
-
-          { property: "providerIds", value: selectedProviderId },
-        ]
+        nextFilters
       );
-      if (resp.data) {
+      console.log(resp);
+      if (resp) {
         setData(resp.data);
       } else {
         if (resp.message && resp.message.indexOf("boundary error") >= 0) {
@@ -64,7 +66,7 @@ const CloudCostDetails = ({
         }
         setData([]);
       }
-    } catch (error) {
+    } catch (err) {
       if (err.message.indexOf("404") === 0) {
         setErrors([
           {
@@ -92,13 +94,13 @@ const CloudCostDetails = ({
     setFetch(false);
   }
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (fetch) {
       fetchData();
     }
   }, [fetch]);
 
-  const drilldownData = (data ?? []).sort(
+  const drilldownData = data.sort(
     (a, b) =>
       new Date(a.date ?? "").getTime() - new Date(b.date ?? "").getTime()
   );
@@ -111,61 +113,65 @@ const CloudCostDetails = ({
     return dataPoint;
   });
 
+  console.log(drilldownData);
+
   return (
     <Modal
       open={true}
       onClose={onClose}
       title={`Costs over the last ${window}`}
     >
-      <Typography style={{ marginTop: "1rem" }} variant="p">
-        {selectedItem}
-      </Typography>
+      <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>
-      )}
+              <BarChart
+                data={itemData}
+                margin={{
+                  top: 0,
+                  bottom: 10,
+                  left: 20,
+                  right: 0,
+                }}
+              >
+                <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>
   );
 };

ui/src/CloudCostReports.js

@@ -54,6 +54,7 @@ const CloudCostReports = () => {
   const [currency, setCurrency] = React.useState("USD");
   const [selectedProviderId, setSelectedProviderId] = React.useState("");
   const [selectedItemName, setselectedItemName] = React.useState("");
+  const sampleData = aggregateBy.includes("item");
   // page and settings state
   const [init, setInit] = React.useState(false);
   const [fetch, setFetch] = React.useState(false);
@@ -156,7 +157,7 @@ const CloudCostReports = () => {
   }
 
   function drilldown(row) {
-    if (aggregationState.includes("item")) {
+    if (aggregateBy.includes("item")) {
       try {
         setSelectedProviderId(row.providerID);
         setselectedItemName(row.labelName ?? row.name);
@@ -277,25 +278,26 @@ const CloudCostReports = () => {
               graphData={cloudCostData.graphData}
               totalData={cloudCostData.tableTotal}
               drilldown={drilldown}
+              sampleData={sampleData}
+            />
+          )}
+          {selectedProviderId && selectedItemName && (
+            <CloudCostDetails
+              onClose={() => {
+                setSelectedProviderId("");
+                setselectedItemName("");
+              }}
+              selectedProviderId={selectedProviderId}
+              selectedItem={selectedItemName}
+              agg={aggregateBy}
+              filters={filters}
+              costMetric={costMetric}
+              window={window}
+              currency={currency}
             />
           )}
         </Paper>
       )}
-      {selectedProviderId && selectedItemName && (
-        <CloudCostDetails
-          onClose={() => {
-            setSelectedProviderId("");
-            setselectedItemName("");
-          }}
-          selectedProviderId={selectedProviderId}
-          selectedItem={selectedItemName}
-          agg={aggregateBy}
-          filters={filters}
-          costMetric={costMetric}
-          window={window}
-          currency={currency}
-        />
-      )}
     </Page>
   );
 };

ui/src/services/cloudCostDayTotals.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 import { getCloudFilters } from "../util";
 
-export function formatItemsForCost({ data }, costType) {
+export function formatItemsForCost({ data, costType }) {
   return data.sets.map(({ cloudCosts, window }) => {
     return {
       date: window.start,
@@ -16,7 +16,7 @@ export function formatItemsForCost({ data }, costType) {
 class CloudCostDayTotalsService {
   BASE_URL = process.env.BASE_URL || "{PLACEHOLDER_BASE_URL}";
 
-  async fetchCloudCostData(window, aggregate, costMetric) {
+  async fetchCloudCostData(window, aggregate, costMetric, filters) {
     if (this.BASE_URL.includes("PLACEHOLDER_BASE_URL")) {
       this.BASE_URL = `http://localhost:9090/model`;
     }
@@ -30,8 +30,9 @@ class CloudCostDayTotalsService {
         )}`
       );
       const result_2 = await resp.data;
+      console.log(formatItemsForCost(result_2, costMetric));
 
-      return { data: formatItemsForCost(result_2) };
+      return { data: formatItemsForCost(result_2, costMetric) };
     }
 
     return [];