@openshift-assisted/ui-lib 2.48.6 → 2.50.0

package/lib/cim/components/Agent/tableUtils.tsx

@@ -1,267 +1,29 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom-v5-compat';
+import countBy from 'lodash-es/countBy';
 
-import {
-  HostsTableActions,
-  getInventory,
-  getHostname,
-  Hostname,
-  ActionCheck,
-} from '../../../common';
+import { HostsTableActions, ActionCheck } from '../../../common';
 import { AgentClusterInstallK8sResource, AgentK8sResource, InfraEnvK8sResource } from '../../types';
-import AgentStatus from './AgentStatus';
-import { ActionsResolver, TableRow } from '../../../common/components/hosts/AITable';
-import { AgentTableActions, ClusterDeploymentWizardStepsType } from '../ClusterDeployment/types';
+import { ActionsResolver } from '../../../common/components/hosts/AITable';
+import { AgentTableActions } from '../ClusterDeployment/types';
 import { hostActionResolver } from '../../../common/components/hosts/tableUtils';
-import { getAgentClusterInstallOfAgent, getAIHosts, getInfraEnvNameOfAgent } from '../helpers';
+import { getAgentClusterInstallOfAgent, getAIHosts } from '../helpers';
 import { isInstallationInProgress } from '../ClusterDeployment/helpers';
 import { AGENT_BMH_NAME_LABEL_KEY, INFRAENV_GENERATED_AI_FLOW } from '../common';
 import { BareMetalHostK8sResource } from '../../types/k8s/bare-metal-host';
-import BMHStatus from './BMHStatus';
 import {
   getAgentStatus,
   getAgentStatusKey,
   getBMHStatus,
   getBMHStatusKey,
-  getWizardStepAgentStatus,
 } from '../helpers/status';
-import { filterByHostname } from '../../../common/components/hosts/utils';
+import { filterByHostname, getHostLabels } from '../../../common/components/hosts/utils';
 import { agentStatus } from '../helpers/agentStatus';
 import noop from 'lodash-es/noop.js';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
-import { AgentMachineK8sResource } from '../Hypershift/types';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { HostStatus } from '../../../common/components/hosts/types';
 
-export const agentHostnameColumn = (
-  t: TFunction,
-  hosts: Host[],
-  agents: AgentK8sResource[],
-  bareMetalHosts: BareMetalHostK8sResource[],
-  onEditHostname?: HostsTableActions['onEditHost'],
-  canEditHostname?: HostsTableActions['canEditHostname'],
-  canEditBMH?: HostsTableActions['canEditBMH'],
-): TableRow<Host> => ({
-  header: {
-    title: t('ai:Hostname'),
-    props: {
-      id: 'col-header-hostname', // ACM jest tests require id over testId
-      modifier: 'breakWord',
-    },
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    const editHostname = onEditHostname ? () => onEditHostname(host) : undefined;
-    const computedHostname = getHostname(host, inventory);
-
-    let readonly = true;
-
-    const agent = agents.find((a) => a.metadata?.uid === host.id);
-    if (agent) {
-      readonly = canEditHostname ? !canEditHostname(host) : false;
-    } else {
-      const bmh = bareMetalHosts.find((bmh) => bmh.metadata?.uid === host.id);
-      if (bmh && canEditBMH) {
-        readonly = !canEditBMH(host);
-      }
-    }
-
-    return {
-      title: (
-        <Hostname
-          host={host}
-          inventory={inventory}
-          onEditHostname={editHostname}
-          hosts={hosts}
-          readonly={readonly}
-        />
-      ),
-      props: { 'data-testid': 'host-name' },
-      sortableValue: computedHostname || '',
-    };
-  },
-});
-
-export const discoveryTypeColumn = (
-  agents: AgentK8sResource[],
-  bareMetalHosts: BareMetalHostK8sResource[],
-  t: TFunction,
-): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Discovery type'),
-      props: {
-        id: 'col-header-discovery-type',
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const agent = agents.find((a) => a.metadata?.uid === host.id);
-      let discoveryType = t('ai:Unknown');
-      if (agent) {
-        // eslint-disable-next-line no-prototype-builtins
-        discoveryType = agent?.metadata?.labels?.hasOwnProperty(AGENT_BMH_NAME_LABEL_KEY)
-          ? t('ai:BMC')
-          : t('ai:Discovery ISO');
-      } else {
-        const bmh = bareMetalHosts.find((bmh) => bmh.metadata?.uid === host.id);
-        if (bmh) {
-          discoveryType = t('ai:BMC');
-        }
-      }
-      return {
-        title: discoveryType,
-        props: { 'data-testid': 'discovery-type' },
-        sortableValue: discoveryType,
-      };
-    },
-  };
-};
-
-type AgentStatusColumnProps = {
-  agents: AgentK8sResource[];
-  agentStatuses: HostStatus<string>;
-  bareMetalHosts?: BareMetalHostK8sResource[];
-  bmhStatuses?: HostStatus<string>;
-  onEditHostname?: AgentTableActions['onEditHost'];
-  onApprove?: AgentTableActions['onApprove'];
-  wizardStepId?: ClusterDeploymentWizardStepsType;
-  t: TFunction;
-  isDay2?: boolean;
-};
-
-export const agentStatusColumn = ({
-  agents,
-  agentStatuses,
-  bareMetalHosts,
-  bmhStatuses,
-  onEditHostname,
-  onApprove,
-  wizardStepId,
-  t,
-  isDay2,
-}: AgentStatusColumnProps): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Status'),
-      props: {
-        id: 'col-header-infraenvstatus',
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const agent = agents.find((a) => a.metadata?.uid === host.id);
-      const bmh = bareMetalHosts?.find((b) => b.metadata?.uid === host.id);
-      let bmhStatus;
-      let title: React.ReactNode = '--';
-      if (agent) {
-        const editHostname = onEditHostname ? () => onEditHostname(agent) : undefined;
-        title = (
-          <AgentStatus
-            agent={agent}
-            onApprove={onApprove}
-            onEditHostname={editHostname}
-            wizardStepId={wizardStepId}
-            isDay2={isDay2}
-          />
-        );
-      } else if (bmh && bmhStatuses) {
-        bmhStatus = getBMHStatus(bmh, bmhStatuses);
-        title = <BMHStatus bmhStatus={bmhStatus} />;
-      }
-
-      return {
-        title,
-        props: { 'data-testid': 'host-status' },
-        sortableValue: agent
-          ? wizardStepId
-            ? getWizardStepAgentStatus(agent, wizardStepId, t).status.title
-            : getAgentStatus(agent, agentStatuses).status.title
-          : bmhStatus?.state.title || '',
-      };
-    },
-  };
-};
-
-export const clusterColumn = (
-  agents: AgentK8sResource[],
-  agentMachines: AgentMachineK8sResource[],
-  getClusterDeploymentLink: (cd: { name: string; namespace: string }) => string,
-  t: TFunction,
-): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Cluster'),
-      props: {
-        id: 'col-header-cluster',
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const agent = agents.find((a) => a.metadata?.uid === host.id);
-      let cdLink: string | undefined = undefined;
-      if (agent?.spec?.clusterDeploymentName) {
-        //hypershift
-        const amNamespace = agent.metadata?.annotations?.['agentMachineRefNamespace'];
-        if (amNamespace) {
-          const am = agentMachines.find(
-            (am) =>
-              am.status?.agentRef?.name === agent.metadata?.name &&
-              am.status?.agentRef?.namespace === agent.metadata?.namespace,
-          );
-          const nodePool = am?.metadata?.annotations?.['hypershift.openshift.io/nodePool'];
-          if (nodePool) {
-            const hcNamespace = nodePool.split('/')[0];
-            const hcName = agent.spec.clusterDeploymentName.name;
-            cdLink = getClusterDeploymentLink({ name: hcName, namespace: hcNamespace });
-          }
-        } else {
-          cdLink = getClusterDeploymentLink(agent.spec.clusterDeploymentName);
-        }
-      }
-      return {
-        title: cdLink ? <Link to={cdLink}>{agent?.spec?.clusterDeploymentName?.name}</Link> : '--',
-        props: { 'data-testid': 'cluster' },
-        sortableValue: agent?.spec?.clusterDeploymentName?.name ?? '--',
-      };
-    },
-  };
-};
-
-export const infraEnvColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Infrastructure env'),
-      props: {
-        id: 'col-header-infraenv',
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const agent = agents.find((a) => a.metadata?.uid === host.id) as AgentK8sResource;
-      const infraEnvName = getInfraEnvNameOfAgent(agent);
-      const title = infraEnvName ? (
-        <Link
-          to={`/multicloud/infrastructure/environments/details/${
-            agent.metadata?.namespace || ''
-          }/${infraEnvName}/overview`}
-        >
-          {infraEnvName}
-        </Link>
-      ) : (
-        'N/A'
-      );
-      return {
-        title,
-        props: { 'data-testid': 'infra-env' },
-        sortableValue: infraEnvName,
-      };
-    },
-  };
-};
-
 export const canEditBMH = (bmh: BareMetalHostK8sResource, t: TFunction): ActionCheck => {
   const canEdit = ['deprovisioning', 'pending', 'registering'].includes(getBMHStatusKey(bmh) || '');
 
@@ -318,17 +80,6 @@ export const canUnbindAgent = (
   }
 
   const statusKey = getAgentStatusKey(agent);
-  if (
-    [
-      'preparing-for-installation',
-      'installing',
-      'installing-in-progress',
-      'installing-pending-user-action',
-      'resetting-pending-user-action',
-    ].includes(statusKey)
-  ) {
-    return [false, t('ai:It is not possible to remove a host which is being installed.')];
-  }
 
   if (
     ['installed', 'error', 'cancelled'].includes(statusKey) &&
@@ -401,6 +152,7 @@ export const useAgentsTable = (
   } = tableActions || {};
   const { t } = useTranslation();
   const agentStatuses = agentStatus(t);
+
   const [hosts, actions] = React.useMemo(
     (): [Host[], HostsTableActions] => [
       getAIHosts(agents, bmhs, infraEnv),
@@ -548,6 +300,22 @@ const filterByStatus = (
   });
 };
 
+const filterByLabels = (hosts: Host[], labelFilter: string[]) => {
+  if (!labelFilter.length) {
+    return hosts;
+  }
+
+  return hosts.filter((h) => {
+    const labels = getHostLabels(h);
+
+    return labelFilter.some((l) =>
+      Object.entries(labels)
+        .map(([key, value]) => `${key} = ${value}`)
+        .includes(l),
+    );
+  });
+};
+
 export const filterHosts = (
   hosts: Host[],
   agents: AgentK8sResource[],
@@ -555,11 +323,26 @@ export const filterHosts = (
   bareMetalHosts: BareMetalHostK8sResource[],
   hostnameFilter: string | undefined,
   statusFilter: string[],
+  labelFilter: string[],
 ) => {
   const { hosts: byHostname, sorted } = filterByHostname(hosts, hostnameFilter);
   const byStatus = filterByStatus(byHostname, agents, agentStatuses, bareMetalHosts, statusFilter);
+  const byLabels = filterByLabels(byStatus, labelFilter);
+
+  return { hosts: byLabels, sorted };
+};
 
-  return { hosts: byStatus, sorted };
+const getAllLabels = (hosts: Host[]) => {
+  const labelArray = hosts
+    .map((host) => {
+      const labels = getHostLabels(host);
+
+      return Object.entries(labels).map(([key, val]) => `${key} = ${val}`);
+    })
+    .flat()
+    .sort();
+
+  return countBy(labelArray);
 };
 
 type UseAgentsFilterArgs = {
@@ -581,10 +364,12 @@ export const useAgentsFilter = ({
 }: UseAgentsFilterArgs) => {
   const [hostnameFilter, setHostnameFilter] = React.useState<string>();
   const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
+  const [labelFilter, setLabelFilter] = React.useState<string[]>([]);
   const statusCount = Object.keys(agentStatuses).reduce((acc, curr) => {
     acc[agentStatuses[curr].title] = 0;
     return acc;
   }, {} as StatusCount);
+
   hosts.forEach((host) => {
     const agent = agents.find((a) => a.metadata?.uid === host.id);
     const bmh = bmhs.find((bmh) => bmh.metadata?.uid === host.id);
@@ -597,6 +382,8 @@ export const useAgentsFilter = ({
     }
   });
 
+  const hostLabels = getAllLabels(hosts);
+
   const { hosts: filteredHosts, sorted } = filterHosts(
     hosts,
     agents,
@@ -604,6 +391,7 @@ export const useAgentsFilter = ({
     bmhs,
     hostnameFilter,
     statusFilter,
+    labelFilter,
   );
 
   return {
@@ -612,6 +400,9 @@ export const useAgentsFilter = ({
     setHostnameFilter,
     statusFilter,
     setStatusFilter,
+    hostLabels,
+    labelFilter,
+    setLabelFilter,
     filteredHosts,
     sorted,
   };

package/lib/cim/components/ClusterDeployment/ClusterDeploymentDetailsTable.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { AgentClusterInstallK8sResource, AgentK8sResource } from '../../types';
 import DefaultEmptyState from '../../../common/components/ui/uiState/EmptyState';
 import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
-import { infraEnvColumn, agentStatusColumn, useAgentsTable } from '../Agent/tableUtils';
+import { useAgentsTable, infraEnvColumn, agentStatusColumn } from '../Agent';
 import {
   cpuCoresColumn,
   disksColumn,
   hostnameColumn,
   memoryColumn,
   roleColumn,
-} from '../../../common/components/hosts/tableUtils';
+} from '../../../common';
 import HostsTable, { DefaultExpandComponent } from '../../../common/components/hosts/HostsTable';
 import { usePagination } from '../../../common/components/hosts/usePagination';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';

package/lib/cim/components/ClusterDeployment/ClusterDeploymentWizard.tsx

@@ -2,17 +2,18 @@ import * as React from 'react';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { Grid, GridItem, Wizard, WizardStep } from '@patternfly/react-core';
 import { AlertsContextProvider, LoadingState } from '../../../common';
-import ClusterDeploymentDetailsStep from './ClusterDeploymentDetailsStep';
-import ClusterDeploymentNetworkingStep from './ClusterDeploymentNetworkingStep';
-import ClusterDeploymentHostSelectionStep from './ClusterDeploymentHostSelectionStep';
 import { ClusterDeploymentWizardProps } from './types';
-import ClusterDeploymentHostsDiscoveryStep from './ClusterDeploymentHostsDiscoveryStep';
 import { ACMFeatureSupportLevelProvider } from '../featureSupportLevels';
-import ClusterDeploymentReviewStep from './ClusterDeploymentReviewStep';
 import { YamlPreview, useYamlPreview } from '../YamlPreview';
 import { wizardStepNames } from './constants';
 import { ClusterDeploymentWizardContextProvider } from './ClusterDeploymentWizardContext';
 import { isCIMFlow } from './helpers';
+import { ClusterDeploymentDetailsStep } from './clusterDetails';
+import { ClusterDeploymentHostSelectionStep } from './hostSelection';
+import { ClusterDeploymentHostsDiscoveryStep } from './hostDiscovery';
+import { ClusterDeploymentNetworkingStep } from './networking';
+import { ClusterDeploymentReviewStep } from './review';
+import { ClusterDeploymentCustomManifestsStep } from './customManifests';
 
 export const ClusterDeploymentWizard = ({
   className,
@@ -76,6 +77,7 @@ export const ClusterDeploymentWizard = ({
                   id={'installation-type'}
                   isDisabled
                 />
+
                 <WizardStep name={stepNames['cluster-details']} id={'cluster-details'}>
                   <ClusterDeploymentDetailsStep
                     clusterImages={clusterImages}
@@ -89,7 +91,9 @@ export const ClusterDeploymentWizard = ({
                     isNutanix={isNutanix}
                   />
                 </WizardStep>
+
                 <WizardStep name={stepNames['automation']} id={'automation'} isDisabled />
+
                 {isCIMFlow(clusterDeployment) ? (
                   <WizardStep name={stepNames['hosts-selection']} id={'host-selection'}>
                     {agentClusterInstall?.metadata?.name ? (
@@ -131,6 +135,7 @@ export const ClusterDeploymentWizard = ({
                     )}
                   </WizardStep>
                 )}
+
                 <WizardStep name={stepNames['networking']} id={'networking'}>
                   <ClusterDeploymentNetworkingStep
                     clusterDeployment={clusterDeployment}
@@ -145,6 +150,11 @@ export const ClusterDeploymentWizard = ({
                     isNutanix={isNutanix}
                   />
                 </WizardStep>
+
+                <WizardStep name={stepNames['custom-manifests']} id={'custom-manifests'}>
+                  <ClusterDeploymentCustomManifestsStep agentClusterInstall={agentClusterInstall} />
+                </WizardStep>
+
                 <WizardStep name={stepNames['review']} id={'review'}>
                   <ClusterDeploymentReviewStep
                     onFinish={onFinish}

package/lib/cim/components/ClusterDeployment/LocationsSelector.tsx

@@ -19,14 +19,14 @@ const LocationsLabelIcon: React.FC = () => {
           <br />
           <Trans
             t={t}
-            components={{ bold: <strong /> }}
+            components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
             i18nKey="ai:Keep the field empty to match <bold>any</bold> location."
           />
 
           <br />
           <Trans
             t={t}
-            components={{ bold: <strong /> }}
+            components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
             i18nKey="ai:Set <bold>{{agent_location_label_key}}</bold> label in Agent resource to specify its location."
             values={{ agent_location_label_key: AGENT_LOCATION_LABEL_KEY }}
           />

package/lib/cim/components/ClusterDeployment/NetworkConfiguration.tsx

@@ -1,30 +1,36 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { useFormikContext } from 'formik';
 import { Checkbox, Grid } from '@patternfly/react-core';
-import AdvancedNetworkFields from '../../../common/components/clusterConfiguration/AdvancedNetworkFields';
 import { NetworkConfigurationValues } from '../../../common/types/clusters';
-import { Address6 } from 'ip-address';
 import {
-  AvailableSubnetsControl,
   ManagedNetworkingControlGroup,
   UserManagedNetworkingTextContent,
+  StackTypeControlGroup,
+  AvailableSubnetsControl,
   VirtualIPControlGroup,
   VirtualIPControlGroupProps,
+  AdvancedNetworkFields,
 } from '../../../common/components/clusterWizard/networkingSteps';
 import {
+  canBeDualStack,
   canSelectNetworkTypeSDN,
+  DUAL_STACK,
   isAdvNetworkConf,
   isSNO,
-  isSubnetInIPv6,
   NETWORK_TYPE_OVN,
-  NO_SUBNET_SET,
 } from '../../../common';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { NetworkTypeControlGroup } from '../../../common/components/clusterWizard/networkingSteps/NetworkTypeControlGroup';
 import { ClusterDefaultConfig } from '@openshift-assisted/types/assisted-installer-service';
 
 export type NetworkConfigurationProps = VirtualIPControlGroupProps & {
-  defaultNetworkSettings: ClusterDefaultConfig;
+  defaultNetworkSettings: Pick<
+    ClusterDefaultConfig,
+    | 'clusterNetworksIpv4'
+    | 'clusterNetworksDualstack'
+    | 'serviceNetworksIpv4'
+    | 'serviceNetworksDualstack'
+  >;
   hideManagedNetworking?: boolean;
 };
 
@@ -40,60 +46,57 @@ const NetworkConfiguration = ({
     useFormikContext<NetworkConfigurationValues>();
 
   const isMultiNodeCluster = !isSNO(cluster);
-  const isClusterCIDRIPv6 = Address6.isValid(values.clusterNetworkCidr || '');
-  const { isIPv6, isSDNSelectable } = React.useMemo(() => {
-    const isIPv6 = isSubnetInIPv6({
-      machineNetworkCidr: cluster.machineNetworkCidr,
-      clusterNetworkCidr: values.clusterNetworkCidr,
-      serviceNetworkCidr: values.serviceNetworkCidr,
-    });
-    return {
-      isIPv6,
-      isSDNSelectable: canSelectNetworkTypeSDN(!isMultiNodeCluster, isIPv6),
-    };
-  }, [
-    isMultiNodeCluster,
-    values.clusterNetworkCidr,
-    cluster.machineNetworkCidr,
-    values.serviceNetworkCidr,
-  ]);
+  const isDualStackSelectable = React.useMemo(() => canBeDualStack(hostSubnets), [hostSubnets]);
+
+  const isDualStack = values.stackType === DUAL_STACK;
+  const isSDNSelectable = React.useMemo(
+    () => canSelectNetworkTypeSDN(!isMultiNodeCluster, isDualStack),
+    [isMultiNodeCluster, isDualStack],
+  );
 
   const [isAdvanced, setAdvanced] = React.useState(
-    isAdvNetworkConf(cluster, defaultNetworkSettings),
+    isDualStack || isAdvNetworkConf(cluster, defaultNetworkSettings),
   );
 
-  const toggleAdvConfiguration = (checked: boolean) => {
-    setAdvanced(checked);
+  const toggleAdvConfiguration = useCallback(
+    (checked: boolean) => {
+      setAdvanced(checked);
+
+      if (!checked) {
+        setFieldValue('clusterNetworks', defaultNetworkSettings.clusterNetworksIpv4);
+        setFieldValue('serviceNetworks', defaultNetworkSettings.serviceNetworksIpv4);
+      }
+    },
+    [setFieldValue, defaultNetworkSettings],
+  );
 
-    if (!checked) {
-      setFieldValue('clusterNetworkCidr', defaultNetworkSettings.clusterNetworkCidr);
-      setFieldValue('serviceNetworkCidr', defaultNetworkSettings.serviceNetworkCidr);
-      setFieldValue('clusterNetworkHostPrefix', defaultNetworkSettings.clusterNetworkHostPrefix);
+  // Auto-enable advanced networking when switching to dual-stack
+  useEffect(() => {
+    if (isDualStack) {
+      toggleAdvConfiguration(true);
     }
-  };
+  }, [isDualStack, toggleAdvConfiguration]);
 
   const isUserManagedNetworking = values.managedNetworkingType === 'userManaged';
-  const firstSubnet = hostSubnets[0]?.subnet;
+  const primaryMachineNetwork = values.machineNetworks?.[0]?.cidr;
 
+  // Clear machine networks when switching to user-managed networking for multi-node clusters
   useEffect(() => {
-    if (isUserManagedNetworking && isMultiNodeCluster) {
-      values.hostSubnet !== NO_SUBNET_SET && setFieldValue('hostSubnet', NO_SUBNET_SET, false);
-    } else if (values.hostSubnet === NO_SUBNET_SET && firstSubnet) {
-      setFieldValue('hostSubnet', firstSubnet, false);
+    if (isUserManagedNetworking && isMultiNodeCluster && values.machineNetworks?.length) {
+      setFieldValue('machineNetworks', [], false);
     }
-  }, [isUserManagedNetworking, isMultiNodeCluster, values.hostSubnet, setFieldValue, firstSubnet]);
-
+  }, [isUserManagedNetworking, isMultiNodeCluster, values.machineNetworks?.length, setFieldValue]);
   useEffect(() => {
     if (!cluster.networkType) {
       setFieldValue('networkType', NETWORK_TYPE_OVN);
     }
     // Skipping "cluster.networkType" as it's ultimately the value we are setting in the form
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isIPv6, isMultiNodeCluster, setFieldValue]);
+  }, [isDualStack, isMultiNodeCluster, setFieldValue]);
 
   useEffect(() => {
     if (isUserManagedNetworking) {
-      const shouldValidate = !!touched.hostSubnet;
+      const shouldValidate = !!touched.machineNetworks;
 
       // We need to reset these fields' values in order to align with the values the server sends
       setFieldValue('vipDhcpAllocation', false);
@@ -106,12 +109,13 @@ const NetworkConfiguration = ({
       }
     }
   }, [
-    touched.hostSubnet,
+    touched.machineNetworks,
     isMultiNodeCluster,
     isUserManagedNetworking,
     setFieldValue,
     values.vipDhcpAllocation,
     validateField,
+    primaryMachineNetwork,
   ]);
   return (
     <Grid hasGutter>
@@ -124,13 +128,25 @@ const NetworkConfiguration = ({
         />
       )}
 
+      {(!isMultiNodeCluster || !isUserManagedNetworking) && (
+        <StackTypeControlGroup
+          clusterId={cluster.id}
+          isDualStackSelectable={isDualStackSelectable}
+          hostSubnets={hostSubnets}
+          defaultNetworkValues={defaultNetworkSettings}
+        />
+      )}
+
       <NetworkTypeControlGroup isSDNSelectable={isSDNSelectable} />
 
       {!(isMultiNodeCluster && isUserManagedNetworking) && (
         <AvailableSubnetsControl
+          clusterId={cluster.id}
           hostSubnets={hostSubnets}
-          hosts={cluster.hosts || []}
           isRequired={!isUserManagedNetworking}
+          isDisabled={hostSubnets.length === 0}
+          openshiftVersion={cluster.openshiftVersion}
+          hosts={cluster.hosts || []}
           isMultiNodeCluster={isMultiNodeCluster}
         />
       )}
@@ -149,7 +165,8 @@ const NetworkConfiguration = ({
         description={t('ai:Configure advanced networking properties (e.g. CIDR ranges).')}
         isChecked={isAdvanced}
         onChange={(_event, checked: boolean) => toggleAdvConfiguration(checked)}
-        body={isAdvanced && <AdvancedNetworkFields isClusterCIDRIPv6={isClusterCIDRIPv6} />}
+        isDisabled={isDualStack}
+        body={isAdvanced && <AdvancedNetworkFields />}
       />
     </Grid>
   );

package/lib/cim/components/ClusterDeployment/ScaleUpForm.tsx

@@ -3,7 +3,7 @@ import { useFormikContext } from 'formik';
 import { Flex, FlexItem, Form, FormGroup } from '@patternfly/react-core';
 import { getAgentsForSelection } from '../helpers/agents';
 import { AgentK8sResource } from '../../types/k8s/agent';
-import ClusterDeploymentHostsSelectionAdvanced from './ClusterDeploymentHostsSelectionAdvanced';
+import { ClusterDeploymentHostsSelectionAdvanced } from './hostSelection';
 import { ScaleUpFormValues } from './types';
 import SwitchField from '../../../common/components/ui/formik/SwitchField';
 import ClusterScaleUpAutoHostsSelection from './ClusterScaleUpAutoHostsSelection';