CEC-2211 CAN signals view (#176)

* CEC-2211 CAN signals view

* Correct stg link

src/components/Cars/CANSignals/index.jsx

@@ -0,0 +1,104 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@material-ui/core";
+import React, { useEffect, useState } from "react";
+import { logger } from "../../../services/monitoring";
+import { LocalDateTimeString } from "../../../utils/dates";
+
+import { useVehicleContext } from "../../Contexts/VehicleContext";
+
+const BlankSignal = (msg) => ({
+  timestamp: "",
+  signal: msg,
+  value: "",
+});
+
+const transformSignals = (signals) =>
+  signals
+    .map((signal) => {
+      const { Timestamp, ...Settings } = signal;
+      const keys = Object.keys(Settings);
+
+      return keys.map((key) => ({
+        timestamp: LocalDateTimeString(Timestamp),
+        signal: key,
+        value: Settings[key],
+      }));
+    })
+    .flat();
+
+const CANSignals = (props) => {
+  const { vin, token } = props;
+  const { getCANSignals } = useVehicleContext();
+  const [signals, setSignals] = useState([]);
+  const delay = 500;
+  let timer = 0;
+
+  const stopTimer = async () => {
+    if (timer === 0) return;
+    clearTimeout(timer);
+    timer = 0;
+  };
+
+  const startTimer = () => {
+    stopTimer();
+    timer = setTimeout(() => {
+      updateSignals();
+    }, delay);
+  };
+
+  const updateSignals = async () => {
+    try {
+      const result = await getCANSignals(vin, token);
+      const items = transformSignals(result.data);
+
+      if (items.length > 0) {
+        setSignals(items);
+      } else {
+        setSignals(BlankSignal("No signals"));
+      }
+
+      if (delay > 0) startTimer();
+    } catch (e) {
+      setSignals(BlankSignal(e.message));
+      logger.warn(e.stack);
+    }
+  };
+
+  useEffect(() => {
+    startTimer();
+    return () => {
+      stopTimer();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (!signals || signals.length === 0) return <h3>Loading...</h3>;
+
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell>Timestamp</TableCell>
+          <TableCell>Signal</TableCell>
+          <TableCell>Value</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {signals.map((signal, i) => (
+          <TableRow key={i}>
+            <TableCell>{signal.timestamp}</TableCell>
+            <TableCell>{signal.signal}</TableCell>
+            <TableCell>{signal.value}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};
+
+export default CANSignals;

src/components/Cars/Status/CANSignalsTab.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import clsx from "clsx";
+import { Typography } from "@material-ui/core";
+
+import useStyles from "../../useStyles";
+import { useUserContext } from "../../Contexts/UserContext";
+import CANSignals from "../CANSignals";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
+
+const Main = (props) => {
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const classes = useStyles();
+  const { vin } = props;
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6" style={{ paddingBottom: "10px" }}>
+        CAN Signals
+      </Typography>
+      <CANSignals vin={vin} token={token} />
+    </div>
+  );
+};
+
+const CANSignalsTab = (props) => (
+  <VehicleProvider>
+    <Main {...props} />
+  </VehicleProvider>
+);
+
+export default CANSignalsTab;

src/components/Cars/Status/__snapshots__/index.test.jsx.snap

@@ -101,6 +101,24 @@ exports[`CarStatus Render 1`] = `
                       class="MuiTouchRipple-root"
                     />
                   </button>
+                  <button
+                    aria-controls="tabpanel-4"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-4"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      CAN Signals
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <span
                   class="PrivateTabIndicator-root-64 PrivateTabIndicator-colorSecondary-66 MuiTabs-indicator"
@@ -203,6 +221,13 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-3"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-4"
+            class="makeStyles-fullWidth-0"
+            hidden=""
+            id="tabpanel-4"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>

src/components/Cars/Status/index.jsx

@@ -11,6 +11,7 @@ import DigitalTwinTab from "./DigitalTwinTab";
 import TabPanel from "../../Controls/TabPanel";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
+import CANSignalsTab from "./CANSignalsTab";
 
 const tabHashes = ["details", "updates", "filters"];
 
@@ -62,6 +63,7 @@ const CarStatus = () => {
           <Tab label="Car Updates" {...tabProps(1)} />
           <Tab label="CAN Filters" {...tabProps(2)} />
           <Tab label="Digital Twin" {...tabProps(3)} />
+          <Tab label="CAN Signals" {...tabProps(4)} />
         </Tabs>
       </Box>
 
@@ -80,6 +82,10 @@ const CarStatus = () => {
       <TabPanel value={tabIndex} index={3}>
         <DigitalTwinTab vin={vin} />
       </TabPanel>
+
+      <TabPanel value={tabIndex} index={4} className={classes.fullWidth}>
+        <CANSignalsTab vin={vin} />
+      </TabPanel>
     </div>
   );
 };