Merge pull request #43 from wolfeaustin/austin/opencost-ui-external-c…

…osts

adds external costs page, reorganizes for longevity

src/components/Header.js

@@ -23,10 +23,7 @@ const useStyles = makeStyles({
 
 const Header = (props) => {
   const classes = useStyles();
-  const { title, breadcrumbs } = props;
-  const { pathname } = useLocation();
-
-  const headerTitle = pathname === "/cloud" ? "Cloud Costs" : "Cost Allocation";
+  const { title, breadcrumbs, headerTitle } = props;
 
   return (
     <div className={classes.root}>
@@ -36,7 +33,7 @@ const Header = (props) => {
       <div className={classes.context}>
         {title && (
           <Typography variant="h4" className={classes.title}>
-            {props.title}
+            {title}
           </Typography>
         )}
         {breadcrumbs && breadcrumbs.length > 0 && (

src/components/Nav/SidebarNav.js

@@ -44,6 +44,7 @@ const SidebarNav = ({ active }) => {
       icon: <BarChart />,
     },
     { name: "Cloud Costs", href: "cloud", icon: <Cloud /> },
+    { name: "External Costs", href: "external-costs", icon: <Cloud /> },
   ];
 
   return (

src/cloudCost/cloudCost.js → src/components/cloudCost/cloudCost.js

@@ -13,7 +13,7 @@ import {
   TableBody,
 } from "@material-ui/core";
 
-import { toCurrency } from "../util";
+import { toCurrency } from "../../util";
 import CloudCostChart from "./cloudCostChart";
 import { CloudCostRow } from "./cloudCostRow";
 
@@ -31,8 +31,6 @@ const CloudCost = ({
     },
   });
 
-
-
   const classes = useStyles();
 
   function descendingComparator(a, b, orderBy) {

src/cloudCost/cloudCostChart/rangeChart.js → src/components/cloudCost/cloudCostChart/rangeChart.js

@@ -10,8 +10,8 @@ import {
   ResponsiveContainer,
   Cell,
 } from "recharts";
-import { primary, greyscale, browns } from "../../constants/colors";
-import { toCurrency } from "../../util";
+import { primary, greyscale, browns } from "../../../constants/colors";
+import { toCurrency } from "../../../util";
 
 const RangeChart = ({ data, currency, height }) => {
   const useStyles = makeStyles({

src/cloudCost/cloudCostDetails.js → src/components/cloudCost/cloudCostDetails.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Modal, Paper, Typography } from "@material-ui/core";
-import Warnings from "../components/Warnings";
+import Warnings from "../../components/Warnings";
 import CircularProgress from "@material-ui/core/CircularProgress";
 
 import {
@@ -13,8 +13,8 @@ import {
   BarChart,
   Bar,
 } from "recharts";
-import { toCurrency } from "../util";
-import cloudCostDayTotals from "../services/cloudCostDayTotals";
+import { toCurrency } from "../../util";
+import cloudCostDayTotals from "../../services/cloudCostDayTotals";
 
 const CloudCostDetails = ({
   onClose,

src/cloudCost/cloudCostRow.js → src/components/cloudCost/cloudCostRow.js

@@ -2,8 +2,8 @@ import * as React from "react";
 
 import { TableCell, TableRow } from "@material-ui/core";
 
-import { toCurrency } from "../util";
-import { primary } from "../constants/colors";
+import { toCurrency } from "../../util";
+import { primary } from "../../constants/colors";
 
 const displayCurrencyAsLessThanPenny = (amount, currency) =>
   amount > 0 && amount < 0.01

src/cloudCost/controls/cloudCostEditControls.js → src/components/cloudCost/controls/cloudCostEditControls.js

@@ -6,7 +6,7 @@ import Select from "@material-ui/core/Select";
 
 import * as React from "react";
 
-import SelectWindow from "../../components/SelectWindow";
+import SelectWindow from "../../SelectWindow";
 
 const useStyles = makeStyles({
   wrapper: {

src/components/externalCosts/externalCostDetailModal.js

@@ -0,0 +1,93 @@
+import { Modal, Paper } from "@material-ui/core";
+import {
+  TableContainer,
+  TableCell,
+  TableRow,
+  Table,
+  TableBody,
+} from "@material-ui/core";
+
+// for now, we can assume that the "Name" is resourceType
+export const ExternalCostDetails = ({ row, onClose }) => (
+  <div>
+    <Modal
+      open={true}
+      onClose={onClose}
+      title={row.resource_type}
+      style={{ margin: "10%" }}
+    >
+      <Paper style={{ padding: 20 }}>
+        <TableContainer>
+          <Table>
+            <TableBody>
+              <TableRow>
+                <TableCell>account_name</TableCell>
+                <TableCell>{row.account_name}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>aggregate</TableCell>
+                <TableCell>{row.aggregate}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>charge_category</TableCell>
+                <TableCell>{row.charge_category}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>cost</TableCell>
+                <TableCell>{row.cost}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>cost_source</TableCell>
+                <TableCell>{row.cost_source}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>cost_type</TableCell>
+                <TableCell>{row.cost_type}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>description</TableCell>
+                <TableCell>{row.description}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>domain</TableCell>
+                <TableCell>{row.domain}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>id</TableCell>
+                <TableCell>{row.id}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>list_unit_price</TableCell>
+                <TableCell>{row.list_unit_price}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>provider_id</TableCell>
+                <TableCell>{row.provider_id}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>resource_name</TableCell>
+                <TableCell>{row.resource_name}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>resource_type</TableCell>
+                <TableCell>{row.resource_type}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>usage_quantity</TableCell>
+                <TableCell>{row.usage_quantity}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>usage_unit</TableCell>
+                <TableCell>{row.usage_unit}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>zone</TableCell>
+                <TableCell>{row.zone}</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Paper>
+    </Modal>
+  </div>
+);

src/components/externalCosts/externalCostRow.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import { TableCell, TableRow } from "@material-ui/core";
+
+import { toCurrency } from "../../util";
+import { primary } from "../../constants/colors";
+
+const displayCurrencyAsLessThanPenny = (amount, currency) =>
+  amount > 0 && amount < 0.01
+    ? `<${toCurrency(0.01, currency)}`
+    : toCurrency(amount, currency);
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+const ExternalCostRow = ({
+  cost,
+  currency,
+  onClick,
+  name,
+  costType,
+}) => {
+  return (
+    <TableRow onClick={onClick}>
+      <TableCell
+        align={"left"}
+        style={{ cursor: "pointer", color: "#346ef2", padding: "1rem" }}
+      >
+        {name}
+      </TableCell>
+      <TableCell align={"right"} style={{ paddingRight: "2em" }}>
+        {capitalizeFirstLetter(costType)}
+      </TableCell>
+      {/* total cost */}
+      <TableCell align={"right"} style={{ paddingRight: "2em" }}>
+        {`${displayCurrencyAsLessThanPenny(cost, currency)}`}
+      </TableCell>
+    </TableRow>
+  );
+};
+
+export { ExternalCostRow };

src/components/externalCosts/externalCostsChart.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import Typography from "@material-ui/core/Typography";
+
+import RangeChart from "./rangeChart";
+
+const ExternalCostsChart = ({
+  graphData,
+  currency,
+  n,
+  height,
+  aggregateBy,
+}) => {
+  if (graphData.length === 0) {
+    return (
+      <Typography variant="body2" style={{ padding: "4em" }}>
+        No data
+      </Typography>
+    );
+  }
+  return (
+    <RangeChart
+      data={graphData}
+      currency={currency}
+      height={height}
+      aggregateBy={aggregateBy}
+    />
+  );
+};
+
+export default React.memo(ExternalCostsChart);

src/components/externalCosts/externalCostsControls.js

@@ -0,0 +1,78 @@
+import { makeStyles } from "@material-ui/styles";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import MenuItem from "@material-ui/core/MenuItem";
+import Select from "@material-ui/core/Select";
+
+import * as React from "react";
+
+import SelectWindow from "../../components/SelectWindow";
+import {
+  windowOptions,
+  aggregationOptions,
+  costTypeOptions
+} from '../../components/externalCosts/tokens'
+
+const useStyles = makeStyles({
+  wrapper: {
+    display: "inline-flex",
+  },
+  formControl: {
+    margin: 8,
+    minWidth: 120,
+  },
+});
+
+function ExternalCostsControls({
+  window,
+  setWindow,
+  aggregateBy,
+  setAggregateBy,
+  costType,
+  setCostType
+}) {
+  const classes = useStyles();
+  return (
+    <div className={classes.wrapper}>
+      <SelectWindow
+        windowOptions={windowOptions}
+        window={window}
+        setWindow={setWindow}
+      />
+      <FormControl className={classes.formControl}>
+        <InputLabel id="aggregation-select-label">Breakdown</InputLabel>
+        <Select
+          id="aggregation-select"
+          value={aggregateBy}
+          onChange={(e) => {
+            setAggregateBy(e.target.value);
+          }}
+        >
+          {aggregationOptions.map((opt) => (
+            <MenuItem key={opt.value} value={opt.value}>
+              {opt.name}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+      <FormControl className={classes.formControl}>
+        <InputLabel id="aggregation-select-label">Cost Type</InputLabel>
+        <Select
+          id="cost-type-select"
+          value={costType}
+          onChange={(e) => {
+            setCostType(e.target.value);
+          }}
+        >
+          {costTypeOptions.map((opt) => (
+            <MenuItem key={opt.value} value={opt.value}>
+              {opt.name}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
+}
+
+export default React.memo(ExternalCostsControls);