[WIFI-13203] Added new device tracking chart

Signed-off-by: Charles <charles.bourque96@gmail.com>

.env

@@ -1 +1 @@
-VITE_UCENTRALSEC_URL="https://openwifi-owls.wlan.local:16001"
+VITE_UCENTRALSEC_URL="https://ucentral.dpaas.arilia.com:16001"

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "owls-ui",
-  "version": "3.0.0(6)",
+  "version": "3.0.0(7)",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "owls-ui",
-      "version": "3.0.0(6)",
+      "version": "3.0.0(7)",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@chakra-ui/icons": "^2.0.18",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "owls-ui",
-  "version": "3.0.0(6)",
+  "version": "3.0.0(7)",
   "description": "",
   "private": true,
   "main": "index.tsx",

src/contexts/SimulatorSocketProvider/index.tsx

@@ -33,10 +33,9 @@ const SimulatorSocketContext = React.createContext<SimulatorSocketContextReturn>
 
 export const SimulatorSocketProvider = ({ children }: { children: React.ReactElement }) => {
   const { token, isUserLoaded } = useAuth();
-  const { addMessage, isOpen, setIsOpen, webSocket, onStartWebSocket } = useSimulatorStore((state) => ({
+  const { addMessage, webSocket, onStartWebSocket } = useSimulatorStore((state) => ({
     addMessage: state.addMessage,
-    setIsOpen: state.setWebSocketOpen,
-    isOpen: state.isWebSocketOpen,
+    isOpen: state.webSocket?.readyState === WebSocket.OPEN,
     webSocket: state.webSocket,
     onStartWebSocket: state.startWebSocket,
   }));
@@ -64,9 +63,6 @@ export const SimulatorSocketProvider = ({ children }: { children: React.ReactEle
     if (isUserLoaded && axiosOwls?.defaults?.baseURL !== axiosSec?.defaults?.baseURL) {
       onStartWebSocket(token ?? '');
     }
-
-    const wsCurrent = webSocket;
-    return () => wsCurrent?.close();
   }, [isUserLoaded]);
 
   // useEffect for generating global notifications
@@ -80,33 +76,6 @@ export const SimulatorSocketProvider = ({ children }: { children: React.ReactEle
     };
   }, [webSocket]);
 
-  useEffect(() => {
-    const handleVisibilityChange = () => {
-      let timeoutId;
-
-      if (webSocket) {
-        if (document.visibilityState === 'hidden') {
-          timeoutId = setTimeout(() => {
-            if (webSocket) webSocket.onclose = () => {};
-            webSocket?.close();
-            setIsOpen(false);
-          }, 5000);
-        } else {
-          clearTimeout(timeoutId);
-
-          if (!isOpen && isUserLoaded && axiosOwls?.defaults?.baseURL !== axiosSec?.defaults?.baseURL) {
-            onStartWebSocket(token ?? '');
-          }
-        }
-      }
-    };
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-
-    return () => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
-    };
-  }, [webSocket, isOpen]);
-
   const values: SimulatorSocketContextReturn = useMemo(() => ({}), []);
 
   return <SimulatorSocketContext.Provider value={values}>{children}</SimulatorSocketContext.Provider>;

src/contexts/SimulatorSocketProvider/useStore.ts

@@ -1,3 +1,4 @@
+import ReconnectingWebSocket from 'reconnecting-websocket';
 import create from 'zustand';
 import { SocketEventCallback, WebSocketNotification } from './utils';
 import { axiosOwls } from 'constants/axiosInstances';
@@ -32,12 +33,9 @@ export type SimulatorStoreState = {
   addMessage: (message: WebSocketNotification) => void;
   eventListeners: SocketEventCallback[];
   addEventListeners: (callback: SocketEventCallback[]) => void;
-  webSocket?: WebSocket;
-  websocketTimer: NodeJS.Timeout | null;
+  webSocket?: ReconnectingWebSocket;
   send: (str: string) => void;
   startWebSocket: (token: string, tries?: number) => void;
-  isWebSocketOpen: boolean;
-  setWebSocketOpen: (isOpen: boolean) => void;
   currentSimulationsData: Record<string, SimulationOperationStatus[]>;
 };
 
@@ -128,38 +126,47 @@ export const useSimulatorStore = create<SimulatorStoreState>((set, get) => ({
   eventListeners: [] as SocketEventCallback[],
   addEventListeners: (events: SocketEventCallback[]) =>
     set((state) => ({ eventListeners: [...state.eventListeners, ...events] })),
-  isWebSocketOpen: false,
-  setWebSocketOpen: (isOpen: boolean) => set({ isWebSocketOpen: isOpen }),
   send: (str: string) => {
     const ws = get().webSocket;
     if (ws) ws.send(str);
   },
-  websocketTimer: null,
   startWebSocket: (token: string) => {
-    set({
-      webSocket: new WebSocket(
-        `${
-          axiosOwls?.defaults?.baseURL ? axiosOwls.defaults.baseURL.replace('https', 'wss').replace('http', 'ws') : ''
-        }/ws`,
-      ),
-    });
     const ws = get().webSocket;
+
     if (ws) {
-      ws.onopen = () => {
-        const timer = get().websocketTimer;
-        if (timer) clearTimeout(timer);
-        set({ isWebSocketOpen: true, websocketTimer: null });
-        ws.send(`token:${token}`);
-      };
-      ws.onclose = () => {
-        const timer = get().websocketTimer;
-        if (timer) clearTimeout(timer);
-        set({
-          isWebSocketOpen: false,
-          websocketTimer: setInterval(() => get().startWebSocket(token), 60 * 1000),
-        });
-      };
+      // Close the previous websocket connection and remove it
+      ws.close();
+      set({ webSocket: undefined });
     }
+
+    const newWs = new ReconnectingWebSocket(
+      `${
+        axiosOwls?.defaults?.baseURL ? axiosOwls.defaults.baseURL.replace('https', 'wss').replace('http', 'ws') : ''
+      }/ws`,
+      undefined,
+      {
+        startClosed: true,
+      },
+    );
+    newWs.removeEventListener('open', (e) => {
+      e.target?.send(`token:${token}`);
+    });
+    newWs.addEventListener('open', (e) => {
+      e.target?.send(`token:${token}`);
+    });
+    newWs.reconnect();
+
+    set({
+      webSocket: newWs,
+    });
+
+    // Add global event listener, on window focus, call startWebSocket
+    window.removeEventListener('focus', () => {
+      get().startWebSocket(token);
+    });
+    window.addEventListener('focus', () => {
+      get().startWebSocket(token);
+    });
   },
   currentSimulationsData: {},
 }));

src/pages/Simulations/StatusCard/CurrentlyRunning/DevicesChart.tsx

@@ -30,7 +30,6 @@ const DevicesChart = ({ statusId }: Props) => {
   const { colorMode } = useColorMode();
   const currentSimulationData = useSimulatorStore(
     React.useCallback((state) => state.currentSimulationsData[statusId] ?? [], [statusId]),
-    (oldState, newState) => oldState?.length === newState?.length,
   );
 
   const data = React.useMemo(() => {

src/pages/Simulations/StatusCard/CurrentlyRunning/SingleSimulationCurrentlyRunning.tsx

@@ -28,7 +28,6 @@ const SingleSimulationCurrentlyRunning = ({
   const { t } = useTranslation();
   const currentStatus = useSimulatorStore(
     React.useCallback((state) => state.currentSimulationsData[status.id] ?? [], [status.id]),
-    (oldState, newState) => oldState?.length === newState?.length,
   );
   const latestStatus = currentStatus?.[currentStatus.length - 1]?.rawData ?? status;
 
@@ -55,7 +54,7 @@ const SingleSimulationCurrentlyRunning = ({
               <Heading size="sm" my="auto">
                 {t('common.started')}
               </Heading>
-              <FormattedDate key={currentStatus.length} date={latestStatus.startTime} />
+              <FormattedDate key={JSON.stringify(status)} date={latestStatus.startTime} />
             </Box>
             <Box>
               <Heading size="sm" my="auto">

src/pages/Simulations/StatusCard/CurrentlyRunning/TxRxChart.tsx

@@ -42,7 +42,6 @@ const TxRxChart = ({ statusId }: Props) => {
   const { colorMode } = useColorMode();
   const currentSimulationData = useSimulatorStore(
     React.useCallback((state) => state.currentSimulationsData[statusId] ?? [], [statusId]),
-    (oldState, newState) => oldState?.length === newState?.length,
   );
 
   const { data, unit } = React.useMemo(() => {