Merge pull request #1729 from metalice/CNV-34072-adding-interface-nam…

…e-along-ip CNV-34072: Adding interface name to ip
kubevirt-ui · Jan 22, 2024 · 68ecd92 · 68ecd92
2 parents 65521b2 + 9196733
commit 68ecd92
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 25 deletions.
diff --git a/src/utils/resources/vmi/utils/ips.ts b/src/utils/resources/vmi/utils/ips.ts
@@ -1,4 +1,6 @@
 import { V1VirtualMachineInstance } from '@kubevirt-ui/kubevirt-api/kubevirt';
+import { isEmpty } from '@kubevirt-utils/utils/utils';
+import { IpAddresses } from '@virtualmachines/details/tabs/overview/components/VirtualMachinesOverviewTabNetworkInterfaces/utils/types';
 
 /**
  * Get VMI IPs
@@ -13,11 +15,19 @@ export const getVMIIPAddresses = (vmi: V1VirtualMachineInstance): string[] => {
     iface?.ipAddress,
     ...(iface?.ipAddresses || []),
   ]);
-  const trimmedIPAddresses = ipAddresses
-    ?.map((ip) => ip?.trim())
-    ?.filter((ip) => ip?.length > 0 && isIPv4(ip));
+  const trimmedIPAddresses = ipAddresses?.filter((ip) => !isEmpty(ip));
   return [...new Set(trimmedIPAddresses)];
 };
 
-export const isIPv4 = (str: string) =>
-  /^((25[0-5]|(2[0-4]|1[0-9]|[1-9]|)[0-9])(\.(?!$)|$)){4}$/.test(str);
+export const getVMIIPAddressesWithName = (vmi: V1VirtualMachineInstance): IpAddresses => {
+  const namedInterfaces = vmi?.status?.interfaces?.filter((iface) => !!iface.name) || [];
+  return namedInterfaces?.reduce((acc, iface) => {
+    const ips = [...new Set([iface?.ipAddress, ...(iface?.ipAddresses || [])])];
+    if (!isEmpty(ips)) {
+      for (const ip of ips) {
+        acc.push({ interfaceName: iface?.interfaceName, ip });
+      }
+    }
+    return acc;
+  }, [] as IpAddresses);
+};
diff --git a/...alMachinesOverviewTabNetworkInterfaces/VirtualMachinesOverviewTabNetworkInterfacesRow.tsx b/...alMachinesOverviewTabNetworkInterfaces/VirtualMachinesOverviewTabNetworkInterfacesRow.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { FC } from 'react';
 import FirstItemListPopover from 'src/views/virtualmachines/list/components/FirstItemListPopover/FirstItemListPopover';
 
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
@@ -14,7 +14,7 @@ type VirtualMachinesOverviewTabNetworkInterfacesProps = {
   obj: InterfacesData;
 };
 
-const VirtualMachinesOverviewTabInterfacesRow: React.FC<
+const VirtualMachinesOverviewTabInterfacesRow: FC<
   VirtualMachinesOverviewTabNetworkInterfacesProps
 > = ({ activeColumnIDs, obj }) => {
   const { t } = useKubevirtTranslation();

diff --git a/...MachinesOverviewTabNetworkInterfaces/hooks/useVirtualMachinesOverviewTabInterfacesData.ts b/...MachinesOverviewTabNetworkInterfaces/hooks/useVirtualMachinesOverviewTabInterfacesData.ts
@@ -1,6 +1,5 @@
 import { V1VirtualMachine, V1VirtualMachineInstance } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import { getInterfaces, getNetworks } from '@kubevirt-utils/resources/vm';
-import { isIPv4 } from '@kubevirt-utils/resources/vmi';
 
 import { InterfacesData } from '../utils/types';
 
@@ -19,9 +18,12 @@ const useVirtualMachinesOverviewTabInterfacesData: UseVirtualMachinesOverviewTab
 
   const networkInterfacesData = interfaces?.map((iface) => {
     const network = networks?.find((net) => net.name === iface.name);
-    const ipAddresses = interfacesIPs
-      .find((iIP) => iIP.name === iface.name)
-      ?.ipAddresses?.filter(isIPv4);
+    const nic = interfacesIPs?.find((iIP) => iIP.name === iface.name) || {};
+    const ipAddresses = nic?.ipAddresses?.map((ip) => ({
+      interfaceName: nic?.interfaceName,
+      ip,
+    }));
+
     return {
       iface,
       ipAddresses,

diff --git a/...tails/tabs/overview/components/VirtualMachinesOverviewTabNetworkInterfaces/utils/types.ts b/...tails/tabs/overview/components/VirtualMachinesOverviewTabNetworkInterfaces/utils/types.ts
@@ -2,6 +2,8 @@ import { V1Interface, V1Network } from '@kubevirt-ui/kubevirt-api/kubevirt';
 
 export type InterfacesData = {
   iface: V1Interface;
-  ipAddresses: string[];
+  ipAddresses: IpAddresses;
   network: V1Network;
 };
+
+export type IpAddresses = { interfaceName: string; ip: string }[];
diff --git a/src/views/virtualmachines/list/components/FirstItemListPopover/FirstItemListPopover.tsx b/src/views/virtualmachines/list/components/FirstItemListPopover/FirstItemListPopover.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { FC, ReactNode } from 'react';
 
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { NO_DATA_DASH } from '@kubevirt-utils/resources/vm/utils/constants';
@@ -10,15 +10,16 @@ import {
   Popover,
   PopoverPosition,
 } from '@patternfly/react-core';
+import { IpAddresses } from '@virtualmachines/details/tabs/overview/components/VirtualMachinesOverviewTabNetworkInterfaces/utils/types';
 
 type FirstItemListPopoverProps = {
   className?: string;
-  headerContent?: React.ReactNode | string;
+  headerContent?: ReactNode | string;
   includeCopyFirstItem?: boolean;
-  items: string[];
+  items: IpAddresses;
 };
 
-const FirstItemListPopover: React.FC<FirstItemListPopoverProps> = ({
+const FirstItemListPopover: FC<FirstItemListPopoverProps> = ({
   className,
   headerContent,
   includeCopyFirstItem,
@@ -35,16 +36,18 @@ const FirstItemListPopover: React.FC<FirstItemListPopoverProps> = ({
             isCode
             variant={ClipboardCopyVariant.inlineCompact}
           >
-            {items?.[0]}
+            {items?.[0]?.ip}
           </ClipboardCopy>
         ) : (
-          items?.[0] || NO_DATA_DASH
+          items?.[0]?.ip || NO_DATA_DASH
         )}
       </div>
       {items?.length > 1 && (
         <Popover
-          bodyContent={items.map((item) => (
-            <div key={item}>{item}</div>
+          bodyContent={items.map(({ interfaceName, ip }) => (
+            <div key={ip}>
+              {interfaceName}: {ip}
+            </div>
           ))}
           hasAutoWidth
           headerContent={headerContent}

diff --git a/src/views/virtualmachines/list/components/VirtualMachineRow/VirtualMachineRunningRow.tsx b/src/views/virtualmachines/list/components/VirtualMachineRow/VirtualMachineRunningRow.tsx
@@ -6,7 +6,7 @@ import {
   V1VirtualMachineInstanceMigration,
 } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
-import { getVMIIPAddresses } from '@kubevirt-utils/resources/vmi';
+import { getVMIIPAddressesWithName } from '@kubevirt-utils/resources/vmi';
 import { ResourceLink, RowProps } from '@openshift-console/dynamic-plugin-sdk';
 
 import FirstItemListPopover from '../FirstItemListPopover/FirstItemListPopover';
@@ -26,7 +26,7 @@ const VirtualMachineRunningRow: React.FC<
 > = ({ activeColumnIDs, obj, rowData: { isSingleNodeCluster, kind, vmi, vmim } }) => {
   const { t } = useKubevirtTranslation();
 
-  const ipAddressess = vmi && getVMIIPAddresses(vmi);
+  const ipAddressess = vmi && getVMIIPAddressesWithName(vmi);
   return (
     <VirtualMachineRowLayout
       rowData={{

diff --git a/src/views/virtualmachinesinstance/details/tabs/details/components/Details/IP/IP.tsx b/src/views/virtualmachinesinstance/details/tabs/details/components/Details/IP/IP.tsx
@@ -3,17 +3,17 @@ import FirstItemListPopover from 'src/views/virtualmachines/list/components/Firs
 
 import { V1VirtualMachineInstance } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
-import { getVMIIPAddresses } from '@kubevirt-utils/resources/vmi';
+import { getVMIIPAddressesWithName } from '@kubevirt-utils/resources/vmi';
 
 type IPProps = {
   vmi: V1VirtualMachineInstance;
 };
 
 const IP: React.FC<IPProps> = ({ vmi }) => {
   const { t } = useKubevirtTranslation();
-  const ipAddresses = getVMIIPAddresses(vmi);
+  const ipAddressesWithNames = getVMIIPAddressesWithName(vmi);
 
-  return <FirstItemListPopover headerContent={t('IP addresses')} items={ipAddresses} />;
+  return <FirstItemListPopover headerContent={t('IP addresses')} items={ipAddressesWithNames} />;
 };
 
 export default IP;