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

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