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

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

@@ -34,6 +34,7 @@ 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';
 
 const ClusterDeploymentHostDiscoveryTable: React.FC<ClusterDeploymentHostDiscoveryTableProps> = ({
   agents,
@@ -53,7 +54,11 @@ const ClusterDeploymentHostDiscoveryTable: React.FC<ClusterDeploymentHostDiscove
   const [isMassChangeHostOpen, setMassChangeHostOpen] = React.useState(false);
   const [isMassApproveOpen, setMassApproveOpen] = React.useState(false);
   const [selectedHostIDs, setSelectedHostIDs] = React.useState<string[]>([]);
+
   const { t } = useTranslation();
+  const agentStatuses = agentStatus(t);
+  const bmhStatuses = bmhStatus(t);
+
   const onSelect = (host: Host, isSelected: boolean) => {
     if (isSelected) {
       setSelectedHostIDs([...selectedHostIDs, host.id]);
@@ -79,7 +84,9 @@ const ClusterDeploymentHostDiscoveryTable: React.FC<ClusterDeploymentHostDiscove
       ...(addAll ? [discoveryTypeColumn(agents, bareMetalHosts, t)] : []),
       agentStatusColumn({
         agents,
+        agentStatuses,
         bareMetalHosts,
+        bmhStatuses,
         onEditHostname: onEditHost,
         onApprove,
         wizardStepId: 'hosts-discovery',
@@ -90,7 +97,19 @@ const ClusterDeploymentHostDiscoveryTable: React.FC<ClusterDeploymentHostDiscove
         ? [discoveredAtColumn(t), cpuCoresColumn(t), memoryColumn(t), disksColumn(t)]
         : []),
     ],
-    [agents, hostActions, bareMetalHosts, onApprove, onEditHost, addAll, t],
+    [
+      t,
+      hostActions.onEditHost,
+      hostActions.canEditRole,
+      hostActions.onEditRole,
+      addAll,
+      agents,
+      bareMetalHosts,
+      agentStatuses,
+      bmhStatuses,
+      onEditHost,
+      onApprove,
+    ],
   );
 
   const selectedAgents = agents.filter((a) => selectedHostIDs.includes(a.metadata?.uid || ''));
@@ -168,7 +187,7 @@ const ClusterDeploymentHostDiscoveryTable: React.FC<ClusterDeploymentHostDiscove
           selectedHostIDs={selectedHostIDs}
           onChangeHostname={onAgentChangeHostname}
           onClose={() => setMassChangeHostOpen(false)}
-          canChangeHostname={canChangeHostname(agents, bareMetalHosts, t)}
+          canChangeHostname={canChangeHostname(agents, agentStatuses, bareMetalHosts, t)}
         />
       )}
       {isMassApproveOpen && (

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

@@ -20,6 +20,7 @@ import {
 import { usePagination } from '../../../common/components/hosts/usePagination';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
+import { agentStatus } from '../helpers/agentStatus';
 
 type ExpandComponentContextType = {
   onSetInstallationDiskId?: ClusterDeploymentHostsNetworkTableProps['onSetInstallationDiskId'];
@@ -79,6 +80,7 @@ const ClusterDeploymentHostsNetworkTable: React.FC<ClusterDeploymentHostsNetwork
       onSetInstallationDiskId,
     }) => {
       const { t } = useTranslation();
+      const agentStatuses = agentStatus(t);
       const cluster = React.useMemo(
         () => getAICluster({ clusterDeployment, agentClusterInstall, agents }),
         [clusterDeployment, agentClusterInstall, agents],
@@ -100,24 +102,37 @@ const ClusterDeploymentHostsNetworkTable: React.FC<ClusterDeploymentHostsNetwork
                 hostnameColumn(t, hostActions.onEditHost, hosts),
                 agentStatusColumn({
                   agents,
+                  agentStatuses,
                   onEditHostname: onEditHost,
                   wizardStepId: 'networking',
                   t,
                 }),
-                activeNICColumn(cluster),
+                activeNICColumn(cluster, t),
               ]
             : [
                 hostnameColumn(t, hostActions.onEditHost, hosts),
                 roleColumn(t, hostActions.canEditRole, hostActions.onEditRole),
                 agentStatusColumn({
                   agents,
+                  agentStatuses,
                   onEditHostname: onEditHost,
                   wizardStepId: 'networking',
                   t,
                 }),
-                activeNICColumn(cluster),
+                activeNICColumn(cluster, t),
               ],
-        [isSNOCluster, onEditHost, hosts, agents, hostActions, cluster, t],
+        [
+          isSNOCluster,
+          t,
+          hostActions.onEditHost,
+          hostActions.canEditRole,
+          hostActions.onEditRole,
+          hosts,
+          agents,
+          agentStatuses,
+          onEditHost,
+          cluster,
+        ],
       );
 
       const paginationProps = usePagination(hosts.length);

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

@@ -9,6 +9,7 @@ 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/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/InfraEnvHostsTabAgentsWarning.tsx

@@ -6,6 +6,7 @@ import { AgentK8sResource, BareMetalHostK8sResource } from '../../types';
 import { AGENT_BMH_NAME_LABEL_KEY } from '../common';
 import { Tooltip } from '@patternfly/react-core';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { agentStatus, bmhStatus } from '../helpers/agentStatus';
 
 export type InfraEnvHostsTabAgentsWarning = {
   infraAgents: AgentK8sResource[];
@@ -26,9 +27,11 @@ const InfraEnvHostsTabAgentsWarning: React.FC<InfraEnvHostsTabAgentsWarning> = (
   const bmhsWithoutAgents = infraBMHs.filter((bmh) =>
     agentsBMHNames.includes(bmh.metadata?.name || ''),
   );
+  const agentStatuses = agentStatus(t);
+  const bmhStatuses = bmhStatus(t);
 
-  const agentStates = infraAgents.map((agent) => getAgentStatus(agent, true).status);
-  const bmhStates = bmhsWithoutAgents.map((bmh) => getBMHStatus(bmh).state);
+  const agentStates = infraAgents.map((agent) => getAgentStatus(agent, agentStatuses, true).status);
+  const bmhStates = bmhsWithoutAgents.map((bmh) => getBMHStatus(bmh, bmhStatuses).state);
 
   const hostStates = [...agentStates, ...bmhStates];
 

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

@@ -14,15 +14,16 @@ import {
 } from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons';
 import * as React from 'react';
-import { HostStatus } from '../../../common/components/hosts/types';
+import { HostStatus, HostStatusDef } from '../../../common/components/hosts/types';
 import { agentStatus } from '../helpers/agentStatus';
 import { TableToolbar } from '../../../common';
 import { usePagination } from '../../../common/components/hosts/usePagination';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { StatusCount } from '../Agent/tableUtils';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
+import { TFunction } from 'i18next';
 
-const getStatusesForFiler = (statuses: HostStatus<string>) => {
+const getStatusesForFilter = (statuses: HostStatus<string>) => {
   const filterStatuses: {
     [category: string]: {
       [label: string]: string[];
@@ -54,6 +55,12 @@ const getStatusesForFiler = (statuses: HostStatus<string>) => {
   return filterStatuses;
 };
 
+const getCategoryLabels = (t: TFunction): { [k in HostStatusDef['category']]: string } => ({
+  'Installation related': t('ai:Installation related'),
+  'Discovery related': t('ai:Discovery related'),
+  'Bare Metal Host related': t('ai:Bare Metal Host related'),
+});
+
 type InfraTableToolbarProps = ReturnType<typeof usePagination> & {
   setSelectedHostIDs: (items: string[]) => void;
   massActions: React.ReactNode[];
@@ -78,10 +85,13 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
   selectedHostIDs,
   ...paginationProps
 }) => {
-  const [statusFilterOpen, setStatusFilterOpen] = React.useState(false);
-  const filterStatuses = React.useMemo(() => getStatusesForFiler(agentStatus), []);
   const { t } = useTranslation();
+  const agentStatuses = agentStatus(t);
+  const [statusFilterOpen, setStatusFilterOpen] = React.useState(false);
   const itemIDs = React.useMemo(() => hosts.map((h) => h.id), [hosts]);
+  const filterStatuses = React.useMemo(() => getStatusesForFilter(agentStatuses), [agentStatuses]);
+  const categoryLabels = getCategoryLabels(t);
+
   return (
     <TableToolbar
       selectedIDs={selectedHostIDs || []}
@@ -104,7 +114,7 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
       <ToolbarItem>
         <ToolbarFilter
           chips={statusFilter}
-          deleteChip={(category, chip) => setStatusFilter(statusFilter?.filter((f) => f !== chip))}
+          deleteChip={(_, chip) => setStatusFilter(statusFilter?.filter((f) => f !== chip))}
           deleteChipGroup={() => setStatusFilter([])}
           categoryName="Status"
         >
@@ -130,7 +140,7 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
               <Grid key="statuses" hasGutter className="table-toolbar__dropdown">
                 {Object.keys(filterStatuses).map((category) => (
                   <GridItem key={category} span={4}>
-                    <SelectGroup label={category}>
+                    <SelectGroup label={categoryLabels[category as HostStatusDef['category']]}>
                       {Object.keys(filterStatuses[category]).map((label) => (
                         <SelectOption
                           key={label}

package/lib/cim/components/helpers/agentStatus.tsx

@@ -3,60 +3,61 @@ import { ConnectedIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
 import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens';
 import { hostStatus } from '../../../common';
 import { HostStatus } from '../../../common/components/hosts/types';
+import { TFunction } from 'i18next';
 
-export const bmhStatus: HostStatus<string> = {
+export const bmhStatus = (t: TFunction): HostStatus<string> => ({
   'bmh-error': {
     key: 'bmh-error',
-    title: 'Error',
+    title: t('ai:Error'),
     category: 'Bare Metal Host related',
   },
   registering: {
     key: 'registering',
-    title: 'Registering',
+    title: t('ai:Registering'),
     category: 'Bare Metal Host related',
   },
   provisioning: {
     key: 'provisioning',
-    title: 'Provisioning',
+    title: t('ai:Provisioning'),
     category: 'Bare Metal Host related',
   },
   provisioned: {
     key: 'provisioned',
-    title: 'Provisioned',
+    title: t('ai:Provisioned'),
     category: 'Bare Metal Host related',
   },
   deprovisioning: {
     key: 'deprovisioning',
-    title: 'Deprovisioning',
+    title: t('ai:Deprovisioning'),
     category: 'Bare Metal Host related',
   },
   inspecting: {
     key: 'inspecting',
-    title: 'Inspecting',
+    title: t('ai:Inspecting'),
     category: 'Bare Metal Host related',
   },
   pending: {
     key: 'pending',
-    title: 'Pending',
+    title: t('ai:Pending'),
     category: 'Bare Metal Host related',
   },
-};
+});
 
-export const agentStatus: HostStatus<string> = {
-  ...hostStatus,
+export const agentStatus = (t: TFunction): HostStatus<string> => ({
+  ...hostStatus(t),
   discovered: {
     key: 'discovered',
-    title: 'Discovered',
+    title: t('ai:Discovered'),
     icon: <ConnectedIcon />,
     noPopover: true,
     category: 'Discovery related',
-    details: 'The host has been discovered and needs to be approved to before further use.',
+    details: t('ai:The host has been discovered and needs to be approved to before further use.'),
   },
-  ...bmhStatus,
+  ...bmhStatus(t),
   specSyncErr: {
     key: 'spec-sync-err',
-    title: 'Sync error',
+    title: t('ai:Sync error'),
     icon: <ExclamationCircleIcon color={dangerColor.value} />,
     category: 'Discovery related',
   },
-};
+});

package/lib/cim/components/helpers/agents.ts

@@ -1,7 +1,6 @@
-import { AgentStatus } from './status';
+import { AgentStatus, getAgentStatusKey } from './status';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { AgentK8sResource, BareMetalHostK8sResource } from '../../types';
-import { getAgentStatus } from './status';
 import { INFRAENV_AGENTINSTALL_LABEL_KEY } from '../common/constants';
 
 const AGENT_FOR_SELECTION_STATUSES: AgentStatus[] = [
@@ -21,8 +20,8 @@ export const hostToAgent = (agents: AgentK8sResource[] = [], host: Host) =>
 
 export const getAgentsForSelection = (agents: AgentK8sResource[]) =>
   agents.filter((agent) => {
-    const { status } = getAgentStatus(agent);
-    return AGENT_FOR_SELECTION_STATUSES.includes(status.key as AgentStatus);
+    const key = getAgentStatusKey(agent);
+    return AGENT_FOR_SELECTION_STATUSES.includes(key as AgentStatus);
   });
 
 export const getAgentRole = (agent: AgentK8sResource) => agent.spec.role || agent.status?.role;

package/lib/cim/components/helpers/status.ts

@@ -22,8 +22,9 @@ import {
   wizardStepsValidationsMap,
 } from '../ClusterDeployment/wizardTransition';
 import { HostStatusDef } from '../../../common';
-import { agentStatus, bmhStatus } from './agentStatus';
+import { agentStatus } from './agentStatus';
 import { TFunction } from 'i18next';
+import { HostStatus } from '../../../common/components/hosts/types';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const conditionsByTypeReducer = <K>(
@@ -125,29 +126,40 @@ export type AgentStatus = Host['status'] | 'discovered';
 const getInsufficientState = (agent: AgentK8sResource) =>
   agent?.spec?.clusterDeploymentName?.name ? 'insufficient' : 'insufficient-unbound';
 
-export const getAgentStatus = (
-  agent: AgentK8sResource,
-  excludeDiscovered = false,
-): { status: HostStatusDef; validationsInfo: ValidationsInfo; autoCSR?: boolean } => {
+export const getAgentStatusKey = (agent: AgentK8sResource, excludeDiscovered = false) => {
   const specSyncErr = agent.status?.conditions?.find(
     (c) => c.type === 'SpecSynced' && c.status === 'False',
   );
-
-  let status: HostStatusDef;
-  let validationsInfo: ValidationsInfo = {};
   if (specSyncErr) {
-    status = agentStatus['specSyncErr'];
+    return 'specSyncError';
   } else {
-    status = agentStatus[agent.status?.debugInfo?.state || getInsufficientState(agent)];
-    validationsInfo = agent.status?.validationsInfo || {};
     if (!excludeDiscovered && !agent.spec.approved) {
-      status = agentStatus.discovered;
+      return 'discovered';
+    } else {
+      return agent.status?.debugInfo?.state || getInsufficientState(agent);
     }
-    // TODO(jtomasek): Implement this
-    // const sublabel = areOnlyClusterSoftValidationsFailing(agentStatus.validationsInfo)
-    //   ? 'Some validations failed'
-    //   : undefined;
   }
+};
+
+export const getAgentStatus = (
+  agent: AgentK8sResource,
+  agentStatuses: HostStatus<string>,
+  excludeDiscovered = false,
+): { status: HostStatusDef; validationsInfo: ValidationsInfo; autoCSR?: boolean } => {
+  const key = getAgentStatusKey(agent, excludeDiscovered);
+
+  let validationsInfo: ValidationsInfo = {};
+
+  const status = agentStatuses[key];
+  if (key !== 'specSyncError') {
+    validationsInfo = agent.status?.validationsInfo || {};
+  }
+
+  // TODO(jtomasek): Implement this
+  // const sublabel = areOnlyClusterSoftValidationsFailing(agentStatus.validationsInfo)
+  //   ? 'Some validations failed'
+  //   : undefined;
+
   return { status, validationsInfo };
 };
 
@@ -157,13 +169,15 @@ export const getWizardStepAgentStatus = (
   t: TFunction,
   excludeDiscovered = false,
 ): { status: HostStatusDef; validationsInfo: ValidationsInfo } => {
-  const aStatus = getAgentStatus(agent, excludeDiscovered);
-  if ([agentStatus.discovered, agentStatus.specSyncErr].includes(aStatus.status)) {
+  const agentStatuses = agentStatus(t);
+  const aStatus = getAgentStatus(agent, agentStatuses, excludeDiscovered);
+
+  if ([agentStatuses.discovered, agentStatuses.specSyncErr].includes(aStatus.status)) {
     return aStatus;
   }
 
   const status =
-    agentStatus[
+    agentStatuses[
       getWizardStepHostStatus(wizardStepId, wizardStepsValidationsMap, {
         status: aStatus.status.key as Host['status'],
         validationsInfo: aStatus.validationsInfo,
@@ -188,13 +202,19 @@ export const getWizardStepAgentStatus = (
   };
 };
 
-export const getBMHStatus = (bmh: BareMetalHostK8sResource) => {
-  let bmhState = bmhStatus.pending;
-
+export const getBMHStatusKey = (bmh: BareMetalHostK8sResource) => {
   if (bmh.status?.errorType) {
-    bmhState = bmhStatus['bmh-error'];
+    return 'bmh-error';
   } else if (bmh.status?.provisioning?.state) {
-    bmhState = bmhStatus[bmh.status?.provisioning?.state] || bmhStatus.pending;
+    return bmh.status?.provisioning?.state;
+  }
+};
+
+export const getBMHStatus = (bmh: BareMetalHostK8sResource, bmhStatuses: HostStatus<string>) => {
+  let bmhState = bmhStatuses.pending;
+  const statusKey = getBMHStatusKey(bmh);
+  if (statusKey) {
+    bmhState = bmhStatuses[statusKey] || bmhState;
   }
 
   return {

package/lib/cim/components/helpers/toAssisted.ts

@@ -3,7 +3,7 @@ import { AgentK8sResource } from '../../types/k8s/agent';
 import { Cluster, Host, Inventory } from '@openshift-assisted/types/assisted-installer-service';
 import { ClusterDeploymentK8sResource } from '../../types/k8s/cluster-deployment';
 import { AgentClusterInstallK8sResource } from '../../types/k8s/agent-cluster-install';
-import { getAgentStatus, getClusterStatus } from './status';
+import { getAgentStatusKey, getClusterStatus } from './status';
 import { getHostNetworks } from './network';
 import { BareMetalHostK8sResource, InfraEnvK8sResource } from '../../types';
 import {
@@ -21,7 +21,7 @@ export const getAIHosts = (
 ) => {
   const bmhAgents: string[] = [];
   const hosts = agents.map((agent): Host => {
-    const { status } = getAgentStatus(agent, true);
+    const statusKey = getAgentStatusKey(agent, true);
     const statusInfo = agent.status?.debugInfo?.stateInfo || '';
     // TODO(mlibra) Remove that workaround once https://issues.redhat.com/browse/MGMT-7052 is fixed
     const inventory: Inventory = cloneDeep(agent.status?.inventory || {});
@@ -50,7 +50,7 @@ export const getAIHosts = (
       kind: 'Host',
       id: agent.metadata?.uid || '',
       href: '',
-      status: status.key as Host['status'],
+      status: statusKey as Host['status'],
       statusInfo,
       role: getAgentRole(agent),
       requestedHostname: agent.spec.hostname || inventory.hostname,

package/lib/cim/components/modals/MassApproveAgentModal.tsx

@@ -21,6 +21,7 @@ import { getErrorMessage } from '../../../common/utils';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
+import { HostStatus } from '../../../common/components/hosts/types';
 
 type ApproveTableRowProps = {
   agent?: AgentK8sResource;
@@ -51,7 +52,11 @@ const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host
   };
 };
 
-const statusColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
+const statusColumn = (
+  agents: AgentK8sResource[],
+  agentStatuses: HostStatus<string>,
+  t: TFunction,
+): TableRow<Host> => {
   return {
     header: {
       title: t('ai:Status'),
@@ -62,8 +67,10 @@ const statusColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host>
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);
-      const status = agent?.spec.approved ? t('ai:Already approved') : agentStatus.discovered.title;
-      const icon = agentStatus.discovered.icon;
+      const status = agent?.spec.approved
+        ? t('ai:Already approved')
+        : agentStatuses.discovered.title;
+      const icon = agentStatuses.discovered.icon;
       return {
         title: (
           <ApproveTableRow agent={agent}>
@@ -99,6 +106,7 @@ const MassApproveAgentModal: React.FC<MassApproveAgentModalProps> = ({
   const [progress, setProgress] = React.useState<number | null>(null);
   const [error, setError] = React.useState<{ title: string; message: string }>();
   const { t } = useTranslation();
+  const agentStatuses = agentStatus(t);
   const onClick = async () => {
     setError(undefined);
     let i = 0;
@@ -122,10 +130,10 @@ const MassApproveAgentModal: React.FC<MassApproveAgentModalProps> = ({
   };
   const { content, hosts } = React.useMemo(
     () => ({
-      content: [hostnameColumn(agents, t), statusColumn(agents, t)],
+      content: [hostnameColumn(agents, t), statusColumn(agents, agentStatuses, t)],
       hosts: getAIHosts(agents),
     }),
-    [agents, t],
+    [agentStatuses, agents, t],
   );
 
   const paginationProps = usePagination(hosts.length);