[WIFI-11730] Removed duplicate statistics API calls

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

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",

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",

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

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,
-  });

src/pages/Device/StatisticsCard/useStatisticsCard.ts

@@ -1,10 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 import React from 'react';
-import {
+import { DeviceStatistics, useGetDeviceNewestStats, useGetDeviceStatsWithTimestamps } from 'hooks/Network/Statistics';
-  DeviceStatistics,
-  useGetDeviceStatsLatestHour,
-  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) {

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 (
-    (<Card mb={4}>
+    <Card mb={4}>
       <CardHeader>
         <Flex w="100%">
           <Heading size="md" w="180px">
@@ -149,9 +150,9 @@ const WifiAnalysisCard = ({ serialNumber }: Props) => {
       </CardHeader>
       <CardBody display="block">
         <Box>
-          {parsedData && parsedData[sliderIndex]?.associations[0]?.recorded !== undefined ? (
+          {parsedData && parsedData[sliderIndex]?.radios[0]?.recorded !== undefined ? (
             // @ts-ignore
-            (<FormattedDate date={parsedData[sliderIndex]?.associations[0]?.recorded} />)
+            <FormattedDate date={parsedData[sliderIndex]?.radios[0]?.recorded} />
           ) : (
             '-'
           )}
@@ -161,7 +162,7 @@ const WifiAnalysisCard = ({ serialNumber }: Props) => {
           <WifiAnalysisAssocationsTable data={parsedData?.[sliderIndex]?.associations} ouis={ouiKeyValue} />
         </Box>
       </CardBody>
-    </Card>)
+    </Card>
   );
 };