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