i18n ocs day1 and day2 perations

- create storage cluster
- create backing store
- create bucket class
- add capacity
- disk replacement
- create new pool
- edit bucket class
- disk inventory page

Also i18n the lso plugin, since ocs is dependent on lso package

Signed-off-by: Afreen Rahman <afrahman@redhat.com>

fixed issues

frontend/packages/ceph-storage-plugin/src/components/attached-devices-mode/lso-disk-inventory/disk-replacement-modal.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { Alert } from '@patternfly/react-core';
 import {
@@ -73,6 +74,8 @@ const instantiateTemplate = async (osdId: string, diskName: string) => {
 };
 
 const DiskReplacementAction = (props: DiskReplacementActionProps) => {
+  const { t } = useTranslation();
+
   const { diskName, alertsMap, replacementMap, isRebalancing, dispatch, cancel, close } = props;
 
   const [inProgress, setProgress] = React.useState(false);
@@ -88,7 +91,12 @@ const DiskReplacementAction = (props: DiskReplacementActionProps) => {
         replacementStatus === Status.PreparingToReplace ||
         replacementStatus === Status.ReplacementReady
       )
-        throw new Error(`replacement disallowed: disk "${diskName}" is "${replacementStatus}"`);
+        throw new Error(
+          t(
+            'ceph-storage-plugin~replacement disallowed: disk {{diskName}} is {{replacementStatus}}',
+            { diskName, replacementStatus },
+          ),
+        );
       else {
         instantiateTemplate(osd, diskName);
         dispatch({
@@ -106,29 +114,31 @@ const DiskReplacementAction = (props: DiskReplacementActionProps) => {
 
   return (
     <form onSubmit={handleSubmit} name="form" className="modal-content">
-      <ModalTitle>Disk Replacement</ModalTitle>
+      <ModalTitle>{t('ceph-storage-plugin~Disk Replacement')}</ModalTitle>
       <ModalBody>
-        <p>This action will start preparing the disk for replacement.</p>
+        <p>{t('ceph-storage-plugin~This action will start preparing the disk for replacement.')}</p>
         {isRebalancing && alertsMap[diskName].status !== Status.Offline && (
           <Alert
             variant="info"
             className="co-alert"
-            title="Data rebalancing is in progress"
+            title={t('ceph-storage-plugin~Data rebalancing is in progress')}
             isInline
           >
             <Link onClick={close} to={DASHBOARD_LINK}>
-              See data resiliency status
+              {t('ceph-storage-plugin~See data resiliency status')}
             </Link>
           </Alert>
         )}
         <p>
-          Are you sure you want to replace <strong>{diskName}</strong> ?
+          <Trans t={t} ns="ceph-storage-plugin">
+            Are you sure you want to replace <strong>{diskName}</strong> ?
+          </Trans>
         </p>
       </ModalBody>
       <ModalSubmitFooter
         errorMessage={errorMessage}
         inProgress={inProgress}
-        submitText="Replace"
+        submitText={t('ceph-storage-plugin~Replace')}
         cancel={cancel}
       />
     </form>

frontend/packages/ceph-storage-plugin/src/components/attached-devices-mode/lso-disk-inventory/ocs-disks-list.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import * as _ from 'lodash';
 import * as cx from 'classnames';
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
@@ -93,45 +94,45 @@ export const tableColumnClasses = [
   Kebab.columnClass,
 ];
 
-const diskHeader = () => [
+const diskHeader = (t) => [
   {
-    title: 'Name',
+    title: t('ceph-storage-plugin~Name'),
     sortField: 'path',
     transforms: [sortable],
     props: { className: tableColumnClasses[0] },
   },
   {
-    title: 'Disk State',
+    title: t('ceph-storage-plugin~Disk State'),
     sortField: 'status.state',
     transforms: [sortable],
     props: { className: tableColumnClasses[1] },
   },
   {
-    title: 'OCS Status',
+    title: t('ceph-storage-plugin~OCS Status'),
     sortField: '',
     transforms: [],
     props: { className: tableColumnClasses[1] },
   },
   {
-    title: 'Type',
+    title: t('ceph-storage-plugin~Type'),
     sortField: 'type',
     transforms: [sortable],
     props: { className: tableColumnClasses[2] },
   },
   {
-    title: 'Model',
+    title: t('ceph-storage-plugin~Model'),
     sortField: 'model',
     transforms: [sortable],
     props: { className: tableColumnClasses[3] },
   },
   {
-    title: 'Capacity',
+    title: t('ceph-storage-plugin~Capacity'),
     sortField: 'size',
     transforms: [sortable],
     props: { className: tableColumnClasses[4] },
   },
   {
-    title: 'Filesystem',
+    title: t('ceph-storage-plugin~Filesystem'),
     sortField: 'fstype',
     transforms: [sortable],
     props: { className: tableColumnClasses[5] },
@@ -178,6 +179,8 @@ const diskRow: RowFunction<DiskMetadata, OCSMetadata> = ({
 };
 
 const OCSDisksList: React.FC<TableProps> = React.memo((props) => {
+  const { t } = useTranslation();
+
   const [ocsState, dispatch] = React.useReducer(reducer, initialState);
 
   const [cephDiskData, cephDiskLoadError, cephDiskLoading] = usePrometheusPoll({
@@ -255,7 +258,7 @@ const OCSDisksList: React.FC<TableProps> = React.memo((props) => {
   return (
     <Table
       {...props}
-      aria-label="Disks List"
+      aria-label={t('ceph-storage-plugin~Disks List')}
       Header={diskHeader}
       Row={diskRow}
       customData={{ ocsState, dispatch }}

frontend/packages/ceph-storage-plugin/src/components/attached-devices-mode/lso-disk-inventory/ocs-kebab-options.tsx

@@ -1,32 +1,29 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { TableData } from '@console/internal/components/factory';
 import { KebabOption, Kebab } from '@console/internal/components/utils';
 import { diskReplacementModal } from './disk-replacement-modal';
 import { OCSDiskList, OCSColumnStateAction } from './state-reducer';
 
-const startDiskReplacementAction = (
-  diskName,
-  alertsMap,
-  replacementMap,
-  isRebalancing,
-  dispatch,
-): KebabOption => ({
-  label: 'Start Disk Replacement',
-  callback: () =>
-    diskReplacementModal({
-      diskName,
-      alertsMap,
-      replacementMap,
-      isRebalancing,
-      dispatch,
-    }),
-});
-
 export const OCSKebabOptions: React.FC<OCSKebabOptionsProps> = React.memo(
   ({ diskName, alertsMap, replacementMap, isRebalancing, dispatch }) => {
+    const { t } = useTranslation();
+
     const kebabOptions: KebabOption[] = [
-      startDiskReplacementAction(diskName, alertsMap, replacementMap, isRebalancing, dispatch),
+      {
+        // t('ceph-storage-plugin~Start Disk Replacement')
+        labelKey: t('ceph-storage-plugin~Start Disk Replacement'),
+        callback: () =>
+          diskReplacementModal({
+            diskName,
+            alertsMap,
+            replacementMap,
+            isRebalancing,
+            dispatch,
+          }),
+      },
     ];
+
     return (
       <TableData className={Kebab.columnClass}>
         {/* Enables the options for the disk with failures */}

frontend/packages/ceph-storage-plugin/src/components/attached-devices-mode/lso-disk-inventory/ocs-status-column.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
+import { TFunction } from 'i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { OffIcon } from '@patternfly/react-icons';
 import { TableData } from '@console/internal/components/factory';
-import { OCSColumnState, Status, OCSDiskStatus } from './state-reducer';
+import { OCSColumnState, Status, OCSDiskStatus, getOCSColumnStatus } from './state-reducer';
 import { ExternalLink } from '@console/internal/components/utils';
 import {
   ErrorStatus,
@@ -12,44 +14,57 @@ import {
 } from '@console/shared';
 import './ocs-status-column.scss';
 
-const getOCSStatusBody = (status: OCSDiskStatus, diskName: string): React.ReactNode => {
+const getOCSStatusBody = (
+  status: OCSDiskStatus,
+  diskName: string,
+  t: TFunction,
+): React.ReactNode => {
+  const title = getOCSColumnStatus(status, t);
+
   switch (status) {
     case Status.Online:
-      return <SuccessStatus title={status} />;
+      return <SuccessStatus title={title} />;
     case Status.PreparingToReplace:
-      return <ProgressStatus title={status} />;
+      return <ProgressStatus title={title} />;
     case Status.ReplacementReady:
       return (
         <PopoverStatus
           statusBody={
             <StatusIconAndText
               className="ceph-ocs-status__status-icon-and-text--color"
-              title={status}
+              title={title}
               icon={<OffIcon />}
             />
           }
         >
           <p>
-            <strong>{diskName}</strong> can be replaced with a disk of same type.
+            <Trans t={t} ns="ceph-storage-plugin">
+              <strong>{{ diskName }}</strong> can be replaced with a disk of same type.
+            </Trans>
           </p>
         </PopoverStatus>
       );
     case Status.Offline:
     case Status.NotResponding:
       return (
-        <PopoverStatus statusBody={<ErrorStatus title={status} />}>
+        <PopoverStatus statusBody={<ErrorStatus title={title} />}>
           <span>
-            Troubleshoot disk <strong>{diskName}</strong>{' '}
+            <Trans t={t} ns="ceph-storage-plugin">
+              Troubleshoot disk <strong>{diskName}</strong>
+            </Trans>
           </span>
           <span>
-            <ExternalLink href="https://access.redhat.com/solutions/5194851 " text="here" />
+            <ExternalLink
+              href="https://access.redhat.com/solutions/5194851 "
+              text={t('ceph-storage-plugin~here')}
+            />
           </span>
         </PopoverStatus>
       );
     case Status.ReplacementFailed:
-      return <ErrorStatus title={status} />;
+      return <ErrorStatus title={title} />;
     default:
-      return status;
+      return title;
   }
 };
 
@@ -58,12 +73,16 @@ export const OCSStatus: React.FC<{
   diskName: string;
   className: string;
 }> = React.memo(({ ocsState, className, diskName }) => {
+  const { t } = useTranslation();
+
   const { replacementMap, alertsMap, metricsMap } = ocsState;
   let status: OCSDiskStatus;
   if (replacementMap[diskName]) status = replacementMap[diskName].status;
   else if (alertsMap[diskName]) status = alertsMap[diskName].status;
   else if (metricsMap[diskName]) status = metricsMap[diskName].status;
   return (
-    <TableData className={className}>{status ? getOCSStatusBody(status, diskName) : '-'}</TableData>
+    <TableData className={className}>
+      {status ? getOCSStatusBody(status, diskName, t) : '-'}
+    </TableData>
   );
 });

frontend/packages/ceph-storage-plugin/src/components/attached-devices-mode/lso-disk-inventory/state-reducer.ts

@@ -1,3 +1,5 @@
+import { TFunction } from 'i18next';
+
 export enum ActionType {
   SET_ALERTS_MAP = 'SET_ALERTS_MAP',
   SET_TEMPLATES_MAP = 'SET_TEMPLATES_MAP',
@@ -16,6 +18,27 @@ export enum Status {
   Unknown = 'Unknown',
 }
 
+export const getOCSColumnStatus = (status: keyof typeof Status, t: TFunction) => {
+  switch (status) {
+    case Status.Online:
+      return t('ceph-storage-plugin~Online');
+    case Status.Offline:
+      return t('ceph-storage-plugin~Offline');
+    case Status.NotResponding:
+      return t('ceph-storage-plugin~NotResponding');
+    case Status.PreparingToReplace:
+      return t('ceph-storage-plugin~PreparingToReplace');
+    case Status.ReplacementFailed:
+      return t('ceph-storage-plugin~ReplacementFailed');
+    case Status.ReplacementReady:
+      return t('ceph-storage-plugin~ReplacementReady');
+    case Status.Unknown:
+      return t('ceph-storage-plugin~Unknown');
+    default:
+      return '';
+  }
+};
+
 export const initialState: OCSColumnState = {
   metricsMap: {},
   alertsMap: {},

frontend/packages/ceph-storage-plugin/src/components/dashboard-page/storage-dashboard/storage-efficiency-card/storage-efficiency-card.tsx

@@ -79,7 +79,7 @@ const StorageEfficiencyCard: React.FC<DashboardItemProps> = ({
     error: !!poolCapacityRatioResultError || !ratio,
     title: t('ceph-storage-plugin~Compression ratio'),
     infoText: t(
-      'ceph-storage-plugin~ The ratio of the data physical stored (after compression) compared to the size of the data received from the client.',
+      'ceph-storage-plugin~The ratio of the data physical stored (after compression) compared to the size of the data received from the client.',
     ),
     getStats: compressionStats,
   };