Reorganize app pages (#73)

* Update layout and menus * Add breadcrumbs Add menu icons Add ECU drop down * Implement submenu Update download progress * revamped dashboard section - failing app.test.js * Clean up Co-authored-by: Drew Taylor <dtaylor@fiskerinc.com>
2021-08-10 08:11:06 -07:00
parent 0545b54daf
commit e50eb886e6
39 changed files with 4043 additions and 3623 deletions
--- a/src/components/Datascope/Home/index.jsx
+++ b/src/components/Datascope/Home/index.jsx
@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from "react";
+import { Button, Grid, Link, Paper } from "@material-ui/core";
+import CreateIcon from "@material-ui/icons/Create";
+
+import api from "../../../services/grafana";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import useStyles from "../../useStyles";
+import ResponsiveIFrame from "../../Controls/ResponsiveIFrame";
+
+const Datascope = () => {
+  const classes = useStyles();
+  const { setTitle, setSitePath } = useStatusContext();
+  const REQUEST_INTERVAL = 10000;
+
+  useEffect(() => {
+    setTitle("Datascope");
+    setSitePath([]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const [carsCount, setCarsCount] = useState(0);
+  useEffect(() => {
+    api
+      .getCarsCount()
+      .then((result) => setCarsCount(result))
+      .catch((error) => console.log(error));
+  }, []);
+
+  const [signalsCount, setSignalsCount] = useState("0");
+  useEffect(() => {
+    storeSignals();
+
+    const id = setInterval(function () {
+      storeSignals();
+    }, REQUEST_INTERVAL);
+    return () => {
+      clearInterval(id);
+    };
+  }, []);
+
+  const storeSignals = () => {
+    api
+      .getSignalsCount()
+      .then((result) => {
+        let num = result.toLocaleString();
+        setSignalsCount(num);
+      })
+      .catch((error) => console.log(error));
+  };
+
+  return (
+    <div className={classes.paper}>
+      <Grid container className={classes.root} spacing={2}>
+        <Grid item md={6}>
+          <Paper className={classes.grafanaContainer} style={{ height: 150 }}>
+            <h1 className={classes.datascopeContainerValue}>{carsCount}</h1>
+            <h2 className={classes.datascopeContainerText}>Cars</h2>
+          </Paper>
+        </Grid>
+
+        <Grid item md={6}>
+          <Paper className={classes.grafanaContainer} style={{ height: 150 }}>
+            <h1 className={classes.datascopeContainerValue}>{signalsCount}</h1>
+            <h2 className={classes.datascopeContainerText}>
+              Signals Collected
+            </h2>
+          </Paper>
+        </Grid>
+
+        <Grid item md={12}>
+          <Paper className={classes.grafanaContainer}>
+            <ResponsiveIFrame
+              classes={classes}
+              src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&panelId=12"
+              title="Signals Time Series"
+            />
+          </Paper>
+        </Grid>
+      </Grid>
+      <Button
+        style={{ marginTop: 10 }}
+        aria-label="create"
+        color="primary"
+        component={Link}
+        href="https://grafana.fiskerdps.com"
+        rel="noopener"
+        target="_blank"
+      >
+        <CreateIcon fontSize="large" />
+        Go to Grafana
+      </Button>
+    </div>
+  );
+};
+
+export default Datascope;