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);