i18n: externalize strings in Compute nav section

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

@@ -0,0 +1,80 @@
+{
+  "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.",
+  "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",
+  "vNode addresses": "vNode 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 }}",
+  "{{ machineHealthCheck }} automatically remediate node health issues.": "{{ machineHealthCheck }} automatically remediate node health issues.",
+  "Not configured": "Not configured",
+  "Status": "Status",
+  "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 addresses": "Node addresses",
+  "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 {{conditionDescriptionMap}}. Performance may be degraded.": "This node's {{conditionDescriptionMap}}. Performance may be degraded.",
+  "<0>To use host binaries, run <1>hroot /host</1></0>": "<0>To use host binaries, run <1>hroot /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/NodeDetails.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { NodeKind } from '@console/internal/module/k8s';
 import NodeDetailsOverview from './NodeDetailsOverview';
 import NodeDetailsConditions from './NodeDetailsConditions';
@@ -8,12 +9,16 @@ type NodeDetailsProps = {
   obj: NodeKind;
 };
 
-const NodeDetails: React.FC<NodeDetailsProps> = ({ obj: node }) => (
-  <>
-    <NodeDetailsOverview node={node} />
-    <NodeDetailsConditions node={node} />
-    <NodeDetailsImages node={node} />
-  </>
-);
+const NodeDetails: React.FC<NodeDetailsProps> = ({ obj: node }) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <NodeDetailsOverview node={node} t={t} />
+      <NodeDetailsConditions node={node} t={t} />
+      <NodeDetailsImages node={node} t={t} />
+    </>
+  );
+};
 
 export default NodeDetails;

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

@@ -1,25 +1,27 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import { TFunction } from 'i18next';
 import { NodeKind } from '@console/internal/module/k8s';
 import { SectionHeading, Timestamp, CamelCaseWrap } from '@console/internal/components/utils';
 
 type NodeDetailsConditionsProps = {
   node: NodeKind;
+  t?: TFunction;
 };
 
-const NodeDetailsConditions: React.FC<NodeDetailsConditionsProps> = ({ node }) => {
+const NodeDetailsConditions: React.FC<NodeDetailsConditionsProps> = ({ node, t }) => {
   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,13 +1,15 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import { TFunction } from 'i18next';
 import { NodeKind } from '@console/internal/module/k8s';
 import { SectionHeading, units } from '@console/internal/components/utils';
 
 type NodeDetailsImagesProps = {
   node: NodeKind;
+  t?: TFunction;
 };
 
-const NodeDetailsImages: React.FC<NodeDetailsImagesProps> = ({ node }) => {
+const NodeDetailsImages: React.FC<NodeDetailsImagesProps> = ({ node, t }) => {
   const images = _.filter(node.status.images, 'names');
   return (
     <div className="co-m-pane__body">
@@ -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 { TFunction } from 'i18next';
 import { NodeKind, referenceForModel } from '@console/internal/module/k8s';
 import {
   useAccessReview,
@@ -12,17 +13,18 @@ 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';
 import NodeStatus from './NodeStatus';
 
 type NodeDetailsOverviewProps = {
   node: NodeKind;
+  t: TFunction;
 };
 
-const NodeDetailsOverview: React.FC<NodeDetailsOverviewProps> = ({ node }) => {
+const NodeDetailsOverview: React.FC<NodeDetailsOverviewProps> = ({ node, t }) => {
   const machine = getNodeMachineNameAndNamespace(node);
   const canUpdate = useAccessReview({
     group: NodeModel.apiGroup,
@@ -31,29 +33,30 @@ const NodeDetailsOverview: React.FC<NodeDetailsOverviewProps> = ({ node }) => {
     name: node.metadata.name,
     namespace: node.metadata.namespace,
   });
+
   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>
               <NodeStatus 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
@@ -62,14 +65,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
@@ -78,16 +83,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)}
@@ -97,39 +106,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(),
@@ -35,12 +37,12 @@ const NodeDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (pro
         node?.metadata?.labels,
         (label) =>
           label['corev1.LabelOSStable'] !== 'windows' ||
-          label['node.openshift.io/os_id'] !== 'Windows',
+          label['nodes.openshift.io/os_id'] !== 'Windows',
       )
-        ? [{ href: 'terminal', name: 'Terminal', component: NodeTerminal }]
+        ? [{ href: 'terminal', name: t('nodes~Terminal'), component: NodeTerminal }]
         : []),
     ],
-    [editYaml, events, pods],
+    [editYaml, events, pods, t],
   );
 
   return (