diff --git a/package-lock.json b/package-lock.json index 6114fb4..f765c17 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ucentral-client", - "version": "2.11.0(15)", + "version": "2.11.0(16)", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "ucentral-client", - "version": "2.11.0(15)", + "version": "2.11.0(16)", "license": "ISC", "dependencies": { "@chakra-ui/anatomy": "^2.1.1", @@ -4760,9 +4760,9 @@ } }, "node_modules/axios": { - "version": "1.3.5", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.5.tgz", - "integrity": "sha512-glL/PvG/E+xCWwV8S6nCHcrfg1exGx7vxyUIivIA1iL7BIh6bePylCfVHwp6k13ao7SATxB6imau2kqY+I67kw==", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.1.tgz", + "integrity": "sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==", "dependencies": { "follow-redirects": "^1.15.0", "form-data": "^4.0.0", diff --git a/package.json b/package.json index 3e90a2a..45f25e5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ucentral-client", - "version": "2.11.0(15)", + "version": "2.11.0(16)", "description": "", "private": true, "main": "index.tsx", diff --git a/src/pages/Device/WifiAnalysis/AssocationsTable.tsx b/src/pages/Device/WifiAnalysis/AssocationsTable.tsx index ef8c0aa..1044912 100644 --- a/src/pages/Device/WifiAnalysis/AssocationsTable.tsx +++ b/src/pages/Device/WifiAnalysis/AssocationsTable.tsx @@ -6,6 +6,7 @@ import { ColumnPicker } from 'components/DataTables/ColumnPicker'; import { DataTable } from 'components/DataTables/DataTable'; import DataCell from 'components/TableCells/DataCell'; import { Column } from 'models/Table'; +import IpCell from './IpCell'; export type ParsedAssociation = { radio?: ParsedRadio; @@ -35,7 +36,7 @@ type Props = { isSingle?: boolean; }; -const WifiAnalysisAssocationsTable = ({ data, ouis, isSingle }: Props) => { +const WifiAnalysisAssociationsTable = ({ data, ouis, isSingle }: Props) => { const { t } = useTranslation(); const [hiddenColumns, setHiddenColumns] = React.useState([]); @@ -50,6 +51,10 @@ const WifiAnalysisAssocationsTable = ({ data, ouis, isSingle }: Props) => { ); const dataCell = React.useCallback((v: number) => , []); const indexCell = React.useCallback((assoc: ParsedAssociation) => assoc.radio?.band ?? assoc.radio?.deductedBand, []); + const ipCell = React.useCallback( + (assoc: ParsedAssociation) => , + [], + ); const columns: Column[] = React.useMemo( (): Column[] => [ @@ -72,6 +77,13 @@ const WifiAnalysisAssocationsTable = ({ data, ouis, isSingle }: Props) => { isMonospace: true, alwaysShow: true, }, + { + id: 'ips', + Header: 'IPs', + Footer: '', + Cell: (v) => ipCell(v.cell.row.original), + disableSortBy: true, + }, { id: 'vendor', Header: t('controller.wifi.vendor'), @@ -195,4 +207,4 @@ const WifiAnalysisAssocationsTable = ({ data, ouis, isSingle }: Props) => { ); }; -export default WifiAnalysisAssocationsTable; +export default WifiAnalysisAssociationsTable; diff --git a/src/pages/Device/WifiAnalysis/IpCell.tsx b/src/pages/Device/WifiAnalysis/IpCell.tsx new file mode 100644 index 0000000..50cfa31 --- /dev/null +++ b/src/pages/Device/WifiAnalysis/IpCell.tsx @@ -0,0 +1,90 @@ +import * as React from 'react'; +import { CopyIcon } from '@chakra-ui/icons'; +import { + Button, + Flex, + Heading, + IconButton, + ListItem, + Popover, + PopoverArrow, + PopoverBody, + PopoverCloseButton, + PopoverContent, + PopoverHeader, + PopoverTrigger, + Text, + Tooltip, + UnorderedList, + useBoolean, + useClipboard, +} from '@chakra-ui/react'; + +const CopyString = ({ str }: { str: string }) => { + const [isHovered, setHovered] = useBoolean(false); + const copy = useClipboard(str); + + return ( + + {str} + + } + variant="transparent" + opacity={!isHovered ? 0 : 1} + /> + + + ); +}; + +type Props = { + ipv4: string[]; + ipv6: string[]; +}; + +const IpCell = ({ ipv4, ipv6 }: Props) => { + const length = ipv4.length + ipv6.length; + + return ( + + + + + + + + + + {length} {length === 1 ? 'IP' : 'IPs'} + + + + IpV4 ({ipv4.length}) + + {ipv4.map((ip) => ( + + + + ))} + + IpV6 ({ipv6.length}) + + {ipv6.map((ip) => ( + + + + ))} + + + + + ); +}; + +export default IpCell;