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

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[];
@@ -34,19 +35,19 @@ const getStatusesForFiler = (statuses: HostStatus<string>) => {
   );
 
   sortedStatuses.forEach((status) => {
-    const { category, title } = statuses[status];
+    const { category, key } = statuses[status];
     if (filterStatuses[category]) {
-      if (filterStatuses[category][title]) {
-        filterStatuses[category][title].push(status);
+      if (filterStatuses[category][key]) {
+        filterStatuses[category][key].push(status);
       } else {
         filterStatuses[category] = {
           ...filterStatuses[category],
-          [title]: [status],
+          [key]: [status],
         };
       }
     } else {
       filterStatuses[category] = {
-        [title]: [status],
+        [key]: [status],
       };
     }
   });
@@ -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);

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

@@ -26,6 +26,7 @@ import { usePagination } from '../../../common/components/hosts/usePagination';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
+import { agentStatus, bmhStatus } from '../helpers/agentStatus';
 
 const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
   return {
@@ -56,65 +57,71 @@ const statusColumn = (
   agents: AgentK8sResource[],
   bmhs: BareMetalHostK8sResource[],
   t: TFunction,
-): TableRow<Host> => ({
-  header: {
-    title: t('ai:Status'),
-    props: {
-      id: 'col-header-status',
+): TableRow<Host> => {
+  const agentStatuses = agentStatus(t);
+  const bmhStatuses = bmhStatus(t);
+  return {
+    header: {
+      title: t('ai:Status'),
+      props: {
+        id: 'col-header-status',
+      },
+      transforms: [sortable],
     },
-    transforms: [sortable],
-  },
-  cell: (host) => {
-    const agent = agents.find((a) => a.metadata?.uid === host.id);
-    const clusterName = agent?.spec.clusterDeploymentName?.name;
-    const bmh = bmhs?.find((b) => b.metadata?.uid === host.id);
+    cell: (host) => {
+      const agent = agents.find((a) => a.metadata?.uid === host.id);
+      const clusterName = agent?.spec.clusterDeploymentName?.name;
+      const bmh = bmhs?.find((b) => b.metadata?.uid === host.id);
 
-    let bmhStatus;
-    let title: React.ReactNode = '--';
-    if (agent) {
-      title = clusterName ? (
-        <Flex>
-          <FlexItem>
-            <AgentStatus agent={agent} zIndex={7000} />
-          </FlexItem>
-          <FlexItem align={{ default: 'alignRight' }}>
-            <Popover
-              aria-label={t('ai:Cluster popover')}
-              headerContent={<div>{t('ai:Cannot be deleted')}</div>}
-              bodyContent={
-                <div>
-                  {t(
-                    'ai:Hosts that are bound to a cluster cannot be deleted. Remove the host from the cluster and try again.',
-                  )}
-                </div>
-              }
-              footerContent={
-                <Link to={`/multicloud/infrastructure/clusters/details/${clusterName}/`}>
-                  {t('ai:Go to cluster {{clusterName}}', { clusterName })}
-                </Link>
-              }
-            >
-              <Button variant="link" icon={<InfoCircleIcon color={blueInfoColor.value} />}>
-                {t('ai:Cannot be deleted')}
-              </Button>
-            </Popover>
-          </FlexItem>
-        </Flex>
-      ) : (
-        <AgentStatus agent={agent} />
-      );
-    } else if (bmh) {
-      bmhStatus = getBMHStatus(bmh);
-      title = <BMHStatus bmhStatus={bmhStatus} />;
-    }
+      let bmhStatus;
+      let title: React.ReactNode = '--';
+      if (agent) {
+        title = clusterName ? (
+          <Flex>
+            <FlexItem>
+              <AgentStatus agent={agent} zIndex={7000} />
+            </FlexItem>
+            <FlexItem align={{ default: 'alignRight' }}>
+              <Popover
+                aria-label={t('ai:Cluster popover')}
+                headerContent={<div>{t('ai:Cannot be deleted')}</div>}
+                bodyContent={
+                  <div>
+                    {t(
+                      'ai:Hosts that are bound to a cluster cannot be deleted. Remove the host from the cluster and try again.',
+                    )}
+                  </div>
+                }
+                footerContent={
+                  <Link to={`/multicloud/infrastructure/clusters/details/${clusterName}/`}>
+                    {t('ai:Go to cluster {{clusterName}}', { clusterName })}
+                  </Link>
+                }
+              >
+                <Button variant="link" icon={<InfoCircleIcon color={blueInfoColor.value} />}>
+                  {t('ai:Cannot be deleted')}
+                </Button>
+              </Popover>
+            </FlexItem>
+          </Flex>
+        ) : (
+          <AgentStatus agent={agent} />
+        );
+      } else if (bmh) {
+        bmhStatus = getBMHStatus(bmh, bmhStatuses);
+        title = <BMHStatus bmhStatus={bmhStatus} />;
+      }
 
-    return {
-      title,
-      props: { 'data-testid': 'host-status' },
-      sortableValue: agent ? getAgentStatus(agent).status.title : bmhStatus?.state.title || '',
-    };
-  },
-});
+      return {
+        title,
+        props: { 'data-testid': 'host-status' },
+        sortableValue: agent
+          ? getAgentStatus(agent, agentStatuses).status.title
+          : bmhStatus?.state.title || '',
+      };
+    },
+  };
+};
 
 const tableContent = (
   agents: AgentK8sResource[],

package/lib/common/components/clusterWizard/networkingSteps/ManagedNetworkingControlGroup.tsx

@@ -51,9 +51,9 @@ export const ManagedNetworkingControlGroup = ({
           <>
             <span>{t('ai:User-Managed Networking')}</span>{' '}
             <PopoverIcon
-              bodyContent={
-                "With User-Managed Networking, you'll need to provide and configure a load balancer for the API and ingress endpoints."
-              }
+              bodyContent={t(
+                "ai:With User-Managed Networking, you'll need to provide and configure a load balancer for the API and ingress endpoints.",
+              )}
             />
           </>
         }

package/lib/common/components/hosts/HostRowDetail.tsx

@@ -24,6 +24,7 @@ import SectionTitle from '../ui/SectionTitle';
 import { OnDiskRoleType } from './DiskRole';
 import StorageDetail from '../storage/StorageDetail';
 import { stringToJSON } from '../../utils';
+import { TFunction } from 'i18next';
 
 type HostDetailProps = {
   host: Host;
@@ -53,12 +54,12 @@ const SectionColumn: React.FC<SectionColumnProps> = ({ children }) => (
   </GridItem>
 );
 
-const nicsColumns = [
-  { title: 'Name' },
-  { title: 'MAC address' },
-  { title: 'IPv4 address' },
-  { title: 'IPv6 address' },
-  { title: 'Speed' },
+const nicsColumns = (t: TFunction) => [
+  { title: t('ai:Name') },
+  { title: t('ai:MAC address') },
+  { title: t('ai:IPv4 address') },
+  { title: t('ai:IPv6 address') },
+  { title: t('ai:Speed') },
   // { title: 'Vendor' }, TODO(mlibra): search HW database for humanized values
   // { title: 'Product' },
 ];
@@ -71,6 +72,7 @@ const NICsTableRowWrapper = (props: RowWrapperProps) => (
 );
 
 const NicsTable: React.FC<NicsTableProps & WithTestID> = ({ interfaces, testId }) => {
+  const { t } = useTranslation();
   const rows: IRow[] = interfaces
     .sort((nicA, nicB) => nicA.name?.localeCompare(nicB.name || '') || 0)
     .map((nic) => ({
@@ -92,12 +94,12 @@ const NicsTable: React.FC<NicsTableProps & WithTestID> = ({ interfaces, testId }
       ],
       key: nic.name,
     }));
-  const { t } = useTranslation();
+
   return (
     <Table
       data-testid={testId}
       rows={rows}
-      cells={nicsColumns}
+      cells={nicsColumns(t)}
       variant={TableVariant.compact}
       aria-label={t("ai:Host's network interfaces table")}
       borders={false}
@@ -148,9 +150,9 @@ export const HostDetail = ({
 
   return (
     <Grid hasGutter>
-      <SectionTitle testId={'host-details-section'} title="Host details" />
+      <SectionTitle testId={'host-details-section'} title={t('ai:Host details')} />
       <SectionColumn>
-        <DetailItem testId={'uuid'} title="UUID" value={id} />
+        <DetailItem testId={'uuid'} title={t('ai:UUID')} value={id} />
         <DetailItem
           testId={'manufacturer'}
           title={t('ai:Manufacturer')}
@@ -161,7 +163,11 @@ export const HostDetail = ({
           title={t('ai:Product')}
           value={inventory.systemVendor?.productName || DASH}
         />
-        <DetailItem testId={'serial-number'} title="Serial number" value={rowInfo.serialNumber} />
+        <DetailItem
+          testId={'serial-number'}
+          title={t('ai:Serial number')}
+          value={rowInfo.serialNumber}
+        />
       </SectionColumn>
       <SectionColumn>
         <DetailItem
@@ -186,8 +192,8 @@ export const HostDetail = ({
         />
       </SectionColumn>
       <SectionColumn>
-        <DetailItem testId={'hw-type'} title="Hardware type" value={hardwareType} />
-        <DetailItem testId={'bmc-address'} title="BMC address" value={bmcAddress} />
+        <DetailItem testId={'hw-type'} title={t('ai:Hardware type')} value={hardwareType} />
+        <DetailItem testId={'bmc-address'} title={t('ai:BMC address')} value={bmcAddress} />
         <DetailItem
           testId={'boot-mode'}
           title={t('ai:Boot mode')}
@@ -215,10 +221,7 @@ export const HostDetail = ({
           updateDiskSkipFormatting={updateDiskSkipFormatting}
         />
       )}
-      <SectionTitle
-        testId={'nics-section'}
-        title={`${nics.length} NIC${nics.length === 1 ? '' : 's'}`}
-      />
+      <SectionTitle testId={'nics-section'} title={t('ai:NIC', { count: nics.length })} />
       <GridItem>
         <NicsTable interfaces={nics} testId={'nics-table'} />
       </GridItem>

package/lib/common/components/hosts/HostStatus.tsx

@@ -230,6 +230,8 @@ const HostStatus: React.FC<HostStatusProps> = ({
     onEditHostname?.();
   }, [keepOnOutsideClick, onEditHostname]);
 
+  const { t } = useTranslation();
+
   const { title, icon, sublabel, details, noPopover } = status;
   const titleWithProgress = getTitleWithProgress(host, status);
   const popoverProps: WithHostStatusPopoverProps = {
@@ -251,7 +253,7 @@ const HostStatus: React.FC<HostStatusProps> = ({
       {
         <FlexItem>
           {(autoCSR && status.key === 'added-to-existing-cluster'
-            ? hostStatus.installed.icon
+            ? hostStatus(t).installed.icon
             : icon) || <UnknownIcon />}
         </FlexItem>
       }