@openshift-assisted/ui-lib 2.46.3 → 2.47.1

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

@@ -9,6 +9,7 @@ import {
   NetworkConfigurationValues,
   DUAL_STACK,
   NO_SUBNET_SET,
+  isMajorMinorVersionEqualOrGreater,
 } from '../../../../common';
 import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
 import { SubnetsDropdown } from './SubnetsDropdown';
@@ -35,6 +36,7 @@ export interface AvailableSubnetsControlProps {
   hostSubnets: HostSubnet[];
   isRequired: boolean;
   isDisabled: boolean;
+  openshiftVersion?: string;
 }
 
 export const AvailableSubnetsControl = ({
@@ -42,11 +44,16 @@ export const AvailableSubnetsControl = ({
   hostSubnets,
   isRequired = false,
   isDisabled,
+  openshiftVersion,
 }: AvailableSubnetsControlProps) => {
   const { values, errors, setFieldValue } = useFormikContext<NetworkConfigurationValues>();
   const isDualStack = values.stackType === DUAL_STACK;
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
 
+  // Check if OCP version supports IPv6 as primary network
+  const supportsIPv6Primary =
+    openshiftVersion && isMajorMinorVersionEqualOrGreater(openshiftVersion, '4.12');
+
   const IPv4Subnets = hostSubnets
     .filter((subnet) => Address4.isValid(subnet.subnet))
     .sort(subnetSort);
@@ -54,53 +61,106 @@ export const AvailableSubnetsControl = ({
     .filter((subnet) => Address6.isValid(subnet.subnet))
     .sort(subnetSort);
 
+  // For OCP >= 4.12, both networks can use either IPv4 or IPv6
+  const allSubnets = supportsIPv6Primary
+    ? [...IPv4Subnets, ...IPv6Subnets].sort(subnetSort)
+    : IPv4Subnets;
+
+  // For auto-selection, always use IPv4 subnets for single-stack
   const cidr = IPv4Subnets.length >= 1 ? IPv4Subnets[0].subnet : NO_SUBNET_SET;
   const hasEmptySelection = (values.machineNetworks ?? []).length === 0;
   const autoSelectNetwork = !isViewerMode && hasEmptySelection;
   useAutoSelectSingleAvailableSubnet(autoSelectNetwork, setFieldValue, cidr, clusterId);
 
   return (
-    <FormGroup
-      label="Machine network"
-      labelInfo={isDualStack && 'Primary'}
-      fieldId="machine-networks"
-      isRequired={isRequired}
-    >
-      <FieldArray name="machineNetworks">
-        {() => (
-          <Stack>
-            {isDualStack ? (
-              values.machineNetworks?.map((_machineNetwork, index) => {
-                const machineSubnets = index === 1 ? IPv6Subnets : IPv4Subnets;
-
-                return (
-                  <StackItem key={index}>
-                    <SubnetsDropdown
-                      name={`machineNetworks.${index}.cidr`}
-                      machineSubnets={machineSubnets}
-                      isDisabled={isDisabled}
-                      data-testid={`subnets-dropdown-toggle-${index ? 'ipv6' : 'ipv4'}`}
-                    />
-                  </StackItem>
-                );
-              })
-            ) : (
-              <StackItem>
+    <>
+      <FormGroup
+        label="Machine network"
+        labelInfo={isDualStack && 'Primary'}
+        fieldId="machine-networks"
+        isRequired={isRequired}
+      >
+        <FieldArray name="machineNetworks">
+          {() => (
+            <Stack>
+              {isDualStack ? (
+                values.machineNetworks?.map((machineNetwork, index) => {
+                  if (index > 0) return null;
+
+                  const machineSubnets = supportsIPv6Primary ? allSubnets : IPv4Subnets;
+
+                  return (
+                    <StackItem key={index}>
+                      <SubnetsDropdown
+                        name={`machineNetworks.${index}.cidr`}
+                        machineSubnets={machineSubnets}
+                        isDisabled={isDisabled}
+                        data-testid={`subnets-dropdown-toggle-${index ? 'ipv6' : 'ipv4'}`}
+                      />
+                    </StackItem>
+                  );
+                })
+              ) : (
+                <StackItem>
+                  <SubnetsDropdown
+                    name={`machineNetworks.0.cidr`}
+                    machineSubnets={IPv4Subnets}
+                    isDisabled={isDisabled}
+                    data-testid={'subnets-dropdown-toggle-primary'}
+                  />
+                </StackItem>
+              )}
+            </Stack>
+          )}
+        </FieldArray>
+
+        {typeof errors.machineNetworks === 'string' && (
+          <Alert variant={AlertVariant.warning} title={errors.machineNetworks} isInline />
+        )}
+      </FormGroup>
+
+      {isDualStack && values.machineNetworks && values.machineNetworks.length > 1 && (
+        <FormGroup
+          label="Machine network"
+          labelInfo="Secondary"
+          fieldId="machine-networks-secondary"
+          isRequired={isRequired}
+        >
+          <FieldArray name="machineNetworks">
+            {() => {
+              const index = 1;
+              let machineSubnets;
+
+              if (supportsIPv6Primary) {
+                // For OCP >= 4.12, smart filtering based on the other network's selection
+                const firstNetworkCidr = values.machineNetworks?.[0]?.cidr;
+                if (firstNetworkCidr && Address6.isValid(firstNetworkCidr)) {
+                  // If first is IPv6, second should be IPv4
+                  machineSubnets = IPv4Subnets;
+                } else if (firstNetworkCidr && Address4.isValid(firstNetworkCidr)) {
+                  // If first is IPv4, second should be IPv6
+                  machineSubnets = IPv6Subnets;
+                } else {
+                  // If first is not selected yet, show all subnets
+                  machineSubnets = allSubnets;
+                }
+              } else {
+                // For older versions, second network is IPv6
+                machineSubnets = IPv6Subnets;
+              }
+
+              return (
                 <SubnetsDropdown
-                  name={`machineNetworks.0.cidr`}
-                  machineSubnets={IPv4Subnets}
+                  name={`machineNetworks.${index}.cidr`}
+                  machineSubnets={machineSubnets}
                   isDisabled={isDisabled}
-                  data-testid={'subnets-dropdown-toggle-ipv4'}
+                  data-testid={`subnets-dropdown-toggle-${index ? 'ipv6' : 'ipv4'}`}
                 />
-              </StackItem>
-            )}
-          </Stack>
-        )}
-      </FieldArray>
-
-      {typeof errors.machineNetworks === 'string' && (
-        <Alert variant={AlertVariant.warning} title={errors.machineNetworks} isInline />
+              );
+            }}
+          </FieldArray>
+        </FormGroup>
       )}
-    </FormGroup>
+    </>
   );
 };

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

@@ -224,10 +224,10 @@ const NetworkConfiguration = ({
   );
 
   React.useEffect(() => {
-    if (!isViewerMode && isDualStack && !isUserManagedNetworking) {
+    if (!isViewerMode && isDualStack) {
       toggleAdvConfiguration(true);
     }
-  }, [isDualStack, isUserManagedNetworking, isViewerMode, toggleAdvConfiguration]);
+  }, [isDualStack, isViewerMode, toggleAdvConfiguration]);
 
   const managedNetworkingState = React.useMemo(
     () =>
@@ -292,6 +292,7 @@ const NetworkConfiguration = ({
               hostSubnets.length === 0 ||
               false
             }
+            openshiftVersion={cluster.openshiftVersion}
           />
         </StackItem>
       )}

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

@@ -200,8 +200,9 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
   );
 
   const memoizedValidationSchema = React.useMemo(
-    () => getNetworkConfigurationValidationSchema(initialValues, hostSubnets),
-    [hostSubnets, initialValues],
+    () =>
+      getNetworkConfigurationValidationSchema(initialValues, hostSubnets, cluster.openshiftVersion),
+    [hostSubnets, initialValues, cluster.openshiftVersion],
   );
 
   React.useEffect(() => {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { ButtonVariant, FormGroup, Split, SplitItem, Tooltip } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
-import { Address6 } from 'ip-address';
+import { Address4, Address6 } from 'ip-address';
 
 import {
   HostSubnets,
@@ -69,19 +69,67 @@ export const StackTypeControlGroup = ({
     setFieldValue('stackType', IPV4_STACK);
 
     if (values.machineNetworks && values.machineNetworks?.length >= 2) {
-      setFieldValue('machineNetworks', values.machineNetworks.slice(0, 1));
+      // 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]);
+      } else {
+        // If first is IPv6, look for IPv4 network or set empty for auto-selection
+        const ipv4Network = values.machineNetworks.find(
+          (network) => network.cidr && Address4.isValid(network.cidr),
+        );
+        if (ipv4Network) {
+          setFieldValue('machineNetworks', [ipv4Network]);
+        } else {
+          // No IPv4 network found, set empty for auto-selection
+          setFieldValue('machineNetworks', []);
+        }
+      }
     }
-    if (values.clusterNetworks && values.clusterNetworks?.length >= 2) {
-      setFieldValue('clusterNetworks', values.clusterNetworks.slice(0, 1));
+    // Ensure single-stack inputs are IPv4 after switching from dual-stack
+    if (values.clusterNetworks && values.clusterNetworks.length >= 1) {
+      const defaultCluster =
+        defaultNetworkValues.clusterNetworksIpv4 && defaultNetworkValues.clusterNetworksIpv4[0];
+      const firstCluster = values.clusterNetworks[0];
+      const ipv4Cluster = defaultCluster
+        ? {
+            cidr: defaultCluster.cidr,
+            hostPrefix: defaultCluster.hostPrefix,
+            clusterId: firstCluster.clusterId, // ← Preserve clusterId from original network
+          }
+        : {
+            cidr: '',
+            hostPrefix: '',
+            clusterId: clusterId, // ← Use current clusterId
+          };
+      setFieldValue('clusterNetworks', [ipv4Cluster]);
     }
-    if (values.serviceNetworks && values.serviceNetworks?.length >= 2) {
-      setFieldValue('serviceNetworks', values.serviceNetworks.slice(0, 1));
+    if (values.serviceNetworks && values.serviceNetworks.length >= 1) {
+      const defaultService =
+        defaultNetworkValues.serviceNetworksIpv4 && defaultNetworkValues.serviceNetworksIpv4[0];
+      const firstService = values.serviceNetworks[0];
+      const ipv4Service = defaultService
+        ? {
+            cidr: defaultService.cidr,
+            clusterId: firstService.clusterId, // ← Preserve clusterId from original network
+          }
+        : {
+            cidr: '',
+            clusterId: clusterId, // ← Use current clusterId
+          };
+      setFieldValue('serviceNetworks', [ipv4Service]);
     }
 
     void validateForm();
   }, [
     setFieldValue,
     validateForm,
+    clusterId,
+    defaultNetworkValues.clusterNetworksIpv4,
+    defaultNetworkValues.serviceNetworksIpv4,
     values.clusterNetworks,
     values.machineNetworks,
     values.serviceNetworks,
@@ -96,11 +144,30 @@ export const StackTypeControlGroup = ({
     }
 
     if (values.machineNetworks && values.machineNetworks?.length < 2) {
-      setFieldValue(
-        'machineNetworks',
-        [...values.machineNetworks, { cidr: cidrIPv6, clusterId: clusterId }],
-        false,
-      );
+      // Ensure IPv4 is primary when switching to dual-stack
+      const firstNetwork = values.machineNetworks[0];
+      const isFirstIPv6 = firstNetwork?.cidr && Address6.isValid(firstNetwork.cidr);
+
+      if (isFirstIPv6) {
+        // If first network is IPv6, make IPv4 primary and IPv6 secondary
+        const IPv4Subnets = hostSubnets.filter((subnet) => Address4.isValid(subnet.subnet));
+        const cidrIPv4 = IPv4Subnets.length >= 1 ? IPv4Subnets[0].subnet : NO_SUBNET_SET;
+        setFieldValue(
+          'machineNetworks',
+          [
+            { cidr: cidrIPv4, clusterId: clusterId },
+            { cidr: firstNetwork.cidr, clusterId: clusterId },
+          ],
+          false,
+        );
+      } else {
+        // If first network is IPv4, add IPv6 as secondary
+        setFieldValue(
+          'machineNetworks',
+          [...values.machineNetworks, { cidr: cidrIPv6, clusterId: clusterId }],
+          false,
+        );
+      }
     }
     if (values.clusterNetworks && values.clusterNetworks?.length < 2) {
       setFieldValue(

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

@@ -2,12 +2,21 @@ import React from 'react';
 import {
   Dropdown,
   DropdownItem,
+  DropdownGroup,
   MenuToggle,
   MenuToggleElement,
   MenuToggleProps,
+  Divider,
 } from '@patternfly/react-core';
 import { useField } from 'formik';
-import { getFieldId, HostSubnet, NO_SUBNET_SET } from '../../../../common';
+import {
+  getFieldId,
+  HostSubnet,
+  NO_SUBNET_SET,
+  TechnologyPreview,
+  PreviewBadgePosition,
+} from '../../../../common';
+import { Address4, Address6 } from 'ip-address';
 
 type SubnetsDropdownProps = {
   name: string;
@@ -48,7 +57,7 @@ export const SubnetsDropdown = ({
   const [isOpen, setOpen] = React.useState(false);
   const fieldId = getFieldId(name, 'input');
 
-  const { itemsSubnets, currentDisplayValue } = React.useMemo(() => {
+  const { itemsSubnets, ipv4Subnets, ipv6Subnets, currentDisplayValue } = React.useMemo(() => {
     const itemsSubnets =
       machineSubnets.length === 0
         ? [noSubnetAvailableOption]
@@ -56,7 +65,12 @@ export const SubnetsDropdown = ({
             toFormSelectOptions(machineSubnets),
           );
 
-    let currentDisplayValue = itemsSubnets[0].label; // The placeholder is the fallback
+    // Separate IPv4 and IPv6 subnets
+    const ipv4Subnets = machineSubnets.filter((subnet) => Address4.isValid(subnet.subnet));
+    const ipv6Subnets = machineSubnets.filter((subnet) => Address6.isValid(subnet.subnet));
+
+    let currentDisplayValue =
+      itemsSubnets.length > 1 ? itemsSubnets[1].label : itemsSubnets[0].label; // The placeholder is the fallback in some cases
     if (field.value) {
       const subnetItem = itemsSubnets.find((item) => item.value === field.value);
       if (subnetItem) {
@@ -67,20 +81,74 @@ export const SubnetsDropdown = ({
       currentDisplayValue = itemsSubnets[1].label;
     }
 
-    return { itemsSubnets, currentDisplayValue: currentDisplayValue };
+    return { itemsSubnets, ipv4Subnets, ipv6Subnets, currentDisplayValue: currentDisplayValue };
   }, [machineSubnets, field.value]);
 
-  const dropdownItems = itemsSubnets.map(({ value, label, isDisabled }) => (
-    <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
-      {label}
-    </DropdownItem>
-  ));
+  const dropdownItems = React.useMemo(() => {
+    if (machineSubnets.length === 0) {
+      return [
+        <DropdownItem
+          key={noSubnetAvailableOption.value}
+          id={noSubnetAvailableOption.value}
+          isDisabled={noSubnetAvailableOption.isDisabled}
+          value={noSubnetAvailableOption.value}
+        >
+          {noSubnetAvailableOption.label}
+        </DropdownItem>,
+      ];
+    }
+
+    const hasIpv4 = ipv4Subnets.length > 0;
+    const hasIpv6 = ipv6Subnets.length > 0;
+
+    // If we have both IPv4 and IPv6, group them
+    if (hasIpv4 && hasIpv6) {
+      const ipv4Items = toFormSelectOptions(ipv4Subnets).map(({ value, label, isDisabled }) => (
+        <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
+          {label}
+        </DropdownItem>
+      ));
+      ipv4Items.push(<Divider key="ipv4-divider" />);
+      const ipv6Items = toFormSelectOptions(ipv6Subnets).map(({ value, label, isDisabled }) => (
+        <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
+          {label}
+        </DropdownItem>
+      ));
+
+      return [
+        <DropdownItem
+          key={makeNoSubnetSelectedOption(machineSubnets.length).value}
+          id={makeNoSubnetSelectedOption(machineSubnets.length).value}
+          isDisabled={makeNoSubnetSelectedOption(machineSubnets.length).isDisabled}
+          value={makeNoSubnetSelectedOption(machineSubnets.length).value}
+        >
+          {makeNoSubnetSelectedOption(machineSubnets.length).label}
+        </DropdownItem>,
+        <DropdownGroup label="IPv4" key="ipv4-group">
+          {ipv4Items}
+        </DropdownGroup>,
+        <DropdownGroup label="IPv6 (Technology Preview)" key="ipv6-group">
+          {ipv6Items}
+        </DropdownGroup>,
+      ];
+    }
+
+    // If only one type, don't group
+    return itemsSubnets.map(({ value, label, isDisabled }) => (
+      <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
+        {label}
+      </DropdownItem>
+    ));
+  }, [machineSubnets, ipv4Subnets, ipv6Subnets, itemsSubnets]);
 
   const onSelect = (event?: React.MouseEvent<Element, MouseEvent>): void => {
     setValue(event?.currentTarget.id);
     setOpen(false);
   };
 
+  const currentItem = itemsSubnets.find((i) => i.label === currentDisplayValue);
+  const showBadge = Boolean(currentItem && Address6.isValid(currentItem.value));
+
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
@@ -93,6 +161,11 @@ export const SubnetsDropdown = ({
       {...props}
     >
       {currentDisplayValue}
+      {showBadge && (
+        <span onClick={(e) => e.stopPropagation()}>
+          <TechnologyPreview position={PreviewBadgePosition.inlineRight} />
+        </span>
+      )}
     </MenuToggle>
   );
 
@@ -100,7 +173,7 @@ export const SubnetsDropdown = ({
     <Dropdown
       {...field}
       id={`${fieldId}-dropdown`}
-      onOpenChange={() => setOpen(!isOpen)}
+      onOpenChange={(isOpen: boolean) => setOpen(isOpen)}
       onSelect={onSelect}
       toggle={toggle}
       isOpen={isOpen}

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

@@ -14,9 +14,9 @@ import {
   NetworkConfigurationValues,
   FormikStaticField,
   NETWORK_TYPE_SDN,
+  DUAL_STACK,
   selectMachineNetworkCIDR,
   getVipValidationsById,
-  DUAL_STACK,
   PopoverIcon,
   selectApiVip,
   selectIngressVip,
@@ -25,7 +25,12 @@ import { selectCurrentClusterPermissionsState } from '../../../store/slices/curr
 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';
+import {
+  ApiVip,
+  Cluster,
+  Ip,
+  SupportLevel,
+} from '@openshift-assisted/types/assisted-installer-service';
 
 interface VipStaticValueProps {
   id?: string;
@@ -97,6 +102,7 @@ export const VirtualIPControlGroup = ({
   );
 
   const enableAllocation = values.networkType === NETWORK_TYPE_SDN;
+  const isDualStack = values.stackType === DUAL_STACK;
 
   React.useEffect(() => {
     if (!isViewerMode && !enableAllocation) {
@@ -113,11 +119,22 @@ export const VirtualIPControlGroup = ({
     [cluster.apiVips, cluster.ingressVips, setFieldValue],
   );
 
-  const setVipValue = (field: string, e: React.ChangeEvent<HTMLInputElement>) => {
-    setFieldValue(field, [{ ip: e.target.value, clusterId: cluster.id }], true);
+  const setVipValueAtIndex = (
+    field: 'apiVips' | 'ingressVips',
+    index: number,
+    e: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const fieldArray: ApiVip[] =
+      field === 'apiVips' ? values.apiVips || [] : values.ingressVips || [];
+    const next: ApiVip[] = Array.isArray(fieldArray) ? [...fieldArray] : [];
+    // Ensure array has the desired length
+    while (next.length <= index) {
+      next.push({ ip: '', clusterId: cluster.id });
+    }
+    next[index] = { ip: e.target.value, clusterId: cluster.id };
+    setFieldValue(field, next, true);
   };
 
-  const ipFieldsSuffix = values.stackType === DUAL_STACK ? ' (IPv4)' : '';
   return (
     <>
       {!isVipDhcpAllocationDisabled && (
@@ -145,7 +162,7 @@ export const VirtualIPControlGroup = ({
           <FormikStaticField
             label={
               <>
-                <span>API IP{ipFieldsSuffix}</span> <PopoverIcon bodyContent={ipPopoverContent} />
+                <span>API IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
               </>
             }
             name="apiVip"
@@ -164,8 +181,7 @@ export const VirtualIPControlGroup = ({
           <FormikStaticField
             label={
               <>
-                <span>Ingress IP{ipFieldsSuffix}</span>{' '}
-                <PopoverIcon bodyContent={ipPopoverContent} />
+                <span>Ingress IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
               </>
             }
             name="ingressVip"
@@ -191,34 +207,74 @@ export const VirtualIPControlGroup = ({
                   <OcmInputField
                     label={
                       <>
-                        <span>API IP{ipFieldsSuffix}</span>{' '}
-                        <PopoverIcon bodyContent={ipPopoverContent} />
+                        <span>API IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
                       </>
                     }
                     name="apiVips.0.ip"
                     helperText={ipHelperText}
                     isRequired
+                    labelInfo={isDualStack ? 'Primary' : undefined}
                     onChange={(e) =>
-                      setVipValue('apiVips', e as React.ChangeEvent<HTMLInputElement>)
+                      setVipValueAtIndex('apiVips', 0, e as React.ChangeEvent<HTMLInputElement>)
                     }
                   />
                 </StackItem>
+                {isDualStack && (
+                  <StackItem>
+                    <OcmInputField
+                      label={
+                        <>
+                          <span>API IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
+                        </>
+                      }
+                      name="apiVips.1.ip"
+                      helperText={ipHelperText}
+                      isRequired
+                      labelInfo={'Secondary'}
+                      onChange={(e) =>
+                        setVipValueAtIndex('apiVips', 1, e as React.ChangeEvent<HTMLInputElement>)
+                      }
+                    />
+                  </StackItem>
+                )}
                 <StackItem>
                   <OcmInputField
                     name="ingressVips.0.ip"
                     label={
                       <>
-                        <span>Ingress IP{ipFieldsSuffix}</span>{' '}
-                        <PopoverIcon bodyContent={ipPopoverContent} />
+                        <span>Ingress IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
                       </>
                     }
                     helperText={ipHelperText}
                     isRequired
+                    labelInfo={isDualStack ? 'Primary' : undefined}
                     onChange={(e) =>
-                      setVipValue('ingressVips', e as React.ChangeEvent<HTMLInputElement>)
+                      setVipValueAtIndex('ingressVips', 0, e as React.ChangeEvent<HTMLInputElement>)
                     }
                   />
                 </StackItem>
+                {isDualStack && (
+                  <StackItem>
+                    <OcmInputField
+                      name="ingressVips.1.ip"
+                      label={
+                        <>
+                          <span>Ingress IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
+                        </>
+                      }
+                      helperText={ipHelperText}
+                      isRequired
+                      labelInfo={'Secondary'}
+                      onChange={(e) =>
+                        setVipValueAtIndex(
+                          'ingressVips',
+                          1,
+                          e as React.ChangeEvent<HTMLInputElement>,
+                        )
+                      }
+                    />
+                  </StackItem>
+                )}
               </Stack>
             )}
           </FieldArray>