refact: nif icons components; tweak nif information modal

Signed-off-by: thediveo <[email protected]>
siemens · Jul 25, 2024 · f2e502b · f2e502b
1 parent a8b8aea
commit f2e502b
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 37 deletions.
diff --git 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 !== "") && <> (~<span className="alias">{nif.alias}</span>)</>
     const vid = (nif.vlanDetails) && <> VID&nbsp;{nif.vlanDetails.vid}</>
 
-    const NifIcon = nifIcon(nif)
     const OperstateIcon = operStateIcons[nif.operstate]
 
     const content = <>
-        <NifIcon />
+        <NifIcon nif={nif} />
         <OperstateIndicator
             as={OperstateIcon}
             className={nif.operstate.toLowerCase()}
@@ -434,8 +406,6 @@ export const NifBadge = ({
         }
     }
 
-    const HWIcon = nifSRIOVIcons[nif.sriovrole || SRIOVRole.None]
-
     // With lots of information prepared we can finally render the badge,
     // optionally wrapped into a tooltip with some detail information about
     // the network interface.
@@ -451,7 +421,7 @@ export const NifBadge = ({
                     : <Capture className="nifcaptureicon alignright" target={nif} />)}
             {nif.isPhysical &&
                 <HWNif className="nifbagdeicon">
-                    <HWIcon />
+                    <NifIcon nif={nif} considerPhysical />
                 </HWNif>
             }
             {nif.isPromiscuous &&

diff --git a/webui/src/components/nifhwicon/NifHWIcon.tsx 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 <HWIcon {...props} />
+}
+
+export default NifHWIcon
diff --git a/webui/src/components/nifhwicon/index.ts 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
@@ -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 <NifHWIcon nif={nif} {...props} />
+    }
+    if (nif.labels && GHOSTWIRE_LABEL_ROOT + 'bridge/internal' in nif.labels) {
+        return <BridgeInternalIcon {...props} />
+    }
+    const Icon = (nif.tuntapDetails && nifTypeIcons[nif.tuntapDetails.mode]) ||
+        (nif.macvlans && MacvlanMasterIcon) ||
+        nifTypeIcons[nif.kind] || NicIcon
+    return <Icon {...props} />
+}
+
+export default NifIcon
diff --git a/webui/src/components/nificon/index.ts 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
@@ -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}
             >
                 <NifDialogTitle>
-                    <HwNicIcon fontSize="inherit" />&nbsp;Network Interface Information
+                    <NifIcon
+                        nif={nif}
+                        considerPhysical
+                        fontSize="medium"
+                        className="nificon"
+                    />&nbsp;Network Interface Information
                     <CloseButton
                         className="close"
                         aria-label="close"