@openshift-assisted/ui-lib 2.47.1 → 2.47.3

package/lib/common/components/ui/formik/validationSchemas.ts

@@ -173,6 +173,17 @@ export const ipValidationSchema = Yup.string().test(
   (value?: string) => Address4.isValid(value || '') || Address6.isValid(value || ''),
 );
 
+// Helpers to classify literal IPs more robustly
+const isIPv4Address = (ip?: string) => {
+  if (!ip) return false;
+  return ip.includes('.') && Address4.isValid(ip);
+};
+
+const isIPv6Address = (ip?: string) => {
+  if (!ip) return false;
+  return ip.includes(':') && Address6.isValid(ip);
+};
+
 export const ipNoSuffixValidationSchema = Yup.string().test(
   'ip-validation-no-suffix',
   'Not a valid IP address',
@@ -202,7 +213,6 @@ export const vipRangeValidationSchema = (
     } catch (err) {
       return true;
     }
-
     const foundHostSubnets = [];
     if (machineNetworks) {
       const cidrs = machineNetworks?.map((network) => network.cidr);
@@ -303,12 +313,51 @@ export const vipNoSuffixValidationSchema = (
       vipDhcpAllocation: NetworkConfigurationValues['vipDhcpAllocation'],
       managedNetworkingType: NetworkConfigurationValues['managedNetworkingType'],
     ) => !vipDhcpAllocation && managedNetworkingType !== 'userManaged',
-    then: () =>
-      requiredOnceSet(head(initialValues)?.ip, 'Required. Please provide an IP address')
+    then: () => {
+      // Per-item schema for VIPs (apiVips[*].ip / ingressVips[*].ip)
+      // 1) Require value once set
+      // 2) Validate IP without suffix
+      // 3) Ensure VIP family matches machineNetworks[idx] family
+      // 4) Validate range vs selected subnets
+      // 5) No broadcast/network address
+      // 6) Uniqueness across API/Ingress
+      const vipFamilyMatchSchema = Yup.string().test(
+        'vip-family-match-machine-network',
+        'IP family must match the corresponding machine network family.',
+        function (value?: string) {
+          if (!value) {
+            return true;
+          }
+          // this.path looks like: "apiVips[0].ip" or "ingressVips[1].ip"
+          const path = this.path || '';
+          const match = path.match(/\[(\d+)\]/);
+          const index = match ? parseInt(match[1], 10) : NaN;
+          if (Number.isNaN(index)) {
+            return true;
+          }
+          const cidr = values.machineNetworks?.[index]?.cidr || '';
+          const mnIsV4 = isCIDR.v4(cidr);
+          const mnIsV6 = isCIDR.v6(cidr);
+          // If machine network at index is not selected/valid, don't block validation here
+          if (!mnIsV4 && !mnIsV6) {
+            return true;
+          }
+          const ipIsV4 = isIPv4Address(value);
+          const ipIsV6 = isIPv6Address(value);
+          if (!ipIsV4 && !ipIsV6) {
+            return true;
+          }
+          return mnIsV4 ? ipIsV4 : ipIsV6;
+        },
+      );
+
+      return requiredOnceSet(head(initialValues)?.ip, 'Required. Please provide an IP address')
         .concat(ipNoSuffixValidationSchema)
+        .concat(vipFamilyMatchSchema)
         .concat(vipRangeValidationSchema(hostSubnets, values, false))
         .concat(vipBroadcastValidationSchema(values))
-        .concat(vipUniqueValidationSchema(values, true)),
+        .concat(vipUniqueValidationSchema(values, true));
+    },
   });
 
 export const vipArrayValidationSchema = <T extends Yup.Maybe<Yup.AnyObject>>(
@@ -324,11 +373,39 @@ export const vipArrayValidationSchema = <T extends Yup.Maybe<Yup.AnyObject>>(
         }),
       )
     : Yup.array<T>()
-  ).test(
-    'vips-length',
-    'Both API and ingress APIs must be provided.',
-    (_value) => values.apiVips?.length === values.ingressVips?.length,
-  );
+  )
+    .test(
+      'vips-length',
+      'Both API and ingress APIs must be provided.',
+      (_value) => values.apiVips?.length === values.ingressVips?.length,
+    )
+    .test(
+      'vips-match-machine-networks',
+      'Primary API and Ingress IPs must match the primary machine network family; secondary must match the secondary machine network family.',
+      (_vips?: { ip?: string }[]) => {
+        const machineNetworks = values.machineNetworks || [];
+        const validateIndex = (idx: number) => {
+          const cidr = machineNetworks[idx]?.cidr || '';
+          const mIsIpv4 = isCIDR.v4(cidr);
+          const mIsIpv6 = isCIDR.v6(cidr);
+          if (!mIsIpv4 && !mIsIpv6) {
+            return true;
+          }
+          const api = values.apiVips?.[idx]?.ip || '';
+          const ing = values.ingressVips?.[idx]?.ip || '';
+          if (!api || !ing) {
+            return true;
+          }
+          const apiOk = mIsIpv4 ? isIPv4Address(api) : isIPv6Address(api);
+          const ingOk = mIsIpv4 ? isIPv4Address(ing) : isIPv6Address(ing);
+          return apiOk && ingOk;
+        };
+
+        const primaryOk = validateIndex(0);
+        const secondaryOk = validateIndex(1);
+        return primaryOk && secondaryOk;
+      },
+    );
 
 export const ipBlockValidationSchema = (reservedCidrs: string | string[] | undefined) =>
   Yup.string()
@@ -440,11 +517,11 @@ export const hostPrefixValidationSchema = (
   const errorMsgIPv4 = `${errorMsgPrefix} (${netBlockNumber}) and 25.`;
   const errorMsgIPv6 = `${errorMsgPrefix} (8) and 128.`;
 
-  if (Address6.isValid(clusterNetworkCidr || '')) {
+  if (isCIDR.v6(clusterNetworkCidr || '')) {
     return Yup.number().required(requiredText).min(8, errorMsgIPv6).max(128, errorMsgIPv6);
   }
 
-  if (Address4.isValid(clusterNetworkCidr || '')) {
+  if (isCIDR.v4(clusterNetworkCidr || '')) {
     return Yup.number()
       .required(requiredText)
       .min(netBlockNumber, errorMsgIPv4)
@@ -715,13 +792,52 @@ export const dualStackValidationSchema = (field: string, openshiftVersion?: stri
       (values?: { cidr: MachineNetwork['cidr'] }[]): boolean => {
         // For OCP versions > 4.11, allow IPv6 as primary network
         if (openshiftVersion && isMajorMinorVersionEqualOrGreater(openshiftVersion, '4.12')) {
-          return (
-            !!values?.[0].cidr &&
-            (Address4.isValid(values[0].cidr) || Address6.isValid(values[0].cidr))
-          );
+          return !!values?.[0].cidr && (isCIDR.v4(values[0].cidr) || isCIDR.v6(values[0].cidr));
         }
         // For older versions, require IPv4 as primary network
-        return !!values?.[0].cidr && Address4.isValid(values[0].cidr);
+        return !!values?.[0].cidr && isCIDR.v4(values[0].cidr);
+      },
+    )
+    .test(
+      'dual-stack-unique-cidrs',
+      `Provided ${field} subnets must be unique.`,
+      (values?: { cidr?: MachineNetwork['cidr'] }[]) => {
+        if (!values || values.length < 2) {
+          return true;
+        }
+        const first = values[0]?.cidr || '';
+        const second = values[1]?.cidr || '';
+        if (!first || !second) {
+          return true;
+        }
+        const firstIsCidr = isCIDR.v4(first) || isCIDR.v6(first);
+        const secondIsCidr = isCIDR.v4(second) || isCIDR.v6(second);
+        if (!firstIsCidr || !secondIsCidr) {
+          return true;
+        }
+        return first !== second;
+      },
+    )
+    .test(
+      'dual-stack-opposite-families',
+      `When two ${field} are provided, one must be IPv4 and the other IPv6.`,
+      (values?: { cidr?: MachineNetwork['cidr'] }[]) => {
+        if (!values || values.length < 2) {
+          return true;
+        }
+        const a = values[0]?.cidr || '';
+        const b = values[1]?.cidr || '';
+        if (!a || !b) {
+          return true;
+        }
+        const a4 = isCIDR.v4(a);
+        const a6 = isCIDR.v6(a);
+        const b4 = isCIDR.v4(b);
+        const b6 = isCIDR.v6(b);
+        if (!((a4 || a6) && (b4 || b6))) {
+          return true;
+        }
+        return (a4 && b6) || (a6 && b4);
       },
     );
 

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

@@ -8,7 +8,6 @@ import {
   Grid,
 } from '@patternfly/react-core';
 import { FieldArray, useFormikContext } from 'formik';
-import { Address6 } from 'ip-address';
 import {
   DUAL_STACK,
   PREFIX_MAX_RESTRICTION,
@@ -33,62 +32,10 @@ const serviceCidrHelperText =
   'Enter only 1 IP address pool. If you need to access the services from an external network, configure load balancers and routers to manage the traffic.';
 
 const AdvancedNetworkFields = () => {
-  const { values, errors, setFieldValue } = useFormikContext<NetworkConfigurationValues>();
+  const { values, errors } = useFormikContext<NetworkConfigurationValues>();
 
   const isDualStack = values.stackType === DUAL_STACK;
 
-  // Reorder Cluster Networks and Service Networks when Machine Network primary changes
-  React.useEffect(() => {
-    if (!isDualStack || !values.machineNetworks?.[0]?.cidr) return;
-
-    const primaryMachineNetworkCidr = values.machineNetworks[0].cidr;
-    const isPrimaryIPv6 = Address6.isValid(primaryMachineNetworkCidr);
-
-    // Check Cluster Networks
-    if (values.clusterNetworks && values.clusterNetworks.length >= 2) {
-      const firstClusterCidr = values.clusterNetworks[0].cidr;
-      if (!firstClusterCidr) return;
-
-      const isFirstClusterIPv6 = Address6.isValid(firstClusterCidr);
-
-      // If primary machine is IPv6 but first cluster is IPv4, swap them
-      if (isPrimaryIPv6 && !isFirstClusterIPv6) {
-        const reordered = [values.clusterNetworks[1], values.clusterNetworks[0]];
-        setFieldValue('clusterNetworks', reordered, false);
-      }
-      // If primary machine is IPv4 but first cluster is IPv6, swap them
-      else if (!isPrimaryIPv6 && isFirstClusterIPv6) {
-        const reordered = [values.clusterNetworks[1], values.clusterNetworks[0]];
-        setFieldValue('clusterNetworks', reordered, false);
-      }
-    }
-
-    // Check Service Networks
-    if (values.serviceNetworks && values.serviceNetworks.length >= 2) {
-      const firstServiceCidr = values.serviceNetworks[0].cidr;
-      if (!firstServiceCidr) return;
-
-      const isFirstServiceIPv6 = Address6.isValid(firstServiceCidr);
-
-      // If primary machine is IPv6 but first service is IPv4, swap them
-      if (isPrimaryIPv6 && !isFirstServiceIPv6) {
-        const reordered = [values.serviceNetworks[1], values.serviceNetworks[0]];
-        setFieldValue('serviceNetworks', reordered, false);
-      }
-      // If primary machine is IPv4 but first service is IPv6, swap them
-      else if (!isPrimaryIPv6 && isFirstServiceIPv6) {
-        const reordered = [values.serviceNetworks[1], values.serviceNetworks[0]];
-        setFieldValue('serviceNetworks', reordered, false);
-      }
-    }
-  }, [
-    isDualStack,
-    values.machineNetworks,
-    values.clusterNetworks,
-    values.serviceNetworks,
-    setFieldValue,
-  ]);
-
   const clusterNetworkCidrPrefix = (index: number) =>
     parseInt(
       ((values.clusterNetworks && values.clusterNetworks[index].cidr) || '').split('/')[1],

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

@@ -13,6 +13,7 @@ import {
 } from '../../../../common';
 import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
 import { SubnetsDropdown } from './SubnetsDropdown';
+import { reorderNetworksForPrimary } from './reorderNetworks';
 import { Cluster, MachineNetwork } from '@openshift-assisted/types/assisted-installer-service';
 
 const subnetSort = (subA: HostSubnet, subB: HostSubnet) =>
@@ -26,7 +27,7 @@ const useAutoSelectSingleAvailableSubnet = (
 ) => {
   useEffect(() => {
     if (autoSelectNetwork) {
-      setFieldValue('machineNetworks', [{ cidr, clusterId }], true);
+      setFieldValue('machineNetworks', [{ cidr, clusterId }], false);
     }
   }, [autoSelectNetwork, cidr, clusterId, setFieldValue]);
 };
@@ -72,6 +73,41 @@ export const AvailableSubnetsControl = ({
   const autoSelectNetwork = !isViewerMode && hasEmptySelection;
   useAutoSelectSingleAvailableSubnet(autoSelectNetwork, setFieldValue, cidr, clusterId);
 
+  // Ensure primary and secondary machine networks are not duplicated.
+  // If the user switches primary to the same CIDR as secondary, adjust secondary to the opposite family or clear it.
+  React.useEffect(() => {
+    if (!isDualStack) {
+      return;
+    }
+    if (!values.machineNetworks || values.machineNetworks.length < 2) {
+      return;
+    }
+    const first = values.machineNetworks?.[0]?.cidr || '';
+    const second = values.machineNetworks?.[1]?.cidr || '';
+    if (!first || !second) {
+      return;
+    }
+    if (first === second) {
+      if (Address6.isValid(first)) {
+        const nextIPv4 = IPv4Subnets[0]?.subnet || NO_SUBNET_SET;
+        const replacement = nextIPv4 !== first ? nextIPv4 : NO_SUBNET_SET;
+        if (replacement !== second) {
+          setFieldValue('machineNetworks.1.cidr', replacement, false);
+        }
+      } else if (Address4.isValid(first)) {
+        const nextIPv6 = IPv6Subnets[0]?.subnet || NO_SUBNET_SET;
+        const replacement = nextIPv6 !== first ? nextIPv6 : NO_SUBNET_SET;
+        if (replacement !== second) {
+          setFieldValue('machineNetworks.1.cidr', replacement, false);
+        }
+      } else {
+        if (second !== NO_SUBNET_SET) {
+          setFieldValue('machineNetworks.1.cidr', NO_SUBNET_SET, false);
+        }
+      }
+    }
+  }, [isDualStack, values.machineNetworks, IPv4Subnets, IPv6Subnets, setFieldValue]);
+
   return (
     <>
       <FormGroup
@@ -95,6 +131,9 @@ export const AvailableSubnetsControl = ({
                         name={`machineNetworks.${index}.cidr`}
                         machineSubnets={machineSubnets}
                         isDisabled={isDisabled}
+                        onAfterSelect={(newSelection) =>
+                          reorderNetworksForPrimary(newSelection, values, setFieldValue)
+                        }
                         data-testid={`subnets-dropdown-toggle-${index ? 'ipv6' : 'ipv4'}`}
                       />
                     </StackItem>
@@ -106,6 +145,9 @@ export const AvailableSubnetsControl = ({
                     name={`machineNetworks.0.cidr`}
                     machineSubnets={IPv4Subnets}
                     isDisabled={isDisabled}
+                    onAfterSelect={(newSelection) =>
+                      reorderNetworksForPrimary(newSelection, values, setFieldValue)
+                    }
                     data-testid={'subnets-dropdown-toggle-primary'}
                   />
                 </StackItem>

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

@@ -18,6 +18,7 @@ import { ConfirmationModal, PopoverIcon } from '../../../../common/components/ui
 import { useDefaultConfiguration } from '../ClusterDefaultConfigurationContext';
 import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
 import { OcmRadioField } from '../../ui/OcmFormFields';
+import { reorderNetworksByCurrentPrimary } from './reorderNetworks';
 import {
   Cluster,
   ClusterNetwork,
@@ -68,11 +69,12 @@ export const StackTypeControlGroup = ({
   const setSingleStack = React.useCallback(() => {
     setFieldValue('stackType', IPV4_STACK);
 
+    // Determine whether the first machine network is IPv4
+    const firstNetwork = values.machineNetworks?.[0];
+    const isFirstIPv4 = Boolean(firstNetwork?.cidr && Address4.isValid(firstNetwork.cidr));
+
     if (values.machineNetworks && values.machineNetworks?.length >= 2) {
       // For single-stack IPv4, prefer IPv4 machine network
-      const firstNetwork = values.machineNetworks[0];
-      const isFirstIPv4 = firstNetwork?.cidr && Address4.isValid(firstNetwork.cidr);
-
       if (isFirstIPv4) {
         // Keep the first network if it's IPv4
         setFieldValue('machineNetworks', [firstNetwork]);
@@ -123,6 +125,24 @@ export const StackTypeControlGroup = ({
       setFieldValue('serviceNetworks', [ipv4Service]);
     }
 
+    // Keep only IPv4 VIPs when switching to single-stack (unless DHCP allocation is used)
+    if (!values.vipDhcpAllocation) {
+      const pruneVips = (
+        vips?: { ip?: string; clusterId?: Cluster['id'] }[],
+      ): { ip: string; clusterId: Cluster['id'] }[] => {
+        if (!vips || vips.length === 0) return [];
+        // Choose which index to keep based on whether the first network is IPv4
+        const keepIndex = isFirstIPv4 ? 0 : 1;
+        const chosen = vips[keepIndex];
+        return chosen && chosen.ip
+          ? [{ ip: chosen.ip, clusterId: chosen.clusterId || clusterId }]
+          : [];
+      };
+
+      setFieldValue('apiVips', pruneVips(values.apiVips));
+      setFieldValue('ingressVips', pruneVips(values.ingressVips));
+    }
+
     void validateForm();
   }, [
     setFieldValue,
@@ -133,6 +153,9 @@ export const StackTypeControlGroup = ({
     values.clusterNetworks,
     values.machineNetworks,
     values.serviceNetworks,
+    values.apiVips,
+    values.ingressVips,
+    values.vipDhcpAllocation,
   ]);
 
   const setDualStack = () => {
@@ -193,6 +216,8 @@ export const StackTypeControlGroup = ({
         false,
       );
     }
+    // Ensure cluster/service networks ordering matches the new primary family
+    reorderNetworksByCurrentPrimary(values, setFieldValue);
   };
 
   const setStackType = (e: React.ChangeEvent<HTMLInputElement>) => {

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

@@ -22,6 +22,7 @@ type SubnetsDropdownProps = {
   name: string;
   machineSubnets: HostSubnet[];
   isDisabled: boolean;
+  onAfterSelect?: (selectedValue: string) => void;
 };
 
 const toFormSelectOptions = (subnets: HostSubnet[]) => {
@@ -51,6 +52,7 @@ export const SubnetsDropdown = ({
   name,
   machineSubnets,
   isDisabled,
+  onAfterSelect,
   ...props
 }: SubnetsDropdownProps & MenuToggleProps) => {
   const [field, , { setValue }] = useField(name);
@@ -142,8 +144,12 @@ export const SubnetsDropdown = ({
   }, [machineSubnets, ipv4Subnets, ipv6Subnets, itemsSubnets]);
 
   const onSelect = (event?: React.MouseEvent<Element, MouseEvent>): void => {
-    setValue(event?.currentTarget.id);
+    const nextValue = event?.currentTarget.id;
+    setValue(nextValue);
     setOpen(false);
+    if (onAfterSelect && nextValue) {
+      onAfterSelect(nextValue);
+    }
   };
 
   const currentItem = itemsSubnets.find((i) => i.label === currentDisplayValue);

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

@@ -34,7 +34,7 @@ export const getNetworkInitialValues = (
   isClusterManagedNetworkingUnsupported: boolean,
 ): NetworkConfigurationValues => {
   const isSNOCluster = isSNO(cluster);
-  const isDualStackType = isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion });
+  const isDualStackType = isDualStack(cluster);
 
   return {
     apiVips: cluster.apiVips,
@@ -74,17 +74,9 @@ export const getNetworkConfigurationValidationSchema = (
   hostSubnets: HostSubnets,
   openshiftVersion?: string,
 ) =>
-  Yup.lazy((values: NetworkConfigurationValues) => {
-    const apiVipSchema =
-      values.stackType === DUAL_STACK
-        ? vipArrayValidationSchema<ApiVip>(hostSubnets, values, initialValues.apiVips).min(
-            2,
-            'Provide both Primary and Secondary API IPs.',
-          )
-        : vipArrayValidationSchema<ApiVip>(hostSubnets, values, initialValues.apiVips);
-
-    return Yup.object<NetworkConfigurationValues>().shape({
-      apiVips: apiVipSchema,
+  Yup.lazy((values: NetworkConfigurationValues) =>
+    Yup.object<NetworkConfigurationValues>().shape({
+      apiVips: vipArrayValidationSchema<ApiVip>(hostSubnets, values, initialValues.apiVips),
       ingressVips: vipArrayValidationSchema<IngressVip>(
         hostSubnets,
         values,
@@ -124,5 +116,5 @@ export const getNetworkConfigurationValidationSchema = (
               )
             : Yup.array(),
       }),
-    });
-  });
+    }),
+  );

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

@@ -0,0 +1,72 @@
+import { Address6 } from 'ip-address';
+import { DUAL_STACK, NetworkConfigurationValues } from '../../../../common';
+import type { FormikHelpers } from 'formik';
+
+const reorderByPrimaryCidr = (
+  primaryCidr: string,
+  values: NetworkConfigurationValues,
+  setFieldValue: FormikHelpers<NetworkConfigurationValues>['setFieldValue'],
+) => {
+  const isDualStack = values.stackType === DUAL_STACK;
+  if (!isDualStack || !primaryCidr) return;
+
+  const isPrimaryIPv6 = Address6.isValid(primaryCidr);
+
+  // Reorder Cluster Networks
+  if (Array.isArray(values.clusterNetworks) && values.clusterNetworks.length >= 2) {
+    const [first, second] = values.clusterNetworks;
+    const firstClusterCidr = first?.cidr;
+    const secondClusterCidr = second?.cidr;
+    if (firstClusterCidr && secondClusterCidr) {
+      const isFirstClusterIPv6 = Address6.isValid(firstClusterCidr);
+      const isSecondClusterIPv6 = Address6.isValid(secondClusterCidr);
+      if (isFirstClusterIPv6 !== isSecondClusterIPv6) {
+        if (
+          (isPrimaryIPv6 && !isFirstClusterIPv6 && isSecondClusterIPv6) ||
+          (!isPrimaryIPv6 && isFirstClusterIPv6 && !isSecondClusterIPv6)
+        ) {
+          const reordered = [values.clusterNetworks[1], values.clusterNetworks[0]];
+          setFieldValue('clusterNetworks', reordered, false);
+        }
+      }
+    }
+  }
+
+  // Reorder Service Networks
+  if (Array.isArray(values.serviceNetworks) && values.serviceNetworks.length >= 2) {
+    const [first, second] = values.serviceNetworks;
+    const firstServiceCidr = first?.cidr;
+    const secondServiceCidr = second?.cidr;
+    if (firstServiceCidr && secondServiceCidr) {
+      const isFirstServiceIPv6 = Address6.isValid(firstServiceCidr);
+      const isSecondServiceIPv6 = Address6.isValid(secondServiceCidr);
+      if (isFirstServiceIPv6 !== isSecondServiceIPv6) {
+        if (
+          (isPrimaryIPv6 && !isFirstServiceIPv6 && isSecondServiceIPv6) ||
+          (!isPrimaryIPv6 && isFirstServiceIPv6 && !isSecondServiceIPv6)
+        ) {
+          const reordered = [values.serviceNetworks[1], values.serviceNetworks[0]];
+          setFieldValue('serviceNetworks', reordered, false);
+        }
+      }
+    }
+  }
+};
+
+export const reorderNetworksForPrimary = (
+  nextPrimaryCidr: string,
+  values: NetworkConfigurationValues,
+  setFieldValue: FormikHelpers<NetworkConfigurationValues>['setFieldValue'],
+) => {
+  if (!nextPrimaryCidr) return;
+  reorderByPrimaryCidr(nextPrimaryCidr, values, setFieldValue);
+};
+
+export const reorderNetworksByCurrentPrimary = (
+  values: NetworkConfigurationValues,
+  setFieldValue: FormikHelpers<NetworkConfigurationValues>['setFieldValue'],
+) => {
+  const primaryCidr = values.machineNetworks?.[0]?.cidr;
+  if (!primaryCidr) return;
+  reorderByPrimaryCidr(primaryCidr, values, setFieldValue);
+};

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

@@ -1,12 +1,7 @@
 import { Title } from '@patternfly/react-core';
 import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
 import React from 'react';
-import {
-  genericTableRowKey,
-  isDualStack,
-  selectApiVip,
-  selectIngressVip,
-} from '../../../../common';
+import { genericTableRowKey, isDualStack } from '../../../../common';
 import {
   getManagementType,
   getStackTypeLabel,
@@ -58,7 +53,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'machine-networks' },
           },
-          isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion })
+          isDualStack(cluster)
             ? {
                 title: cluster.machineNetworks?.map((network, index) => (
                   <span key={network.cidr}>
@@ -78,9 +73,24 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
         cells: [
           { title: 'API IP' },
           {
-            title: selectApiVip(cluster),
-            props: { 'data-testid': 'api-vip', colSpan: 2 },
+            title: cluster.apiVips?.map((apiVip) => (
+              <span key={apiVip.ip}>
+                {apiVip.ip}
+                <br />
+              </span>
+            )),
+            props: { 'data-testid': 'api-vip' },
           },
+          isDualStack(cluster)
+            ? {
+                title: cluster.apiVips?.map((apiVip, index) => (
+                  <span key={apiVip.ip}>
+                    {index === 0 ? 'Primary' : 'Secondary'}
+                    <br />
+                  </span>
+                )),
+              }
+            : { title: '' },
         ],
       });
 
@@ -91,9 +101,24 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
         cells: [
           { title: 'Ingress IP' },
           {
-            title: selectIngressVip(cluster),
-            props: { 'data-testid': 'ingress-vip', colSpan: 2 },
+            title: cluster.ingressVips?.map((ingressVip) => (
+              <span key={ingressVip.ip}>
+                {ingressVip.ip}
+                <br />
+              </span>
+            )),
+            props: { 'data-testid': 'ingress-vip' },
           },
+          isDualStack(cluster)
+            ? {
+                title: cluster.ingressVips?.map((ingressVip, index) => (
+                  <span key={ingressVip.ip}>
+                    {index === 0 ? 'Primary' : 'Secondary'}
+                    <br />
+                  </span>
+                )),
+              }
+            : { title: '' },
         ],
       });
 
@@ -115,7 +140,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'cluster-network-cidr' },
           },
-          isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion }) && {
+          isDualStack(cluster) && {
             title: cluster.clusterNetworks?.map((network, index) => (
               <span key={network.cidr}>
                 {index === 0 ? 'Primary' : 'Secondary'}
@@ -138,7 +163,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'cluster-network-prefix' },
           },
-          isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion }) && {
+          isDualStack(cluster) && {
             title: cluster.clusterNetworks?.map((network, index) => (
               <span key={network.hostPrefix}>
                 {index === 0 ? 'Primary' : 'Secondary'}
@@ -161,7 +186,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'service-network-cidr' },
           },
-          isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion }) && {
+          isDualStack(cluster) && {
             title: cluster.serviceNetworks?.map((network, index) => (
               <span key={network.cidr}>
                 {index === 0 ? 'Primary' : 'Secondary'}

package/lib/ocm/components/clusterDetail/ClusterProperties.tsx

@@ -41,7 +41,7 @@ export const getManagementType = ({ userManagedNetworking }: Cluster): string =>
 };
 
 export const getStackTypeLabel = (cluster: Cluster): string =>
-  isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion }) ? 'Dual-stack' : 'IPv4';
+  isDualStack(cluster) ? 'Dual-stack' : 'IPv4';
 
 export const getDiskEncryptionEnabledOnStatus = (diskEncryption: DiskEncryption['enableOn']) => {
   let diskEncryptionType = null;
@@ -67,7 +67,7 @@ export const getDiskEncryptionEnabledOnStatus = (diskEncryption: DiskEncryption[
 
 const ClusterProperties = ({ cluster, externalMode = false }: ClusterPropertiesProps) => {
   const { t } = useTranslation();
-  const isDualStackType = isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion });
+  const isDualStackType = isDualStack(cluster);
   const featureSupportLevelContext = useNewFeatureSupportLevel();
 
   const activeFeatureConfiguration = featureSupportLevelContext.activeFeatureConfiguration;