DA-199: Worker details page now updates every second

frontend/src/pages/Workers/WorkerDetail.jsx

@@ -44,13 +44,14 @@ export default function WorkerDetail() {
 
     // Polling on websocket
     useEffect(() => {
-        // Keep workers that aren't same as incoming response and less than 10 seconds old
-        let keep = data.filter((a) => a.WorkerID !== socketResponse.WorkerID && new Date().valueOf() - new Date(a.T).valueOf() < 10000);
-
-        socketResponse.T && setData([...keep, socketResponse].sort(sortObjectByName));
+        let arr = [];
+        for (let i in socketResponse) {
+            arr.push(socketResponse[i]);
+        }
+        setData(arr);
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [socketResponse.T]);
+    }, [socketResponse]);
 
     const columns = useMemo(
         () => [
@@ -116,15 +117,15 @@ export default function WorkerDetail() {
                     <Grid>
                         <Grid item display="flex" alignItems="center" flexDirection="row">
                             <Typography component="div" variant="body1" sx={{ fontSize: '1.0625rem' }}>
-                                Worker group: {socketResponse?.WorkerGroup}
+                                Worker group: {data[0]?.WorkerGroup}
                             </Typography>
 
                             <Box display="flex" ml={4} alignItems="center">
                                 <Typography variant="subtitle1" fontWeight={'bold'} mr={1}>
                                     Worker type:
                                 </Typography>
                                 <Typography variant="subtitle1" style={{ display: 'inline' }}>
-                                    {socketResponse.WorkerType}
+                                    {data[0]?.WorkerType}
                                 </Typography>
                             </Box>
 
@@ -133,7 +134,7 @@ export default function WorkerDetail() {
                                     Load balancer:
                                 </Typography>
                                 <Typography variant="subtitle1" align="left" sx={{ lineHeight: 1, marginLeft: 1 }}>
-                                    {balancerDict[socketResponse.LB]}
+                                    {balancerDict[data[0]?.LB]}
                                 </Typography>
                             </Box>
                         </Grid>

frontend/src/pages/Workers/useWebSocket.jsx

@@ -11,22 +11,22 @@ if (loc.protocol === 'https:') {
 }
 new_uri += '//' + loc.host;
 
-// console.log("websockets loc:", new_uri)
-if (process.env.REACT_APP_DATAPLANE_ENV == 'build') {
+if (process.env.REACT_APP_DATAPLANE_ENV === 'build') {
     new_uri += process.env.REACT_APP_WEBSOCKET_ENDPOINT;
 } else {
     new_uri = process.env.REACT_APP_WEBSOCKET_ENDPOINT;
 }
 
-// console.log("websockets loc2:", new_uri)
-
 const websocketEndpoint = new_uri;
 
 export default function useWebSocket(workerId) {
-    const [socketResponse, setSocketResponse] = useState([]);
     const reconnectOnClose = useRef(true);
     const ws = useRef(null);
 
+    const [, triggerRender] = useState(1);
+    const response = useRef(null);
+    const time = useRef(new Date().valueOf());
+
     const { authToken } = useGlobalAuthState();
 
     useEffect(() => {
@@ -48,7 +48,18 @@ export default function useWebSocket(workerId) {
             };
 
             ws.current.onmessage = (e) => {
-                setSocketResponse(JSON.parse(e.data));
+                const resp = JSON.parse(e.data);
+
+                // Store messages in ref to not trigger a render
+                if (resp.WorkerGroup === workerId) {
+                    response.current = { ...response.current, [resp.WorkerID]: resp };
+                }
+
+                // Trigger a render every second
+                if (new Date().valueOf() - time.current > 1000) {
+                    triggerRender((a) => a * -1);
+                    time.current = new Date().valueOf();
+                }
             };
         }
 
@@ -60,10 +71,5 @@ export default function useWebSocket(workerId) {
         };
     }, [workerId]);
 
-    // Make sure socket response is matching the worked id requested.
-    if (socketResponse.WorkerGroup === workerId) {
-        return socketResponse;
-    } else {
-        return [];
-    }
+    return response.current;
 }