CEC-5356: use new can signal api

src/components/Cars/CANSignals/index.jsx

@@ -13,7 +13,7 @@ import {
 } from "../../Contexts/CANSignalsContext";
 
 const Main = ({ vin }) => {
-  const { signals, setVIN } = useCANSignalContext();
+  const { signals, setVIN, duration } = useCANSignalContext();
 
   useEffect(() => {
     setVIN(vin);
@@ -26,24 +26,27 @@ const Main = ({ vin }) => {
   if (!signals || signals.length === 0) return <h3>Loading...</h3>;
 
   return (
-    <Table>
+    <>
-      <TableHead>
+      (Received within the last {duration} seconds)
-        <TableRow>
+      <Table>
-          <TableCell>Timestamp</TableCell>
+        <TableHead>
-          <TableCell>Signal</TableCell>
+          <TableRow>
-          <TableCell>Value</TableCell>
+            <TableCell>Timestamp</TableCell>
-        </TableRow>
+            <TableCell>Signal</TableCell>
-      </TableHead>
+            <TableCell>Value</TableCell>
-      <TableBody>
-        {signals.map((signal, i) => (
-          <TableRow key={i}>
-            <TableCell>{signal.timestamp}</TableCell>
-            <TableCell>{signal.signal}</TableCell>
-            <TableCell>{signal.value}</TableCell>
           </TableRow>
-        ))}
+        </TableHead>
-      </TableBody>
+        <TableBody>
-    </Table>
+          {signals.map((signal, i) => (
+            <TableRow key={i}>
+              <TableCell>{signal.timestamp}</TableCell>
+              <TableCell>{signal.signal}</TableCell>
+              <TableCell>{signal.value}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </>
   );
 };
 

src/components/Contexts/CANSignalsContext.jsx

@@ -1,8 +1,8 @@
-import React, {useContext, useState} from "react";
+import React, { useContext, useState } from "react";
 
 import api from "../../services/vehiclesAPI";
 import { LocalDateTimeString } from "../../utils/dates";
-import {useInterval} from "usehooks-ts";
+import { useInterval } from "usehooks-ts";
 
 const CANSignalContext = React.createContext();
 
@@ -26,31 +26,44 @@ const transformSignals = (signals) =>
     .flat();
 
 export const CANSignalProvider = ({ token, children }) => {
+  // auto scale polling if not getting response
+  const durations = [10000, 30000, 60000, 120000];
+  const delays = [500, 1500, 3000, 6000];
   const [vin, setVIN] = useState(null);
   const [signals, setSignals] = useState([]);
-  const [delay, setDelay] = useState(500);
+  const [delayIndex, setDelayIndex] = useState(0);
 
   useInterval(
     () => {
       getCANSignals()
-    }, vin?delay:null
+    }, vin ? delays[delayIndex] : null
   )
 
   const getCANSignals = async () => {
     try {
       if (!vin) return;
 
-      const result = await api.getCANSignals(vin, token);
+      const date = new Date();
+      date.setUTCSeconds(date.getUTCSeconds() - durations[delayIndex]);
+
+      const result = await api.getCANSignals(vin, {
+        after_utc: date,
+      }, token);
       if (result.error)
         throw new Error(`Get CAN signals error. ${result.message}`);
 
       const items = transformSignals(result.data);
 
       if (items.length > 0) {
-        setDelay(500);
+        setDelayIndex(0);
         setSignals(items);
       } else {
-        setDelay(1000);
+        setDelayIndex((index) => {
+          if (index < delays.length - 1) {
+            return index += 1;
+          }
+          return index;
+        });
         setSignals([BlankSignal("No signals")]);
       }
     } catch (e) {
@@ -61,6 +74,7 @@ export const CANSignalProvider = ({ token, children }) => {
   return (
     <CANSignalContext.Provider
       value={{
+        duration: durations[delayIndex] / 1000,
         signals,
         setVIN,
       }}

src/services/vehiclesAPI.js

@@ -213,8 +213,23 @@ const vehiclesAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler),
 
-  getCANSignals: async (vin, token) =>
+  /**
-    fetch(`${API_ENDPOINT}/cansignals/${vin}`, {
+   * 
+   * @param {String} vin The VIN of the car
+   * @param {Object} filter 
+   * @param {Date} filter.after_utc Point in time to begin signal response
+   * @param {Integer} filter.limit Max number of CAN Signals to return
+   * @param {String} token 
+   * @returns {Array}
+   */
+  getCANSignals: async (vin, filter = {}, token) => {
+    if (filter.after_utc instanceof Date && !isNaN(filter.after_utc)) {
+      filter.after_utc = filter.after_utc.getTime();
+    }
+
+    const url = addQueryParams(`${API_ENDPOINT}/cansignals/${vin}`, filter);
+    console.log(url)
+    return fetch(url, {
       method: "GET",
       headers: Object.assign(
         { "Content-Type": "application/json" },
@@ -222,7 +237,8 @@ const vehiclesAPI = {
       ),
     })
       .then(fetchRespHandler)
-      .catch(errorHandler),
+      .catch(errorHandler);
+  },
 
   getTRexLogs: async (vin, date, offset, count, direction, token, controller) =>
     fetch(`${API_ENDPOINT}/vehicle/${vin}/trex-logs?date=${date}&offset=${offset}&count=${count}&direction=${direction}`, {