kubevirt: Refactor IpAddress for reusability

frontend/packages/console-shared/src/components/index.ts

@@ -2,3 +2,4 @@ export * from './badges';
 export * from './contextMenu';
 export * from './status';
 export * from './pod';
+export * from './ip-addresses';

frontend/packages/console-shared/src/components/ip-addresses.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { DASH } from '../constants';
+
+export const IpAddresses: React.FC<IpAddressesProps> = ({ ips = [] }) => {
+  return <>{ips.length > 0 ? ips.join(', ') : DASH}</>;
+};
+
+type IpAddressesProps = {
+  ips?: string[];
+};

frontend/packages/kubevirt-plugin/src/components/dashboards-page/vm-dashboard/vm-details-card.tsx

@@ -20,7 +20,7 @@ import { getNodeName } from '../../../selectors/pod/selectors';
 import { isVMRunning } from '../../../selectors/vm';
 import { getVMStatus } from '../../../statuses/vm/vm';
 import { VirtualMachineModel } from '../../../models';
-import { getVmiIpAddressesString } from '../../ip-addresses';
+import { VmIpAddresses } from '../../vm-ip-addresses';
 import { VM_DETAIL_OVERVIEW_HREF } from '../../../constants';
 
 export const VMDetailsCard: React.FC<VMDetailsCardProps> = () => {
@@ -30,8 +30,6 @@ export const VMDetailsCard: React.FC<VMDetailsCardProps> = () => {
   const vmStatus = getVMStatus(vm, pods, migrations);
   const { launcherPod } = vmStatus;
 
-  const ipAddrs = getVmiIpAddressesString(vmi, vmStatus);
-
   const isNodeLoading = !vm || !pods || !vmStatus;
   const name = getName(vm);
   const namespace = getNamespace(vm);
@@ -66,8 +64,8 @@ export const VMDetailsCard: React.FC<VMDetailsCardProps> = () => {
           >
             {launcherPod && <NodeLink name={getNodeName(launcherPod)} />}
           </DetailItem>
-          <DetailItem title="IP Address" error={!ipAddrs} isLoading={!vm}>
-            {ipAddrs}
+          <DetailItem title="IP Address" error={false} isLoading={!vm}>
+            <VmIpAddresses vmi={vmi} vmStatus={vmStatus} />
           </DetailItem>
         </DetailsBody>
       </DashboardCardBody>

frontend/packages/kubevirt-plugin/src/components/vm-ip-addresses.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { getVmiIpAddresses, isVmOff } from 'kubevirt-web-ui-components';
+import { IpAddresses } from '@console/shared/src/components/ip-addresses';
+import { VMIKind } from '../types';
+
+export const VmIpAddresses: React.FC<VmIpAddressesProps> = ({ vmi, vmStatus }) => {
+  const vmIsOff = vmStatus && isVmOff(vmStatus);
+  const ips = vmIsOff ? [] : getVmiIpAddresses(vmi);
+  return <IpAddresses ips={ips} />;
+};
+
+type VmIpAddressesProps = {
+  vmi: VMIKind;
+  vmStatus?: any; // precomputed by higher component for optimization
+};

frontend/packages/kubevirt-plugin/src/components/vms/vm-resource.tsx

@@ -21,7 +21,7 @@ import { getDescription } from '../../selectors/selectors';
 import { getVMStatus } from '../../statuses/vm/vm';
 import { FlavorText } from '../flavor-text';
 import { EditButton } from '../edit-button';
-import { getVmiIpAddressesString } from '../ip-addresses';
+import { VmIpAddresses } from '../vm-ip-addresses';
 
 import './_vm-resource.scss';
 
@@ -91,7 +91,9 @@ export const VMDetailsList: React.FC<VMResourceListProps> = ({
         )}
       </dd>
       <dt>IP Address</dt>
-      <dd id={prefixedID(id, 'ip-addresses')}>{getVmiIpAddressesString(vmi, vmStatus) || DASH}</dd>
+      <dd id={prefixedID(id, 'ip-addresses')}>
+        <VmIpAddresses vmi={vmi} vmStatus={vmStatus} />
+      </dd>
       <dt>Node</dt>
       <dd id={prefixedID(id, 'node')}>{<NodeLink name={nodeName} />}</dd>
       <dt>Flavor</dt>