@openshift-assisted/ui-lib 2.9.14-cim → 2.10.0-cim

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}
       >

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

@@ -12,8 +12,13 @@ import {
 import { Formik, FormikConfig } from 'formik';
 import * as React from 'react';
 import { AgentK8sResource } from '../../../types';
-import { NodePoolK8sResource, HostedClusterK8sResource, AgentMachineK8sResource } from '../types';
-import NodePoolForm, { NodePoolFormValues } from './NodePoolForm';
+import {
+  NodePoolK8sResource,
+  HostedClusterK8sResource,
+  AgentMachineK8sResource,
+  NodePoolFormValues,
+} from '../types';
+import NodePoolForm from './NodePoolForm';
 import { labelsToFormikValue } from '../utils';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { getErrorMessage } from '../../../../common/utils';
@@ -27,13 +32,60 @@ type ManageHostsModalProps = {
     nodePool: NodePoolK8sResource,
     nodePoolPatches: {
       op: string;
-      value: unknown;
+      value?: unknown;
       path: string;
     }[],
   ) => Promise<unknown>;
   agentMachines: AgentMachineK8sResource[];
 };
 
+const getPatches = (values: NodePoolFormValues, nodePool: NodePoolK8sResource) => {
+  const patches = [];
+
+  if (values.useAutoscaling) {
+    if (!!nodePool.spec.autoScaling) {
+      patches.push({
+        op: 'replace',
+        value: {
+          min: values.autoscaling.minReplicas,
+          max: values.autoscaling.maxReplicas,
+        },
+        path: '/spec/autoScaling',
+      });
+    } else {
+      patches.push(
+        { op: 'remove', path: '/spec/replicas' },
+        {
+          op: 'add',
+          value: {
+            min: values.autoscaling.minReplicas,
+            max: values.autoscaling.maxReplicas,
+          },
+          path: '/spec/autoScaling',
+        },
+      );
+    }
+  } else {
+    if (!!nodePool.spec.replicas) {
+      patches.push({
+        op: 'replace',
+        value: values.count,
+        path: '/spec/replicas',
+      });
+    } else {
+      patches.push(
+        { op: 'remove', path: '/spec/autoScaling' },
+        {
+          op: 'add',
+          value: values.count,
+          path: '/spec/replicas',
+        },
+      );
+    }
+  }
+  return patches;
+};
+
 const ManageHostsModal = ({
   onClose,
   nodePool,
@@ -47,16 +99,11 @@ const ManageHostsModal = ({
   const namespaceAgents = agents.filter(
     (a) => a.metadata?.namespace === hostedCluster.spec.platform.agent?.agentNamespace,
   );
+
   const handleSubmit: FormikConfig<NodePoolFormValues>['onSubmit'] = async (values) => {
     setError(undefined);
-    const patches = [];
-    if (values.count !== nodePool.spec.replicas) {
-      patches.push({
-        op: 'replace',
-        value: values.count,
-        path: '/spec/replicas',
-      });
-    }
+    const patches = getPatches(values, nodePool);
+
     try {
       await onSubmit(nodePool, patches);
       onClose();
@@ -80,7 +127,12 @@ const ManageHostsModal = ({
           agentLabels: labelsToFormikValue(
             nodePool.spec.platform?.agent?.agentLabelSelector?.matchLabels || {},
           ),
-          count: nodePool.spec.replicas,
+          count: nodePool.spec.replicas || 1,
+          useAutoscaling: !!nodePool.spec.autoScaling,
+          autoscaling: {
+            minReplicas: nodePool.spec.autoScaling?.min || 1,
+            maxReplicas: nodePool.spec.autoScaling?.max || 1,
+          },
         }}
         isInitialValid={false}
         onSubmit={handleSubmit}

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

@@ -15,18 +15,14 @@ import { useTranslation } from '../../../../common/hooks/use-translation-wrapper
 import { AgentK8sResource } from '../../../types';
 import { getAgentsForSelection, getVersionFromReleaseImage } from '../../helpers';
 import NodePoolAgentsForm from '../forms/NodePoolAgentsForm';
-import { AgentMachineK8sResource, HostedClusterK8sResource, NodePoolK8sResource } from '../types';
+import {
+  AgentMachineK8sResource,
+  HostedClusterK8sResource,
+  NodePoolFormValues,
+  NodePoolK8sResource,
+} from '../types';
 import { getNodepoolAgents } from '../utils';
 
-export type NodePoolFormValues = {
-  nodePoolName: string;
-  agentLabels: {
-    key: string;
-    value: string;
-  }[];
-  count: number;
-};
-
 type NodePoolFormProps = {
   agents: AgentK8sResource[];
   agentMachines?: AgentMachineK8sResource[];
@@ -91,6 +87,8 @@ const NodePoolForm = ({ agents, nodePool, hostedCluster, agentMachines }: NodePo
             agents={agents}
             countName="count"
             labelName="agentLabels"
+            autoscalingName={`autoscaling`}
+            useAutoscalingName={`useAutoscaling`}
             maxAgents={maxAgents}
             isEdit={isEdit}
           />

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

@@ -4,7 +4,7 @@ import { StatusCondition } from '../../types/k8s/shared';
 export type NodePoolK8sResource = K8sResourceCommon & {
   spec: {
     clusterName: string;
-    replicas: number;
+    replicas?: number;
     management: {
       autoRepair?: boolean;
       replace?: {
@@ -188,3 +188,23 @@ export type AgentMachineK8sResource = K8sResourceCommon & {
     };
   };
 };
+
+export type NodePoolPatches = {
+  op: string;
+  value?: unknown;
+  path: string;
+}[];
+
+export type NodePoolFormValues = {
+  nodePoolName: string;
+  agentLabels: {
+    key: string;
+    value: string;
+  }[];
+  count: number;
+  autoscaling: {
+    minReplicas: number;
+    maxReplicas: number;
+  };
+  useAutoscaling: boolean;
+};

package/lib/cim/components/Hypershift/utils/status.tsx

@@ -1,14 +1,15 @@
-import { CheckCircleIcon, ExclamationCircleIcon, InProgressIcon } 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 React from 'react';
-import {
-  global_palette_green_500 as okColor,
-  global_danger_color_100 as dangerColor,
-  global_warning_color_100 as warningColor,
-} 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 { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 import { AgentK8sResource } from '../../../types';
 import { getAgentStatus } from '../../helpers';
 import { NodePoolK8sResource } from '../types';
 import { TFunction } from 'i18next';
+import { agentStatus } from '../../helpers/agentStatus';
 
 export type NodePoolStatus = {
   type: 'error' | 'pending' | 'ok' | 'warning';
@@ -31,7 +32,8 @@ export const getNodePoolStatus = (
     };
   }
 
-  const agentStatuses = agents.map((a) => getAgentStatus(a));
+  const allAgentStatuses = agentStatus(t);
+  const agentStatuses = agents.map((a) => getAgentStatus(a, allAgentStatuses));
 
   const hasErrorAgents = agentStatuses.some(({ status }) => status.key === 'error');
 

package/lib/cim/components/InfraEnv/EnvironmentDetails.tsx

@@ -14,7 +14,9 @@ import {
   Title,
   TitleSizes,
 } from '@patternfly/react-core';
-import { CheckCircleIcon, ExclamationTriangleIcon, PencilAltIcon } from '@patternfly/react-icons';
+import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { PencilAltIcon } from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
 import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
 import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 

package/lib/cim/components/InfraEnv/InfraEnvAgentTable.tsx

@@ -37,6 +37,7 @@ import MassApproveAction from '../modals/MassApproveAction';
 import { usePagination } from '../../../common/components/hosts/usePagination';
 import InfraTableToolbar from './InfraTableToolbar';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { agentStatus, bmhStatus } from '../helpers/agentStatus';
 
 type NoFilterMatchStateProps = {
   onClearFilters: VoidFunction;
@@ -107,6 +108,8 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
     },
   );
   const { t } = useTranslation();
+  const agentStatuses = agentStatus(t);
+  const bmhStatuses = bmhStatus(t);
   const {
     statusCount,
     hostnameFilter,
@@ -114,7 +117,13 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
     setStatusFilter,
     statusFilter,
     filteredHosts: hosts,
-  } = useAgentsFilter({ agents, bmhs: bareMetalHosts, hosts: allHosts });
+  } = useAgentsFilter({
+    agents,
+    agentStatuses,
+    bmhs: bareMetalHosts,
+    bmhStatuses,
+    hosts: allHosts,
+  });
 
   const content = React.useMemo(
     () =>
@@ -131,6 +140,7 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
         discoveryTypeColumn(agents, bareMetalHosts, t),
         agentStatusColumn({
           agents,
+          agentStatuses,
           bareMetalHosts,
           onEditHostname: onEditHost,
           onApprove: onApprove,
@@ -143,15 +153,18 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
         disksColumn(t),
       ].filter(Boolean),
     [
+      t,
       hosts,
       agents,
-      agentMachines,
+      bareMetalHosts,
+      hostActions.onEditHost,
+      hostActions.canEditHostname,
+      hostActions.canEditBMH,
+      agentStatuses,
       onEditHost,
       onApprove,
+      agentMachines,
       getClusterDeploymentLink,
-      hostActions,
-      bareMetalHosts,
-      t,
     ],
   );
 
@@ -162,7 +175,7 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
 
   const canEditHostname =
     selectedBMHs.some((bmh) => canEditBMH(bmh, t)[0]) ||
-    selectedAgents.some((a) => canEditAgent(a, t)[0]);
+    selectedAgents.some((a) => canEditAgent(a, agentStatuses, t)[0]);
 
   const massActions = [
     <DropdownItem
@@ -252,7 +265,7 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
           selectedHostIDs={selectedHostIDs}
           onChangeHostname={onAgentChangeHostname}
           onClose={() => setMassChangeHostOpen(false)}
-          canChangeHostname={canChangeHostname(agents, bareMetalHosts, t)}
+          canChangeHostname={canChangeHostname(agents, agentStatuses, bareMetalHosts, t)}
         />
       )}
       {isMassDeleteOpen && (

package/lib/cim/components/InfraEnv/InfraEnvFormPage.tsx

@@ -18,7 +18,7 @@ import {
   TitleSizes,
 } from '@patternfly/react-core';
 import { Formik, FormikProps, useFormikContext } from 'formik';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 import {
   httpProxyValidationSchema,