Compare commits

..

5 Commits

Author SHA1 Message Date
TIP Automation User
fa2b923111 Chg: update image tag in helm values to v3.0.2-RC1 2024-03-22 12:32:07 +00:00
jaspreetsachdev
9b56a5ea87 Merge pull request #217 from Telecominfraproject/WIFI-13542
Wifi 13542
2024-03-22 08:27:20 -04:00
Carsten Schafer
2ec6837dce Merge remote-tracking branch 'origin/main' into release/v3.0.0 2024-03-21 16:58:51 -04:00
TIP Automation User
9e3df09fb2 Chg: update image tag in helm values to v3.0.0 2023-12-29 15:19:32 +00:00
TIP Automation User
2445935627 Chg: update image tag in helm values to v3.0.0-RC1 2023-11-27 17:38:20 +00:00
23 changed files with 1321 additions and 1823 deletions

1
.env Normal file
View File

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

View File

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

View File

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

View File

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

21
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "ucentral-client", "name": "ucentral-client",
"version": "4.1.0", "version": "3.0.2(9)",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "ucentral-client", "name": "ucentral-client",
"version": "4.1.0", "version": "3.0.2(9)",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@chakra-ui/anatomy": "^2.1.1", "@chakra-ui/anatomy": "^2.1.1",
@@ -5671,9 +5671,8 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/ejs": { "node_modules/ejs": {
"version": "3.1.10", "version": "3.1.8",
"resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz", "license": "Apache-2.0",
"integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
"dependencies": { "dependencies": {
"jake": "^10.8.5" "jake": "^10.8.5"
}, },
@@ -6683,9 +6682,9 @@
} }
}, },
"node_modules/follow-redirects": { "node_modules/follow-redirects": {
"version": "1.15.6", "version": "1.15.4",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
"funding": [ "funding": [
{ {
"type": "individual", "type": "individual",
@@ -10443,9 +10442,9 @@
} }
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "4.5.3", "version": "4.5.2",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
"integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
"dependencies": { "dependencies": {
"esbuild": "^0.18.10", "esbuild": "^0.18.10",
"postcss": "^8.4.27", "postcss": "^8.4.27",

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 294 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 394 KiB

File diff suppressed because it is too large Load Diff

View File

@@ -32,7 +32,6 @@ interface Props {
onOpenTelemetryModal: (serialNumber: string) => void; onOpenTelemetryModal: (serialNumber: string) => void;
onOpenScriptModal: (device: GatewayDevice) => void; onOpenScriptModal: (device: GatewayDevice) => void;
onOpenRebootModal: (serialNumber: string) => void; onOpenRebootModal: (serialNumber: string) => void;
onOpenReEnrollModal?: (serialNumber: string) => void;
size?: 'sm' | 'md' | 'lg'; size?: 'sm' | 'md' | 'lg';
isCompact?: boolean; isCompact?: boolean;
} }
@@ -50,7 +49,6 @@ const DeviceActionDropdown = ({
onOpenConfigureModal, onOpenConfigureModal,
onOpenScriptModal, onOpenScriptModal,
onOpenRebootModal, onOpenRebootModal,
onOpenReEnrollModal,
size, size,
isCompact, isCompact,
}: Props) => { }: Props) => {
@@ -175,7 +173,7 @@ const DeviceActionDropdown = ({
isLoading={isRtty} isLoading={isRtty}
onClick={handleConnectClick} onClick={handleConnectClick}
colorScheme={connectColor} colorScheme={connectColor}
hidden={isCompact} hidden={isCompact || deviceType !== 'ap'}
/> />
</Tooltip> </Tooltip>
<Tooltip label={t('controller.configure.title')}> <Tooltip label={t('controller.configure.title')}>
@@ -236,11 +234,6 @@ const DeviceActionDropdown = ({
<MenuItem onClick={handleRebootClick} hidden={!isCompact}> <MenuItem onClick={handleRebootClick} hidden={!isCompact}>
{t('commands.reboot')} {t('commands.reboot')}
</MenuItem> </MenuItem>
{onOpenReEnrollModal && (
<MenuItem onClick={() => onOpenReEnrollModal(device.serialNumber)}>
{t('controller.devices.re_enroll')}
</MenuItem>
)}
<MenuItem onClick={handleOpenTelemetry}>{t('controller.telemetry.title')}</MenuItem> <MenuItem onClick={handleOpenTelemetry}>{t('controller.telemetry.title')}</MenuItem>
<MenuItem onClick={handleOpenScript}>{t('script.one')}</MenuItem> <MenuItem onClick={handleOpenScript}>{t('script.one')}</MenuItem>
<MenuItem onClick={handleOpenTrace}>{t('controller.devices.trace')}</MenuItem> <MenuItem onClick={handleOpenTrace}>{t('controller.devices.trace')}</MenuItem>

View File

@@ -1,257 +0,0 @@
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>
);
};

View File

@@ -1,50 +0,0 @@
import React from 'react';
import { Center, Spinner, Alert, Button } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { Modal } from '../Modal';
import { useReEnroll } from 'hooks/Network/ReEnroll';
import { ModalProps } from 'models/Modal';
interface Props {
modalProps: ModalProps;
serialNumber: string;
}
const ReEnrollModal = ({ modalProps: { isOpen, onClose }, serialNumber }: Props) => {
const { t } = useTranslation();
const { mutate: reEnroll, isLoading } = useReEnroll({ serialNumber });
const submit = () => {
reEnroll(
{ serialNumber, when: 0 },
{
onSuccess: () => {
onClose();
},
}
);
};
return (
<Modal isOpen={isOpen} onClose={onClose} title={t('controller.devices.re_enroll')}>
{isLoading ? (
<Center>
<Spinner size="lg" />
</Center>
) : (
<>
<Alert colorScheme="blue" mb={6}>
{t('controller.devices.re_enroll_warning', { serialNumber })}
</Alert>
<Center mb={6}>
<Button size="lg" colorScheme="blue" onClick={submit} fontWeight="bold">
{t('controller.devices.confirm_re_enroll', { serialNumber })}
</Button>
</Center>
</>
)}
</Modal>
);
};
export default ReEnrollModal;

View File

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

View File

@@ -166,7 +166,6 @@ export type DeviceStatus = {
connected: boolean; connected: boolean;
connectReason?: string; connectReason?: string;
certificateExpiryDate: number; certificateExpiryDate: number;
certificateIssuerName?: string;
connectionCompletionTime: number; connectionCompletionTime: number;
firmware: string; firmware: string;
ipAddress: string; ipAddress: string;
@@ -378,40 +377,6 @@ 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 }) => { export const useGetDeviceRtty = ({ serialNumber, extraId }: { serialNumber: string; extraId: string | number }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const toast = useToast(); const toast = useToast();

View File

@@ -1,78 +0,0 @@
import { useToast } from '@chakra-ui/react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { axiosGw } from 'constants/axiosInstances';
export type ReEnrollRequest = {
serialNumber: string;
when?: number;
};
export type ReEnrollResponse = {
UUID: string;
command: 're-enroll' | 'reenroll';
completed: number;
custom: number;
details: {
serial: string;
when: number;
};
errorCode: number;
errorText: string;
executed: number;
executionTime: number;
results: {
serial: string;
status: {
error: number;
resultCode: number;
resultText: string;
text: string;
};
};
serialNumber: string;
status: string;
submitted: number;
submittedBy: string;
when: number;
};
const reEnrollDevice = async ({ serialNumber, when = 0 }: ReEnrollRequest) =>
axiosGw.post<ReEnrollResponse>(`device/${serialNumber}/reenroll`, {
serial: serialNumber,
when,
});
export const useReEnroll = ({ serialNumber }: { serialNumber: string }) => {
const queryClient = useQueryClient();
const { t } = useTranslation();
const toast = useToast();
return useMutation(reEnrollDevice, {
onSuccess: () => {
queryClient.invalidateQueries(['commands', serialNumber]);
queryClient.invalidateQueries(['device', serialNumber]);
queryClient.invalidateQueries(['device-status', serialNumber]);
toast({
id: `re-enroll-success-${serialNumber}`,
title: t('common.success'),
description: t('controller.devices.re_enroll_initiated', { serialNumber }),
status: 'success',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
onError: (error: any) => {
toast({
id: `re-enroll-error-${serialNumber}`,
title: t('common.error'),
description: error?.response?.data?.ErrorDescription || t('common.error'),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
});
};

View File

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

View File

@@ -65,8 +65,6 @@ const DeviceSummary = ({ serialNumber }: Props) => {
const getDeviceCompatible = () => { const getDeviceCompatible = () => {
if (!getDevice.data?.compatible) return undefined; if (!getDevice.data?.compatible) return undefined;
if (getDevice.data.compatible.includes(' ')) return getDevice.data.compatible.replaceAll(' ', '_');
return getDevice.data?.compatible; return getDevice.data?.compatible;
}; };
@@ -171,12 +169,6 @@ const DeviceSummary = ({ serialNumber }: Props) => {
'-' '-'
)} )}
</GridItem> </GridItem>
<GridItem colSpan={1} alignContent="center" alignItems="center">
<Heading size="sm">{t('devices.certificate_issuer')}:</Heading>
</GridItem>
<GridItem colSpan={1}>
{getStatus.data?.certificateIssuerName ? getStatus.data.certificateIssuerName.split('CN=')[1] : '-'}
</GridItem>
<GridItem colSpan={1} alignContent="center" alignItems="center"> <GridItem colSpan={1} alignContent="center" alignItems="center">
<Heading size="sm">Connect Reason:</Heading> <Heading size="sm">Connect Reason:</Heading>
</GridItem> </GridItem>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -41,7 +41,6 @@ import { EventQueueModal } from 'components/Modals/EventQueueModal';
import FactoryResetModal from 'components/Modals/FactoryResetModal'; import FactoryResetModal from 'components/Modals/FactoryResetModal';
import { FirmwareUpgradeModal } from 'components/Modals/FirmwareUpgradeModal'; import { FirmwareUpgradeModal } from 'components/Modals/FirmwareUpgradeModal';
import { RebootModal } from 'components/Modals/RebootModal'; import { RebootModal } from 'components/Modals/RebootModal';
import ReEnrollModal from 'components/Modals/ReEnrollModal';
import { useScriptModal } from 'components/Modals/ScriptModal/useScriptModal'; import { useScriptModal } from 'components/Modals/ScriptModal/useScriptModal';
import ethernetConnected from './ethernetIconConnected.svg?react'; import ethernetConnected from './ethernetIconConnected.svg?react';
import ethernetDisconnected from './ethernetIconDisconnected.svg?react'; import ethernetDisconnected from './ethernetIconDisconnected.svg?react';
@@ -69,7 +68,6 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
const getHealth = useGetDeviceHealthChecks({ serialNumber, limit: 1 }); const getHealth = useGetDeviceHealthChecks({ serialNumber, limit: 1 });
const { isOpen: isDeleteOpen, onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure(); const { isOpen: isDeleteOpen, onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure();
const scanModalProps = useDisclosure(); const scanModalProps = useDisclosure();
const cableDiagnosticsModalProps = useDisclosure();
const resetModalProps = useDisclosure(); const resetModalProps = useDisclosure();
const eventQueueProps = useDisclosure(); const eventQueueProps = useDisclosure();
const configureModalProps = useDisclosure(); const configureModalProps = useDisclosure();
@@ -77,7 +75,6 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
const telemetryModalProps = useDisclosure(); const telemetryModalProps = useDisclosure();
const traceModalProps = useDisclosure(); const traceModalProps = useDisclosure();
const rebootModalProps = useDisclosure(); const rebootModalProps = useDisclosure();
const reEnrollModalProps = useDisclosure();
const scriptModal = useScriptModal(); const scriptModal = useScriptModal();
// Sticky-top styles // Sticky-top styles
const isCompact = breakpoint === 'base' || breakpoint === 'sm' || breakpoint === 'md'; const isCompact = breakpoint === 'base' || breakpoint === 'sm' || breakpoint === 'md';
@@ -218,7 +215,6 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
onOpenTelemetryModal={telemetryModalProps.onOpen} onOpenTelemetryModal={telemetryModalProps.onOpen}
onOpenScriptModal={scriptModal.openModal} onOpenScriptModal={scriptModal.openModal}
onOpenRebootModal={rebootModalProps.onOpen} onOpenRebootModal={rebootModalProps.onOpen}
onOpenReEnrollModal={reEnrollModalProps.onOpen}
size="md" size="md"
isCompact isCompact
/> />
@@ -271,7 +267,6 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
onOpenTelemetryModal={telemetryModalProps.onOpen} onOpenTelemetryModal={telemetryModalProps.onOpen}
onOpenRebootModal={rebootModalProps.onOpen} onOpenRebootModal={rebootModalProps.onOpen}
onOpenScriptModal={scriptModal.openModal} onOpenScriptModal={scriptModal.openModal}
onOpenReEnrollModal={reEnrollModalProps.onOpen}
size="md" size="md"
/> />
)} )}
@@ -315,7 +310,6 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
<ConfigureModal serialNumber={serialNumber} modalProps={configureModalProps} /> <ConfigureModal serialNumber={serialNumber} modalProps={configureModalProps} />
<TelemetryModal serialNumber={serialNumber} modalProps={telemetryModalProps} /> <TelemetryModal serialNumber={serialNumber} modalProps={telemetryModalProps} />
<RebootModal serialNumber={serialNumber} modalProps={rebootModalProps} /> <RebootModal serialNumber={serialNumber} modalProps={rebootModalProps} />
<ReEnrollModal serialNumber={serialNumber} modalProps={reEnrollModalProps} />
{scriptModal.modal} {scriptModal.modal}
<Box mt={isCompact ? '0px' : '68px'}> <Box mt={isCompact ? '0px' : '68px'}>
<Masonry <Masonry