diff --git a/webui/src/components/nifbadge/NifBadge.tsx b/webui/src/components/nifbadge/NifBadge.tsx index 320a4ab..4851c02 100644 --- a/webui/src/components/nifbadge/NifBadge.tsx +++ b/webui/src/components/nifbadge/NifBadge.tsx @@ -9,7 +9,6 @@ import { Button, styled, SvgIconProps } from '@mui/material' import HearingIcon from '@mui/icons-material/Hearing' import { DormantIcon, DownIcon, LowerLayerDownIcon, UpIcon } from 'icons/operstates' -import { BridgeIcon, BridgeInternalIcon, DummyIcon, HardwareNicIcon, HardwareNicPFIcon, HardwareNicVFIcon, MacvlanIcon, MacvlanMasterIcon, NicIcon, OverlayIcon, TapIcon, TunIcon, VethIcon } from 'icons/nifs' import { AddressFamily, AddressFamilySet, GHOSTWIRE_LABEL_ROOT, NetworkInterface, nifId, orderAddresses, SRIOVRole } from 'models/gw' import { OperationalState } from 'models/gw' @@ -19,6 +18,7 @@ import { relationClassName } from 'utils/relclassname' import { rgba } from 'utils/rgba' import { TargetCapture } from 'components/targetcapture' import { NifCheckbox } from 'components/nifcheckbox' +import { NifIcon } from 'components/nificon' // The outer span holding together an optional "hardware" NIC icon as well @@ -174,33 +174,6 @@ const OperstateIndicator = styled('span')(({ theme }) => ({ [`&.${OperationalState.Dormant.toLowerCase()}`]: { color: theme.palette.operstate.dormant }, })) -const nifSRIOVIcons = { - [SRIOVRole.None]: HardwareNicIcon, - [SRIOVRole.PF]: HardwareNicPFIcon, - [SRIOVRole.VF]: HardwareNicVFIcon, -} - -// Known network interface type icons, indexed by the kind property of network -// interface objects (and directly taken from what Linux' RTNETLINK tells us). -const nifTypeIcons: { [key: string]: (props: SvgIconProps) => JSX.Element } = { - 'bridge': BridgeIcon, - 'dummy': DummyIcon, - 'macvlan': MacvlanIcon, - 'tap': TapIcon, - 'tun': TunIcon, - 'veth': VethIcon, - 'vxlan': OverlayIcon, -} - -const nifIcon = (nif: NetworkInterface) => { - if (GHOSTWIRE_LABEL_ROOT + 'bridge/internal' in nif.labels) { - return BridgeInternalIcon - } - return (nif.tuntapDetails && nifTypeIcons[nif.tuntapDetails.mode]) || - (nif.macvlans && MacvlanMasterIcon) || - nifTypeIcons[nif.kind] || NicIcon -} - const operStateIcons: { [key: string]: (props: SvgIconProps) => JSX.Element } = { [OperationalState.Unknown]: UpIcon, [OperationalState.Dormant]: DormantIcon, @@ -343,11 +316,10 @@ export const NifBadge = ({ const alias = (nif.alias && nif.alias !== "") && <> (~{nif.alias}) const vid = (nif.vlanDetails) && <> VID {nif.vlanDetails.vid} - const NifIcon = nifIcon(nif) const OperstateIcon = operStateIcons[nif.operstate] const content = <> - + )} {nif.isPhysical && - + } {nif.isPromiscuous && diff --git a/webui/src/components/nifhwicon/NifHWIcon.tsx b/webui/src/components/nifhwicon/NifHWIcon.tsx new file mode 100644 index 0000000..9a51961 --- /dev/null +++ b/webui/src/components/nifhwicon/NifHWIcon.tsx @@ -0,0 +1,30 @@ +// (c) Siemens AG 2024 +// +// SPDX-License-Identifier: MIT + +import React from 'react' + +import { SvgIconProps } from '@mui/material' + +import HardwareNicIcon from 'icons/nifs/HardwareNic' +import HardwareNicPFIcon from 'icons/nifs/HardwareNicPF' +import HardwareNicVFIcon from 'icons/nifs/HardwareNicVF' +import { NetworkInterface, SRIOVRole } from 'models/gw/nif' + +const nifSRIOVIcons = { + [SRIOVRole.None]: HardwareNicIcon, + [SRIOVRole.PF]: HardwareNicPFIcon, + [SRIOVRole.VF]: HardwareNicVFIcon, +} + +export interface NifHWIconProps extends SvgIconProps { + /** network interface object describing a network interface in detail. */ + nif: NetworkInterface +} + +export const NifHWIcon = ({ nif, ...props }: NifHWIconProps) => { + const HWIcon = nifSRIOVIcons[nif.sriovrole || SRIOVRole.None] + return +} + +export default NifHWIcon diff --git a/webui/src/components/nifhwicon/index.ts b/webui/src/components/nifhwicon/index.ts new file mode 100644 index 0000000..337b627 --- /dev/null +++ b/webui/src/components/nifhwicon/index.ts @@ -0,0 +1 @@ +export { NifHWIcon } from './NifHWIcon' diff --git a/webui/src/components/nificon/NifIcon.tsx b/webui/src/components/nificon/NifIcon.tsx new file mode 100644 index 0000000..62eed08 --- /dev/null +++ b/webui/src/components/nificon/NifIcon.tsx @@ -0,0 +1,55 @@ +// (c) Siemens AG 2024 +// +// SPDX-License-Identifier: MIT + +import React from 'react' + +import { SvgIconProps } from '@mui/material' + +import { NetworkInterface } from 'models/gw/nif' +import BridgeIcon from 'icons/nifs/Bridge' +import DummyIcon from 'icons/nifs/Dummy' +import MacvlanIcon from 'icons/nifs/Macvlan' +import TapIcon from 'icons/nifs/Tap' +import TunIcon from 'icons/nifs/Tun' +import VethIcon from 'icons/nifs/Veth' +import { BridgeInternalIcon, MacvlanMasterIcon, NicIcon, OverlayIcon } from 'icons/nifs' +import { GHOSTWIRE_LABEL_ROOT } from 'models/gw/model' +import { NifHWIcon } from 'components/nifhwicon' + +// Known network interface type icons, indexed by the kind property of network +// interface objects (and directly taken from what Linux' RTNETLINK tells us). +const nifTypeIcons: { [key: string]: (props: SvgIconProps) => JSX.Element } = { + 'bridge': BridgeIcon, + 'dummy': DummyIcon, + 'macvlan': MacvlanIcon, + 'tap': TapIcon, + 'tun': TunIcon, + 'veth': VethIcon, + 'vxlan': OverlayIcon, +} + +export interface NifIconProps extends SvgIconProps { + /** network interface object describing a network interface in detail. */ + nif: NetworkInterface + /** show HW NIC icon instead of generic icon if nic is "physical". */ + considerPhysical?: boolean +} + +export const NifIcon = ({ nif, considerPhysical, ...props }: NifIconProps) => { + if (!nif) { + return <> + } + if (considerPhysical && nif.isPhysical) { + return + } + if (nif.labels && GHOSTWIRE_LABEL_ROOT + 'bridge/internal' in nif.labels) { + return + } + const Icon = (nif.tuntapDetails && nifTypeIcons[nif.tuntapDetails.mode]) || + (nif.macvlans && MacvlanMasterIcon) || + nifTypeIcons[nif.kind] || NicIcon + return +} + +export default NifIcon diff --git a/webui/src/components/nificon/index.ts b/webui/src/components/nificon/index.ts new file mode 100644 index 0000000..fecf57c --- /dev/null +++ b/webui/src/components/nificon/index.ts @@ -0,0 +1 @@ +export { NifIcon } from './NifIcon' diff --git a/webui/src/components/nifinfomodal/NifInfoModal.tsx b/webui/src/components/nifinfomodal/NifInfoModal.tsx index 8140198..0650f55 100644 --- a/webui/src/components/nifinfomodal/NifInfoModal.tsx +++ b/webui/src/components/nifinfomodal/NifInfoModal.tsx @@ -10,13 +10,17 @@ import ClearIcon from '@mui/icons-material/Clear' import { ContentCopy } from '@mui/icons-material' import CloseIcon from '@mui/icons-material/Close' -import HwNicIcon from 'icons/nifs/HardwareNic' +import { NifIcon } from 'components/nificon' -const NifDialogTitle = styled(DialogTitle)(({theme}) => ({ +const NifDialogTitle = styled(DialogTitle)(({ theme }) => ({ '& .close': { position: 'relative', right: theme.spacing(-1), - top: theme.spacing(-0.25), + top: theme.spacing(-0.5), + }, + '& .nificon.MuiSvgIcon-root': { + position: 'relative', + top: theme.spacing(0.5), }, })) @@ -117,7 +121,12 @@ export const NifInfoModalProvider = ({ children }: NifInfoModalProviderProps) => onClose={handleClose} > -  Network Interface Information +  Network Interface Information