Merge pull request #78 from upalatucci/ports-on-popover

OCPBUGS-17245: use getPorts also in Popover interface
nmstate · Aug 25, 2023 · e74557c · e74557c
2 parents c989fce + 6f761ec
commit e74557c
Showing 1 changed file with 20 additions and 1 deletion.
diff --git a/src/views/states/list/components/InterfacesPopoverBody.tsx b/src/views/states/list/components/InterfacesPopoverBody.tsx
@@ -8,10 +8,12 @@ import {
   FlexItem,
   List,
   ListItem,
+  Tooltip,
 } from '@patternfly/react-core';
 import { LongArrowAltDownIcon, LongArrowAltUpIcon } from '@patternfly/react-icons';
 import { NodeNetworkConfigurationInterface, V1beta1NodeNetworkState } from '@types';
 import { useNMStateTranslation } from '@utils/hooks/useNMStateTranslation';
+import { getPorts } from '@utils/interfaces/getters';
 
 import useDrawerInterface from '../hooks/useDrawerInterface';
 
@@ -47,6 +49,7 @@ const InterfacesPopoverBody: FC<InterfacesPopoverBodyProps> = ({
     <List isPlain className="interfaces-popover-body" isBordered>
       {interfaces.map((iface) => {
         const address = iface.ipv4?.address || iface.ipv6?.address;
+        const ports = getPorts(iface);
         const Icon = iface.state.toLowerCase() === 'up' ? LongArrowAltUpIcon : LongArrowAltDownIcon;
 
         return (
@@ -83,7 +86,23 @@ const InterfacesPopoverBody: FC<InterfacesPopoverBodyProps> = ({
               <FirstColumn>
                 <strong>{t('Ports')}</strong>
               </FirstColumn>
-              <SecondColumn>{iface.bridge?.port?.length || '-'}</SecondColumn>
+              <SecondColumn>
+                {ports?.length ? (
+                  <Tooltip
+                    content={
+                      <List isPlain>
+                        {ports.map((port) => (
+                          <ListItem key={port}>{port}</ListItem>
+                        ))}
+                      </List>
+                    }
+                  >
+                    <span>{ports.length}</span>
+                  </Tooltip>
+                ) : (
+                  '-'
+                )}
+              </SecondColumn>
             </Row>
             <Row>
               <FirstColumn>