@openshift-assisted/ui-lib 2.16.4-cim → 2.16.5-cim

package/lib/cim/components/ClusterDeployment/customManifests/ConfigMapForm.tsx

@@ -0,0 +1,247 @@
+import React from 'react';
+import Fuse from 'fuse.js';
+import { FieldArray, useFormikContext } from 'formik';
+import {
+  Stack,
+  StackItem,
+  Grid,
+  WizardFooter,
+  useWizardContext,
+  useWizardFooter,
+  SelectOptionProps,
+  GridItem,
+  AlertVariant,
+  Alert,
+} from '@patternfly/react-core';
+import { Alerts, SelectFieldWithSearch, useAlerts, useTranslation } from '../../../../common';
+import { ClusterDeploymentWizardContext } from '../ClusterDeploymentWizardContext';
+import { ValidationSection } from '../components/ValidationSection';
+import { ConfigMapDetail } from './ConfigMapDetail';
+import { useConfigMaps } from '../../../hooks';
+
+const NO_RESULTS = 'no_results';
+
+export type CustomManifestFormType = {
+  configMaps: {
+    name: string;
+    valid: boolean;
+    manifestNames?: string[];
+  }[];
+};
+
+export const ConfigMapForm = ({ namespace }: { namespace: string }) => {
+  const { t } = useTranslation();
+  const { syncError } = React.useContext(ClusterDeploymentWizardContext);
+  const { alerts, addAlert, clearAlerts } = useAlerts();
+  const [isSubmitting, setSubmitting] = React.useState(false);
+  const { activeStep, goToPrevStep, goToNextStep, close } = useWizardContext();
+
+  const { values, errors, isValid, setFieldValue, submitForm } =
+    useFormikContext<CustomManifestFormType>();
+  const [filter, setFilter] = React.useState<string>('');
+  const [configMaps, setConfigMaps] = React.useState<SelectOptionProps[]>([]);
+  const [data, loaded, isError] = useConfigMaps({
+    namespace,
+    isList: true,
+  });
+
+  React.useEffect(() => {
+    if (data && loaded && !isError) {
+      setConfigMaps(
+        data.map((configMap) => ({
+          value: {
+            name: configMap.metadata?.name as string,
+            valid: true,
+            manifestNames: Object.keys(configMap.data || {}),
+          },
+          children: configMap.metadata?.name as string,
+        })),
+      );
+    }
+  }, [data, isError, loaded]);
+
+  React.useEffect(() => {
+    if (loaded && !isError) {
+      const newConfigMaps = values.configMaps.map((configMap) => {
+        const map = data.find((item) => item.metadata?.name === configMap.name);
+        if (map) {
+          return { ...configMap, valid: true, manifestNames: Object.keys(map.data || {}) };
+        }
+        return { ...configMap, valid: false, manifestNames: [] };
+      });
+
+      setFieldValue('configMaps', newConfigMaps);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, isError, loaded, setFieldValue]);
+
+  const placeholder = React.useMemo(() => {
+    if (values.configMaps.length > 0) {
+      return `${values.configMaps.length} config map${
+        values.configMaps.length !== 1 ? 's' : ''
+      } selected`;
+    }
+
+    return 'No config map selected';
+  }, [values.configMaps]);
+
+  const fuse = React.useMemo(
+    () =>
+      new Fuse(Object.values(configMaps), {
+        includeScore: true,
+        ignoreLocation: true,
+        threshold: 0.3,
+        keys: ['value.name'],
+      }),
+    [configMaps],
+  );
+
+  const selectOptions = React.useMemo(() => {
+    if (filter) {
+      const newSelectOptions = fuse
+        .search(filter)
+        .sort((a, b) => (a.score || 0) - (b.score || 0))
+        .map(({ item }) => item);
+
+      if (!newSelectOptions.length) {
+        return [
+          {
+            isAriaDisabled: true,
+            children: t('ai:No results found for {{filter}}', { filter }),
+            value: NO_RESULTS,
+            hasCheckbox: false,
+          },
+        ];
+      }
+      return newSelectOptions;
+    }
+    return configMaps;
+  }, [filter, configMaps, fuse, t]);
+
+  const submittingText = React.useMemo(() => {
+    if (isSubmitting) {
+      return t('ai:Saving changes...');
+    }
+    return undefined;
+  }, [isSubmitting, t]);
+
+  const onNext = React.useCallback(async () => {
+    try {
+      clearAlerts();
+      setSubmitting(true);
+
+      await submitForm();
+      await goToNextStep();
+    } catch (error) {
+      addAlert({
+        title: t('ai:Failed to save ClusterDeployment'),
+        message: error instanceof Error ? error.message : undefined,
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  }, [addAlert, clearAlerts, goToNextStep, submitForm, t]);
+
+  const footer = React.useMemo(
+    () => (
+      <WizardFooter
+        activeStep={activeStep}
+        onNext={onNext}
+        nextButtonProps={{ isLoading: !!submittingText }}
+        nextButtonText={submittingText || t('ai:Next')}
+        isNextDisabled={!isValid || !loaded}
+        onBack={goToPrevStep}
+        onClose={close}
+      />
+    ),
+    [activeStep, onNext, submittingText, t, isValid, loaded, goToPrevStep, close],
+  );
+
+  useWizardFooter(footer);
+
+  const errorAlert =
+    typeof errors.configMaps === 'string' ? (
+      <GridItem>
+        <Alert variant={AlertVariant.danger} title={errors.configMaps} isInline />
+      </GridItem>
+    ) : (
+      <GridItem>
+        <Alert
+          variant={AlertVariant.danger}
+          title={t('ai:Some config map items are invalid')}
+          isInline
+        />
+      </GridItem>
+    );
+
+  return (
+    <Grid hasGutter>
+      <GridItem>
+        <Stack hasGutter>
+          <StackItem>
+            <SelectFieldWithSearch
+              name={'configMaps'}
+              label={t('ai:Config maps')}
+              isMultiSelect
+              isRequired
+              isLoading={!loaded}
+              selectOptions={selectOptions}
+              filterValue={filter}
+              setFilterValue={setFilter}
+              placeholder={placeholder}
+              helperText={t(
+                'ai:Select config maps from the list or use the type ahead to narrow down the list.',
+              )}
+            />
+          </StackItem>
+          <StackItem>
+            <Grid hasGutter>
+              <FieldArray name="configMaps">
+                {({ remove }) =>
+                  values.configMaps.map((configMap, index) => (
+                    <ConfigMapDetail
+                      index={index}
+                      key={configMap.name}
+                      configMapName={configMap.name}
+                      configMap={data.find((item) => item.metadata?.name === configMap.name)}
+                      onRemove={() => remove(index)}
+                      isLoading={!loaded}
+                    />
+                  ))
+                }
+              </FieldArray>
+            </Grid>
+          </StackItem>
+        </Stack>
+      </GridItem>
+
+      {!isValid && errorAlert}
+
+      {isError && (
+        <GridItem>
+          <Alert
+            variant={AlertVariant.danger}
+            title={t('ai:An error occurred while fetching config maps')}
+            isInline
+          />
+        </GridItem>
+      )}
+
+      {!!alerts.length && (
+        <GridItem>
+          <Alerts />
+        </GridItem>
+      )}
+
+      {syncError && (
+        <GridItem>
+          <ValidationSection currentStepId={'custom-manifests'} hosts={[]}>
+            <Alert variant={AlertVariant.danger} title={t('ai:An error occurred')} isInline>
+              {syncError}
+            </Alert>
+          </ValidationSection>
+        </GridItem>
+      )}
+    </Grid>
+  );
+};

package/lib/cim/components/ClusterDeployment/customManifests/index.tsx

@@ -0,0 +1 @@
+export * from './ClusterDeploymentCustomManifestsStep';

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostDiscoveryTable.tsx → hostDiscovery/ClusterDeploymentHostDiscoveryTable.tsx}

@@ -6,34 +6,36 @@ import {
   agentStatusColumn,
   useAgentsTable,
   canChangeHostname,
-} from '../Agent/tableUtils';
+} from '../../Agent/tableUtils';
 import HostsTable, {
   DefaultExpandComponent,
   HostsTableEmptyState,
-} from '../../../common/components/hosts/HostsTable';
+} from '../../../../common/components/hosts/HostsTable';
 import {
   cpuCoresColumn,
   discoveredAtColumn,
   disksColumn,
+  gpusColumn,
   hostnameColumn,
+  labelsColumn,
   memoryColumn,
   roleColumn,
-} from '../../../common/components/hosts/tableUtils';
+} from '../../../../common/components/hosts/tableUtils';
 import {
   DiscoveryTroubleshootingModal,
   ChangeHostnameAction,
   MassChangeHostnameModal,
   TableToolbar,
-} from '../../../common';
-import { ClusterDeploymentHostDiscoveryTableProps } from '../ClusterDeployment/types';
-import MassApproveAgentModal from '../modals/MassApproveAgentModal';
-import MassApproveAction from '../modals/MassApproveAction';
-import { usePagination } from '../../../common/components/hosts/usePagination';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { ExpandComponent } from '../Agent/AgentsSelectionTable';
-import { HostsTableDetailContextProvider } from '../../../common/components/hosts/HostsTableDetailContext';
-import { agentStatus, bmhStatus } from '../helpers/agentStatus';
-import { onAgentChangeHostname } from '../helpers';
+} from '../../../../common';
+import { ClusterDeploymentHostDiscoveryTableProps } from '../types';
+import MassApproveAgentModal from '../../modals/MassApproveAgentModal';
+import MassApproveAction from '../../modals/MassApproveAction';
+import { usePagination } from '../../../../common/components/hosts/usePagination';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { ExpandComponent } from '../../Agent/AgentsSelectionTable';
+import { HostsTableDetailContextProvider } from '../../../../common/components/hosts/HostsTableDetailContext';
+import { agentStatus, bmhStatus } from '../../helpers/agentStatus';
+import { onAgentChangeHostname } from '../../helpers';
 
 const ClusterDeploymentHostDiscoveryTable: React.FC<ClusterDeploymentHostDiscoveryTableProps> = ({
   agents,
@@ -93,7 +95,14 @@ const ClusterDeploymentHostDiscoveryTable: React.FC<ClusterDeploymentHostDiscove
       }),
       roleColumn(t, hostActions.canEditRole, hostActions.onEditRole),
       ...(addAll
-        ? [discoveredAtColumn(t), cpuCoresColumn(t), memoryColumn(t), disksColumn(t)]
+        ? [
+            discoveredAtColumn(t),
+            cpuCoresColumn(t),
+            gpusColumn(t),
+            memoryColumn(t),
+            disksColumn(t),
+            labelsColumn(t),
+          ]
         : []),
     ],
     [

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostsDiscovery.tsx → hostDiscovery/ClusterDeploymentHostsDiscovery.tsx}

@@ -1,43 +1,51 @@
 import React from 'react';
-import { Grid, GridItem, Content, OrderType } from '@patternfly/react-core';
+import {
+  Grid,
+  GridItem,
+  TextContent,
+  Text,
+  TextListItem,
+  OrderType,
+  TextList,
+} from '@patternfly/react-core';
 import Measure from 'react-measure';
 import {
   DiscoveryTroubleshootingModal,
   FormatDiskWarning,
   HostsNotShowingLink,
   VMRebootConfigurationInfo,
-} from '../../../common';
-import { getIsSNOCluster, onAgentChangeHostname } from '../helpers';
-import MinimalHWRequirements from '../Agent/MinimalHWRequirements';
-import { ClusterDeploymentHostsDiscoveryProps } from './types';
-import { EditBMHModal, EditAgentModal } from '../modals';
-import { AgentK8sResource, BareMetalHostK8sResource } from '../../types';
+} from '../../../../common';
+import { getIsSNOCluster, onAgentChangeHostname } from '../../helpers';
+import MinimalHWRequirements from '../../Agent/MinimalHWRequirements';
+import { ClusterDeploymentHostsDiscoveryProps } from '../types';
+import { EditBMHModal, EditAgentModal } from '../../modals';
+import { AgentK8sResource, BareMetalHostK8sResource } from '../../../types';
 import ClusterDeploymentHostDiscoveryTable from './ClusterDeploymentHostDiscoveryTable';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import AddHostDropdown from '../InfraEnv/AddHostDropdown';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import AddHostDropdown from '../../InfraEnv/AddHostDropdown';
 
 const DiscoveryInstructions = () => {
   const { t } = useTranslation();
   return (
-    <>
-      <Content component="h3">{t('ai:Adding hosts instructions')}</Content>
-      <Content component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
-        <Content component="li">{t('ai:Click the Add hosts button.')}</Content>
-        <Content component="li">
+    <TextContent>
+      <Text component="h3">{t('ai:Adding hosts instructions')}</Text>
+      <TextList component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
+        <TextListItem>{t('ai:Click the Add hosts button.')}</TextListItem>
+        <TextListItem>
           {t('ai:Configure the SSH key and proxy settings after the modal appears (optional).')}
-        </Content>
-        <Content component="li">
+        </TextListItem>
+        <TextListItem>
           {t(
             "ai:Select how you'd like to add hosts (Discovery ISO, iPXE, or BMC form) and follow the instructions that appear.",
           )}
-        </Content>
-        <Content component="li">
+        </TextListItem>
+        <TextListItem>
           {t(
             'ai:Booted hosts should appear in the host inventory table. This may take a few minutes.',
           )}
-        </Content>
-      </Content>
-    </>
+        </TextListItem>
+      </TextList>
+    </TextContent>
   );
 };
 
@@ -70,7 +78,9 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
   return (
     <Grid hasGutter>
       <GridItem>
-        <DiscoveryInstructions />
+        <TextContent>
+          <DiscoveryInstructions />
+        </TextContent>
       </GridItem>
       <GridItem span={5}>
         <AddHostDropdown
@@ -81,18 +91,18 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
         />
       </GridItem>
       <GridItem>
-        <Content>
-          <Content component="h3">{t('ai:Information and warnings')}</Content>
+        <TextContent>
+          <Text component="h3">{t('ai:Information and warnings')}</Text>
           {aiConfigMap && (
-            <Content component="p">
+            <Text component="p">
               <MinimalHWRequirements aiConfigMap={aiConfigMap} isSNOCluster={isSNOCluster} />
-            </Content>
+            </Text>
           )}
-          <Content component="p">
+          <Text component="p">
             <HostsNotShowingLink setDiscoveryHintModalOpen={setDiscoveryHintModalOpen} />
-          </Content>
+          </Text>
           {isVM && <VMRebootConfigurationInfo />}
-        </Content>
+        </TextContent>
       </GridItem>
       <GridItem>
         {/* <OCSDisksManualFormattingHint /> Recently not used in the ACM flow */}

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostsDiscoveryStep.tsx → hostDiscovery/ClusterDeploymentHostsDiscoveryStep.tsx}

@@ -12,17 +12,17 @@ import {
   useWizardContext,
 } from '@patternfly/react-core';
 
-import { Alerts, ClusterWizardStepHeader } from '../../../common';
-import { ClusterDeploymentHostsDiscoveryStepProps } from './types';
+import { Alerts, ClusterWizardStepHeader } from '../../../../common';
+import { ClusterDeploymentHostsDiscoveryStepProps } from '../types';
 import ClusterDeploymentHostsDiscovery from './ClusterDeploymentHostsDiscovery';
-import { getAgentsHostsNames, isAgentOfInfraEnv } from './helpers';
-import { getIsSNOCluster, getWizardStepAgentStatus } from '../helpers';
-import { canNextFromHostDiscoveryStep } from './wizardTransition';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { ValidationSection } from './components/ValidationSection';
-import { ClusterDeploymentWizardContext } from './ClusterDeploymentWizardContext';
+import { getAgentsHostsNames, isAgentOfInfraEnv } from '../helpers';
+import { getIsSNOCluster, getWizardStepAgentStatus } from '../../helpers';
+import { canNextFromHostDiscoveryStep } from '../wizardTransition';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { ValidationSection } from '../components/ValidationSection';
+import { ClusterDeploymentWizardContext } from '../ClusterDeploymentWizardContext';
 
-const ClusterDeploymentHostsDiscoveryStep = ({
+export const ClusterDeploymentHostsDiscoveryStep = ({
   agentClusterInstall,
   agents: allAgents,
   infraEnv,
@@ -174,7 +174,7 @@ const ClusterDeploymentHostsDiscoveryStep = ({
       {!!syncError && (
         <GridItem>
           <ValidationSection currentStepId={'hosts-selection'} hosts={[]}>
-            <Alert variant={AlertVariant.danger} title={t('ai:An error occured')} isInline>
+            <Alert variant={AlertVariant.danger} title={t('ai:An error occurred')} isInline>
               {syncError}
             </Alert>
           </ValidationSection>
@@ -183,4 +183,3 @@ const ClusterDeploymentHostsDiscoveryStep = ({
     </Grid>
   );
 };
-export default ClusterDeploymentHostsDiscoveryStep;

package/lib/cim/components/ClusterDeployment/hostDiscovery/index.tsx

@@ -0,0 +1 @@
+export * from './ClusterDeploymentHostsDiscoveryStep';

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostSelectionStep.tsx → hostSelection/ClusterDeploymentHostSelectionStep.tsx}

@@ -10,28 +10,28 @@ import {
   useWizardFooter,
   WizardFooter,
 } from '@patternfly/react-core';
-import { Alerts, ClusterWizardStepHeader, useAlerts } from '../../../common';
+import { Alerts, ClusterWizardStepHeader, useAlerts } from '../../../../common';
 import {
   AgentClusterInstallK8sResource,
   AgentK8sResource,
   ClusterDeploymentK8sResource,
-} from '../../types';
+} from '../../../types';
 import ClusterDeploymentHostsSelection from './ClusterDeploymentHostsSelection';
 import {
   ClusterDeploymentHostSelectionStepProps,
   ClusterDeploymentHostsSelectionValues,
-} from './types';
-import { hostCountValidationSchema } from './validationSchemas';
+} from '../types';
+import { hostCountValidationSchema } from '../validationSchemas';
 import {
   getAgentSelectorFieldsFromAnnotations,
   getIsSNOCluster,
   getWizardStepAgentStatus,
-} from '../helpers';
-import { canNextFromHostSelectionStep } from './wizardTransition';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+} from '../../helpers';
+import { canNextFromHostSelectionStep } from '../wizardTransition';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
-import { ValidationSection } from './components/ValidationSection';
-import { ClusterDeploymentWizardContext } from './ClusterDeploymentWizardContext';
+import { ValidationSection } from '../components/ValidationSection';
+import { ClusterDeploymentWizardContext } from '../ClusterDeploymentWizardContext';
 
 const getInitialValues = ({
   agents,
@@ -45,9 +45,12 @@ const getInitialValues = ({
   const isSNOCluster = getIsSNOCluster(agentClusterInstall);
   const cdName = clusterDeployment?.metadata?.name;
   const cdNamespace = clusterDeployment?.metadata?.namespace;
+
   let hostCount =
     (agentClusterInstall?.spec?.provisionRequirements?.controlPlaneAgents || 0) +
+    (agentClusterInstall?.spec?.provisionRequirements?.arbiterAgents || 0) +
     (agentClusterInstall?.spec?.provisionRequirements?.workerAgents || 0);
+
   if (isSNOCluster) {
     hostCount = 1;
   } else if (hostCount === 2 || hostCount === 0) {
@@ -255,7 +258,7 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
   const errorsSection = (
     <ValidationSection currentStepId={'cluster-details'} hosts={[]}>
       {syncError && (
-        <Alert variant={AlertVariant.danger} title={t('ai:An error occured')} isInline>
+        <Alert variant={AlertVariant.danger} title={t('ai:An error occurred')} isInline>
           {syncError}
         </Alert>
       )}
@@ -310,6 +313,7 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
           onAutoSelectChange={onAutoSelectChange}
           onHostSelect={onHostSelect}
           isNutanix={isNutanix}
+          hostsBinding={nextRequested && !showClusterErrors}
         />
       </GridItem>
       {(showClusterErrors || showFormErrors) && !!alerts.length && (
@@ -334,10 +338,9 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
   );
 };
 
-const ClusterDeploymentHostSelectionStep: React.FC<ClusterDeploymentHostSelectionStepProps> = ({
-  onSaveHostsSelection,
-  ...rest
-}) => {
+export const ClusterDeploymentHostSelectionStep: React.FC<
+  ClusterDeploymentHostSelectionStepProps
+> = ({ onSaveHostsSelection, ...rest }) => {
   const { t } = useTranslation();
 
   const { addAlert } = useAlerts();
@@ -377,5 +380,3 @@ const ClusterDeploymentHostSelectionStep: React.FC<ClusterDeploymentHostSelectio
     </Formik>
   );
 };
-
-export default ClusterDeploymentHostSelectionStep;

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostsSelection.tsx → hostSelection/ClusterDeploymentHostsSelection.tsx}

@@ -1,21 +1,36 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
-import { Grid, GridItem, Content, Form } from '@patternfly/react-core';
-import { SwitchField } from '../../../common';
+import { Grid, GridItem, TextContent, Form } from '@patternfly/react-core';
+import { SwitchField } from '../../../../common';
 import {
   ClusterDeploymentHostsSelectionProps,
   ClusterDeploymentHostsSelectionValues,
-} from './types';
+} from '../types';
 import ClusterDeploymentHostsSelectionBasic from './ClusterDeploymentHostsSelectionBasic';
-import ClusterDeploymentHostsSelectionAdvanced from './ClusterDeploymentHostsSelectionAdvanced';
+import { ClusterDeploymentHostsSelectionAdvanced } from './ClusterDeploymentHostsSelectionAdvanced';
 import {
   getAgentsForSelection,
   getClusterDeploymentCpuArchitecture,
   getIsSNOCluster,
-} from '../helpers';
-import MinimalHWRequirements from '../Agent/MinimalHWRequirements';
-import NoAgentsAlert from '../Agent/NoAgentsAlert';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+  getIsTNACluster,
+} from '../../helpers';
+import MinimalHWRequirements from '../../Agent/MinimalHWRequirements';
+import NoAgentsAlert from '../../Agent/NoAgentsAlert';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { TFunction } from 'i18next';
+
+const getHostRequirementText = (isSNO: boolean, isTNA: boolean, t: TFunction) => {
+  if (isSNO) {
+    return t(
+      'ai:Exactly 1 host is required, capable of functioning both as control plane and worker node.',
+    );
+  } else if (isTNA) {
+    return t(
+      'ai:Exactly 2 hosts capable of functioning as control plane nodes, and one arbiter, are required.',
+    );
+  }
+  return t('ai:At least 3 hosts are required, capable of functioning as control plane nodes.');
+};
 
 const ClusterDeploymentHostsSelection: React.FC<ClusterDeploymentHostsSelectionProps> = ({
   agentClusterInstall,
@@ -27,17 +42,20 @@ const ClusterDeploymentHostsSelection: React.FC<ClusterDeploymentHostsSelectionP
   onHostSelect,
   onSetInstallationDiskId,
   isNutanix,
+  hostsBinding,
 }) => {
+  const { t } = useTranslation();
   const { values } = useFormikContext<ClusterDeploymentHostsSelectionValues>();
   const { autoSelectHosts } = values;
   const isSNOCluster = getIsSNOCluster(agentClusterInstall);
+  const isTNA = getIsTNACluster(agentClusterInstall);
 
   const cdName = clusterDeployment?.metadata?.name;
   const cdNamespace = clusterDeployment?.metadata?.namespace;
   const cpuArchitecture = getClusterDeploymentCpuArchitecture(clusterDeployment);
 
   const availableAgents = React.useMemo(() => {
-    const filtered = getAgentsForSelection(agents).filter(
+    const filtered = getAgentsForSelection(agents, hostsBinding).filter(
       (agent) =>
         (agent.spec.clusterDeploymentName?.name === cdName &&
           agent.spec.clusterDeploymentName?.namespace === cdNamespace) ||
@@ -45,22 +63,20 @@ const ClusterDeploymentHostsSelection: React.FC<ClusterDeploymentHostsSelectionP
           !agent.spec.clusterDeploymentName?.namespace &&
           agent.status?.inventory.cpu?.architecture === cpuArchitecture),
     );
+
     return isNutanix
       ? filtered.filter((a) => a.status?.inventory?.systemVendor?.manufacturer === 'Nutanix')
       : filtered;
-  }, [agents, cdNamespace, cdName, cpuArchitecture, isNutanix]);
-  const { t } = useTranslation();
+  }, [agents, hostsBinding, isNutanix, cdName, cdNamespace, cpuArchitecture]);
+
+  const hostRequirementText = getHostRequirementText(isSNOCluster, isTNA, t);
+
   return (
     <Grid hasGutter>
       <GridItem>
-        <Content>
-          {isSNOCluster
-            ? t(
-                'ai:Exactly 1 host is required, capable of functioning both as control plane and worker node.',
-              )
-            : t('ai:At least 3 hosts are required, capable of functioning as control plane nodes.')}
-        </Content>
+        <TextContent>{hostRequirementText}</TextContent>
       </GridItem>
+
       {aiConfigMap && (
         <GridItem>
           <MinimalHWRequirements aiConfigMap={aiConfigMap} isSNOCluster={isSNOCluster} />