CONSOLE-2392: i18n: externalize strings in Compute nav section

frontend/packages/console-app/locales/en/nodes.json

@@ -0,0 +1,84 @@
+{
+  "This action cannot be undone. Deleting a node will instruct Kubernetes that the node is down or unrecoverable and delete all pods scheduled to that node. If the node is still running but unresponsive and the node is deleted, stateful workloads and persistent volumes may suffer corruption or data loss. Only delete a node that you have confirmed is completely stopped and cannot be restored.": "This action cannot be undone. Deleting a node will instruct Kubernetes that the node is down or unrecoverable and delete all pods scheduled to that node. If the node is still running but unresponsive and the node is deleted, stateful workloads and persistent volumes may suffer corruption or data loss. Only delete a node that you have confirmed is completely stopped and cannot be restored.",
+  "Delete node": "Delete node",
+  "Mark as unschedulable": "Mark as unschedulable",
+  "Unschedulable nodes won't accept new pods. This is useful for scheduling maintenance or preparing to decommission a node.": "Unschedulable nodes won't accept new pods. This is useful for scheduling maintenance or preparing to decommission a node.",
+  "Mark unschedulable": "Mark unschedulable",
+  "Activity": "Activity",
+  "View events": "View events",
+  "Details": "Details",
+  "View all": "View all",
+  "Node name": "Node name",
+  "Role": "Role",
+  "Instance type": "Instance type",
+  "Zone": "Zone",
+  "Node addresses": "Node addresses",
+  "Inventory": "Inventory",
+  "Image": "Image",
+  "Images": "Images",
+  "Not available": "Not available",
+  "See breakdown": "See breakdown",
+  "See details": "See details",
+  "Health checks": "Health checks",
+  "{{ cpuMessage }}": "{{ cpuMessage }}",
+  "{{ memoryMessage }}": "{{ memoryMessage }}",
+  "{{ machineHealthCheckLabelPlural }} automatically remediate node health issues.": "{{ machineHealthCheckLabelPlural }} automatically remediate node health issues.",
+  "Conditions": "Conditions",
+  "Status": "Status",
+  "Reboot pending": "Reboot pending",
+  "Reprovision pending": "Reprovision pending",
+  "Only one {{ machineHealthCheckLabel }} resource should match this node.": "Only one {{ machineHealthCheckLabel }} resource should match this node.",
+  "Not configured": "Not configured",
+  "CPU": "CPU",
+  "Memory": "Memory",
+  "Filesystem": "Filesystem",
+  "Network in": "Network in",
+  "Network out": "Network out",
+  "Utilization": "Utilization",
+  "Network transfer": "Network transfer",
+  "Pod count": "Pod count",
+  "Node conditions": "Node conditions",
+  "Type": "Type",
+  "Reason": "Reason",
+  "Updated": "Updated",
+  "Changed": "Changed",
+  "Name": "Name",
+  "Size": "Size",
+  "Node details": "Node details",
+  "External ID": "External ID",
+  "Node labels": "Node labels",
+  "Taints": "Taints",
+  "Taint": "Taint",
+  "Taint_plural": "Taints",
+  "Annotations": "Annotations",
+  "Annotation": "Annotation",
+  "Annotation_plural": "Annotations",
+  "Machine": "Machine",
+  "Provider ID": "Provider ID",
+  "Unschedulable": "Unschedulable",
+  "Created": "Created",
+  "Operating system": "Operating system",
+  "OS image": "OS image",
+  "Architecture": "Architecture",
+  "Kernel version": "Kernel version",
+  "Boot ID": "Boot ID",
+  "Container runtime": "Container runtime",
+  "Kubelet version": "Kubelet version",
+  "Kube-Proxy version": "Kube-Proxy version",
+  "Overview": "Overview",
+  "Terminal": "Terminal",
+  "Pods": "Pods",
+  "Labels": "Labels",
+  "Nodes": "Nodes",
+  "Ready": "Ready",
+  "Not Ready": "Not Ready",
+  "Master": "Master",
+  "Worker": "Worker",
+  "This node's {{conditionDescription}}. Performance may be degraded.": "This node's {{conditionDescription}}. Performance may be degraded.",
+  "host binaries": "<0>To use host binaries, run <1>chroot /host</1></0>",
+  "The debug pod failed. ": "The debug pod failed. ",
+  "An error occurred. Please try again": "An error occurred. Please try again",
+  "Scheduling disabled": "Scheduling disabled",
+  "No new Pods or workloads will be placed on this Node until it&apos;s marked as schedulable.": "No new Pods or workloads will be placed on this Node until it&apos;s marked as schedulable.",
+  "Mark as schedulable": "Mark as schedulable"
+}

frontend/packages/console-app/src/components/nodes/NodeDetailsConditions.tsx

@@ -1,5 +1,6 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { NodeKind } from '@console/internal/module/k8s';
 import { SectionHeading, Timestamp, CamelCaseWrap } from '@console/internal/components/utils';
 
@@ -8,18 +9,19 @@ type NodeDetailsConditionsProps = {
 };
 
 const NodeDetailsConditions: React.FC<NodeDetailsConditionsProps> = ({ node }) => {
+  const { t } = useTranslation();
   return (
     <div className="co-m-pane__body">
-      <SectionHeading text="Node Conditions" />
+      <SectionHeading text={t('nodes~Node conditions')} />
       <div className="co-table-container">
         <table className="table">
           <thead>
             <tr>
-              <th>Type</th>
-              <th>Status</th>
-              <th>Reason</th>
-              <th>Updated</th>
-              <th>Changed</th>
+              <th>{t('nodes~Type')}</th>
+              <th>{t('nodes~Status')}</th>
+              <th>{t('nodes~Reason')}</th>
+              <th>{t('nodes~Updated')}</th>
+              <th>{t('nodes~Changed')}</th>
             </tr>
           </thead>
           <tbody>

frontend/packages/console-app/src/components/nodes/NodeDetailsImages.tsx

@@ -1,5 +1,6 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { NodeKind } from '@console/internal/module/k8s';
 import { SectionHeading, units } from '@console/internal/components/utils';
 
@@ -9,9 +10,10 @@ type NodeDetailsImagesProps = {
 
 const NodeDetailsImages: React.FC<NodeDetailsImagesProps> = ({ node }) => {
   const images = _.filter(node.status.images, 'names');
+  const { t } = useTranslation();
   return (
     <div className="co-m-pane__body">
-      <SectionHeading text="Images" />
+      <SectionHeading text={t('nodes~Images')} />
       <div className="co-table-container">
         <table className="table table--layout-fixed">
           <colgroup>
@@ -20,8 +22,8 @@ const NodeDetailsImages: React.FC<NodeDetailsImagesProps> = ({ node }) => {
           </colgroup>
           <thead>
             <tr>
-              <th>Name</th>
-              <th>Size</th>
+              <th>{t('nodes~Name')}</th>
+              <th>{t('nodes~Size')}</th>
             </tr>
           </thead>
           <tbody>

frontend/packages/console-app/src/components/nodes/NodeDetailsOverview.tsx

@@ -1,5 +1,6 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { NodeKind, referenceForModel } from '@console/internal/module/k8s';
 import {
   useAccessReview,
@@ -12,7 +13,7 @@ import {
   Timestamp,
 } from '@console/internal/components/utils';
 import { NodeModel, MachineModel } from '@console/internal/models';
-import { Button, pluralize } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons';
 import { getNodeMachineNameAndNamespace, getNodeAddresses } from '@console/shared';
 import NodeIPList from './NodeIPList';
@@ -32,33 +33,35 @@ const NodeDetailsOverview: React.FC<NodeDetailsOverviewProps> = ({ node }) => {
     name: node.metadata.name,
     namespace: node.metadata.namespace,
   });
+  const { t } = useTranslation();
+
   return (
     <div className="co-m-pane__body">
-      <SectionHeading text="Node Details" />
+      <SectionHeading text={t('nodes~Node details')} />
       <div className="row">
         <div className="col-md-6 col-xs-12">
           <dl className="co-m-pane__details">
-            <dt>Node Name</dt>
+            <dt>{t('nodes~Node name')}</dt>
             <dd>{node.metadata.name || '-'}</dd>
-            <dt>Status</dt>
+            <dt>{t('nodes~Status')}</dt>
             <dd>
               {!node.spec.unschedulable ? (
                 <NodeStatus node={node} showPopovers />
               ) : (
                 <MarkAsSchedulablePopover node={node} />
               )}
             </dd>
-            <dt>External ID</dt>
+            <dt>{t('nodes~External ID')}</dt>
             <dd>{_.get(node, 'spec.externalID', '-')}</dd>
-            <dt>Node Addresses</dt>
+            <dt>{t('nodes~Node addresses')}</dt>
             <dd>
               <NodeIPList ips={getNodeAddresses(node)} expand />
             </dd>
-            <dt>Node Labels</dt>
+            <dt>{t('nodes~Node labels')}</dt>
             <dd>
               <LabelList kind="Node" labels={node.metadata.labels} />
             </dd>
-            <dt>Taints</dt>
+            <dt>{t('nodes~Taints')}</dt>
             <dd>
               {canUpdate ? (
                 <Button
@@ -67,14 +70,16 @@ const NodeDetailsOverview: React.FC<NodeDetailsOverviewProps> = ({ node }) => {
                   isInline
                   onClick={Kebab.factory.ModifyTaints(NodeModel, node).callback}
                 >
-                  {pluralize(_.size(node.spec.taints), 'Taint')}
+                  {_.size(node.spec.taints)} {t('nodes~Taint', { count: _.size(node.spec.taints) })}
                   <PencilAltIcon className="co-icon-space-l pf-c-button-icon--plain" />
                 </Button>
               ) : (
-                pluralize(_.size(node.spec.taints), 'Taint')
+                <span>
+                  {_.size(node.spec.taints)} {t('nodes~Taint', { count: _.size(node.spec.taints) })}
+                </span>
               )}
             </dd>
-            <dt>Annotations</dt>
+            <dt>{t('nodes~Annotations')}</dt>
             <dd>
               {canUpdate ? (
                 <Button
@@ -83,16 +88,20 @@ const NodeDetailsOverview: React.FC<NodeDetailsOverviewProps> = ({ node }) => {
                   isInline
                   onClick={Kebab.factory.ModifyAnnotations(NodeModel, node).callback}
                 >
-                  {pluralize(_.size(node.metadata.annotations), 'Annotation')}
+                  {_.size(node.metadata.annotations)}{' '}
+                  {t('nodes~Annotation', { count: _.size(node.metadata.annotations) })}
                   <PencilAltIcon className="co-icon-space-l pf-c-button-icon--plain" />
                 </Button>
               ) : (
-                pluralize(_.size(node.metadata.annotations), 'Annotation')
+                <span>
+                  {_.size(node.metadata.annotations)}{' '}
+                  {t('nodes~Annotation', { count: _.size(node.metadata.annotations) })}
+                </span>
               )}
             </dd>
             {machine.name && (
               <>
-                <dt>Machine</dt>
+                <dt>{t('nodes~Machine')}</dt>
                 <dd>
                   <ResourceLink
                     kind={referenceForModel(MachineModel)}
@@ -102,39 +111,39 @@ const NodeDetailsOverview: React.FC<NodeDetailsOverviewProps> = ({ node }) => {
                 </dd>
               </>
             )}
-            <dt>Provider ID</dt>
+            <dt>{t('nodes~Provider ID')}</dt>
             <dd>{cloudProviderNames([cloudProviderID(node)])}</dd>
-            {_.has(node, 'spec.unschedulable') && <dt>Unschedulable</dt>}
+            {_.has(node, 'spec.unschedulable') && <dt>{t('nodes~Unschedulable')}</dt>}
             {_.has(node, 'spec.unschedulable') && (
               <dd className="text-capitalize">
                 {_.get(node, 'spec.unschedulable', '-').toString()}
               </dd>
             )}
-            <dt>Created</dt>
+            <dt>{t('nodes~Created')}</dt>
             <dd>
               <Timestamp timestamp={node.metadata.creationTimestamp} />
             </dd>
           </dl>
         </div>
         <div className="col-md-6 col-xs-12">
           <dl className="co-m-pane__details">
-            <dt>Operating System</dt>
+            <dt>{t('nodes~Operating system')}</dt>
             <dd className="text-capitalize">
               {_.get(node, 'status.nodeInfo.operatingSystem', '-')}
             </dd>
-            <dt>OS Image</dt>
+            <dt>{t('nodes~OS image')}</dt>
             <dd>{_.get(node, 'status.nodeInfo.osImage', '-')}</dd>
-            <dt>Architecture</dt>
+            <dt>{t('nodes~Architecture')}</dt>
             <dd className="text-uppercase">{_.get(node, 'status.nodeInfo.architecture', '-')}</dd>
-            <dt>Kernel Version</dt>
+            <dt>{t('nodes~Kernel version')}</dt>
             <dd>{_.get(node, 'status.nodeInfo.kernelVersion', '-')}</dd>
-            <dt>Boot ID</dt>
+            <dt>{t('nodes~Boot ID')}</dt>
             <dd>{_.get(node, 'status.nodeInfo.bootID', '-')}</dd>
-            <dt>Container Runtime</dt>
+            <dt>{t('nodes~Container runtime')}</dt>
             <dd>{_.get(node, 'status.nodeInfo.containerRuntimeVersion', '-')}</dd>
-            <dt>Kubelet Version</dt>
+            <dt>{t('nodes~Kubelet version')}</dt>
             <dd>{_.get(node, 'status.nodeInfo.kubeletVersion', '-')}</dd>
-            <dt>Kube-Proxy Version</dt>
+            <dt>{t('nodes~Kube-Proxy version')}</dt>
             <dd>{_.get(node, 'status.nodeInfo.kubeProxyVersion', '-')}</dd>
           </dl>
         </div>

frontend/packages/console-app/src/components/nodes/NodeDetailsPage.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { useTranslation } from 'react-i18next';
 import { navFactory } from '@console/internal/components/utils';
 import { PodsPage } from '@console/internal/components/pod';
 import { ResourceEventStream } from '@console/internal/components/events';
@@ -13,17 +14,18 @@ import NodeDashboard from './node-dashboard/NodeDashboard';
 
 const NodeDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (props) => {
   const { editYaml, events, pods } = navFactory;
+  const { t } = useTranslation();
 
   const pagesFor = React.useCallback(
     (node: NodeKind) => [
       {
         href: '',
-        name: 'Overview',
+        name: t('nodes~Overview'),
         component: NodeDashboard,
       },
       {
         href: 'details',
-        name: 'Details',
+        name: t('nodes~Details'),
         component: NodeDetails,
       },
       editYaml(),
@@ -37,10 +39,10 @@ const NodeDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (pro
           (k === 'node.openshift.io/os_id' && v === 'Windows') ||
           (k === 'corev1.LabelOSStable' && v === 'windows'),
       )
-        ? [{ href: 'terminal', name: 'Terminal', component: NodeTerminal }]
+        ? [{ href: 'terminal', name: t('nodes~Terminal'), component: NodeTerminal }]
         : []),
     ],
-    [editYaml, events, pods],
+    [editYaml, events, pods, t],
   );
 
   return (

frontend/packages/console-app/src/components/nodes/NodeStatus.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { useTranslation } from 'react-i18next';
 import ConsumerPopover from '@console/shared/src/components/dashboard/utilization-card/TopConsumerPopover';
 import {
   getNodeSecondaryStatus,
@@ -35,6 +36,7 @@ const getDegradedStates = (node: NodeKind): Condition[] => {
 
 const NodeStatus: React.FC<NodeStatusProps> = ({ node, showPopovers = false, className }) => {
   const status = showPopovers ? getDegradedStates(node) : [];
+  const { t } = useTranslation();
   return (
     <>
       {!node.spec.unschedulable ? (
@@ -51,7 +53,10 @@ const NodeStatus: React.FC<NodeStatusProps> = ({ node, showPopovers = false, cla
               current={_.startCase(item)}
               consumers={PressureQueries[item](node.metadata.name)}
               humanize={humanizeMap[item]}
-              description={`This node's ${conditionDescriptionMap[item]}. Performance may be degraded.`}
+              description={t(
+                "nodes~This node's {{conditionDescription}}. Performance may be degraded.",
+                { conditionDescription: conditionDescriptionMap[item] },
+              )}
             />
           </div>
         ))}