From 0596edb0a19b1a8fcf56f256235e20c46e43c9cc Mon Sep 17 00:00:00 2001 From: Charles Date: Thu, 24 Nov 2022 11:10:49 +0000 Subject: [PATCH] [WIFI-11730] Removed duplicate statistics API calls Signed-off-by: Charles --- package-lock.json | 4 +- package.json | 2 +- .../ControllerSocketProvider/useStore.ts | 2 +- src/hooks/Network/Statistics.ts | 51 ++++++------------- .../StatisticsCard/useStatisticsCard.ts | 13 +++-- src/pages/Device/WifiAnalysis/index.tsx | 11 ++-- 6 files changed, 32 insertions(+), 51 deletions(-) diff --git a/package-lock.json b/package-lock.json index a7833bc..a02afd8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ucentral-client", - "version": "2.8.0(20)", + "version": "2.8.0(22)", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "ucentral-client", - "version": "2.8.0(20)", + "version": "2.8.0(22)", "license": "ISC", "dependencies": { "@chakra-ui/icons": "^2.0.11", diff --git a/package.json b/package.json index 254f727..7134f32 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ucentral-client", - "version": "2.8.0(20)", + "version": "2.8.0(22)", "description": "", "private": true, "main": "index.tsx", diff --git a/src/contexts/ControllerSocketProvider/useStore.ts b/src/contexts/ControllerSocketProvider/useStore.ts index 3783dce..da3e58f 100644 --- a/src/contexts/ControllerSocketProvider/useStore.ts +++ b/src/contexts/ControllerSocketProvider/useStore.ts @@ -97,7 +97,7 @@ const handleConnectionNotification = (serialNumber: string, isConnected: boolean // Invalidate latest device stats const handleDeviceStatsNotification = (serialNumber: string, queryClient: QueryClient) => { - queryClient.invalidateQueries(['deviceStatistics', serialNumber, 'latestHour']); + queryClient.invalidateQueries(['deviceStatistics', serialNumber, 'newest']); }; // Set new global connection stats diff --git a/src/hooks/Network/Statistics.ts b/src/hooks/Network/Statistics.ts index d4a5920..bdcfcc6 100644 --- a/src/hooks/Network/Statistics.ts +++ b/src/hooks/Network/Statistics.ts @@ -1,5 +1,5 @@ /* eslint-disable import/prefer-default-export */ -import { useQuery } from '@tanstack/react-query'; +import { useQuery, useQueryClient } from '@tanstack/react-query'; import { axiosGw } from 'constants/axiosInstances'; import { AxiosError } from 'models/Axios'; @@ -151,7 +151,7 @@ export const useGetDeviceLastStats = ({ onError?: (e: AxiosError) => void; }) => useQuery(['device', serialNumber, 'last-statistics'], () => getLastStats(serialNumber), { - enabled: serialNumber !== undefined && serialNumber !== '', + enabled: serialNumber !== undefined && serialNumber !== '' && false, staleTime: 1000 * 60, onError, }); @@ -171,12 +171,24 @@ export const useGetDeviceNewestStats = ({ serialNumber?: string; limit: number; onError?: (e: AxiosError) => void; -}) => - useQuery(['deviceStatistics', serialNumber, 'newest', { limit }], getNewestStats(limit, serialNumber), { +}) => { + const queryClient = useQueryClient(); + + return useQuery(['deviceStatistics', serialNumber, 'newest', { limit }], getNewestStats(limit, serialNumber), { enabled: serialNumber !== undefined && serialNumber !== '', staleTime: 1000 * 60, + onSuccess: (response) => { + const entry = response.data[0]; + // If we have a valid entry, we prefill lastStats, if not we trigger a fetch of the last statistics + if (entry) { + queryClient.setQueryData(['device', serialNumber, 'last-statistics'], entry.data); + } else { + queryClient.fetchQuery(['device', serialNumber, 'last-statistics']); + } + }, onError, }); +}; const getOuis = (macs?: string[]) => async () => axiosGw.get(`/ouis?macList=${macs?.join(',')}`).then((response) => response.data) as Promise<{ @@ -250,34 +262,3 @@ export const useGetDeviceStatsWithTimestamps = ({ onError, }, ); -const getStart = () => { - const date = new Date(); - date.setHours(date.getHours() - 1); - return Math.floor(date.getTime() / 1000); -}; -const getLatestHour = (limit: number, serialNumber?: string) => async () => - axiosGw - .get( - `device/${serialNumber}/statistics?startDate=${getStart()}&endDate=${Math.floor( - new Date().getTime() / 1000, - )}&limit=${limit}`, - ) - .then((response) => response.data) as Promise<{ - data: { data: DeviceStatistics; UUID: string; recorded: number }[]; - }>; - -export const useGetDeviceStatsLatestHour = ({ - serialNumber, - limit, - onError, -}: { - serialNumber?: string; - limit: number; - onError?: (e: AxiosError) => void; -}) => - useQuery(['deviceStatistics', serialNumber, 'latestHour'], getLatestHour(limit, serialNumber), { - enabled: serialNumber !== undefined && serialNumber !== '', - staleTime: 1000 * 60, - keepPreviousData: true, - onError, - }); diff --git a/src/pages/Device/StatisticsCard/useStatisticsCard.ts b/src/pages/Device/StatisticsCard/useStatisticsCard.ts index bc1073d..4b27260 100644 --- a/src/pages/Device/StatisticsCard/useStatisticsCard.ts +++ b/src/pages/Device/StatisticsCard/useStatisticsCard.ts @@ -1,10 +1,6 @@ /* eslint-disable import/prefer-default-export */ import React from 'react'; -import { - DeviceStatistics, - useGetDeviceStatsLatestHour, - useGetDeviceStatsWithTimestamps, -} from 'hooks/Network/Statistics'; +import { DeviceStatistics, useGetDeviceNewestStats, useGetDeviceStatsWithTimestamps } from 'hooks/Network/Statistics'; const extractMemory = (stat: DeviceStatistics) => { let used: number | undefined; @@ -25,7 +21,7 @@ export const useStatisticsCard = ({ serialNumber }: Props) => { const onProgressChange = React.useCallback((newProgress: number) => { setProgress(newProgress); }, []); - const getStats = useGetDeviceStatsLatestHour({ serialNumber, limit: 100 }); + const getStats = useGetDeviceNewestStats({ serialNumber, limit: 100 }); const getCustomStats = useGetDeviceStatsWithTimestamps({ serialNumber, start: time ? Math.floor(time.start.getTime() / 1000) : undefined, @@ -52,7 +48,10 @@ export const useStatisticsCard = ({ serialNumber }: Props) => { const previousRx: { [key: string]: number } = {}; const previousTx: { [key: string]: number } = {}; - const dataToLoop = getCustomStats.data ?? getStats.data?.data; + let dataToLoop = getCustomStats.data ?? getStats.data?.data; + if (dataToLoop && !getCustomStats.data) { + dataToLoop = [...dataToLoop].reverse(); + } for (const [index, stat] of dataToLoop ? dataToLoop.entries() : []) { if (index === 0) { diff --git a/src/pages/Device/WifiAnalysis/index.tsx b/src/pages/Device/WifiAnalysis/index.tsx index 879ddc3..679f218 100644 --- a/src/pages/Device/WifiAnalysis/index.tsx +++ b/src/pages/Device/WifiAnalysis/index.tsx @@ -90,7 +90,7 @@ const parseAssociations = (data: { data: DeviceStatistics; recorded: number }, r const WifiAnalysisCard = ({ serialNumber }: Props) => { const { t } = useTranslation(); const [sliderIndex, setSliderIndex] = React.useState(0); - const getStats = useGetDeviceNewestStats({ serialNumber, limit: 20 }); + const getStats = useGetDeviceNewestStats({ serialNumber, limit: 100 }); const parsedData = React.useMemo(() => { if (!getStats.data) return undefined; @@ -104,6 +104,7 @@ const WifiAnalysisCard = ({ serialNumber }: Props) => { return data.reverse(); }, [getStats.data]); + const getOuis = useGetMacOuis({ macs: parsedData?.[sliderIndex]?.associations?.map((d) => d.station) }); const ouiKeyValue = React.useMemo(() => { if (!getOuis.data) return undefined; @@ -125,7 +126,7 @@ const WifiAnalysisCard = ({ serialNumber }: Props) => { }, [parsedData]); return ( - ( + @@ -149,9 +150,9 @@ const WifiAnalysisCard = ({ serialNumber }: Props) => { - {parsedData && parsedData[sliderIndex]?.associations[0]?.recorded !== undefined ? ( + {parsedData && parsedData[sliderIndex]?.radios[0]?.recorded !== undefined ? ( // @ts-ignore - () + ) : ( '-' )} @@ -161,7 +162,7 @@ const WifiAnalysisCard = ({ serialNumber }: Props) => { - ) + ); };