CEC-2611 Show HMI online status (#205)

* CEC-2611 Show HMI online status
Update car update progress to show ECU
Refresh car details car updates tab

* clean up

src/components/Controls/CarUpdatesTable/index.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import {
+  LinearProgress,
   Table,
   TableBody,
   TableCell,
@@ -57,14 +58,21 @@ const MainForm = ({ vin, token }) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
-  const { cancelUpdate, getCarUpdates, carUpdates, totalCarUpdates } =
-    useCarUpdatesContext();
+  const {
+    cancelUpdate,
+    getCarUpdates,
+    carUpdates,
+    totalCarUpdates,
+    startMonitor,
+    stopMonitor,
+  } = useCarUpdatesContext();
   const { setMessage } = useStatusContext();
 
   useEffect(() => {
     (async () => {
       try {
         if (!vin || !token) return;
+        stopMonitor();
         await getCarUpdates(
           {
             vin,
@@ -82,6 +90,20 @@ const MainForm = ({ vin, token }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vin, token, pageIndex, pageSize, orderBy, order]);
 
+  useEffect(() => {
+    try {
+      if (carUpdates.length === 0) return;
+      startMonitor(token);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+    return () => {
+      stopMonitor();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [carUpdates]);
+
   const handleChangePageIndex = (event, newIndex) => {
     setPageIndex(newIndex);
   };
@@ -141,7 +163,12 @@ const MainForm = ({ vin, token }) => {
                 {updateName(row)}
               </Link>
             </TableCell>
-            <TableCell align="center">{row.status}</TableCell>
+            <TableCell align="center">
+              {row.status}
+              {row.progress > -1 && (
+                <LinearProgress variant="determinate" value={row.progress} />
+              )}
+            </TableCell>
             <TableCell align="center">
               {LocalDateTimeString(row.created)}
             </TableCell>