[Infra] Connect metric tables to i81n (#134779)

* [Infra] Connect metric tables to i81n

x-pack/plugins/infra/public/components/infrastructure_node_metrics_tables/container/container_metrics_table.tsx

@@ -17,9 +17,10 @@ import {
   EuiLoadingSpinner,
   EuiSpacer,
 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import React, { useCallback, useMemo } from 'react';
-import { MetricsNodeDetailsLink, NumberCell, StepwisePagination, UptimeCell } from '../shared';
 import type { SortState } from '../shared';
+import { MetricsNodeDetailsLink, NumberCell, StepwisePagination, UptimeCell } from '../shared';
 import type { ContainerNodeMetricsRow } from './use_container_metrics_table';
 
 export interface ContainerMetricsTableProps {
@@ -78,7 +79,9 @@ export const ContainerMetricsTable = (props: ContainerMetricsTableProps) => {
   return (
     <>
       <EuiBasicTable
-        tableCaption="Infrastructure metrics for containers"
+        tableCaption={i18n.translate('xpack.infra.metricsTable.container.tableCaption', {
+          defaultMessage: 'Infrastructure metrics for containers',
+        })}
         items={containers}
         columns={columns}
         sorting={sortSettings}
@@ -89,7 +92,9 @@ export const ContainerMetricsTable = (props: ContainerMetricsTableProps) => {
       <EuiFlexGroup justifyContent="flexEnd" alignItems="center" responsive={false} wrap>
         <EuiFlexItem grow={false}>
           <StepwisePagination
-            ariaLabel="Container metrics pagination"
+            ariaLabel={i18n.translate('xpack.infra.metricsTable.container.paginationAriaLabel', {
+              defaultMessage: 'Container metrics pagination',
+            })}
             pageCount={pageCount}
             currentPageIndex={currentPageIndex}
             setCurrentPageIndex={setCurrentPageIndex}
@@ -106,7 +111,9 @@ function containerNodeColumns(
 ): Array<EuiBasicTableColumn<ContainerNodeMetricsRow>> {
   return [
     {
-      name: 'Name',
+      name: i18n.translate('xpack.infra.metricsTable.container.nameColumnHeader', {
+        defaultMessage: 'Name',
+      }),
       field: 'name',
       truncateText: true,
       textOnly: true,
@@ -122,13 +129,20 @@ function containerNodeColumns(
       },
     },
     {
-      name: 'Uptime',
+      name: i18n.translate('xpack.infra.metricsTable.container.uptimeColumnHeader', {
+        defaultMessage: 'Uptime',
+      }),
       field: 'uptime',
       align: 'right',
       render: (uptime: number) => <UptimeCell uptimeMs={uptime} />,
     },
     {
-      name: 'CPU usage (avg.)',
+      name: i18n.translate(
+        'xpack.infra.metricsTable.container.averageCpuUsagePercentColumnHeader',
+        {
+          defaultMessage: 'CPU usage (avg.)',
+        }
+      ),
       field: 'averageCpuUsagePercent',
       align: 'right',
       render: (averageCpuUsagePercent: number) => (
@@ -136,7 +150,12 @@ function containerNodeColumns(
       ),
     },
     {
-      name: 'Memory usage(avg.)',
+      name: i18n.translate(
+        'xpack.infra.metricsTable.container.averageMemoryUsageMegabytesColumnHeader',
+        {
+          defaultMessage: 'Memory usage(avg.)',
+        }
+      ),
       field: 'averageMemoryUsageMegabytes',
       align: 'right',
       render: (averageMemoryUsageMegabytes: number) => (

x-pack/plugins/infra/public/components/infrastructure_node_metrics_tables/host/host_metrics_table.tsx

@@ -17,9 +17,10 @@ import {
   EuiLoadingSpinner,
   EuiSpacer,
 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import React, { useCallback, useMemo } from 'react';
-import { MetricsNodeDetailsLink, NumberCell, StepwisePagination } from '../shared';
 import type { SortState } from '../shared';
+import { MetricsNodeDetailsLink, NumberCell, StepwisePagination } from '../shared';
 import type { HostNodeMetricsRow } from './use_host_metrics_table';
 
 export interface HostMetricsTableProps {
@@ -78,7 +79,9 @@ export const HostMetricsTable = (props: HostMetricsTableProps) => {
   return (
     <>
       <EuiBasicTable
-        tableCaption="Infrastructure metrics for hosts"
+        tableCaption={i18n.translate('xpack.infra.metricsTable.host.tableCaption', {
+          defaultMessage: 'Infrastructure metrics for hosts',
+        })}
         items={hosts}
         columns={columns}
         sorting={sortSettings}
@@ -89,7 +92,9 @@ export const HostMetricsTable = (props: HostMetricsTableProps) => {
       <EuiFlexGroup justifyContent="flexEnd" alignItems="center" responsive={false} wrap>
         <EuiFlexItem grow={false}>
           <StepwisePagination
-            ariaLabel="Host metrics pagination"
+            ariaLabel={i18n.translate('xpack.infra.metricsTable.host.paginationAriaLabel', {
+              defaultMessage: 'Host metrics pagination',
+            })}
             pageCount={pageCount}
             currentPageIndex={currentPageIndex}
             setCurrentPageIndex={setCurrentPageIndex}
@@ -106,7 +111,9 @@ function hostMetricsColumns(
 ): Array<EuiBasicTableColumn<HostNodeMetricsRow>> {
   return [
     {
-      name: 'Name',
+      name: i18n.translate('xpack.infra.metricsTable.host.nameColumnHeader', {
+        defaultMessage: 'Name',
+      }),
       field: 'name',
       truncateText: true,
       textOnly: true,
@@ -115,13 +122,17 @@ function hostMetricsColumns(
       ),
     },
     {
-      name: '# of CPUs',
+      name: i18n.translate('xpack.infra.metricsTable.host.CpuCountColumnHeader', {
+        defaultMessage: '# of CPUs',
+      }),
       field: 'cpuCount',
       align: 'right',
       render: (cpuCount: number) => <NumberCell value={cpuCount} />,
     },
     {
-      name: 'CPU usage (avg.)',
+      name: i18n.translate('xpack.infra.metricsTable.host.averageCpuUsagePercentColumnHeader', {
+        defaultMessage: 'CPU usage (avg.)',
+      }),
       field: 'averageCpuUsagePercent',
       align: 'right',
       render: (averageCpuUsagePercent: number) => (
@@ -129,7 +140,9 @@ function hostMetricsColumns(
       ),
     },
     {
-      name: 'Memory total',
+      name: i18n.translate('xpack.infra.metricsTable.host.totalMemoryMegabytesColumnHeader', {
+        defaultMessage: 'Memory total',
+      }),
       field: 'totalMemoryMegabytes',
       align: 'right',
       render: (totalMemoryMegabytes: number) => (
@@ -137,7 +150,9 @@ function hostMetricsColumns(
       ),
     },
     {
-      name: 'Memory usage (avg.)',
+      name: i18n.translate('xpack.infra.metricsTable.host.averageMemoryUsagePercentColumnHeader', {
+        defaultMessage: 'Memory usage (avg.)',
+      }),
       field: 'averageMemoryUsagePercent',
       align: 'right',
       render: (averageMemoryUsagePercent: number) => (

x-pack/plugins/infra/public/components/infrastructure_node_metrics_tables/pod/pod_metrics_table.tsx

@@ -17,9 +17,10 @@ import {
   EuiLoadingSpinner,
   EuiSpacer,
 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
-import { MetricsNodeDetailsLink, NumberCell, StepwisePagination, UptimeCell } from '../shared';
 import type { SortState } from '../shared';
+import { MetricsNodeDetailsLink, NumberCell, StepwisePagination, UptimeCell } from '../shared';
 import type { PodNodeMetricsRow } from './use_pod_metrics_table';
 
 export interface PodMetricsTableProps {
@@ -76,7 +77,9 @@ export const PodMetricsTable = (props: PodMetricsTableProps) => {
   return (
     <>
       <EuiBasicTable
-        tableCaption="Infrastructure metrics for pods"
+        tableCaption={i18n.translate('xpack.infra.metricsTable.pod.tableCaption', {
+          defaultMessage: 'Infrastructure metrics for pods',
+        })}
         items={pods}
         columns={columns}
         sorting={sorting}
@@ -87,7 +90,9 @@ export const PodMetricsTable = (props: PodMetricsTableProps) => {
       <EuiFlexGroup justifyContent="flexEnd" alignItems="center" responsive={false} wrap>
         <EuiFlexItem grow={false}>
           <StepwisePagination
-            ariaLabel="Pod metrics pagination"
+            ariaLabel={i18n.translate('xpack.infra.metricsTable.pod.paginationAriaLabel', {
+              defaultMessage: 'Pod metrics pagination',
+            })}
             pageCount={pageCount}
             currentPageIndex={currentPageIndex}
             setCurrentPageIndex={setCurrentPageIndex}
@@ -104,7 +109,9 @@ function podNodeColumns(
 ): Array<EuiBasicTableColumn<PodNodeMetricsRow>> {
   return [
     {
-      name: 'Name',
+      name: i18n.translate('xpack.infra.metricsTable.pod.nameColumnHeader', {
+        defaultMessage: 'Name',
+      }),
       field: 'name',
       truncateText: true,
       textOnly: true,
@@ -115,13 +122,17 @@ function podNodeColumns(
       },
     },
     {
-      name: 'Uptime',
+      name: i18n.translate('xpack.infra.metricsTable.pod.uptimeColumnHeader', {
+        defaultMessage: 'Uptime',
+      }),
       field: 'uptime',
       align: 'right',
       render: (uptime: number) => <UptimeCell uptimeMs={uptime} />,
     },
     {
-      name: 'CPU usage (avg.)',
+      name: i18n.translate('xpack.infra.metricsTable.pod.averageCpuUsagePercentColumnHeader', {
+        defaultMessage: 'CPU usage (avg.)',
+      }),
       field: 'averageCpuUsagePercent',
       align: 'right',
       render: (averageCpuUsagePercent: number) => (
@@ -129,7 +140,9 @@ function podNodeColumns(
       ),
     },
     {
-      name: 'Memory usage (avg.)',
+      name: i18n.translate('xpack.infra.metricsTable.pod.averageMemoryUsageMegabytesColumnHeader', {
+        defaultMessage: 'Memory usage (avg.)',
+      }),
       field: 'averageMemoryUsageMegabytes',
       align: 'right',
       render: (averageMemoryUsageMegabytes: number) => (

x-pack/plugins/infra/public/components/infrastructure_node_metrics_tables/shared/components/number_cell.tsx

@@ -7,6 +7,7 @@
 
 import { EuiI18nNumber, EuiTextColor } from '@elastic/eui';
 import React from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
 
 interface NumberCellProps {
   value?: number;
@@ -15,7 +16,15 @@ interface NumberCellProps {
 
 export function NumberCell({ value, unit }: NumberCellProps) {
   if (value === null || value === undefined || isNaN(value)) {
-    return <EuiTextColor color="subdued">N/A</EuiTextColor>;
+    return (
+      <EuiTextColor color="subdued">
+        <FormattedMessage
+          id="xpack.infra.metricsTable.numberCell.metricNotAvailableLabel"
+          defaultMessage="N/A"
+          description="N/A is short for not available"
+        />
+      </EuiTextColor>
+    );
   }
 
   if (!unit) {

x-pack/plugins/infra/public/components/infrastructure_node_metrics_tables/shared/components/uptime_cell.tsx

@@ -6,6 +6,8 @@
  */
 
 import { EuiTextColor } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
 import React from 'react';
 
 interface UptimeCellProps {
@@ -14,7 +16,15 @@ interface UptimeCellProps {
 
 export function UptimeCell({ uptimeMs }: UptimeCellProps) {
   if (uptimeMs === null || uptimeMs === undefined || isNaN(uptimeMs)) {
-    return <EuiTextColor color="subdued">N/A</EuiTextColor>;
+    return (
+      <EuiTextColor color="subdued">
+        <FormattedMessage
+          id="xpack.infra.metricsTable.uptimeCell.metricNotAvailableLabel"
+          defaultMessage="N/A"
+          description="N/A is short for not available"
+        />
+      </EuiTextColor>
+    );
   }
 
   return <span>{formatUptime(uptimeMs)}</span>;
@@ -29,10 +39,18 @@ function formatUptime(uptimeMs: number): string {
     const minutes = Math.floor(uptimeMs / MS_PER_MINUTE);
 
     if (minutes > 0) {
-      return `${minutes}m`;
+      i18n.translate('xpack.infra.metricsTable.uptimeCell.minutesLabel', {
+        defaultMessage: '{minutes}m',
+        values: {
+          minutes,
+        },
+        description: 'm is short for minutes',
+      });
     }
 
-    return '< a minute';
+    return i18n.translate('xpack.infra.metricsTable.uptimeCell.lessThanOneMinuteLabel', {
+      defaultMessage: '< a minute',
+    });
   }
 
   if (uptimeMs < MS_PER_DAY) {
@@ -41,10 +59,23 @@ function formatUptime(uptimeMs: number): string {
     const minutes = Math.floor(remainingUptimeMs / MS_PER_MINUTE);
 
     if (minutes > 0) {
-      return `${hours}h ${minutes}m`;
+      return i18n.translate('xpack.infra.metricsTable.uptimeCell.hoursAndMinutesLabel', {
+        defaultMessage: '{hours}h {minutes}m',
+        values: {
+          hours,
+          minutes,
+        },
+        description: 'h is short for hours, m for minutes',
+      });
     }
 
-    return `${hours}h`;
+    return i18n.translate('xpack.infra.metricsTable.uptimeCell.hoursLabel', {
+      defaultMessage: '{hours}h',
+      values: {
+        hours,
+      },
+      description: 'h is short for hours',
+    });
   }
 
   const days = Math.floor(uptimeMs / MS_PER_DAY);
@@ -52,8 +83,21 @@ function formatUptime(uptimeMs: number): string {
   const hours = Math.floor(remainingUptimeMs / MS_PER_HOUR);
 
   if (hours > 0) {
-    return `${days}d ${hours}h`;
+    return i18n.translate('xpack.infra.metricsTable.uptimeCell.daysAndHoursLabel', {
+      defaultMessage: '{days}d {hours}h',
+      values: {
+        days,
+        hours,
+      },
+      description: 'd is short for days, h for hours',
+    });
   }
 
-  return `${days}d`;
+  return i18n.translate('xpack.infra.metricsTable.uptimeCell.daysLabel', {
+    defaultMessage: '{days}d',
+    values: {
+      days,
+    },
+    description: 'd is short for days',
+  });
 }