@openshift-assisted/ui-lib 2.9.0-cim → 2.9.5-cim

package/lib/ocm/components/clusterConfiguration/networkConfiguration/VirtualIPControlGroup.tsx

@@ -1,32 +1,41 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { useFormikContext } from 'formik';
-import { Spinner, Alert, AlertVariant, Tooltip } from '@patternfly/react-core';
+import { FieldArray, useFormikContext } from 'formik';
+import {
+  Spinner,
+  Alert,
+  AlertVariant,
+  Tooltip,
+  FormGroup,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import {
-  Cluster,
   NetworkConfigurationValues,
   FormikStaticField,
   NETWORK_TYPE_SDN,
   selectMachineNetworkCIDR,
   getVipValidationsById,
   DUAL_STACK,
-  SupportLevel,
   PopoverIcon,
+  selectApiVip,
+  selectIngressVip,
 } from '../../../../common';
 import { selectCurrentClusterPermissionsState } from '../../../selectors';
 import { OcmCheckboxField, OcmInputField } from '../../ui/OcmFormFields';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { Cluster, Ip, SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 
 interface VipStaticValueProps {
   id?: string;
-  vipName: 'apiVip' | 'ingressVip';
+  vipValue: Ip;
   cluster: Cluster;
   validationErrorMessage?: string;
 }
 
 const VipStaticValue = ({
-  vipName,
+  vipValue,
   cluster,
   validationErrorMessage,
   id = 'vip-static',
@@ -34,8 +43,8 @@ const VipStaticValue = ({
   const { vipDhcpAllocation } = cluster;
   const machineNetworkCidr = selectMachineNetworkCIDR(cluster);
 
-  if (vipDhcpAllocation && cluster[vipName]) {
-    return <span id={`${id}-allocated`}>{cluster[vipName]}</span>;
+  if (vipDhcpAllocation && !!vipValue) {
+    return <span id={`${id}-allocated`}>{vipValue}</span>;
   }
   if (vipDhcpAllocation && validationErrorMessage) {
     return (
@@ -80,8 +89,8 @@ export const VirtualIPControlGroup = ({
     'Provides an endpoint for users, both human and machine, to interact with and configure the platform.';
 
   const {
-    'api-vip-defined': apiVipFailedValidationMessage,
-    'ingress-vip-defined': ingressVipFailedValidationMessage,
+    'api-vips-defined': apiVipFailedValidationMessage,
+    'ingress-vips-defined': ingressVipFailedValidationMessage,
   } = React.useMemo(
     () => getVipValidationsById(t, cluster.validationsInfo),
     [t, cluster.validationsInfo],
@@ -98,12 +107,15 @@ export const VirtualIPControlGroup = ({
   const onChangeDhcp = React.useCallback(
     (hasDhcp: boolean) => {
       // We need to sync the values back to the form
-      setFieldValue('apiVip', hasDhcp ? '' : cluster.apiVip);
-      setFieldValue('ingressVip', hasDhcp ? '' : cluster.ingressVip);
+      setFieldValue('apiVips', hasDhcp ? [] : cluster.apiVips);
+      setFieldValue('ingressVips', hasDhcp ? [] : cluster.ingressVips);
     },
-    [cluster.apiVip, cluster.ingressVip, setFieldValue],
+    [cluster.apiVips, cluster.ingressVips, setFieldValue],
   );
 
+  const setVipValue = (field: string, e: React.ChangeEvent<HTMLInputElement>) =>
+    setFieldValue(field, [{ ip: e.target.value, clusterId: cluster.id }]);
+
   const ipFieldsSuffix = values.stackType === DUAL_STACK ? ' (IPv4)' : '';
   return (
     <>
@@ -137,13 +149,13 @@ export const VirtualIPControlGroup = ({
             }
             name="apiVip"
             helperText={ipHelperText}
-            value={values.apiVip || ''}
+            value={selectApiVip(values)}
             isValid={!apiVipFailedValidationMessage}
             isRequired
           >
             <VipStaticValue
               id="vip-api"
-              vipName="apiVip"
+              vipValue={selectApiVip(cluster)}
               cluster={cluster}
               validationErrorMessage={apiVipFailedValidationMessage}
             />
@@ -157,42 +169,59 @@ export const VirtualIPControlGroup = ({
             }
             name="ingressVip"
             helperText={ipHelperText}
-            value={values.ingressVip || ''}
+            value={selectIngressVip(values)}
             isValid={!ingressVipFailedValidationMessage}
             isRequired
           >
             <VipStaticValue
               id="vip-ingress"
-              vipName="ingressVip"
+              vipValue={selectIngressVip(cluster)}
               cluster={cluster}
               validationErrorMessage={ingressVipFailedValidationMessage}
             />
           </FormikStaticField>
         </>
       ) : (
-        <>
-          <OcmInputField
-            label={
-              <>
-                <span>API IP{ipFieldsSuffix}</span> <PopoverIcon bodyContent={ipPopoverContent} />
-              </>
-            }
-            name="apiVip"
-            helperText={ipHelperText}
-            isRequired
-          />
-          <OcmInputField
-            name="ingressVip"
-            label={
-              <>
-                <span>Ingress IP{ipFieldsSuffix}</span>{' '}
-                <PopoverIcon bodyContent={ipPopoverContent} />
-              </>
-            }
-            helperText={ipHelperText}
-            isRequired
-          />
-        </>
+        <FormGroup>
+          <FieldArray name="vips">
+            {() => (
+              <Stack>
+                <StackItem>
+                  <OcmInputField
+                    label={
+                      <>
+                        <span>API IP{ipFieldsSuffix}</span>{' '}
+                        <PopoverIcon bodyContent={ipPopoverContent} />
+                      </>
+                    }
+                    name="apiVips.0.ip"
+                    helperText={ipHelperText}
+                    isRequired
+                    onChange={(e) =>
+                      setVipValue('apiVips', e as React.ChangeEvent<HTMLInputElement>)
+                    }
+                  />
+                </StackItem>
+                <StackItem>
+                  <OcmInputField
+                    name="ingressVips.0.ip"
+                    label={
+                      <>
+                        <span>Ingress IP{ipFieldsSuffix}</span>{' '}
+                        <PopoverIcon bodyContent={ipPopoverContent} />
+                      </>
+                    }
+                    helperText={ipHelperText}
+                    isRequired
+                    onChange={(e) =>
+                      setVipValue('ingressVips', e as React.ChangeEvent<HTMLInputElement>)
+                    }
+                  />
+                </StackItem>
+              </Stack>
+            )}
+          </FieldArray>
+        </FormGroup>
       )}
     </>
   );

package/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts

@@ -1,6 +1,5 @@
 import * as Yup from 'yup';
 import {
-  Cluster,
   clusterNetworksValidationSchema,
   dualStackValidationSchema,
   getDefaultNetworkType,
@@ -12,11 +11,16 @@ import {
   serviceNetworkValidationSchema,
   IPv4ValidationSchema,
   sshPublicKeyListValidationSchema,
-  vipNoSuffixValidationSchema,
   IPV4_STACK,
   DUAL_STACK,
-  ClusterDefaultConfig,
+  vipArrayValidationSchema,
 } from '../../../../common';
+import {
+  ApiVip,
+  Cluster,
+  ClusterDefaultConfig,
+  IngressVip,
+} from '@openshift-assisted/types/assisted-installer-service';
 
 export const getNetworkInitialValues = (
   cluster: Cluster,
@@ -32,8 +36,8 @@ export const getNetworkInitialValues = (
   const isDualStackType = isDualStack(cluster);
 
   return {
-    apiVip: cluster.apiVip || '',
-    ingressVip: cluster.ingressVip || '',
+    apiVips: cluster.apiVips,
+    ingressVips: cluster.ingressVips,
     sshPublicKey: cluster.sshPublicKey || '',
     vipDhcpAllocation: cluster.vipDhcpAllocation,
     managedNetworkingType: cluster.userManagedNetworking ? 'userManaged' : 'clusterManaged',
@@ -59,14 +63,12 @@ export const getNetworkConfigurationValidationSchema = (
 ) =>
   Yup.lazy<NetworkConfigurationValues>((values) =>
     Yup.object<NetworkConfigurationValues>().shape({
-      apiVip:
-        values.apiVip !== undefined && values.apiVip !== ''
-          ? vipNoSuffixValidationSchema(hostSubnets, values, initialValues.apiVip)
-          : Yup.string(),
-      ingressVip:
-        values.ingressVip !== undefined && values.ingressVip !== ''
-          ? vipNoSuffixValidationSchema(hostSubnets, values, initialValues.ingressVip)
-          : Yup.string(),
+      apiVips: vipArrayValidationSchema<ApiVip>(hostSubnets, values, initialValues.apiVips),
+      ingressVips: vipArrayValidationSchema<IngressVip>(
+        hostSubnets,
+        values,
+        initialValues.ingressVips,
+      ),
       sshPublicKey: sshPublicKeyListValidationSchema,
       machineNetworks:
         values.managedNetworkingType === 'userManaged'

package/lib/ocm/components/clusterConfiguration/operators/CnvCheckbox.tsx

@@ -30,7 +30,7 @@ const CnvLabel = ({
       </Tooltip>
       <PopoverIcon
         component={'a'}
-        headerContent="Additional Requirements"
+        headerContent="Additional requirements"
         bodyContent={<CnvHostRequirements clusterId={clusterId} />}
       />
     </>

package/lib/ocm/components/clusterConfiguration/operators/CnvHostRequirements.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { List, ListItem } from '@patternfly/react-core';
 import { useClusterPreflightRequirements } from '../../../hooks';
-import { Cluster, ErrorState, LoadingState, OPERATOR_NAME_CNV, RenderIf } from '../../../../common';
+import { ErrorState, LoadingState, OPERATOR_NAME_CNV, RenderIf } from '../../../../common';
 import { selectIsCurrentClusterSNO } from '../../../selectors';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 const CnvHostRequirements = ({ clusterId }: { clusterId: Cluster['id'] }) => {
   const { preflightRequirements, error, isLoading } = useClusterPreflightRequirements(clusterId);

package/lib/ocm/components/clusterConfiguration/operators/LvmCheckbox.tsx

@@ -12,7 +12,6 @@ import {
   ExternalLink,
   LVMS_LINK,
   OPERATOR_NAME_LVMS,
-  SupportLevel,
 } from '../../../../common';
 import LvmHostRequirements from './LvmHostRequirements';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
@@ -20,6 +19,7 @@ import { useTranslation } from '../../../../common/hooks/use-translation-wrapper
 import { getLvmIncompatibleWithCnvReason } from '../../featureSupportLevels/featureStateUtils';
 import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 
 const LVM_FIELD_NAME = 'useOdfLogicalVolumeManager';
 
@@ -48,7 +48,7 @@ const LvmLabel = ({ clusterId, operatorLabel, disabledReason, supportLevel }: Lv
       </Tooltip>
       <PopoverIcon
         component={'a'}
-        headerContent="Additional Requirements"
+        headerContent="Additional requirements"
         bodyContent={<LvmHostRequirements clusterId={clusterId} />}
       />
       <NewFeatureSupportLevelBadge featureId="LVM" supportLevel={supportLevel} />

package/lib/ocm/components/clusterConfiguration/operators/LvmHostRequirements.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import { List, ListItem } from '@patternfly/react-core';
 import { useClusterPreflightRequirements } from '../../../hooks';
 import {
-  HostTypeHardwareRequirements,
   ClusterOperatorProps,
   ErrorState,
   LoadingState,
   OPERATOR_NAME_LVM,
 } from '../../../../common';
+import { HostTypeHardwareRequirements } from '@openshift-assisted/types/assisted-installer-service';
 
 const LvmHostRequirements = ({ clusterId }: { clusterId: ClusterOperatorProps['clusterId'] }) => {
   const { preflightRequirements, error, isLoading } = useClusterPreflightRequirements(clusterId);

package/lib/ocm/components/clusterConfiguration/operators/MceCheckbox.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { FormGroup, Tooltip } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { getFieldId, PopoverIcon, MCE_LINK } from '../../../../common';
+import { OcmCheckboxField } from '../../ui/OcmFormFields';
+import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
+
+const MCE_FIELD_NAME = 'useMultiClusterEngine';
+
+const MceLabel = ({ disabledReason }: { disabledReason?: string }) => (
+  <>
+    <Tooltip hidden={!disabledReason} content={disabledReason}>
+      <span>Install multicluster engine </span>
+    </Tooltip>
+    <PopoverIcon
+      id={MCE_FIELD_NAME}
+      component={'a'}
+      headerContent="Additional requirements"
+      bodyContent={
+        <>
+          OpenShift Data Foundation (recommended for creating additional on-premise clusters) or
+          another persistent storage service
+        </>
+      }
+    />
+  </>
+);
+
+const MceHelperText = () => {
+  return (
+    <>
+      Create, import, and manage multiple clusters from this cluster.{' '}
+      <a href={MCE_LINK} target="_blank" rel="noopener noreferrer">
+        {'Learn more'} <ExternalLinkAltIcon />
+      </a>
+    </>
+  );
+};
+
+const MceCheckbox = () => {
+  const featureSupportLevelContext = useNewFeatureSupportLevel();
+  const fieldId = getFieldId(MCE_FIELD_NAME, 'input');
+  const disabledReason = featureSupportLevelContext.getFeatureDisabledReason('MCE');
+  return (
+    <FormGroup isInline fieldId={fieldId}>
+      <OcmCheckboxField
+        name={MCE_FIELD_NAME}
+        label={<MceLabel disabledReason={disabledReason} />}
+        isDisabled={!!disabledReason}
+        helperText={<MceHelperText />}
+      />
+    </FormGroup>
+  );
+};
+
+export default MceCheckbox;

package/lib/ocm/components/clusterConfiguration/operators/OdfCheckbox.tsx

@@ -14,7 +14,7 @@ const OdfLabel = ({ disabledReason }: { disabledReason?: string }) => (
     </Tooltip>
     <PopoverIcon
       component={'a'}
-      headerContent="Additional Requirements"
+      headerContent="Additional requirements"
       bodyContent={
         <a href={ODF_REQUIREMENTS_LINK} target="_blank" rel="noopener noreferrer">
           Learn more about the requirements for OpenShift Data Foundation <ExternalLinkAltIcon />.

package/lib/ocm/components/clusterConfiguration/operators/utils.tsx

@@ -1,10 +1,10 @@
 import {
   OPERATOR_NAME_LVM,
-  Cluster,
   FeatureSupportLevelData,
   ExposedOperatorName,
   OPERATOR_NAME_LVMS,
 } from '../../../../common';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 export const getActualLVMOperatorName = ({
   openshiftVersion,

package/lib/ocm/components/clusterConfiguration/platformIntegration/ExternalPlatformDropdown.tsx

@@ -0,0 +1,154 @@
+import React, { MouseEvent } from 'react';
+import {
+  Button,
+  ButtonVariant,
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+  FormGroup,
+  Split,
+  SplitItem,
+} from '@patternfly/react-core';
+import { CaretDownIcon } from '@patternfly/react-icons';
+import { useField } from 'formik';
+import { getFieldId } from '../../../../common';
+import {
+  ExternalPlatformLabels,
+  ExternalPlatformLinks,
+  ExternalPlatformTooltips,
+} from './constants';
+import { PlatformType } from '@openshift-assisted/types/assisted-installer-service';
+
+const INPUT_NAME = 'platform';
+const fieldId = getFieldId(INPUT_NAME, 'input');
+
+type ExternalPlatformDropdownProps = {
+  showOciOption: boolean;
+  disabledOciTooltipContent: React.ReactNode;
+  isOciDisabled: boolean;
+  onChange: (selectedPlatform: PlatformType) => void;
+};
+
+export type ExternalPlatformInfo = {
+  label: string;
+  href?: string;
+  tooltip?: string;
+};
+
+const getExternalPlatformTypes = (
+  showOciOption: boolean,
+): Partial<{ [key in PlatformType]: ExternalPlatformInfo }> => {
+  const platforms = ['none', 'nutanix', showOciOption && 'oci', 'vsphere'] as PlatformType[];
+
+  return platforms.filter(Boolean).reduce(
+    (a, platform) => ({
+      ...a,
+      [platform]: {
+        label: ExternalPlatformLabels[platform],
+        href: ExternalPlatformLinks[platform],
+        tooltip: ExternalPlatformTooltips[platform],
+      },
+    }),
+    {},
+  );
+};
+
+export const ExternalPlatformDropdown = ({
+  showOciOption,
+  disabledOciTooltipContent,
+  isOciDisabled,
+  onChange,
+}: ExternalPlatformDropdownProps) => {
+  const [field, { value, initialValue }, { setValue }] = useField<string>(INPUT_NAME);
+  const [isOpen, setOpen] = React.useState(false);
+  const handleClick = (event: MouseEvent<HTMLButtonElement>, href: string) => {
+    event.stopPropagation(); // Stop event propagation here
+    window.open(href, '_blank');
+  };
+
+  const externalPlatformTypes = getExternalPlatformTypes(showOciOption);
+
+  const enabledItems = Object.keys(externalPlatformTypes).map((platform) => {
+    const isOracleDisabled = platform === 'oci' && isOciDisabled;
+    const { label, href, tooltip } = externalPlatformTypes[
+      platform as PlatformType
+    ] as ExternalPlatformInfo;
+
+    return (
+      <DropdownItem
+        key={platform}
+        id={platform}
+        tooltip={isOracleDisabled ? disabledOciTooltipContent : tooltip}
+        isAriaDisabled={isOracleDisabled}
+        tooltipProps={{ position: 'top-start' }}
+      >
+        <Split>
+          <SplitItem>{label}</SplitItem>
+          {!!href && (
+            <>
+              <SplitItem isFilled />
+              <SplitItem>
+                <Button
+                  variant={ButtonVariant.link}
+                  isInline
+                  style={{ float: 'right' }}
+                  onClick={(event) => handleClick(event, href)}
+                >
+                  Learn more <i className="fas fa-external-link-alt" />
+                </Button>
+              </SplitItem>
+            </>
+          )}
+        </Split>
+      </DropdownItem>
+    );
+  });
+
+  const onSelect = React.useCallback(
+    (event?: React.SyntheticEvent<HTMLDivElement>) => {
+      const selectedPlatform = event?.currentTarget.id as PlatformType;
+      setValue(selectedPlatform);
+      setOpen(false);
+      onChange(selectedPlatform);
+    },
+    [setOpen, setValue, onChange],
+  );
+
+  React.useEffect(() => {
+    if (value === 'oci' && isOciDisabled) {
+      setValue('none');
+    }
+  }, [initialValue, isOciDisabled, setValue, value]);
+
+  const toggle = React.useMemo(
+    () => (
+      <DropdownToggle
+        onToggle={(val) => setOpen(val)}
+        toggleIndicator={CaretDownIcon}
+        isText
+        className="pf-u-w-100"
+      >
+        {externalPlatformTypes[value as PlatformType]?.label}
+      </DropdownToggle>
+    ),
+    [externalPlatformTypes, value],
+  );
+
+  return (
+    <FormGroup
+      id={`form-control__${fieldId}`}
+      fieldId={fieldId}
+      label={'Integrate with external partner platforms'}
+    >
+      <Dropdown
+        {...field}
+        id={fieldId}
+        dropdownItems={enabledItems}
+        toggle={toggle}
+        isOpen={isOpen}
+        className="pf-u-w-100"
+        onSelect={onSelect}
+      />
+    </FormGroup>
+  );
+};

package/lib/ocm/components/clusterConfiguration/platformIntegration/PlatformIntegrationNote.tsx

@@ -2,11 +2,10 @@ import React from 'react';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens';
 import { SupportedPlatformType } from '../../../../common';
-
-import { integrationPlatformLinks } from '../../clusterWizard/ClusterPlatformIntegrationHint';
+import { ExternalPlatformLinks } from './constants';
 
 const PlatformIntegrationNote = ({ platformType }: { platformType: SupportedPlatformType }) => {
-  const integrationPlatformLink = integrationPlatformLinks[platformType];
+  const integrationPlatformLink = ExternalPlatformLinks[platformType];
   return (
     <p>
       <ExclamationTriangleIcon color={warningColor.value} size="sm" /> You will need to modify your

package/lib/ocm/components/clusterConfiguration/platformIntegration/constants.tsx

@@ -0,0 +1,19 @@
+import { NUTANIX_CONFIG_LINK, VSPHERE_CONFIG_LINK } from '../../../../common';
+import { PlatformType } from '@openshift-assisted/types/assisted-installer-service';
+
+export const ExternalPlatformLabels: { [key in PlatformType]: string } = {
+  baremetal: 'No platform integration',
+  none: 'No platform integration',
+  nutanix: 'Nutanix',
+  oci: 'Oracle  (Requires a custom manifest)',
+  vsphere: 'vSphere',
+};
+
+export const ExternalPlatformLinks: Partial<{ [key in PlatformType]: string }> = {
+  nutanix: NUTANIX_CONFIG_LINK,
+  vsphere: VSPHERE_CONFIG_LINK,
+};
+
+export const ExternalPlatformTooltips: Partial<{ [key in PlatformType]: string }> = {
+  oci: "To integrate with an external partner (for example, Oracle Cloud), you'll need to provide a custom manifest.",
+};

package/lib/ocm/components/clusterConfiguration/review/ReviewClusterDetailTable.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Table, TableBody, TableVariant } from '@patternfly/react-table';
-import { Cluster, genericTableRowKey, getDefaultCpuArchitecture } from '../../../../common';
+import { genericTableRowKey, getDefaultCpuArchitecture } from '../../../../common';
 import { getDiskEncryptionEnabledOnStatus } from '../../clusterDetail/ClusterProperties';
 import OpenShiftVersionDetail from '../../clusterDetail/OpenShiftVersionDetail';
 import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 export const ReviewClusterDetailTable = ({ cluster }: { cluster: Cluster }) => {
   const { activeFeatureConfiguration } = useNewFeatureSupportLevel();

package/lib/ocm/components/clusterConfiguration/review/ReviewNetworkingTable.tsx

@@ -1,18 +1,24 @@
 import { Title } from '@patternfly/react-core';
-import { Table, TableVariant, TableBody } from '@patternfly/react-table';
+import { Table, TableVariant, TableBody, TableProps } from '@patternfly/react-table';
 import React from 'react';
-import { Cluster, genericTableRowKey, isDualStack } from '../../../../common';
+import {
+  genericTableRowKey,
+  isDualStack,
+  selectApiVip,
+  selectIngressVip,
+} from '../../../../common';
 import {
   getManagementType,
   getStackTypeLabel,
   getNetworkType,
 } from '../../clusterDetail/ClusterProperties';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 const dummyCells = ['', '', ''];
 
 export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
   const rows = React.useMemo(() => {
-    const networkRows = [
+    const networkRows: TableProps['rows'] = [
       {
         rowId: 'network-management',
         cells: [
@@ -33,7 +39,10 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
           },
         ],
       },
-      {
+    ];
+
+    !!cluster.machineNetworks?.length &&
+      networkRows.push({
         rowId: 'machine-networks-cidr',
         cells: [
           { title: 'Machine networks CIDR' },
@@ -48,30 +57,32 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
           },
           isDualStack(cluster) && { title: 'Primary' },
         ],
-      },
-    ];
+      });
+
     cluster.apiVip &&
       networkRows.push({
         rowId: 'api-ip',
         cells: [
           { title: 'API IP' },
           {
-            title: cluster.apiVip,
+            title: selectApiVip(cluster),
             props: { 'data-testid': 'api-vip', colSpan: 2 },
           },
         ],
       });
+
     cluster.ingressVip &&
       networkRows.push({
         rowId: 'ingress-ip',
         cells: [
           { title: 'Ingress IP' },
           {
-            title: cluster.ingressVip,
+            title: selectIngressVip(cluster),
             props: { 'data-testid': 'ingress-vip', colSpan: 2 },
           },
         ],
       });
+
     return networkRows;
   }, [cluster]);