Display relay status on relays page

central_frontend/src/routes/DevicesRoute.tsx

@@ -13,7 +13,7 @@ import {
 } from "@mui/material";
 import React from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { Device, DeviceApi, DeviceURL } from "../api/DeviceApi";
+import { Device, DeviceApi, DevicesState, DeviceURL } from "../api/DeviceApi";
 import { AsyncWidget } from "../widgets/AsyncWidget";
 import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
 import { TimeWidget } from "../widgets/TimeWidget";
@@ -22,14 +22,17 @@ export function DevicesRoute(): React.ReactElement {
   const loadKey = React.useRef(1);
 
   const [list, setList] = React.useState<Device[] | undefined>();
+  const [states, setStates] = React.useState<DevicesState | undefined>();
 
   const load = async () => {
     setList(await DeviceApi.ValidatedList());
+    setStates(await DeviceApi.DevicesState());
   };
 
   const reload = () => {
     loadKey.current += 1;
     setList(undefined);
+    setStates(undefined);
   };
 
   return (
@@ -45,10 +48,16 @@ export function DevicesRoute(): React.ReactElement {
     >
       <AsyncWidget
         loadKey={loadKey.current}
-        ready={!!list}
+        ready={!!list && !!states}
         errMsg="Failed to load the list of validated devices!"
         load={load}
-        build={() => <ValidatedDevicesList onReload={reload} list={list!} />}
+        build={() => (
+          <ValidatedDevicesList
+            onReload={reload}
+            list={list!}
+            states={states!}
+          />
+        )}
       />
     </SolarEnergyRouteContainer>
   );
@@ -56,6 +65,7 @@ export function DevicesRoute(): React.ReactElement {
 
 function ValidatedDevicesList(p: {
   list: Device[];
+  states: DevicesState;
   onReload: () => void;
 }): React.ReactElement {
   const navigate = useNavigate();
@@ -75,6 +85,7 @@ function ValidatedDevicesList(p: {
             <TableCell>Max number of relays</TableCell>
             <TableCell>Created</TableCell>
             <TableCell>Updated</TableCell>
+            <TableCell>Status</TableCell>
             <TableCell></TableCell>
           </TableRow>
         </TableHead>
@@ -97,6 +108,15 @@ function ValidatedDevicesList(p: {
               <TableCell>
                 <TimeWidget time={dev.time_update} />
               </TableCell>
+              <TableCell align="center">
+                {p.states.get(dev.id)!.online ? (
+                  <strong>Online</strong>
+                ) : (
+                  <em>Offline</em>
+                )}
+                <br />
+                <TimeWidget diff time={p.states.get(dev.id)!.last_ping} />
+              </TableCell>
               <TableCell>
                 <Tooltip title="Open device page">
                   <Link to={DeviceURL(dev)}>