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;