Merge pull request #7474 from jcaianirh/i18n-project-dash

CONSOLE-2467: i18n localization for project dashboard

frontend/packages/console-shared/src/components/dashboard/resource-quota-card/ResourceQuotaBody.tsx

@@ -1,15 +1,17 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import './resource-quota-card.scss';
 
 const ResourceQuotaBody: React.FC<ResourceQuotaBodyProps> = ({ error, isLoading, children }) => {
   let body: React.ReactNode;
+  const { t } = useTranslation();
   if (error) {
-    body = <div className="text-secondary">Not available</div>;
+    body = <div className="text-secondary">{t('dashboard~Not available')}</div>;
   } else if (isLoading) {
     body = <div className="skeleton-quota" />;
   } else if (!React.Children.count(children)) {
-    body = <div className="text-secondary">No resource quotas</div>;
+    body = <div className="text-secondary">{t('dashboard~No resource quotas')}</div>;
   }
 
   return <div className="co-dashboard-card__body--top-margin">{body || children}</div>;

frontend/public/components/dashboard/project-dashboard/activity-card.tsx

@@ -24,6 +24,7 @@ import { uniqueResource } from '../dashboards-page/cluster-dashboard/utils';
 import { RootState } from '../../../redux';
 import { ProjectDashboardContext } from './project-dashboard-context';
 import { getName } from '@console/shared';
+import { useTranslation } from 'react-i18next';
 
 const getEventsResource = (projectName: string): FirehoseResource => ({
   isList: true,
@@ -136,11 +137,12 @@ export const ActivityCard: React.FC = () => {
   const { obj } = React.useContext(ProjectDashboardContext);
   const projectName = getName(obj);
   const viewEvents = `/k8s/ns/${projectName}/events`;
+  const { t } = useTranslation();
   return (
     <DashboardCard gradient data-test-id="activity-card">
       <DashboardCardHeader>
-        <DashboardCardTitle>Activity</DashboardCardTitle>
-        <DashboardCardLink to={viewEvents}>View events</DashboardCardLink>
+        <DashboardCardTitle>{t('namespace~Activity')}</DashboardCardTitle>
+        <DashboardCardLink to={viewEvents}>{t('namespace~View events')}</DashboardCardLink>
       </DashboardCardHeader>
       <DashboardCardBody>
         <ActivityBody className="co-project-dashboard__activity-body">

frontend/public/components/dashboard/project-dashboard/details-card.tsx

@@ -1,6 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import cx from 'classnames';
+import { useTranslation } from 'react-i18next';
 import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard';
 import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody';
 import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader';
@@ -21,39 +22,42 @@ export const DetailsCard: React.FC = () => {
   const description = obj.metadata.annotations?.['openshift.io/description'];
   const detailsLink = `${resourcePathFromModel(ProjectModel, obj.metadata.name)}/details`;
   const serviceMeshEnabled = obj.metadata?.labels?.['maistra.io/member-of'];
+  const { t } = useTranslation();
   return (
     <DashboardCard data-test-id="details-card">
       <DashboardCardHeader>
-        <DashboardCardTitle>Details</DashboardCardTitle>
-        <DashboardCardLink to={detailsLink}>View all</DashboardCardLink>
+        <DashboardCardTitle>{t('namespace~Details')}</DashboardCardTitle>
+        <DashboardCardLink to={detailsLink}>{t('namespace~View all')}</DashboardCardLink>
       </DashboardCardHeader>
       <DashboardCardBody>
         <DetailsBody>
-          <DetailItem isLoading={!obj} title="Name">
+          <DetailItem isLoading={!obj} title={t('namespace~Name')}>
             {getName(obj)}
           </DetailItem>
-          <DetailItem isLoading={!obj} title="Requester">
-            {getRequester(obj) || <span className="text-muted">No requester</span>}
+          <DetailItem isLoading={!obj} title={t('namespace~Requester')}>
+            {getRequester(obj) || <span className="text-muted">{t('namespace~No requester')}</span>}
           </DetailItem>
-          <DetailItem isLoading={!obj} title="Labels">
+          <DetailItem isLoading={!obj} title={t('namespace~Labels')}>
             <div className="co-project-dashboard__details-labels">
               <LabelList kind={ProjectModel.kind} labels={firstThreelabels} />
-              {keys.length > 3 && <DashboardCardLink to={detailsLink}>View all</DashboardCardLink>}
+              {keys.length > 3 && (
+                <DashboardCardLink to={detailsLink}>{t('namespace~View all')}</DashboardCardLink>
+              )}
             </div>
           </DetailItem>
-          <DetailItem isLoading={!obj} title="Description">
+          <DetailItem isLoading={!obj} title={t('namespace~Description')}>
             <span
               className={cx({
                 'text-muted': !description,
                 'co-project-dashboard-details-card__description': description,
               })}
             >
-              {description || 'No description'}
+              {description || t('namespace~No description')}
             </span>
           </DetailItem>
           {serviceMeshEnabled && (
-            <DetailItem isLoading={!obj} title="Service Mesh">
-              <GreenCheckCircleIcon /> Service Mesh Enabled
+            <DetailItem isLoading={!obj} title={t('namespace~Service mesh')}>
+              <GreenCheckCircleIcon /> {t('namespace~Service mesh enabled')}
             </DetailItem>
           )}
         </DetailsBody>

frontend/public/components/dashboard/project-dashboard/inventory-card.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
+import { useTranslation } from 'react-i18next';
 import { DashboardItemProps, withDashboardResources } from '../with-dashboard-resources';
 import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard';
 import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody';
@@ -118,11 +119,12 @@ export const InventoryCard = () => {
     namespace: projectName,
     verb: 'list',
   });
+  const { t } = useTranslation();
 
   return (
     <DashboardCard data-test-id="inventory-card">
       <DashboardCardHeader>
-        <DashboardCardTitle>Inventory</DashboardCardTitle>
+        <DashboardCardTitle>{t('namespace~Inventory')}</DashboardCardTitle>
       </DashboardCardHeader>
       <DashboardCardBody>
         <ProjectInventoryItem projectName={projectName} model={DeploymentModel} />

frontend/public/components/dashboard/project-dashboard/launcher-card.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
+import { useTranslation } from 'react-i18next';
 import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard';
 import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody';
 import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader';
@@ -10,10 +11,11 @@ import { ProjectDashboardContext } from './project-dashboard-context';
 
 export const LauncherCard: React.FC = () => {
   const { namespaceLinks } = React.useContext(ProjectDashboardContext);
+  const { t } = useTranslation();
   return (
     <DashboardCard data-test-id="launcher-card">
       <DashboardCardHeader>
-        <DashboardCardTitle>Launcher</DashboardCardTitle>
+        <DashboardCardTitle>{t('namespace~Launcher')}</DashboardCardTitle>
       </DashboardCardHeader>
       <DashboardCardBody>
         <LauncherBody>

frontend/public/components/dashboard/project-dashboard/resource-quota-card.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
+import { useTranslation } from 'react-i18next';
 
 import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard';
 import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody';
@@ -32,11 +33,12 @@ export const ResourceQuotaCard = withDashboardResources(
     const quotas = _.get(resources.resourceQuotas, 'data', []) as FirehoseResult['data'];
     const loaded = _.get(resources.resourceQuotas, 'loaded');
     const error = _.get(resources.resourceQuotas, 'loadError');
+    const { t } = useTranslation();
 
     return (
       <DashboardCard data-test-id="resource-quotas-card">
         <DashboardCardHeader>
-          <DashboardCardTitle>Resource Quotas</DashboardCardTitle>
+          <DashboardCardTitle>{t('namespace~Resource quotas')}</DashboardCardTitle>
         </DashboardCardHeader>
         <DashboardCardBody>
           <ResourceQuotaBody error={!!error} isLoading={!loaded}>

frontend/public/components/dashboard/project-dashboard/status-card.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard';
 import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody';
 import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader';
@@ -34,11 +35,12 @@ export const StatusCard: React.FC = () => {
   const {
     metadata: { name: namespace },
   } = obj;
+  const { t } = useTranslation();
 
   return (
     <DashboardCard gradient data-test-id="status-card">
       <DashboardCardHeader>
-        <DashboardCardTitle>Status</DashboardCardTitle>
+        <DashboardCardTitle>{t('namespace~Status')}</DashboardCardTitle>
       </DashboardCardHeader>
       <DashboardCardBody isLoading={!obj}>
         <HealthBody>

frontend/public/components/dashboard/project-dashboard/utilization-card.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard';
 import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader';
 import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle';
@@ -39,11 +40,12 @@ export const UtilizationCard: React.FC = () => {
   const projectName = getName(obj);
   const queries = React.useMemo(() => getUtilizationQueries(projectName), [projectName]);
   const multilineQueries = React.useMemo(() => getMultilineQueries(projectName), [projectName]);
+  const { t } = useTranslation();
 
   const cpuPopover = React.useCallback(
     React.memo<TopConsumerPopoverProp>(({ current }) => (
       <ConsumerPopover
-        title="CPU"
+        title={t('namespace~CPU')}
         current={current}
         consumers={[
           {
@@ -63,7 +65,7 @@ export const UtilizationCard: React.FC = () => {
   const memPopover = React.useCallback(
     React.memo<TopConsumerPopoverProp>(({ current }) => (
       <ConsumerPopover
-        title="Memory"
+        title={t('namespace~Memory')}
         current={current}
         consumers={[
           {
@@ -83,7 +85,7 @@ export const UtilizationCard: React.FC = () => {
   const filesystemPopover = React.useCallback(
     React.memo<TopConsumerPopoverProp>(({ current }) => (
       <ConsumerPopover
-        title="Filesystem"
+        title={t('namespace~Filesystem')}
         current={current}
         consumers={[
           {
@@ -103,7 +105,7 @@ export const UtilizationCard: React.FC = () => {
   const networkPopoverIn = React.useCallback(
     React.memo<TopConsumerPopoverProp>(({ current }) => (
       <ConsumerPopover
-        title="Network In"
+        title={t('namespace~Network in')}
         current={current}
         consumers={[
           {
@@ -123,7 +125,7 @@ export const UtilizationCard: React.FC = () => {
   const networkPopoverOut = React.useCallback(
     React.memo<TopConsumerPopoverProp>(({ current }) => (
       <ConsumerPopover
-        title="Network Out"
+        title={t('namespace~Network out')}
         current={current}
         consumers={[
           {
@@ -148,12 +150,12 @@ export const UtilizationCard: React.FC = () => {
   return (
     <DashboardCard data-test-id="utilization-card">
       <DashboardCardHeader>
-        <DashboardCardTitle>Utilization</DashboardCardTitle>
+        <DashboardCardTitle>{t('namespace~Utilization')}</DashboardCardTitle>
         <Dropdown items={Duration} onChange={setDuration} selectedKey={duration} title={duration} />
       </DashboardCardHeader>
       <UtilizationBody timestamps={timestamps}>
         <PrometheusUtilizationItem
-          title="CPU"
+          title={t('namespace~CPU')}
           humanizeValue={humanizeCpuCores}
           utilizationQuery={queries[ProjectQueries.CPU_USAGE]}
           TopConsumerPopover={cpuPopover}
@@ -162,7 +164,7 @@ export const UtilizationCard: React.FC = () => {
           namespace={projectName}
         />
         <PrometheusUtilizationItem
-          title="Memory"
+          title={t('namespace~Memory')}
           humanizeValue={humanizeBinaryBytes}
           utilizationQuery={queries[ProjectQueries.MEMORY_USAGE]}
           byteDataType={ByteDataTypes.BinaryBytes}
@@ -171,7 +173,7 @@ export const UtilizationCard: React.FC = () => {
           namespace={projectName}
         />
         <PrometheusUtilizationItem
-          title="Filesystem"
+          title={t('namespace~Filesystem')}
           humanizeValue={humanizeBinaryBytes}
           utilizationQuery={queries[ProjectQueries.FILESYSTEM_USAGE]}
           byteDataType={ByteDataTypes.BinaryBytes}
@@ -180,15 +182,15 @@ export const UtilizationCard: React.FC = () => {
           namespace={projectName}
         />
         <PrometheusMultilineUtilizationItem
-          title="Network Transfer"
+          title={t('namespace~Network transfer')}
           humanizeValue={humanizeDecimalBytesPerSec}
           queries={multilineQueries[ProjectQueries.NETWORK_UTILIZATION]}
           TopConsumerPopovers={networkPopovers}
           duration={duration}
           namespace={projectName}
         />
         <PrometheusUtilizationItem
-          title="Pod count"
+          title={t('namespace~Pod count')}
           humanizeValue={humanizeNumber}
           utilizationQuery={queries[ProjectQueries.POD_COUNT]}
           duration={duration}

frontend/public/locales/en/dashboard.json

@@ -39,6 +39,7 @@
   "1 Hour": "1 Hour",
   "6 Hours": "6 Hours",
   "24 Hours": "24 Hours",
+  "No resource quotas": "No resource quotas",
   "View details": "View details",
   "Alerts could not be loaded.": "Alerts could not be loaded.",
   "Unknown": "Unknown",

frontend/public/locales/en/namespace.json

@@ -1,17 +1,32 @@
 {
+  "Activity": "Activity",
+  "View events": "View events",
+  "Details": "Details",
+  "View all": "View all",
   "Name": "Name",
-  "Display name": "Display name",
-  "Status": "Status",
   "Requester": "Requester",
-  "Memory": "Memory",
+  "No requester": "No requester",
+  "Labels": "Labels",
+  "Description": "Description",
+  "No description": "No description",
+  "Service mesh": "Service mesh",
+  "Service mesh enabled": "Service mesh enabled",
+  "Inventory": "Inventory",
+  "Launcher": "Launcher",
+  "Resource quotas": "Resource quotas",
+  "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",
+  "Display name": "Display name",
   "Created": "Created",
-  "Description": "Description",
-  "Labels": "Labels",
   "No display name": "No display name",
-  "No requester": "No requester",
   "{{cores}} cores": "{{cores}} cores",
-  "No description": "No description",
   "Namespaces": "Namespaces",
   "Projects": "Projects",
   "Welcome to OpenShift": "Welcome to OpenShift",
@@ -24,10 +39,6 @@
   "Resource usage": "Resource usage",
   "Default pull secret": "Default pull secret",
   "Network policies": "Network policies",
-  "Service mesh": "Service mesh",
-  "Service mesh enabled": "Service mesh enabled",
   "{{kind}} details": "{{kind}} details",
-  "Launcher": "Launcher",
-  "Overview": "Overview",
-  "Details": "Details"
+  "Overview": "Overview"
 }