@openshift-assisted/ui-lib 2.9.15-cim → 2.10.1-cim

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

@@ -40,7 +40,8 @@ import {
   bmcAddressValidationSchema,
 } from '../../../common';
 import { Language } from '@patternfly/react-code-editor';
-import { MinusCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
 import {
   InfraEnvK8sResource,
   SecretK8sResource,
@@ -184,26 +185,25 @@ const emptyValues: AddBmcValues = {
   bootMACAddress: '',
   disableCertificateVerification: true, // TODO(mlibra)
   online: true,
-  nmState:
-    'interfaces:\n\
-- name: <nic1_name>\n\
-  type: ethernet\n\
-  state: up\n\
-  ipv4:\n\
-    address:\n\
-    - ip: <ip_address>\n\
-      prefix-length: 24\n\
-    enabled: true\n\
-dns-resolver:\n\
-  config:\n\
-    server:\n\
-    - <dns_ip_address>\n\
-routes:\n\
-  config:\n\
-  - destination: 0.0.0.0/0\n\
-    next-hop-address: <next_hop_ip_address>\n\
-    next-hop-interface: <next_hop_nic1_name>\n\
-',
+  nmState: `interfaces:
+  - name: <nic1_name>
+    type: ethernet
+    state: up
+    ipv4:
+      address:
+      - ip: <ip_address>
+        prefix-length: 24
+      enabled: true
+dns-resolver:
+  config:
+    server:
+    - <dns_ip_address>
+routes:
+  config:
+  - destination: 0.0.0.0/0
+    next-hop-address: <next_hop_ip_address>
+    next-hop-interface: <next_hop_nic1_name>
+  `,
   macMapping: [{ macAddress: '', name: '' }],
 };
 
@@ -212,9 +212,12 @@ const getInitValues = (
   nmState?: NMStateK8sResource,
   secret?: SecretK8sResource,
   isEdit?: boolean,
+  addNMState?: boolean,
 ): AddBmcValues => {
+  let values = emptyValues;
+
   if (isEdit) {
-    return {
+    values = {
       name: bmh?.metadata?.name || '',
       hostname: bmh?.metadata?.annotations?.[BMH_HOSTNAME_ANNOTATION] || '',
       bmcAddress: bmh?.spec?.bmc?.address || '',
@@ -226,9 +229,12 @@ const getInitValues = (
       nmState: nmState ? yaml.dump(nmState?.spec?.config) : emptyValues.nmState,
       macMapping: nmState?.spec?.interfaces || [{ macAddress: '', name: '' }],
     };
-  } else {
-    return emptyValues;
   }
+
+  if (!addNMState) {
+    values.nmState = '';
+  }
+  return values;
 };
 
 const BMCForm: React.FC<BMCFormProps> = ({
@@ -254,12 +260,16 @@ const BMCForm: React.FC<BMCFormProps> = ({
       setError(getErrorMessage(e));
     }
   };
+
   const { t } = useTranslation();
   const { initValues, validationSchema } = React.useMemo(() => {
-    const initValues = getInitValues(bmh, nmState, secret, isEdit);
+    const addNmState =
+      infraEnv.metadata?.labels && infraEnv.metadata?.labels['networkType'] === 'static';
+
+    const initValues = getInitValues(bmh, nmState, secret, isEdit, addNmState);
     const validationSchema = getValidationSchema(usedHostnames, initValues.hostname, t);
     return { initValues, validationSchema };
-  }, [usedHostnames, bmh, nmState, secret, isEdit, t]);
+  }, [infraEnv.metadata?.labels, usedHostnames, bmh, nmState, secret, isEdit, t]);
 
   return (
     <Formik

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
-import { InfoCircleIcon } from '@patternfly/react-icons';
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 
 import { ConfigMapK8sResource } from '../../types';
 import HostRequirements, {

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

@@ -583,7 +583,7 @@ export const useAgentsFilter = ({
 }: UseAgentsFilterArgs) => {
   const [hostnameFilter, setHostnameFilter] = React.useState<string>();
   const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
-  const statusCount = Object.keys(agentStatus).reduce((acc, curr) => {
+  const statusCount = Object.keys(agentStatuses).reduce((acc, curr) => {
     acc[agentStatuses[curr].title] = 0;
     return acc;
   }, {} as StatusCount);

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CheckCircleIcon } from '@patternfly/react-icons';
+import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
 import {
   Bullseye,

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AgentClusterInstallK8sResource, AgentK8sResource } from '../../types';
 import DefaultEmptyState from '../../../common/components/ui/uiState/EmptyState';
-import { ConnectedIcon } from '@patternfly/react-icons';
+import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
 import { infraEnvColumn, agentStatusColumn, useAgentsTable } from '../Agent/tableUtils';
 import {
   cpuCoresColumn,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ConnectedIcon } from '@patternfly/react-icons';
+import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
 import { EmptyState } from '../../../common';
 import { AgentTableActions } from './types';
 import {

package/lib/cim/components/ClusterDeployment/networkConfigurationValidation.ts

@@ -58,8 +58,8 @@ export const getNetworkInitialValues = (
       selectClusterNetworkHostPrefix(cluster) || defaultNetworkSettings.clusterNetworkHostPrefix,
     serviceNetworkCidr:
       selectServiceNetworkCIDR(cluster) || defaultNetworkSettings.serviceNetworkCidr,
-    apiVip: cluster.apiVip || '',
-    ingressVip: cluster.ingressVip || '',
+    apiVips: cluster.apiVips,
+    ingressVips: cluster.ingressVips,
     sshPublicKey: cluster.sshPublicKey || '',
     hostSubnet: getInitHostSubnet(cluster, managedNetworkingType) || NO_SUBNET_SET,
     vipDhcpAllocation: cluster.vipDhcpAllocation,

package/lib/cim/components/Hypershift/DetailsPage/ClusterInstallationProgress.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { ProgressStepper, Stack, StackItem } from '@patternfly/react-core';
 import { AgentK8sResource, ConfigMapK8sResource, SecretK8sResource } from '../../../types';
-import { AgentMachineK8sResource, HostedClusterK8sResource, NodePoolK8sResource } from '../types';
+import {
+  AgentMachineK8sResource,
+  HostedClusterK8sResource,
+  NodePoolK8sResource,
+  NodePoolPatches,
+} from '../types';
 import HypershiftKubeconfigDownload from './HypershiftKubeconfigDownload';
 import HostedClusterProgress from './HostedClusterProgress';
 import NodePoolsProgress from './NodePoolsProgress';
@@ -17,11 +22,7 @@ type ClusterInstallationProgressProps = {
   onRemoveNodePool: (nodePool: NodePoolK8sResource) => Promise<unknown>;
   onUpdateNodePool: (
     nodePool: NodePoolK8sResource,
-    nodePoolPatches: {
-      op: string;
-      value: unknown;
-      path: string;
-    }[],
+    nodePoolPatches: NodePoolPatches,
   ) => Promise<unknown>;
   onAddNodePool: (nodePool: NodePoolK8sResource) => Promise<unknown>;
   launchToOCP: (urlSuffix: string, newTab: boolean) => void;

package/lib/cim/components/Hypershift/DetailsPage/ConditionsTable.tsx

@@ -1,15 +1,11 @@
 import { Flex, FlexItem } from '@patternfly/react-core';
-import {
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-  InProgressIcon,
-  UnknownIcon,
-} from '@patternfly/react-icons';
+import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
+import { UnknownIcon } from '@patternfly/react-icons/dist/js/icons/unknown-icon';
 import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
-import {
-  global_palette_green_500 as okColor,
-  global_danger_color_100 as dangerColor,
-} from '@patternfly/react-tokens';
+import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
 import * as React from 'react';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 

package/lib/cim/components/Hypershift/DetailsPage/HostedClusterProgress.tsx

@@ -6,11 +6,10 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import {
-  global_palette_green_500 as okColor,
-  global_danger_color_100 as dangerColor,
-} from '@patternfly/react-tokens';
-import { CheckCircleIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
+import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { HostedClusterK8sResource } from '../types';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { ExternalLink } from '../../../../common';

package/lib/cim/components/Hypershift/DetailsPage/NodePoolsProgress.tsx

@@ -7,10 +7,15 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 import { TFunction } from 'i18next';
-import { global_palette_green_500 as okColor } from '@patternfly/react-tokens';
-import { CheckCircleIcon } from '@patternfly/react-icons';
+import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
+import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 
-import { AgentMachineK8sResource, HostedClusterK8sResource, NodePoolK8sResource } from '../types';
+import {
+  AgentMachineK8sResource,
+  HostedClusterK8sResource,
+  NodePoolK8sResource,
+  NodePoolPatches,
+} from '../types';
 import { AgentK8sResource, ConfigMapK8sResource } from '../../../types';
 import { getNodepoolAgents, getNodePoolStatus, NodePoolStatus } from '../utils';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
@@ -67,11 +72,7 @@ type NodePoolsProgressProps = {
   onRemoveNodePool: (nodePool: NodePoolK8sResource) => Promise<unknown>;
   onUpdateNodePool: (
     nodePool: NodePoolK8sResource,
-    nodePoolPatches: {
-      op: string;
-      value: unknown;
-      path: string;
-    }[],
+    nodePoolPatches: NodePoolPatches,
   ) => Promise<unknown>;
   onAddNodePool: (nodePool: NodePoolK8sResource) => Promise<unknown>;
   supportedVersionsCM?: ConfigMapK8sResource;

package/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { Button, Label, Popover, Stack, StackItem } from '@patternfly/react-core';
-import { PlusCircleIcon } from '@patternfly/react-icons';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
 import {
   breakWord,
   expandable,
@@ -22,7 +22,12 @@ import AgentStatus from '../../Agent/AgentStatus';
 import { INFRAENV_AGENTINSTALL_LABEL_KEY } from '../../common';
 import ManageHostsModal from '../modals/ManageHostsModal';
 import AddNodePoolModal from '../modals/AddNodePoolModal';
-import { AgentMachineK8sResource, HostedClusterK8sResource, NodePoolK8sResource } from '../types';
+import {
+  AgentMachineK8sResource,
+  HostedClusterK8sResource,
+  NodePoolK8sResource,
+  NodePoolPatches,
+} from '../types';
 import RemoveNodePoolModal from '../modals/RemoveNodePoolModal';
 import NodePoolStatus from './NodePoolStatus';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
@@ -37,11 +42,7 @@ type NodePoolsTableProps = {
   onRemoveNodePool: (nodePool: NodePoolK8sResource) => Promise<unknown>;
   onUpdateNodePool: (
     nodePool: NodePoolK8sResource,
-    nodePoolPatches: {
-      op: string;
-      value: unknown;
-      path: string;
-    }[],
+    nodePoolPatches: NodePoolPatches,
   ) => Promise<unknown>;
   hostedCluster: HostedClusterK8sResource;
   onAddNodePool: (nodePool: NodePoolK8sResource) => Promise<unknown>;

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/HostsForm.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FieldArray, useFormikContext } from 'formik';
-import { PlusCircleIcon } from '@patternfly/react-icons';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
 import { Alert, Button, Form, FormGroup, Grid, GridItem } from '@patternfly/react-core';
 
 import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
@@ -35,7 +35,7 @@ const HostsForm: React.FC<HostsFormProps> = ({
       ];
 
   const totalHosts = values.nodePools.reduce((acc, nodePool) => {
-    acc += nodePool.count;
+    acc += nodePool.useAutoscaling ? nodePool.autoscaling.maxReplicas : nodePool.count;
     return acc;
   }, 0);
 
@@ -122,11 +122,16 @@ const HostsForm: React.FC<HostsFormProps> = ({
                   onClick={() => {
                     const uniquePoolName = `nodepool-${clusterName}-${getRandomString(5)}`;
                     push({
-                      name: uniquePoolName,
+                      nodePoolName: uniquePoolName,
                       count: 1,
                       agentLabels: [],
                       releaseImage: initReleaseImage,
                       clusterName,
+                      useAutoscaling: false,
+                      autoscaling: {
+                        minReplicas: 1,
+                        maxReplicas: 1,
+                      },
                     } as NodePoolFormValue);
                   }}
                 >

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/HostsStep.tsx

@@ -18,14 +18,15 @@ const validationSchema = (clusterName: string, nodePools: NodePoolK8sResource[],
       nodePools: Yup.array().of(
         Yup.object<NodePoolFormValue>()
           .shape({
-            name: Yup.string()
+            nodePoolName: Yup.string()
               .required(t('ai:Required field'))
               .test(t('ai:Must be unique'), t('ai:Must be unique'), (value) => {
                 if (!value) {
                   return true;
                 }
                 return (
-                  values.nodePools.filter(({ name }) => name === value).length === 1 &&
+                  values.nodePools.filter(({ nodePoolName }) => nodePoolName === value).length ===
+                    1 &&
                   !nodePools.some(
                     ({ metadata }) =>
                       metadata?.name === value && metadata?.namespace === clusterName,
@@ -35,6 +36,10 @@ const validationSchema = (clusterName: string, nodePools: NodePoolK8sResource[],
             clusterName: Yup.string().required(t('ai:Required field')),
             count: Yup.number(),
             releaseImage: Yup.string().required(t('ai:Required field')),
+            autoscaling: Yup.object().shape({
+              minReplicas: Yup.number().min(1, t('ai:Must be at least 1')),
+              maxReplicas: Yup.number().min(1, t('ai:Must be at least 1')),
+            }),
           })
           .required(t('ai:Required field')),
       ),
@@ -78,11 +83,16 @@ const HostsStep: React.FC<HostsStepProps> = ({
             agentNamespace: initInfraEnv || infraEnvsWithAgents[0]?.metadata?.namespace || '',
             nodePools: initNodePools || [
               {
-                name: `nodepool-${clusterName}-1`,
+                nodePoolName: `nodepool-${clusterName}-1`,
                 count: 1,
                 agentLabels: [],
                 releaseImage: initReleaseImage,
                 clusterName,
+                useAutoscaling: false,
+                autoscaling: {
+                  minReplicas: 1,
+                  maxReplicas: 1,
+                },
               },
             ],
           }}

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/NodePoolForm.tsx

@@ -13,7 +13,7 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 import * as React from 'react';
-import { TrashIcon } from '@patternfly/react-icons';
+import { TrashIcon } from '@patternfly/react-icons/dist/js/icons/trash-icon';
 import isMatch from 'lodash-es/isMatch.js';
 import { PencilEditField } from '../../../../../common';
 import { AgentK8sResource, InfraEnvK8sResource } from '../../../../types';
@@ -37,7 +37,13 @@ type NodePoolFormProps = {
 const NodePoolForm: React.FC<NodePoolFormProps> = ({ infraEnvs, agents, index, onRemove }) => {
   const { t } = useTranslation();
   const { values } = useFormikContext<HostsFormValues>();
-  const { setValue } = useFormikHelpers(`nodePools[${index}].count`);
+  const { setValue: setCountValue } = useFormikHelpers(`nodePools[${index}].count`);
+  const { setValue: setMinAutoscalingValue } = useFormikHelpers(
+    `nodePools[${index}].autoscaling.minReplicas`,
+  );
+  const { setValue: setMaxAutoscalingValue } = useFormikHelpers(
+    `nodePools[${index}].autoscaling.maxReplicas`,
+  );
   const [isExpanded, setExpanded] = React.useState(true);
   const infraEnvAgents = React.useMemo(() => {
     const infraEnv = infraEnvs.find((ie) => ie.metadata?.namespace === values.agentNamespace);
@@ -63,7 +69,9 @@ const NodePoolForm: React.FC<NodePoolFormProps> = ({ infraEnvs, agents, index, o
   let previousNodePoolsCount = 0;
 
   for (let i = 0; i < index; i++) {
-    previousNodePoolsCount += values.nodePools[i].count;
+    previousNodePoolsCount += values.nodePools[i].useAutoscaling
+      ? values.nodePools[i].autoscaling.maxReplicas
+      : values.nodePools[i].count;
   }
 
   const maxAgents = Math.max(
@@ -71,12 +79,30 @@ const NodePoolForm: React.FC<NodePoolFormProps> = ({ infraEnvs, agents, index, o
     Math.min(matchingAgents.length, availableAgents.length - previousNodePoolsCount),
   );
 
-  const currentCount = values.nodePools[index].count;
+  const currentCount = values.nodePools[index].useAutoscaling
+    ? values.nodePools[index].autoscaling.maxReplicas
+    : values.nodePools[index].count;
+
   React.useEffect(() => {
     if (currentCount > maxAgents) {
-      void setValue(maxAgents);
+      if (values.nodePools[index].useAutoscaling) {
+        if (maxAgents === 0) {
+          void setMinAutoscalingValue(maxAgents);
+        }
+        void setMaxAutoscalingValue(maxAgents);
+      } else {
+        void setCountValue(maxAgents);
+      }
     }
-  }, [maxAgents, setValue, currentCount]);
+  }, [
+    maxAgents,
+    currentCount,
+    values.nodePools,
+    index,
+    setCountValue,
+    setMinAutoscalingValue,
+    setMaxAutoscalingValue,
+  ]);
 
   return (
     <Stack hasGutter>
@@ -99,7 +125,7 @@ const NodePoolForm: React.FC<NodePoolFormProps> = ({ infraEnvs, agents, index, o
                   </SplitItem>
                   <SplitItem>
                     <PencilEditField
-                      name={`nodePools.${index}.name`}
+                      name={`nodePools.${index}.nodePoolName`}
                       isRequired
                       showErrorMessage={false}
                     />
@@ -109,7 +135,7 @@ const NodePoolForm: React.FC<NodePoolFormProps> = ({ infraEnvs, agents, index, o
               {!isExpanded && (
                 <>
                   <FlexItem>
-                    <Divider isVertical />
+                    <Divider />
                   </FlexItem>
                   <FlexItem>
                     <Label variant="outline">
@@ -135,6 +161,8 @@ const NodePoolForm: React.FC<NodePoolFormProps> = ({ infraEnvs, agents, index, o
             agents={infraEnvAgents}
             countName={`nodePools.${index}.count`}
             labelName={`nodePools.${index}.agentLabels`}
+            autoscalingName={`nodePools.${index}.autoscaling`}
+            useAutoscalingName={`nodePools.${index}.useAutoscaling`}
             maxAgents={maxAgents}
           />
         </StackItem>

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/types.ts

@@ -1,17 +1,11 @@
 import { FormikProps } from 'formik';
 import { AgentK8sResource, InfraEnvK8sResource } from '../../../../types';
-import { NodePoolK8sResource } from '../../types';
+import { NodePoolFormValues, NodePoolK8sResource } from '../../types';
 
 export type NodePoolFormValue = {
-  name: string;
   clusterName: string;
-  count: number;
-  agentLabels: {
-    key: string;
-    value: string;
-  }[];
   releaseImage: string;
-};
+} & NodePoolFormValues;
 
 export type HostsFormValues = {
   controllerAvailabilityPolicy: string;

package/lib/cim/components/Hypershift/forms/NodePoolAgentsForm.tsx

@@ -1,9 +1,10 @@
 import { Grid, GridItem } from '@patternfly/react-core';
 import * as React from 'react';
-import { NumberInputField, PopoverIcon } from '../../../../common';
+import { CheckboxField, NumberInputField, PopoverIcon } from '../../../../common';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { AgentK8sResource } from '../../../types';
 import { LabelSelectorGroup } from '../../ClusterDeployment/LabelsSelector';
+import { useField } from 'formik';
 
 type NodePoolAgentsFormProps = {
   agents: AgentK8sResource[];
@@ -11,16 +12,36 @@ type NodePoolAgentsFormProps = {
   countName: string;
   maxAgents: number;
   isEdit?: boolean;
+  autoscalingName: string;
+  useAutoscalingName: string;
 };
 
 const NodePoolAgentsForm = ({
   agents,
   labelName,
   countName,
+  autoscalingName,
   maxAgents,
+  useAutoscalingName,
   isEdit = false,
 }: NodePoolAgentsFormProps) => {
   const { t } = useTranslation();
+
+  const [{ value: minValue }] = useField<number>(`${autoscalingName}.minReplicas`);
+  const [{ value: maxValue }] = useField<number>(`${autoscalingName}.maxReplicas`);
+  const [{ value: useAutoscalingValue }] = useField<boolean>(useAutoscalingName);
+
+  const helperText = (
+    <>
+      {t('ai:Maximum availability {{maxAgents}}', { maxAgents })}{' '}
+      <PopoverIcon
+        bodyContent={t(
+          'ai:Maximum availability is based on the number of hosts available in a given namespace. The number changes dynamically depending on the filtering labels added above.',
+        )}
+      />
+    </>
+  );
+
   return (
     <Grid hasGutter>
       {!isEdit && (
@@ -29,25 +50,43 @@ const NodePoolAgentsForm = ({
         </GridItem>
       )}
       <GridItem>
-        <NumberInputField
-          label={t('ai:Number of hosts')}
-          idPostfix="count"
-          name={countName}
-          isRequired
-          minValue={0}
-          maxValue={maxAgents}
-          helperText={
-            <>
-              {t('ai:Maximum availability {{maxAgents}}', { maxAgents })}{' '}
-              <PopoverIcon
-                bodyContent={t(
-                  'ai:Maximum availability is based on the number of hosts available in a given namespace. The number changes dynamically depending on the filtering labels added above.',
-                )}
-              />
-            </>
-          }
-        />
+        <CheckboxField name={useAutoscalingName} label={t('ai:Use autoscaling')} />
       </GridItem>
+      {useAutoscalingValue ? (
+        <>
+          <GridItem>
+            <NumberInputField
+              name={`${autoscalingName}.minReplicas`}
+              label={t('ai:Minimum number of hosts')}
+              isRequired
+              minValue={1}
+              maxValue={maxValue || maxAgents}
+            />
+          </GridItem>
+          <GridItem>
+            <NumberInputField
+              name={`${autoscalingName}.maxReplicas`}
+              label={t('ai:Maximum number of hosts')}
+              isRequired
+              minValue={minValue || 1}
+              maxValue={maxAgents}
+              helperText={helperText}
+            />
+          </GridItem>
+        </>
+      ) : (
+        <GridItem>
+          <NumberInputField
+            label={t('ai:Number of hosts')}
+            idPostfix="count"
+            name={countName}
+            isRequired
+            minValue={0}
+            maxValue={maxAgents}
+            helperText={helperText}
+          />
+        </GridItem>
+      )}
     </Grid>
   );
 };

package/lib/cim/components/Hypershift/modals/AddNodePoolModal.tsx

@@ -15,9 +15,9 @@ import { Formik } from 'formik';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { getErrorMessage } from '../../../../common/utils';
 import { AgentK8sResource, ConfigMapK8sResource } from '../../../types';
-import { HostedClusterK8sResource, NodePoolK8sResource } from '../types';
+import { HostedClusterK8sResource, NodePoolFormValues, NodePoolK8sResource } from '../types';
 import { formikLabelsToLabels } from '../utils';
-import NodePoolForm, { NodePoolFormValues } from './NodePoolForm';
+import NodePoolForm from './NodePoolForm';
 
 type AddNodePoolModalProps = {
   agentsNamespace: string;
@@ -91,6 +91,11 @@ const AddNodePoolModal = ({
           )}`,
           agentLabels: [],
           count: 1,
+          useAutoscaling: false,
+          autoscaling: {
+            minReplicas: 1,
+            maxReplicas: 1,
+          },
         }}
         onSubmit={handleSubmit}
       >