Merge pull request #189 from stephb9959/main

[WIFI-12614] Dynamic VLAN support fix

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "2.10.0(44)",
+  "version": "2.10.0(45)",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "2.10.0(44)",
+      "version": "2.10.0(45)",
       "license": "ISC",
       "dependencies": {
         "@chakra-ui/icons": "^2.0.18",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.10.0(44)",
+  "version": "2.10.0(45)",
   "description": "",
   "private": true,
   "main": "index.tsx",

src/pages/Device/LogsCard/LogHistory/DetailedLogViewModal.tsx

@@ -18,11 +18,26 @@ const DetailedLogViewModal = ({ modalProps, log }: Props) => {
   const { hasCopied, onCopy, setValue } = useClipboard(JSON.stringify(log?.log ?? {}, null, 2));
 
   React.useEffect(() => {
-    setValue(JSON.stringify(log?.log ?? {}, null, 2));
+    if (log?.logType === 2) {
+      setValue(JSON.stringify(log.data ?? {}, null, 2));
+    } else {
+      setValue(JSON.stringify(log?.log ?? {}, null, 2));
+    }
   }, [log]);
 
   if (!log) return null;
 
+  const getCodeContent = () => {
+    if (log.logType === 2) {
+      if (log.data.info !== undefined && Array.isArray(log.data.info)) {
+        return log.data.info.map((v) => v).join('\n');
+      }
+      return JSON.stringify(log.data, null, 2);
+    }
+
+    return log.log;
+  };
+
   return (
     <Modal
       isOpen={modalProps.isOpen}
@@ -45,7 +60,7 @@ const DetailedLogViewModal = ({ modalProps, log }: Props) => {
           {t('controller.devices.config_id')}: {log.UUID}
         </Heading>
         <Code whiteSpace="pre-line" mt={2}>
-          {log.log}
+          {getCodeContent()}
         </Code>
       </Box>
     </Modal>

src/pages/Device/LogsCard/LogHistory/useDeviceLogsTable.tsx

@@ -53,6 +53,28 @@ const useDeviceLogsTable = ({ serialNumber, limit, logType }: Props) => {
     [onOpen],
   );
 
+  const detailsCell = React.useCallback((v: DeviceLog) => {
+    if (logType === 2) {
+      return (
+        <Box display="flex">
+          <IconButton
+            aria-label="Open Log Details"
+            onClick={() => onOpen(v)}
+            colorScheme="blue"
+            icon={<MagnifyingGlass size={16} />}
+            size="xs"
+            mr={2}
+          />
+          <Text my="auto" textOverflow="ellipsis" overflow="hidden" whiteSpace="nowrap">
+            {JSON.stringify(v.data, null, 0)}
+          </Text>
+        </Box>
+      );
+    }
+
+    return <pre>{JSON.stringify(v.data, null, 0)}</pre>;
+  }, []);
+
   const dateCell = React.useCallback(
     (v: number) => (
       <Box>
@@ -62,8 +84,6 @@ const useDeviceLogsTable = ({ serialNumber, limit, logType }: Props) => {
     [],
   );
 
-  const jsonCell = React.useCallback((v: Record<string, unknown>) => <pre>{JSON.stringify(v, null, 0)}</pre>, []);
-
   const columns: Column<DeviceLog>[] = React.useMemo(
     (): Column<DeviceLog>[] => [
       {
@@ -106,7 +126,7 @@ const useDeviceLogsTable = ({ serialNumber, limit, logType }: Props) => {
         Header: t('common.details'),
         Footer: '',
         accessor: 'data',
-        Cell: (v) => jsonCell(v.cell.row.original.data),
+        Cell: (v) => detailsCell(v.cell.row.original),
         disableSortBy: true,
       },
     ],
@@ -114,7 +134,19 @@ const useDeviceLogsTable = ({ serialNumber, limit, logType }: Props) => {
   );
 
   return {
-    columns,
+    columns:
+      logType === 2
+        ? columns
+            .filter((c) => c.id !== 'severity')
+            .map((col) =>
+              col.id === 'log'
+                ? {
+                    ...col,
+                    Header: 'Type',
+                  }
+                : col,
+            )
+        : columns,
     getLogs,
     getCustomLogs,
     time,

src/pages/Device/StatisticsCard/InterfaceChart.tsx

@@ -117,11 +117,25 @@ const InterfaceChart = ({ data, format }: Props) => {
     ],
   };
 
+  const dataTick = (value: string | number) => {
+    try {
+      const temp = String(value);
+
+      if (temp.includes('.')) {
+        return Number(temp).toFixed(1);
+      }
+
+      return temp;
+    } catch (e) {
+      return value;
+    }
+  };
+
   const packetsTick = (value: number) => {
     if (packetsFactor.factor === 1) {
       return value.toLocaleString();
     }
-    return `${(value / packetsFactor.factor).toLocaleString()}${packetsFactor.unit}`;
+    return `${(value / packetsFactor.factor).toFixed(1).toLocaleString()}${packetsFactor.unit}`;
   };
 
   return (
@@ -168,7 +182,7 @@ const InterfaceChart = ({ data, format }: Props) => {
               color: colorMode === 'dark' ? 'white' : undefined,
               callback:
                 format === 'bytes'
-                  ? (tickValue) => `${tickValue} ${unit}`
+                  ? (tickValue) => `${dataTick(tickValue)} ${unit}`
                   : (tickValue) => (typeof tickValue === 'number' ? packetsTick(tickValue) : tickValue),
             },
           },

src/pages/Device/StatisticsCard/VlanChart.tsx

@@ -117,6 +117,20 @@ const VlanChart = ({ data, format }: Props) => {
     ],
   };
 
+  const dataTick = (value: string | number) => {
+    try {
+      const temp = String(value);
+
+      if (temp.includes('.')) {
+        return Number(temp).toFixed(1);
+      }
+
+      return temp;
+    } catch (e) {
+      return value;
+    }
+  };
+
   const packetsTick = (value: number) => {
     if (packetsFactor.factor === 1) {
       return value.toLocaleString();
@@ -168,7 +182,7 @@ const VlanChart = ({ data, format }: Props) => {
               color: colorMode === 'dark' ? 'white' : undefined,
               callback:
                 format === 'bytes'
-                  ? (tickValue) => `${tickValue} ${unit}`
+                  ? (tickValue) => `${dataTick(tickValue)} ${unit}`
                   : (tickValue) => (typeof tickValue === 'number' ? packetsTick(tickValue) : tickValue),
             },
           },