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/CarSelectionTable/index.jsx

@@ -19,7 +19,7 @@ import TableHeaderSortable from "../../Table/HeaderSortable";
 import { logger } from "../../../services/monitoring";
 import ConnectedIcon from "../../Controls/ConnectedIcon";
 import ECUList from "../../Controls/ECUList";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useLocalStorage } from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -163,7 +163,8 @@ const CarSelectionTable = (props) => {
                 <TableCell align="center">
                   <ConnectedIcon
                     connected={row.connected}
-                    style={{ marginRight: 5 }}
+                    connectedHMI={row.connectedHMI}
+                    style={{ marginRight: 3 }}
                   />
                   <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
                   {row.ecu_list && (

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>

src/components/Controls/ConnectedIcon/index.jsx

@@ -1,12 +1,27 @@
 import React from "react";
 import PropTypes from "prop-types";
 import CheckCircleIcon from "@material-ui/icons/CheckCircle";
+import CheckBoxIcon from "@material-ui/icons/CheckBox";
+import { Tooltip } from "@material-ui/core";
 
 const ConnectedIcon = (props) => {
-  if (props.connected) {
+  if (props.connected || props.connectedHMI) {
     return (
       <span style={props.style}>
-        <CheckCircleIcon style={{ color: "Green", fontSize: 12 }} />
+        {props.connected && (
+          <Tooltip title="TBOX">
+            <CheckCircleIcon
+              style={{ color: "Green", fontSize: 12, marginRight: 3 }}
+            />
+          </Tooltip>
+        )}
+        {props.connectedHMI && (
+          <Tooltip title="ICC">
+            <CheckBoxIcon
+              style={{ color: "Blue", fontSize: 12, marginRight: 3 }}
+            />
+          </Tooltip>
+        )}
       </span>
     );
   }