Merge pull request #207 from stephb9959/main

[WIFI-13281] Add support for OLS
Telecominfraproject · Jan 11, 2024 · 863fda3 · 863fda3
2 parents e3f6ab4 + deb7715
commit 863fda3
Show file tree

Hide file tree

Showing 17 changed files with 902 additions and 49 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "3.0.0(6)",
+  "version": "3.0.1(2)",
   "description": "",
   "private": true,
   "main": "index.tsx",
@@ -94,6 +94,7 @@
     "lint-staged": "^13.2.1",
     "prettier": "^2.8.7",
     "vite-plugin-pwa": "^0.14.7",
+    "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.2.0"
   },
   "browserslist": {

diff --git a/public/devices/edgecore_ecs4125.png b/public/devices/edgecore_ecs4125.png
diff --git a/src/components/Buttons/DeviceActionDropdown/index.tsx b/src/components/Buttons/DeviceActionDropdown/index.tsx
@@ -54,6 +54,7 @@ const DeviceActionDropdown = ({
 }: Props) => {
   const { t } = useTranslation();
   const toast = useToast();
+  const deviceType = device?.deviceType ?? 'AP';
   const connectColor = useColorModeValue('blackAlpha', 'gray');
   const addEventListeners = useControllerStore((state) => state.addEventListeners);
   const { refetch: getRtty, isFetching: isRtty } = useGetDeviceRtty({
@@ -172,7 +173,7 @@ const DeviceActionDropdown = ({
           isLoading={isRtty}
           onClick={handleConnectClick}
           colorScheme={connectColor}
-          hidden={isCompact}
+          hidden={isCompact || deviceType !== 'AP'}
         />
       </Tooltip>
       <Tooltip label={t('controller.configure.title')}>
@@ -205,7 +206,7 @@ const DeviceActionDropdown = ({
           isDisabled={isDisabled}
           onClick={handleOpenScan}
           colorScheme="teal"
-          hidden={isCompact}
+          hidden={isCompact || deviceType !== 'AP'}
         />
       </Tooltip>
       <Menu>
@@ -221,7 +222,7 @@ const DeviceActionDropdown = ({
         <Portal>
           <MenuList maxH="315px" overflowY="auto">
             <MenuItem onClick={handleBlinkClick}>{t('commands.blink')}</MenuItem>
-            <MenuItem onClick={handleOpenConfigure} hidden={!isCompact}>
+            <MenuItem onClick={handleOpenConfigure} hidden={!isCompact || deviceType !== 'AP'}>
               {t('controller.configure.title')}
             </MenuItem>
             <MenuItem onClick={handleConnectClick} hidden={!isCompact}>
@@ -239,7 +240,7 @@ const DeviceActionDropdown = ({
             <MenuItem onClick={handleUpdateToLatest} hidden>
               {t('premium.toolbox.upgrade_to_latest')}
             </MenuItem>
-            <MenuItem onClick={handleOpenScan} hidden={!isCompact}>
+            <MenuItem onClick={handleOpenScan} hidden={!isCompact || deviceType !== 'AP'}>
               {t('commands.wifiscan')}
             </MenuItem>
           </MenuList>

diff --git a/src/components/Containers/ResponsiveTag/index.tsx b/src/components/Containers/ResponsiveTag/index.tsx
@@ -26,7 +26,7 @@ export const ResponsiveTag = React.memo(({ label, icon, tooltip, isCompact, ...p
   return (
     <Tooltip label={tooltip ?? label}>
       <Tag size="lg" colorScheme="blue" {...props}>
-        <TagLeftIcon boxSize="18px" as={icon} />
+        <TagLeftIcon boxSize="18px" as={icon} mt={-0.5} />
         <TagLabel>{label}</TagLabel>
       </Tag>
     </Tooltip>

diff --git a/src/custom.d.ts b/src/custom.d.ts
@@ -8,3 +8,4 @@ declare module '*.png' {
   const value: string;
   export = value;
 }
+/// <reference types="vite-plugin-svgr/client" />
diff --git a/src/hooks/Network/Devices.ts b/src/hooks/Network/Devices.ts
@@ -10,14 +10,19 @@ import { DeviceRttyApiResponse, GatewayDevice, WifiScanCommand, WifiScanResult }
 import { Note } from 'models/Note';
 import { PageInfo } from 'models/Table';
 
-const getDeviceCount = () =>
-  axiosGw.get('devices?countOnly=true').then((response) => response.data) as Promise<{ count: number }>;
+export const DEVICE_PLATFORMS = ['ALL', 'AP', 'SWITCH'] as const;
+export type DevicePlatform = (typeof DEVICE_PLATFORMS)[number];
 
-export const useGetDeviceCount = ({ enabled }: { enabled: boolean }) => {
+const getDeviceCount = (platform: DevicePlatform) =>
+  axiosGw.get(`devices?countOnly=true&platform=${platform}`).then((response) => response.data) as Promise<{
+    count: number;
+  }>;
+
+export const useGetDeviceCount = ({ enabled, platform = 'ALL' }: { enabled: boolean; platform?: DevicePlatform }) => {
   const { t } = useTranslation();
   const toast = useToast();
 
-  return useQuery(['devices', 'count'], getDeviceCount, {
+  return useQuery(['devices', 'count', { platform }], () => getDeviceCount(platform), {
     enabled,
     onError: (e: AxiosError) => {
       if (!toast.isActive('inventory-fetching-error'))
@@ -96,25 +101,27 @@ export const getSingleDeviceWithStatus = (serialNumber: string) =>
     })
     .catch(() => undefined);
 
-const getDevices = (limit: number, offset: number) =>
+const getDevices = (limit: number, offset: number, platform: DevicePlatform) =>
   axiosGw
-    .get(`devices?deviceWithStatus=true&limit=${limit}&offset=${offset}`)
+    .get(`devices?deviceWithStatus=true&limit=${limit}&offset=${offset}&platform=${platform}`)
     .then((response) => response.data) as Promise<{ devicesWithStatus: DeviceWithStatus[] }>;
 
 export const useGetDevices = ({
   pageInfo,
   enabled,
   onError,
+  platform = 'ALL',
 }: {
   pageInfo?: PageInfo;
   enabled: boolean;
   onError?: (e: AxiosError) => void;
+  platform?: DevicePlatform;
 }) => {
   const offset = pageInfo?.limit !== undefined ? pageInfo.limit * pageInfo.index : 0;
 
   return useQuery(
-    ['devices', 'all', { limit: pageInfo?.limit, offset }],
-    () => getDevices(pageInfo?.limit || 0, offset),
+    ['devices', 'all', { limit: pageInfo?.limit, offset, platform }],
+    () => getDevices(pageInfo?.limit || 0, offset, platform),
     {
       keepPreviousData: true,
       enabled: enabled && pageInfo !== undefined,
@@ -124,22 +131,28 @@ export const useGetDevices = ({
   );
 };
 
-const getAllDevices = async () => {
+const getAllDevices = async (platform: DevicePlatform) => {
   let offset = 0;
   let devices: DeviceWithStatus[] = [];
   let devicesResponse: { devicesWithStatus: DeviceWithStatus[] };
   do {
     // eslint-disable-next-line no-await-in-loop
-    devicesResponse = await getDevices(500, offset);
+    devicesResponse = await getDevices(500, offset, platform);
     devices = devices.concat(devicesResponse.devicesWithStatus);
     offset += 500;
   } while (devicesResponse.devicesWithStatus.length === 500);
   return devices;
 };
 
-export const useGetAllDevicesWithStatus = ({ onError }: { onError?: (e: AxiosError) => void }) => {
+export const useGetAllDevicesWithStatus = ({
+  onError,
+  platform = 'ALL',
+}: {
+  onError?: (e: AxiosError) => void;
+  platform?: DevicePlatform;
+}) => {
   const { isReady } = useEndpointStatus('owgw');
-  return useQuery(['devices', 'all', 'full'], getAllDevices, {
+  return useQuery(['devices', 'all', 'full', { platform }], () => getAllDevices(platform), {
     enabled: isReady && false,
     onError,
   });
@@ -432,3 +445,19 @@ export const useUpdateDevice = ({ serialNumber }: { serialNumber: string }) => {
     },
   });
 };
+
+const deleteDeviceBatch = async (pattern: string) => {
+  if (pattern.length < 6) throw new Error('Pattern must be at least 6 characters long');
+
+  axiosGw.delete(`devices?macPattern=${pattern}`);
+};
+
+export const useDeleteDeviceBatch = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation(deleteDeviceBatch, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['devices']);
+    },
+  });
+};
diff --git a/src/hooks/Network/Statistics.ts b/src/hooks/Network/Statistics.ts
@@ -2,7 +2,24 @@ import { useQuery } from '@tanstack/react-query';
 import { axiosGw } from 'constants/axiosInstances';
 import { AxiosError } from 'models/Axios';
 
-type DeviceInterfaceStatistics = {
+export type DeviceLinkState = {
+  carrier?: number;
+  counters?: {
+    collisions: number;
+    multicast: number;
+    rx_bytes: number;
+    rx_dropped: number;
+    rx_errors: number;
+    rx_packets: number;
+    tx_bytes: number;
+    tx_dropped: number;
+    tx_errors: number;
+    tx_packets: number;
+  };
+  duplex?: string;
+  speed?: number;
+};
+export type DeviceInterfaceStatistics = {
   clients: {
     ipv4_addresses?: string[];
     ipv6_addresses?: string[];
@@ -138,18 +155,10 @@ export type DeviceStatistics = {
   };
   'link-state'?: {
     downstream: {
-      eth1?: {
-        carrier?: number;
-        duplex?: string;
-        speed?: number;
-      };
+      [key: string]: DeviceLinkState;
     };
     upstream: {
-      eth0?: {
-        carrier?: number;
-        duplex?: string;
-        speed?: number;
-      };
+      [key: string]: DeviceLinkState;
     };
   };
   'lldp-peers'?: {
@@ -190,6 +199,7 @@ export const useGetDeviceLastStats = ({
   useQuery(['device', serialNumber, 'last-statistics'], () => getLastStats(serialNumber), {
     enabled: serialNumber !== undefined && serialNumber !== '',
     staleTime: 1000 * 60,
+    refetchInterval: 1000 * 60,
     onError,
   });