@openshift-assisted/ui-lib 2.49.0 → 2.50.0

package/lib/common/components/clusterWizard/networkingSteps/AvailableSubnetsControl.tsx

@@ -1,30 +1,156 @@
-import React from 'react';
-import { Alert, AlertActionLink, AlertVariant, Popover } from '@patternfly/react-core';
-import { HostSubnets } from '../../../types/clusters';
-import { Host } from '@openshift-assisted/types/assisted-installer-service';
-import { SelectField } from '../../ui';
-import { NO_SUBNET_SET } from '../../../config';
+import React, { useEffect } from 'react';
+import {
+  Alert,
+  AlertActionLink,
+  AlertVariant,
+  FormGroup,
+  Popover,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { FieldArray, useFormikContext, FormikHelpers } from 'formik';
+import { Address4, Address6 } from 'ip-address';
+
+import { HostSubnet, NetworkConfigurationValues } from '../../../types';
+import { DUAL_STACK, NO_SUBNET_SET } from '../../../config';
+import { isMajorMinorVersionEqualOrGreater } from '../../../utils';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
+import { SubnetsDropdown } from './SubnetsDropdown';
+import { reorderNetworksForPrimary } from './reorderNetworks';
+import {
+  Cluster,
+  Host,
+  MachineNetwork,
+} from '@openshift-assisted/types/assisted-installer-service';
+
+const subnetSort = (subA: HostSubnet, subB: HostSubnet) =>
+  subA.humanized.localeCompare(subB.humanized);
+
+const useAutoSelectDefaultMachineNetworks = (
+  autoSelectNetwork: boolean,
+  setFieldValue: FormikHelpers<NetworkConfigurationValues>['setFieldValue'],
+  cidrV4: MachineNetwork['cidr'],
+  cidrV6: MachineNetwork['cidr'],
+  clusterId: string,
+  isDualStack: boolean,
+) => {
+  useEffect(() => {
+    if (autoSelectNetwork) {
+      setFieldValue(
+        'machineNetworks',
+        isDualStack
+          ? [
+              { cidr: cidrV4, clusterId },
+              { cidr: cidrV6, clusterId },
+            ]
+          : [{ cidr: cidrV4, clusterId }],
+        false,
+      );
+    }
+  }, [autoSelectNetwork, cidrV4, cidrV6, clusterId, isDualStack, setFieldValue]);
+};
 
 export interface AvailableSubnetsControlProps {
-  hostSubnets: HostSubnets;
-  hosts: Host[];
+  clusterId: Cluster['id'];
+  hostSubnets: HostSubnet[];
   isRequired: boolean;
-  isMultiNodeCluster: boolean;
+  isDisabled: boolean;
+  openshiftVersion?: string;
+  isViewerMode?: boolean;
+  hosts?: Host[];
+  isMultiNodeCluster?: boolean;
 }
 
 export const AvailableSubnetsControl = ({
+  clusterId,
   hostSubnets,
-  hosts,
   isRequired = false,
-  isMultiNodeCluster,
+  isDisabled,
+  openshiftVersion,
+  isViewerMode = false,
+  hosts,
+  isMultiNodeCluster = true,
 }: AvailableSubnetsControlProps) => {
   const { t } = useTranslation();
-  const getHelperText = (value: string) => {
-    const matchingSubnet = hostSubnets.find((hn) => hn.subnet === value);
-    if (matchingSubnet && isMultiNodeCluster) {
+  const { values, errors, setFieldValue } = useFormikContext<NetworkConfigurationValues>();
+  const isDualStack = values.stackType === DUAL_STACK;
+
+  // 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);
+  const IPv6Subnets = hostSubnets
+    .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, prefer IPv4 as primary (even for dual-stack)
+  const cidrV4 = IPv4Subnets.length >= 1 ? IPv4Subnets[0].subnet : NO_SUBNET_SET;
+  const cidrV6 = IPv6Subnets.length >= 1 ? IPv6Subnets[0].subnet : NO_SUBNET_SET;
+  const hasEmptySelection = (values.machineNetworks ?? []).length === 0;
+  const autoSelectNetwork = !isViewerMode && hasEmptySelection;
+  useAutoSelectDefaultMachineNetworks(
+    autoSelectNetwork,
+    setFieldValue,
+    cidrV4,
+    cidrV6,
+    clusterId,
+    isDualStack,
+  );
+
+  // Ensure primary and secondary machine networks are not in the same stack (IPv4/IPv6).
+  // If the user switches primary to the same address family as secondary, adjust secondary to the opposite family
+  // (or clear it if no subnet is available).
+  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;
+    }
+
+    const firstIsV4 = Address4.isValid(first);
+    const firstIsV6 = Address6.isValid(first);
+    const secondIsV4 = Address4.isValid(second);
+    const secondIsV6 = Address6.isValid(second);
+
+    // If both are the same family, force the secondary to the opposite family.
+    if ((firstIsV4 && secondIsV4) || (firstIsV6 && secondIsV6)) {
+      const replacement = firstIsV4
+        ? IPv6Subnets[0]?.subnet ?? NO_SUBNET_SET
+        : IPv4Subnets[0]?.subnet ?? NO_SUBNET_SET;
+
+      if (replacement !== second) {
+        setFieldValue('machineNetworks.1.cidr', replacement, false);
+      }
+    }
+  }, [isDualStack, values.machineNetworks, IPv4Subnets, IPv6Subnets, setFieldValue]);
+
+  // Helper text showing excluded hosts
+  const getExcludedHostsAlert = React.useCallback(
+    (subnetCidr: string | undefined) => {
+      if (!hosts || !isMultiNodeCluster || !subnetCidr) {
+        return null;
+      }
+      const matchingSubnet = hostSubnets.find((hn) => hn.subnet === subnetCidr);
+      if (!matchingSubnet) {
+        return null;
+      }
+
       const excludedHosts =
-        hosts?.filter(
+        hosts.filter(
           (host) =>
             !['disabled', 'disconnected'].includes(host.status) &&
             !matchingSubnet.hostIDs.includes(host.requestedHostname || ''),
@@ -32,7 +158,7 @@ export const AvailableSubnetsControl = ({
 
       // Workaround for bug in CIM backend. hostIDs are empty
       if (excludedHosts.length === 0 || !matchingSubnet.hostIDs.length) {
-        return undefined;
+        return null;
       }
 
       const actionLinks = (
@@ -71,45 +197,87 @@ export const AvailableSubnetsControl = ({
           {t('ai:Hosts outside of this range will not be included in the new cluster.')}
         </Alert>
       );
-    }
+    },
+    [hosts, isMultiNodeCluster, hostSubnets, t],
+  );
 
-    return undefined;
-  };
+  const primaryNetworkCidr = values.machineNetworks?.[0]?.cidr;
+  const excludedHostsAlert = getExcludedHostsAlert(primaryNetworkCidr);
+  const showSecondaryMachineNetwork =
+    isDualStack && values.machineNetworks && values.machineNetworks.length > 1;
 
-  const hostSubnetLength = hostSubnets.length;
-  return (
-    <SelectField
-      name="hostSubnet"
-      label={t('ai:Available subnets')}
-      options={
-        hostSubnets.length
-          ? [
-              {
-                label: t('ai:Please select a subnet. ({{hostSubnetLength}} available)', {
-                  hostSubnetLength,
-                }),
-                value: NO_SUBNET_SET,
-                isDisabled: true,
-                id: 'form-input-hostSubnet-field-option-no-subnet',
-              },
-              ...hostSubnets
-                .sort((subA, subB) => subA.humanized.localeCompare(subB.humanized))
-                .map((hn, index) => ({
-                  label: hn.humanized,
-                  value: hn.subnet,
-                  id: `form-input-hostSubnet-field-option-${index}`,
-                })),
-            ]
-          : [
-              {
-                label: t('ai:No subnets are currently available'),
-                value: NO_SUBNET_SET,
-              },
-            ]
+  // Determine available subnets for primary dropdown
+  const primaryMachineSubnets = isDualStack && supportsIPv6Primary ? allSubnets : IPv4Subnets;
+
+  // Determine available subnets for secondary dropdown
+  const secondaryMachineSubnets = React.useMemo(() => {
+    if (supportsIPv6Primary) {
+      // For OCP >= 4.12, smart filtering based on the other network's selection
+      if (primaryNetworkCidr && Address6.isValid(primaryNetworkCidr)) {
+        // If first is IPv6, second should be IPv4
+        return IPv4Subnets;
+      } else if (primaryNetworkCidr && Address4.isValid(primaryNetworkCidr)) {
+        // If first is IPv4, second should be IPv6
+        return IPv6Subnets;
+      } else {
+        // If first is not selected yet, show all subnets
+        return allSubnets;
       }
-      getHelperText={getHelperText}
-      isDisabled={!hostSubnets.length}
-      isRequired={isRequired}
-    />
+    } else {
+      // For older versions, second network is IPv6
+      return IPv6Subnets;
+    }
+  }, [supportsIPv6Primary, primaryNetworkCidr, IPv4Subnets, IPv6Subnets, allSubnets]);
+
+  return (
+    <>
+      <FormGroup
+        label="Machine network"
+        labelInfo={isDualStack && 'Primary'}
+        fieldId="machine-networks"
+        isRequired={isRequired}
+      >
+        <FieldArray name="machineNetworks">
+          {() => (
+            <Stack>
+              <StackItem>
+                <SubnetsDropdown
+                  name="machineNetworks.0.cidr"
+                  machineSubnets={primaryMachineSubnets}
+                  isDisabled={isDisabled}
+                  onAfterSelect={(newSelection) =>
+                    reorderNetworksForPrimary(newSelection, values, setFieldValue)
+                  }
+                  data-testid="subnets-dropdown-toggle-primary"
+                />
+              </StackItem>
+            </Stack>
+          )}
+        </FieldArray>
+      </FormGroup>
+
+      {/* Secondary machine network */}
+      {showSecondaryMachineNetwork && (
+        <FormGroup
+          label="Machine network"
+          labelInfo="Secondary"
+          fieldId="machine-networks-secondary"
+          isRequired={isRequired}
+        >
+          <SubnetsDropdown
+            name="machineNetworks.1.cidr"
+            machineSubnets={secondaryMachineSubnets}
+            isDisabled={isDisabled}
+            data-testid="subnets-dropdown-toggle-secondary"
+          />
+        </FormGroup>
+      )}
+      <>
+        {typeof errors.machineNetworks === 'string' && (
+          <Alert variant={AlertVariant.warning} title={errors.machineNetworks} isInline />
+        )}
+        {excludedHostsAlert}
+      </>
+    </>
   );
 };

package/lib/{ocm/components/clusterConfiguration/networkConfiguration/StackTypeControl.tsx → common/components/clusterWizard/networkingSteps/StackTypeControlGroup.tsx}

@@ -1,35 +1,42 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { ButtonVariant, FormGroup, Split, SplitItem, Tooltip } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 import { Address4, Address6 } from 'ip-address';
 
+import { HostSubnets, NetworkConfigurationValues } from '../../../types';
+import { getFieldId } from '../../ui';
 import {
-  HostSubnets,
-  NetworkConfigurationValues,
-  getFieldId,
   DUAL_STACK,
   IPV4_STACK,
   NETWORK_TYPE_OVN,
   NETWORK_TYPE_SDN,
   NO_SUBNET_SET,
-} from '../../../../common';
-import { ConfirmationModal, PopoverIcon } from '../../../../common/components/ui';
-import { useDefaultConfiguration } from '../ClusterDefaultConfigurationContext';
-import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
-import { OcmRadioField } from '../../ui/OcmFormFields';
+} from '../../../config';
+import { RadioField } from '../../ui/formik';
+import { ConfirmationModal, PopoverIcon } from '../../ui';
 import { reorderNetworksByCurrentPrimary } from './reorderNetworks';
 import {
   Cluster,
+  ClusterDefaultConfig,
   ClusterNetwork,
   MachineNetwork,
   ServiceNetwork,
 } from '@openshift-assisted/types/assisted-installer-service';
 
-type StackTypeControlGroupProps = {
+export type StackTypeDefaultNetworkValues = Pick<
+  ClusterDefaultConfig,
+  | 'clusterNetworksDualstack'
+  | 'clusterNetworksIpv4'
+  | 'serviceNetworksDualstack'
+  | 'serviceNetworksIpv4'
+>;
+
+export type StackTypeControlGroupProps = {
   clusterId: Cluster['id'];
   isDualStackSelectable: boolean;
   hostSubnets: HostSubnets;
+  defaultNetworkValues: StackTypeDefaultNetworkValues;
+  isViewerMode?: boolean;
 };
 
 const hasDualStackConfigurationChanged = (
@@ -40,29 +47,26 @@ const hasDualStackConfigurationChanged = (
 ) =>
   clusterNetworks &&
   serviceNetworks &&
-  ((values.machineNetworks && values.machineNetworks[1].cidr !== cidrIPv6) ||
-    (values.clusterNetworks && values.clusterNetworks[1].cidr !== clusterNetworks[1].cidr) ||
-    (values.clusterNetworks &&
-      values.clusterNetworks[1].hostPrefix !== clusterNetworks[1].hostPrefix) ||
-    (values.serviceNetworks && values.serviceNetworks[1].cidr !== serviceNetworks[1].cidr));
+  ((values.machineNetworks?.[1] && values.machineNetworks[1].cidr !== cidrIPv6) ||
+    (values.clusterNetworks?.[1] && values.clusterNetworks[1].cidr !== clusterNetworks[1]?.cidr) ||
+    (values.clusterNetworks?.[1] &&
+      values.clusterNetworks[1].hostPrefix !== clusterNetworks[1]?.hostPrefix) ||
+    (values.serviceNetworks?.[1] && values.serviceNetworks[1].cidr !== serviceNetworks[1]?.cidr) ||
+    values.apiVips?.[1]?.ip ||
+    values.ingressVips?.[1]?.ip);
 
 export const StackTypeControlGroup = ({
   clusterId,
   isDualStackSelectable,
   hostSubnets,
+  defaultNetworkValues,
+  isViewerMode = false,
 }: StackTypeControlGroupProps) => {
   const { setFieldValue, values, validateForm } = useFormikContext<NetworkConfigurationValues>();
   const [openConfirmModal, setConfirmModal] = React.useState(false);
-  const defaultNetworkValues = useDefaultConfiguration([
-    'clusterNetworksDualstack',
-    'clusterNetworksIpv4',
-    'serviceNetworksDualstack',
-    'serviceNetworksIpv4',
-  ]);
 
   const IPv6Subnets = hostSubnets.filter((subnet) => Address6.isValid(subnet.subnet));
   const cidrIPv6 = IPv6Subnets.length >= 1 ? IPv6Subnets[0].subnet : NO_SUBNET_SET;
-  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const shouldSetSingleStack =
     !isViewerMode && !isDualStackSelectable && values.stackType === DUAL_STACK;
 
@@ -216,9 +220,41 @@ export const StackTypeControlGroup = ({
         false,
       );
     }
-    // Ensure cluster/service networks ordering matches the new primary family
-    reorderNetworksByCurrentPrimary(values, setFieldValue);
+    // Initialize VIPs for dual-stack
+    if (values.apiVips && values.apiVips.length < 2) {
+      setFieldValue(
+        'apiVips',
+        [values.apiVips[0] || { ip: '', clusterId: clusterId }, { ip: '', clusterId: clusterId }],
+        false,
+      );
+    }
+    if (values.ingressVips && values.ingressVips.length < 2) {
+      setFieldValue(
+        'ingressVips',
+        [
+          values.ingressVips[0] || { ip: '', clusterId: clusterId },
+          { ip: '', clusterId: clusterId },
+        ],
+        false,
+      );
+    }
   };
+  // Ensure cluster/service networks ordering matches the new primary family
+  const primaryCidr = values.machineNetworks?.[0]?.cidr;
+  React.useEffect(() => {
+    if (isViewerMode) {
+      return;
+    }
+    reorderNetworksByCurrentPrimary(values, setFieldValue);
+  }, [
+    isViewerMode,
+    setFieldValue,
+    values,
+    values.stackType,
+    primaryCidr,
+    values.clusterNetworks,
+    values.serviceNetworks,
+  ]);
 
   const setStackType = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.value === DUAL_STACK) {
@@ -253,10 +289,10 @@ export const StackTypeControlGroup = ({
       >
         <Split>
           <SplitItem>
-            <OcmRadioField
+            <RadioField
               name={'stackType'}
               value={IPV4_STACK}
-              isDisabled={!isDualStackSelectable}
+              isDisabled={!isDualStackSelectable || isViewerMode}
               label="IPv4&nbsp;"
             />
           </SplitItem>
@@ -275,10 +311,10 @@ export const StackTypeControlGroup = ({
               }
               hidden={isDualStackSelectable}
             >
-              <OcmRadioField
+              <RadioField
                 name={'stackType'}
                 value={DUAL_STACK}
-                isDisabled={!isDualStackSelectable}
+                isDisabled={!isDualStackSelectable || isViewerMode}
                 label="Dual-stack&nbsp;"
               />
             </Tooltip>

package/lib/{ocm/components/clusterConfiguration/networkConfiguration → common/components/clusterWizard/networkingSteps}/SubnetsDropdown.tsx

@@ -9,14 +9,11 @@ import {
   Divider,
 } from '@patternfly/react-core';
 import { useField } from 'formik';
-import {
-  getFieldId,
-  HostSubnet,
-  NO_SUBNET_SET,
-  TechnologyPreview,
-  PreviewBadgePosition,
-} from '../../../../common';
 import { Address4, Address6 } from 'ip-address';
+import { getFieldId } from '../../ui';
+import { HostSubnet } from '../../../types';
+import { NO_SUBNET_SET } from '../../../config';
+import { TechnologyPreview, PreviewBadgePosition } from '../../ui';
 
 type SubnetsDropdownProps = {
   name: string;