mirror of
				https://github.com/Telecominfraproject/wlan-cloud-ucentralgw-ui.git
				synced 2025-10-31 02:38:01 +00:00 
			
		
		
		
	Compare commits
	
		
			2 Commits
		
	
	
		
			v3.2.1-RC2
			...
			v3.1.0
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
|   | f23abf0f4a | ||
|   | eccff13fb2 | 
							
								
								
									
										1
									
								
								.env
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										1
									
								
								.env
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1 @@ | ||||
| VITE_UCENTRALSEC_URL="https://ucentral.dpaas.arilia.com:16001" | ||||
| @@ -8,7 +8,7 @@ fullnameOverride: "" | ||||
| images: | ||||
|   owgwui: | ||||
|     repository: tip-tip-wlan-cloud-ucentral.jfrog.io/owgw-ui | ||||
|     tag: v3.2.1-RC2 | ||||
|     tag: v3.1.0 | ||||
|     pullPolicy: Always | ||||
|  | ||||
| services: | ||||
|   | ||||
							
								
								
									
										32
									
								
								package-lock.json
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										32
									
								
								package-lock.json
									
									
									
										generated
									
									
									
								
							| @@ -1,12 +1,12 @@ | ||||
| { | ||||
|   "name": "ucentral-client", | ||||
|   "version": "3.2.0", | ||||
|   "version": "3.1.0(5)", | ||||
|   "lockfileVersion": 3, | ||||
|   "requires": true, | ||||
|   "packages": { | ||||
|     "": { | ||||
|       "name": "ucentral-client", | ||||
|       "version": "3.2.0", | ||||
|       "version": "3.1.0(5)", | ||||
|       "license": "ISC", | ||||
|       "dependencies": { | ||||
|         "@chakra-ui/anatomy": "^2.1.1", | ||||
| @@ -3540,7 +3540,7 @@ | ||||
|     }, | ||||
|     "node_modules/@jridgewell/resolve-uri": { | ||||
|       "version": "3.1.0", | ||||
|       "dev": true, | ||||
|       "devOptional": true, | ||||
|       "license": "MIT", | ||||
|       "engines": { | ||||
|         "node": ">=6.0.0" | ||||
| @@ -3548,7 +3548,7 @@ | ||||
|     }, | ||||
|     "node_modules/@jridgewell/set-array": { | ||||
|       "version": "1.1.2", | ||||
|       "dev": true, | ||||
|       "devOptional": true, | ||||
|       "license": "MIT", | ||||
|       "engines": { | ||||
|         "node": ">=6.0.0" | ||||
| @@ -3556,7 +3556,7 @@ | ||||
|     }, | ||||
|     "node_modules/@jridgewell/source-map": { | ||||
|       "version": "0.3.2", | ||||
|       "dev": true, | ||||
|       "devOptional": 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", | ||||
|       "dev": true, | ||||
|       "devOptional": true, | ||||
|       "license": "MIT", | ||||
|       "dependencies": { | ||||
|         "@jridgewell/set-array": "^1.0.1", | ||||
| @@ -3578,12 +3578,12 @@ | ||||
|     }, | ||||
|     "node_modules/@jridgewell/sourcemap-codec": { | ||||
|       "version": "1.4.14", | ||||
|       "dev": true, | ||||
|       "devOptional": true, | ||||
|       "license": "MIT" | ||||
|     }, | ||||
|     "node_modules/@jridgewell/trace-mapping": { | ||||
|       "version": "0.3.17", | ||||
|       "dev": true, | ||||
|       "devOptional": 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==", | ||||
|       "dev": true | ||||
|       "devOptional": 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==", | ||||
|       "dev": true, | ||||
|       "devOptional": true, | ||||
|       "dependencies": { | ||||
|         "@types/react": "*" | ||||
|       } | ||||
| @@ -4753,7 +4753,7 @@ | ||||
|     }, | ||||
|     "node_modules/acorn": { | ||||
|       "version": "8.8.0", | ||||
|       "dev": true, | ||||
|       "devOptional": true, | ||||
|       "license": "MIT", | ||||
|       "bin": { | ||||
|         "acorn": "bin/acorn" | ||||
| @@ -5174,7 +5174,7 @@ | ||||
|     }, | ||||
|     "node_modules/buffer-from": { | ||||
|       "version": "1.1.2", | ||||
|       "dev": true, | ||||
|       "devOptional": true, | ||||
|       "license": "MIT" | ||||
|     }, | ||||
|     "node_modules/builtin-modules": { | ||||
| @@ -9781,7 +9781,7 @@ | ||||
|     }, | ||||
|     "node_modules/source-map-support": { | ||||
|       "version": "0.5.21", | ||||
|       "dev": true, | ||||
|       "devOptional": true, | ||||
|       "license": "MIT", | ||||
|       "dependencies": { | ||||
|         "buffer-from": "^1.0.0", | ||||
| @@ -9790,7 +9790,7 @@ | ||||
|     }, | ||||
|     "node_modules/source-map-support/node_modules/source-map": { | ||||
|       "version": "0.6.1", | ||||
|       "dev": true, | ||||
|       "devOptional": true, | ||||
|       "license": "BSD-3-Clause", | ||||
|       "engines": { | ||||
|         "node": ">=0.10.0" | ||||
| @@ -10080,7 +10080,7 @@ | ||||
|     }, | ||||
|     "node_modules/terser": { | ||||
|       "version": "5.15.1", | ||||
|       "dev": true, | ||||
|       "devOptional": true, | ||||
|       "license": "BSD-2-Clause", | ||||
|       "dependencies": { | ||||
|         "@jridgewell/source-map": "^0.3.2", | ||||
| @@ -10097,7 +10097,7 @@ | ||||
|     }, | ||||
|     "node_modules/terser/node_modules/commander": { | ||||
|       "version": "2.20.3", | ||||
|       "dev": true, | ||||
|       "devOptional": true, | ||||
|       "license": "MIT" | ||||
|     }, | ||||
|     "node_modules/text-table": { | ||||
|   | ||||
| @@ -1,6 +1,6 @@ | ||||
| { | ||||
|   "name": "ucentral-client", | ||||
|   "version": "3.2.1", | ||||
|   "version": "3.1.0(5)", | ||||
|   "description": "", | ||||
|   "private": true, | ||||
|   "main": "index.tsx", | ||||
|   | ||||
| @@ -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> | ||||
|   ); | ||||
| }; | ||||
| @@ -377,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 }) => { | ||||
|   const { t } = useTranslation(); | ||||
|   const toast = useToast(); | ||||
|   | ||||
| @@ -1,19 +1,17 @@ | ||||
| import * as React from '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 { 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, onOpenCableDiagnostics }: Props) => { | ||||
| const LinkStateTableActions = ({ state, deviceSerialNumber }: Props) => { | ||||
|   const { t } = useTranslation(); | ||||
|   const powerCycle = usePowerCycle(); | ||||
|   const toast = useToast(); | ||||
| @@ -56,7 +54,6 @@ const LinkStateTableActions = ({ state, deviceSerialNumber, onOpenCableDiagnosti | ||||
|   }; | ||||
|  | ||||
|   return ( | ||||
|     <> | ||||
|     <Tooltip label="Power Cycle" placement="auto-start"> | ||||
|       <IconButton | ||||
|         aria-label="Power Cycle" | ||||
| @@ -67,16 +64,6 @@ const LinkStateTableActions = ({ state, deviceSerialNumber, onOpenCableDiagnosti | ||||
|         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> | ||||
|     </> | ||||
|   ); | ||||
| }; | ||||
|  | ||||
|   | ||||
| @@ -9,12 +9,8 @@ import LinkStateTableActions from './Actions'; | ||||
|  | ||||
| type Row = DeviceLinkState & { name: string }; | ||||
| const dataCell = (v: number) => <DataCell bytes={v} />; | ||||
| const actionCell = (row: Row, serialNumber: string, onOpenCableDiagnostics: (port: string) => void) => ( | ||||
|   <LinkStateTableActions | ||||
|     state={row} | ||||
|     deviceSerialNumber={serialNumber} | ||||
|     onOpenCableDiagnostics={onOpenCableDiagnostics} | ||||
|   /> | ||||
| const actionCell = (row: Row, serialNumber: string) => ( | ||||
|   <LinkStateTableActions state={row} deviceSerialNumber={serialNumber} /> | ||||
| ); | ||||
|  | ||||
| type Props = { | ||||
| @@ -23,10 +19,9 @@ type Props = { | ||||
|   isFetching: boolean; | ||||
|   type: 'upstream' | 'downstream'; | ||||
|   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({ | ||||
|     tableSettingsId: 'switch.link-state.table', | ||||
|     defaultOrder: [ | ||||
| @@ -162,16 +157,10 @@ const LinkStateTable = ({ statistics, refetch, isFetching, type, serialNumber, o | ||||
|         id: 'actions', | ||||
|         header: '', | ||||
|         accessorKey: '', | ||||
|         cell: ({ cell }) => ( | ||||
|           <LinkStateTableActions | ||||
|             state={cell.row.original} | ||||
|             deviceSerialNumber={serialNumber} | ||||
|             onOpenCableDiagnostics={onOpenCableDiagnostics} | ||||
|           /> | ||||
|         ), | ||||
|         cell: ({ cell }) => actionCell(cell.row.original, serialNumber), | ||||
|       }, | ||||
|     ], | ||||
|     [onOpenCableDiagnostics], | ||||
|     [], | ||||
|   ); | ||||
|  | ||||
|   if (!statistics || statistics?.length === 0) { | ||||
|   | ||||
| @@ -5,8 +5,6 @@ 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; | ||||
| @@ -14,8 +12,6 @@ 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); | ||||
| @@ -39,13 +35,7 @@ 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%"> | ||||
| @@ -80,7 +70,6 @@ const SwitchPortExamination = ({ serialNumber }: Props) => { | ||||
|                   isFetching={getStats.isFetching} | ||||
|                   type="upstream" | ||||
|                   serialNumber={serialNumber} | ||||
|                     onOpenCableDiagnostics={handleOpenCableDiagnostics} | ||||
|                 /> | ||||
|               ) : ( | ||||
|                 <Spinner size="xl" /> | ||||
| @@ -94,7 +83,6 @@ const SwitchPortExamination = ({ serialNumber }: Props) => { | ||||
|                   isFetching={getStats.isFetching} | ||||
|                   type="downstream" | ||||
|                   serialNumber={serialNumber} | ||||
|                     onOpenCableDiagnostics={handleOpenCableDiagnostics} | ||||
|                 /> | ||||
|               ) : ( | ||||
|                 <Spinner size="xl" /> | ||||
| @@ -104,8 +92,6 @@ const SwitchPortExamination = ({ serialNumber }: Props) => { | ||||
|         </Tabs> | ||||
|       </CardBody> | ||||
|     </Card> | ||||
|       <CableDiagnosticsModal modalProps={cableDiagnosticsModalProps} serialNumber={serialNumber} port={selectedPort} /> | ||||
|     </> | ||||
|   ); | ||||
| }; | ||||
|  | ||||
|   | ||||
| @@ -68,7 +68,6 @@ 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(); | ||||
|   | ||||
		Reference in New Issue
	
	Block a user