Chg: update image tag in helm values to v4.0.0

WIFI-14521: fix: Version update - release 4.0.0

.env

@@ -1 +0,0 @@
-VITE_UCENTRALSEC_URL="https://ucentral.dpaas.arilia.com:16001"

.github/workflows/ci.yml

@@ -20,7 +20,7 @@ defaults:
 
 jobs:
   docker:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     env:
       DOCKER_REGISTRY_URL: tip-tip-wlan-cloud-ucentral.jfrog.io
       DOCKER_REGISTRY_USERNAME: ucentral

.github/workflows/release.yml

@@ -11,7 +11,7 @@ defaults:
 
 jobs:
   helm-package:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     env:
       HELM_REPO_URL: https://tip.jfrog.io/artifactory/tip-wlan-cloud-ucentral-helm/
       HELM_REPO_USERNAME: ucentral

helm/values.yaml

@@ -8,7 +8,7 @@ fullnameOverride: ""
 images:
   owgwui:
     repository: tip-tip-wlan-cloud-ucentral.jfrog.io/owgw-ui
-    tag: v3.0.2-RC1
+    tag: v4.0.0
     pullPolicy: Always
 
 services:

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "3.0.2(9)",
+  "version": "3.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "3.0.2(9)",
+      "version": "3.2.0",
       "license": "ISC",
       "dependencies": {
         "@chakra-ui/anatomy": "^2.1.1",
@@ -3540,7 +3540,7 @@
     },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -3548,7 +3548,7 @@
     },
     "node_modules/@jridgewell/set-array": {
       "version": "1.1.2",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -3556,7 +3556,7 @@
     },
     "node_modules/@jridgewell/source-map": {
       "version": "0.3.2",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.0",
@@ -3565,7 +3565,7 @@
     },
     "node_modules/@jridgewell/source-map/node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.2",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
@@ -3578,12 +3578,12 @@
     },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.14",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.17",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "3.1.0",
@@ -4374,7 +4374,7 @@
       "version": "18.15.11",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.11.tgz",
       "integrity": "sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -4419,7 +4419,7 @@
       "version": "18.0.11",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.11.tgz",
       "integrity": "sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -4753,7 +4753,7 @@
     },
     "node_modules/acorn": {
       "version": "8.8.0",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -5174,7 +5174,7 @@
     },
     "node_modules/buffer-from": {
       "version": "1.1.2",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/builtin-modules": {
@@ -5671,8 +5671,9 @@
       "license": "MIT"
     },
     "node_modules/ejs": {
-      "version": "3.1.8",
-      "license": "Apache-2.0",
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
       "dependencies": {
         "jake": "^10.8.5"
       },
@@ -6682,9 +6683,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.4",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
-      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -9780,7 +9781,7 @@
     },
     "node_modules/source-map-support": {
       "version": "0.5.21",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
@@ -9789,7 +9790,7 @@
     },
     "node_modules/source-map-support/node_modules/source-map": {
       "version": "0.6.1",
-      "devOptional": true,
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -10079,7 +10080,7 @@
     },
     "node_modules/terser": {
       "version": "5.15.1",
-      "devOptional": true,
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.2",
@@ -10096,7 +10097,7 @@
     },
     "node_modules/terser/node_modules/commander": {
       "version": "2.20.3",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/text-table": {
@@ -10442,9 +10443,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
-      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
+      "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
       "dependencies": {
         "esbuild": "^0.18.10",
         "postcss": "^8.4.27",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "3.0.2(9)",
+  "version": "4.0.0",
   "description": "",
   "private": true,
   "main": "index.tsx",

src/components/Buttons/DeviceActionDropdown/index.tsx

@@ -173,7 +173,7 @@ const DeviceActionDropdown = ({
           isLoading={isRtty}
           onClick={handleConnectClick}
           colorScheme={connectColor}
-          hidden={isCompact || deviceType !== 'ap'}
+          hidden={isCompact}
         />
       </Tooltip>
       <Tooltip label={t('controller.configure.title')}>

src/components/Modals/CableDiagnosticsModal/index.tsx

@@ -0,0 +1,257 @@
+import React from 'react';
+import {
+  Modal,
+  Text,
+  ModalOverlay,
+  ModalContent,
+  ModalBody,
+  Center,
+  Spinner,
+  Checkbox,
+  Stack,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+} from '@chakra-ui/react';
+import { PlugsConnected } from '@phosphor-icons/react';
+import { useTranslation } from 'react-i18next';
+import { CloseButton } from 'components/Buttons/CloseButton';
+import { ResponsiveButton } from 'components/Buttons/ResponsiveButton';
+import { ModalHeader } from 'components/Containers/Modal/ModalHeader';
+import { useCableDiagnostics } from 'hooks/Network/Devices';
+import { ModalProps } from 'models/Modal';
+import Button from 'theme/components/button';
+import { DataGridColumn, useDataGrid } from 'components/DataTables/DataGrid/useDataGrid';
+import { DataGrid } from 'components/DataTables/DataGrid';
+
+export type CableDiagnosticsModalProps = {
+  modalProps: ModalProps;
+  serialNumber: string;
+  port: string;
+};
+
+type DiagnosticsRow = {
+  port: string;
+  linkStatus: string;
+  pairA: string;
+  pairB: string;
+  pairC: string;
+  pairD: string;
+  type: string;
+};
+
+type OpticalRow = {
+  port: string;
+  vendorName: string;
+  formFactor: string;
+  partNumber: string;
+  serialNumber: string;
+  temperature: string;
+  txPower: string;
+  rxPower: string;
+  revision: string;
+};
+
+export const CableDiagnosticsModal = ({
+  modalProps: { isOpen, onClose },
+  serialNumber,
+  port,
+}: CableDiagnosticsModalProps) => {
+  const { t } = useTranslation();
+  const [selectedPorts, setSelectedPorts] = React.useState<string[]>([]);
+  const [diagnosticsResult, setDiagnosticsResult] = React.useState<any>(null);
+  const { mutateAsync: diagnose, isLoading } = useCableDiagnostics({ serialNumber });
+
+  const handlePortToggle = (port: string) => {
+    setSelectedPorts((prev) => (prev.includes(port) ? prev.filter((p) => p !== port) : [...prev, port]));
+  };
+
+  const handleDiagnose = async () => {
+    if (port) {
+      try {
+        const result = await diagnose([port]);
+        setDiagnosticsResult(result);
+      } catch (error) {
+        console.error('Error diagnosing cable:', error);
+      }
+    }
+  };
+
+  const tableController = useDataGrid({
+    tableSettingsId: 'cable.diagnostics.table',
+    defaultOrder: ['port', 'linkStatus', 'pairA', 'pairB', 'pairC', 'pairD', 'type'],
+    showAllRows: true,
+  });
+
+  const columns: DataGridColumn<DiagnosticsRow | OpticalRow>[] = React.useMemo(() => {
+    const data = diagnosticsResult?.results?.status?.text?.[port];
+    const isOpticalData = data && 'form-factor' in data;
+
+    return isOpticalData
+      ? [
+          {
+            id: 'vendorName',
+            header: 'Vendor Name',
+            accessorKey: 'vendorName',
+          },
+          {
+            id: 'formFactor',
+            header: 'Form Factor',
+            accessorKey: 'formFactor',
+          },
+          {
+            id: 'partNumber',
+            header: 'Part Number',
+            accessorKey: 'partNumber',
+          },
+          {
+            id: 'serialNumber',
+            header: 'Serial Number',
+            accessorKey: 'serialNumber',
+          },
+          {
+            id: 'temperature',
+            header: 'Temperature',
+            accessorKey: 'temperature',
+          },
+          {
+            id: 'txPower',
+            header: 'TX Power',
+            accessorKey: 'txPower',
+          },
+          {
+            id: 'rxPower',
+            header: 'RX Power',
+            accessorKey: 'rxPower',
+          },
+          {
+            id: 'revision',
+            header: 'Revision',
+            accessorKey: 'revision',
+          },
+        ]
+      : [
+          {
+            id: 'port',
+            header: 'Port',
+            accessorKey: 'port',
+          },
+          {
+            id: 'linkStatus',
+            header: 'Link Status',
+            accessorKey: 'linkStatus',
+          },
+          {
+            id: 'pairA',
+            header: 'Pair A',
+            accessorKey: 'pairA',
+          },
+          {
+            id: 'pairB',
+            header: 'Pair B',
+            accessorKey: 'pairB',
+          },
+          {
+            id: 'pairC',
+            header: 'Pair C',
+            accessorKey: 'pairC',
+          },
+          {
+            id: 'pairD',
+            header: 'Pair D',
+            accessorKey: 'pairD',
+          },
+          {
+            id: 'type',
+            header: 'Type',
+            accessorKey: 'type',
+          },
+        ];
+  }, [diagnosticsResult]);
+
+  const formatDiagnosticsData = (result: any): (DiagnosticsRow | OpticalRow)[] => {
+    if (!result?.results?.status?.text?.[port]) return [];
+
+    const data = result.results.status.text[port];
+
+    if (data['form-factor']) {
+      return [
+        {
+          port,
+          vendorName: data['vendor-name'] || 'N/A',
+          formFactor: data['form-factor'] || 'N/A',
+          partNumber: data['part-number'] || 'N/A',
+          serialNumber: data['serial-number'] || 'N/A',
+          temperature: data.temperature ? `${data.temperature.toFixed(2)}` : 'N/A',
+          txPower: data['tx-optical-power'] ? `${data['tx-optical-power']}` : 'N/A',
+          rxPower: data['rx-optical-power'] ? `${data['rx-optical-power']}` : 'N/A',
+          revision: data.revision || 'N/A',
+        },
+      ];
+    }
+
+    return [
+      {
+        port,
+        linkStatus: data['link-status'],
+        pairA: `${data['pair-A'].meters} (${data['pair-A'].status})`,
+        pairB: `${data['pair-B'].meters} (${data['pair-B'].status})`,
+        pairC: `${data['pair-C'].meters} (${data['pair-C'].status})`,
+        pairD: `${data['pair-D'].meters} (${data['pair-D'].status})`,
+        type: data.type,
+      },
+    ];
+  };
+
+  return (
+    <Modal onClose={onClose} isOpen={isOpen} size="xl">
+      <ModalOverlay />
+      <ModalContent maxW="50vw">
+        <ModalHeader title={t('commands.cable_diagnostics')} right={<CloseButton onClick={onClose} />} />
+        <ModalBody pb={6}>
+          {isLoading ? (
+            <Center my={4} flexDirection="column" gap={4}>
+              <Spinner size="lg" />
+              <Text>Please wait...</Text>
+              <Text fontSize="sm" color="gray.500">
+                Please do not close this window. This may take a few seconds.
+              </Text>
+            </Center>
+          ) : (
+            <Center flexDirection="column" gap={4}>
+              <ResponsiveButton
+                color="blue"
+                icon={<PlugsConnected size={20} />}
+                label={`${
+                  diagnosticsResult && formatDiagnosticsData(diagnosticsResult).length > 0 ? 'Retake' : 'Start'
+                } Test for Port ${port}`}
+                onClick={handleDiagnose}
+                isLoading={isLoading}
+                isDisabled={!port}
+                isCompact={false}
+              />
+              {diagnosticsResult && formatDiagnosticsData(diagnosticsResult).length > 0 && (
+                <DataGrid<DiagnosticsRow | OpticalRow>
+                  controller={tableController}
+                  header={{
+                    title: '',
+                    objectListed: 'Cable Diagnostics',
+                  }}
+                  columns={columns}
+                  isLoading={isLoading}
+                  data={formatDiagnosticsData(diagnosticsResult)}
+                  options={{
+                    isHidingControls: true,
+                  }}
+                />
+              )}
+            </Center>
+          )}
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};

src/components/Modals/TelemetryModal/index.tsx

@@ -25,6 +25,7 @@ import { useTranslation } from 'react-i18next';
 import { Modal } from '../Modal';
 import { lowercaseFirstLetter } from 'helpers/stringHelper';
 import { useTelemetry } from 'hooks/Network/Telemetry';
+import { secondsDuration } from 'helpers/dateFormatting';
 
 export type TelemetryModalProps = {
   serialNumber: string;
@@ -146,8 +147,7 @@ const _TelemetryModal = ({ serialNumber, modalProps }: TelemetryModalProps) => {
               {t('controller.telemetry.interval')}: {form.interval} {lowercaseFirstLetter(t('common.seconds'))}
             </p>
             <p>
-              {t('controller.telemetry.duration')}: {form.interval}{' '}
-              {lowercaseFirstLetter(t('controller.telemetry.minutes'))}
+              {t('controller.telemetry.duration')}: {secondsDuration(form.lifetime, t)}
             </p>
             <p>
               {t('controller.telemetry.types')}: {form.types.join(', ')}

src/hooks/Network/Devices.ts

@@ -377,6 +377,40 @@ export const useWifiScanDevice = ({ serialNumber }: { serialNumber: string }) =>
   );
 };
 
+export const useCableDiagnostics = ({ serialNumber }: { serialNumber: string }) => {
+  const toast = useToast();
+  const { t } = useTranslation();
+
+  return useMutation(
+    (ports: string[]): Promise<unknown> =>
+      axiosGw
+        .post(`device/${serialNumber}/cable-diagnostics`, {
+          serial: serialNumber,
+          ports,
+          when: 0,
+        })
+        .then(({ data }) => data),
+    {
+      onSuccess: (data) => {
+        console.log('Success data: ', data);
+      },
+      onError: (e: AxiosError) => {
+        toast({
+          id: uuid(),
+          title: t('common.error'),
+          description: t('commands.cablediagnostics_error', {
+            e: e?.response?.data?.ErrorDescription,
+          }),
+          status: 'error',
+          duration: 5000,
+          isClosable: true,
+          position: 'top-right',
+        });
+      },
+    },
+  );
+};
+
 export const useGetDeviceRtty = ({ serialNumber, extraId }: { serialNumber: string; extraId: string | number }) => {
   const { t } = useTranslation();
   const toast = useToast();

src/hooks/Network/Statistics.ts

@@ -59,6 +59,7 @@ export type DeviceInterfaceStatistics = {
       dynamic_vlan?: number;
       inactive: number;
       ipaddr_v4: string;
+      fingerprint?: object;
       rssi: number;
       rx_bytes: number;
       rx_duration: number;

src/pages/Device/Summary.tsx

@@ -65,6 +65,8 @@ const DeviceSummary = ({ serialNumber }: Props) => {
   const getDeviceCompatible = () => {
     if (!getDevice.data?.compatible) return undefined;
 
+    if (getDevice.data.compatible.includes(' ')) return getDevice.data.compatible.replaceAll(' ', '_');
+
     return getDevice.data?.compatible;
   };
 

src/pages/Device/SwitchPortExamination/Actions.tsx

@@ -1,17 +1,19 @@
 import * as React from 'react';
 import { IconButton, Tooltip, useToast } from '@chakra-ui/react';
-import { Power } from '@phosphor-icons/react';
+import { Power, PlugsConnected } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { usePowerCycle } from 'hooks/Network/Devices';
 import { useNotification } from 'hooks/useNotification';
 import { DeviceLinkState } from 'hooks/Network/Statistics';
+import { CableDiagnosticsModalProps } from 'components/Modals/CableDiagnosticsModal';
 
 type Props = {
   state: DeviceLinkState & { name: string };
   deviceSerialNumber: string;
+  onOpenCableDiagnostics: (port: string) => void;
 };
 
-const LinkStateTableActions = ({ state, deviceSerialNumber }: Props) => {
+const LinkStateTableActions = ({ state, deviceSerialNumber, onOpenCableDiagnostics }: Props) => {
   const { t } = useTranslation();
   const powerCycle = usePowerCycle();
   const toast = useToast();
@@ -54,16 +56,27 @@ const LinkStateTableActions = ({ state, deviceSerialNumber }: Props) => {
   };
 
   return (
-    <Tooltip label="Power Cycle" placement="auto-start">
-      <IconButton
-        aria-label="Power Cycle"
-        icon={<Power size={20} />}
-        colorScheme="green"
-        onClick={onPowerCycle}
-        isLoading={powerCycle.isLoading}
-        size="xs"
-      />
-    </Tooltip>
+    <>
+      <Tooltip label="Power Cycle" placement="auto-start">
+        <IconButton
+          aria-label="Power Cycle"
+          icon={<Power size={20} />}
+          colorScheme="green"
+          onClick={onPowerCycle}
+          isLoading={powerCycle.isLoading}
+          size="xs"
+        />
+      </Tooltip>
+      <Tooltip label="Cable Diagnostics" placement="auto-start">
+        <IconButton
+          aria-label="Cable Diagnostics"
+          icon={<PlugsConnected size={20} />}
+          colorScheme="blue"
+          onClick={() => onOpenCableDiagnostics(state.name)}
+          size="xs"
+        />
+      </Tooltip>
+    </>
   );
 };
 

src/pages/Device/SwitchPortExamination/LinkStateTable.tsx

@@ -9,8 +9,12 @@ import LinkStateTableActions from './Actions';
 
 type Row = DeviceLinkState & { name: string };
 const dataCell = (v: number) => <DataCell bytes={v} />;
-const actionCell = (row: Row, serialNumber: string) => (
-  <LinkStateTableActions state={row} deviceSerialNumber={serialNumber} />
+const actionCell = (row: Row, serialNumber: string, onOpenCableDiagnostics: (port: string) => void) => (
+  <LinkStateTableActions
+    state={row}
+    deviceSerialNumber={serialNumber}
+    onOpenCableDiagnostics={onOpenCableDiagnostics}
+  />
 );
 
 type Props = {
@@ -19,9 +23,10 @@ type Props = {
   isFetching: boolean;
   type: 'upstream' | 'downstream';
   serialNumber: string;
+  onOpenCableDiagnostics: (port: string) => void;
 };
 
-const LinkStateTable = ({ statistics, refetch, isFetching, type, serialNumber }: Props) => {
+const LinkStateTable = ({ statistics, refetch, isFetching, type, serialNumber, onOpenCableDiagnostics }: Props) => {
   const tableController = useDataGrid({
     tableSettingsId: 'switch.link-state.table',
     defaultOrder: [
@@ -157,10 +162,16 @@ const LinkStateTable = ({ statistics, refetch, isFetching, type, serialNumber }:
         id: 'actions',
         header: '',
         accessorKey: '',
-        cell: ({ cell }) => actionCell(cell.row.original, serialNumber),
+        cell: ({ cell }) => (
+          <LinkStateTableActions
+            state={cell.row.original}
+            deviceSerialNumber={serialNumber}
+            onOpenCableDiagnostics={onOpenCableDiagnostics}
+          />
+        ),
       },
     ],
-    [],
+    [onOpenCableDiagnostics],
   );
 
   if (!statistics || statistics?.length === 0) {

src/pages/Device/SwitchPortExamination/index.tsx

@@ -5,6 +5,8 @@ import SwitchInterfaceTable from './SwitchInterfaceTable';
 import { DeviceLinkState, useGetDeviceLastStats } from 'hooks/Network/Statistics';
 import { Card } from 'components/Containers/Card';
 import { CardBody } from 'components/Containers/Card/CardBody';
+import { CableDiagnosticsModal } from 'components/Modals/CableDiagnosticsModal';
+import { useDisclosure } from '@chakra-ui/react';
 
 type Props = {
   serialNumber: string;
@@ -12,6 +14,8 @@ type Props = {
 
 const SwitchPortExamination = ({ serialNumber }: Props) => {
   const [tabIndex, setTabIndex] = React.useState(0);
+  const [selectedPort, setSelectedPort] = React.useState<string>('');
+  const cableDiagnosticsModalProps = useDisclosure();
 
   const handleTabsChange = React.useCallback((index: number) => {
     setTabIndex(index);
@@ -35,63 +39,73 @@ const SwitchPortExamination = ({ serialNumber }: Props) => {
     }));
   }, [getStats.data]);
 
+  const handleOpenCableDiagnostics = React.useCallback((port: string) => {
+    setSelectedPort(port);
+    cableDiagnosticsModalProps.onOpen();
+  }, []);
+
   return (
-    <Card p={0} mb={4}>
-      <CardBody p={0} display="block">
-        <Tabs index={tabIndex} onChange={handleTabsChange} variant="enclosed" w="100%">
-          <TabList>
-            <Tab fontSize="lg" fontWeight="bold">
-              Interfaces
-            </Tab>
-            <Tab fontSize="lg" fontWeight="bold">
-              Link-State (Up)
-            </Tab>
-            <Tab fontSize="lg" fontWeight="bold">
-              Link-State (Down)
-            </Tab>
-          </TabList>
-          <TabPanels>
-            <TabPanel>
-              {getStats.data ? (
-                <SwitchInterfaceTable
-                  statistics={getStats.data}
-                  refetch={getStats.refetch}
-                  isFetching={getStats.isFetching}
-                />
-              ) : (
-                <Spinner size="xl" />
-              )}
-            </TabPanel>
-            <TabPanel>
-              {getStats.data ? (
-                <LinkStateTable
-                  statistics={upLinkStates}
-                  refetch={getStats.refetch}
-                  isFetching={getStats.isFetching}
-                  type="upstream"
-                  serialNumber={serialNumber}
-                />
-              ) : (
-                <Spinner size="xl" />
-              )}
-            </TabPanel>
-            <TabPanel>
-              {getStats.data ? (
-                <LinkStateTable
-                  statistics={downLinkStates}
-                  refetch={getStats.refetch}
-                  isFetching={getStats.isFetching}
-                  type="downstream"
-                  serialNumber={serialNumber}
-                />
-              ) : (
-                <Spinner size="xl" />
-              )}
-            </TabPanel>
-          </TabPanels>
-        </Tabs>
-      </CardBody>
-    </Card>
+    <>
+      <Card p={0} mb={4}>
+        <CardBody p={0} display="block">
+          <Tabs index={tabIndex} onChange={handleTabsChange} variant="enclosed" w="100%">
+            <TabList>
+              <Tab fontSize="lg" fontWeight="bold">
+                Interfaces
+              </Tab>
+              <Tab fontSize="lg" fontWeight="bold">
+                Link-State (Up)
+              </Tab>
+              <Tab fontSize="lg" fontWeight="bold">
+                Link-State (Down)
+              </Tab>
+            </TabList>
+            <TabPanels>
+              <TabPanel>
+                {getStats.data ? (
+                  <SwitchInterfaceTable
+                    statistics={getStats.data}
+                    refetch={getStats.refetch}
+                    isFetching={getStats.isFetching}
+                  />
+                ) : (
+                  <Spinner size="xl" />
+                )}
+              </TabPanel>
+              <TabPanel>
+                {getStats.data ? (
+                  <LinkStateTable
+                    statistics={upLinkStates}
+                    refetch={getStats.refetch}
+                    isFetching={getStats.isFetching}
+                    type="upstream"
+                    serialNumber={serialNumber}
+                    onOpenCableDiagnostics={handleOpenCableDiagnostics}
+                  />
+                ) : (
+                  <Spinner size="xl" />
+                )}
+              </TabPanel>
+              <TabPanel>
+                {getStats.data ? (
+                  <LinkStateTable
+                    statistics={downLinkStates}
+                    refetch={getStats.refetch}
+                    isFetching={getStats.isFetching}
+                    type="downstream"
+                    serialNumber={serialNumber}
+                    onOpenCableDiagnostics={handleOpenCableDiagnostics}
+                  />
+                ) : (
+                  <Spinner size="xl" />
+                )}
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </CardBody>
+      </Card>
+      <CableDiagnosticsModal modalProps={cableDiagnosticsModalProps} serialNumber={serialNumber} port={selectedPort} />
+    </>
   );
 };
 

src/pages/Device/WifiAnalysis/AssocationsTable.tsx

@@ -28,6 +28,7 @@ export type ParsedAssociation = {
   txNss: number | string;
   recorded: number;
   dynamicVlan?: number;
+  fingerprint?: object;
 };
 
 type Props = {
@@ -77,6 +78,14 @@ const WifiAnalysisAssociationsTable = ({ data, ouis, isSingle }: Props) => {
         isMonospace: true,
         alwaysShow: true,
       },
+      {
+        id: 'ssid',
+        Header: 'SSID',
+        Footer: '',
+        accessor: 'ssid',
+        customWidth: '35px',
+        alwaysShow: true,
+      },
       {
         id: 'ips',
         Header: 'IPs',
@@ -84,6 +93,13 @@ const WifiAnalysisAssociationsTable = ({ data, ouis, isSingle }: Props) => {
         Cell: (v) => ipCell(v.cell.row.original),
         disableSortBy: true,
       },
+      {
+        id: 'fingerprint',
+        Header: 'Fingerprint',
+        Footer: '',
+        Cell: (v) => Object.values(v.cell.row.original.fingerprint ?? {}).join(', '),
+        disableSortBy: true,
+      },
       {
         id: 'vendor',
         Header: t('controller.wifi.vendor'),

src/pages/Device/WifiAnalysis/index.tsx

@@ -105,6 +105,7 @@ const parseAssociations = (data: { data: DeviceStatistics; recorded: number }, r
           txNss: association.tx_rate.nss ?? '-',
           recorded: data.recorded,
           dynamicVlan: association.dynamic_vlan,
+          fingerprint: association.fingerprint,
         });
       }
     }

src/pages/Device/Wrapper.tsx

@@ -68,6 +68,7 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
   const getHealth = useGetDeviceHealthChecks({ serialNumber, limit: 1 });
   const { isOpen: isDeleteOpen, onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure();
   const scanModalProps = useDisclosure();
+  const cableDiagnosticsModalProps = useDisclosure();
   const resetModalProps = useDisclosure();
   const eventQueueProps = useDisclosure();
   const configureModalProps = useDisclosure();