From ba318f45377182538b96ee325bb6a99c932e4e0d Mon Sep 17 00:00:00 2001 From: Charles Date: Tue, 5 Dec 2023 13:18:48 +0000 Subject: [PATCH] [WIFI-13203] Added new device tracking chart Signed-off-by: Charles --- .env | 2 +- package-lock.json | 4 +- package.json | 2 +- .../SimulatorSocketProvider/index.tsx | 35 +---------- .../SimulatorSocketProvider/useStore.ts | 63 ++++++++++--------- .../CurrentlyRunning/DevicesChart.tsx | 1 - .../SingleSimulationCurrentlyRunning.tsx | 3 +- .../StatusCard/CurrentlyRunning/TxRxChart.tsx | 1 - 8 files changed, 42 insertions(+), 69 deletions(-) diff --git a/.env b/.env index 1b24a26..dbd8145 100644 --- a/.env +++ b/.env @@ -1 +1 @@ -VITE_UCENTRALSEC_URL="https://openwifi-owls.wlan.local:16001" +VITE_UCENTRALSEC_URL="https://ucentral.dpaas.arilia.com:16001" diff --git a/package-lock.json b/package-lock.json index 9bb3072..5fb6c27 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ae89561..75c7557 100644 --- a/package.json +++ b/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", diff --git a/src/contexts/SimulatorSocketProvider/index.tsx b/src/contexts/SimulatorSocketProvider/index.tsx index 0a5b307..9594eb6 100644 --- a/src/contexts/SimulatorSocketProvider/index.tsx +++ b/src/contexts/SimulatorSocketProvider/index.tsx @@ -33,10 +33,9 @@ const SimulatorSocketContext = React.createContext 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 {children}; diff --git a/src/contexts/SimulatorSocketProvider/useStore.ts b/src/contexts/SimulatorSocketProvider/useStore.ts index f16a8b0..661f41a 100644 --- a/src/contexts/SimulatorSocketProvider/useStore.ts +++ b/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; }; @@ -128,38 +126,47 @@ export const useSimulatorStore = create((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: {}, })); diff --git a/src/pages/Simulations/StatusCard/CurrentlyRunning/DevicesChart.tsx b/src/pages/Simulations/StatusCard/CurrentlyRunning/DevicesChart.tsx index feb4c10..578a212 100644 --- a/src/pages/Simulations/StatusCard/CurrentlyRunning/DevicesChart.tsx +++ b/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(() => { diff --git a/src/pages/Simulations/StatusCard/CurrentlyRunning/SingleSimulationCurrentlyRunning.tsx b/src/pages/Simulations/StatusCard/CurrentlyRunning/SingleSimulationCurrentlyRunning.tsx index 10dc9ce..7e91671 100644 --- a/src/pages/Simulations/StatusCard/CurrentlyRunning/SingleSimulationCurrentlyRunning.tsx +++ b/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 = ({ {t('common.started')} - + diff --git a/src/pages/Simulations/StatusCard/CurrentlyRunning/TxRxChart.tsx b/src/pages/Simulations/StatusCard/CurrentlyRunning/TxRxChart.tsx index 78f9519..21b86c7 100644 --- a/src/pages/Simulations/StatusCard/CurrentlyRunning/TxRxChart.tsx +++ b/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(() => {