fix(pci-rancher): fix dash and date (#13026)

ref: TAPC-1615 Signed-off-by: Pierre-Philippe <[email protected]> Co-authored-by: CDS Translator Agent <[email protected]>
ovh · Oct 10, 2024 · 8a8890b · 8a8890b
1 parent 813b00f
commit 8a8890b
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 8 deletions.
diff --git a/packages/manager/apps/pci-rancher/package.json b/packages/manager/apps/pci-rancher/package.json
@@ -27,6 +27,7 @@
     "@ovh-ux/manager-react-components": "^1.38.0",
     "@ovh-ux/manager-react-core-application": "^0.10.2",
     "@ovh-ux/manager-react-shell-client": "^0.7.2",
+    "@ovh-ux/manager-core-utils": "*",
     "@ovh-ux/request-tagger": "^0.3.0",
     "@ovh-ux/shell": "^3.8.0",
     "@ovhcloud/ods-common-core": "17.2.2",

diff --git a/packages/manager/apps/pci-rancher/src/components/Table/NumberCell/NumberCell.component.tsx b/packages/manager/apps/pci-rancher/src/components/Table/NumberCell/NumberCell.component.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { OsdsText } from '@ovhcloud/ods-components/react';
+import { Cell } from '@tanstack/react-table';
+import { RancherService } from '@/types/api.type';
+import '../Table.scss';
+
+interface DisplayCellInterface {
+  cell: Cell<RancherService, number>;
+}
+
+function DisplayCellNumber({ cell }: Readonly<DisplayCellInterface>) {
+  const number = cell.renderValue();
+  return <OsdsText color={ODS_THEME_COLOR_INTENT.text}>{number}</OsdsText>;
+}
+
+export default DisplayCellNumber;
diff --git a/...manager/apps/pci-rancher/src/components/Table/TableContainer/TableContainer.component.tsx b/...manager/apps/pci-rancher/src/components/Table/TableContainer/TableContainer.component.tsx
@@ -22,6 +22,7 @@ import DisplayCellText from '../TextCell/TextCell.component';
 import '../Table.scss';
 import { deleteRancherServiceQueryKey } from '@/data/api/services';
 import StatusChip from '../../StatusChip/StatusChip.component';
+import DisplayCellNumber from '../NumberCell/NumberCell.component';
 
 export default function TableContainer({
   data,
@@ -71,7 +72,7 @@ export default function TableContainer({
         id: 'numberOfCpu',
         header: t('numberOfCpu'),
         accessorFn: (row) => row.currentState.usage?.orchestratedVcpus,
-        cell: DisplayCellText,
+        cell: DisplayCellNumber,
       },
       {
         id: 'status',

diff --git a/...rancher/src/components/layout-helpers/Dashboard/RancherDetail/RancherDetail.component.tsx b/...rancher/src/components/layout-helpers/Dashboard/RancherDetail/RancherDetail.component.tsx
@@ -1,4 +1,6 @@
 import { format } from 'date-fns';
+import * as locales from 'date-fns/locale';
+import { getDateFnsLocale } from '@ovh-ux/manager-core-utils';
 
 import {
   CommonTitle,
@@ -22,7 +24,7 @@ import {
   OsdsText,
   OsdsTile,
 } from '@ovhcloud/ods-components/react';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useHref } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
@@ -59,7 +61,11 @@ const RancherDetail = ({
   updateOfferErrorMessage,
   versions,
 }: RancherDetailProps) => {
-  const { t } = useTranslation(['dashboard', 'updateSoftware', 'listing']);
+  const { t, i18n } = useTranslation([
+    'dashboard',
+    'updateSoftware',
+    'listing',
+  ]);
   const trackAction = useTrackingAction();
   const hrefEdit = useHref('./edit');
   const hrefUpdateSoftware = useHref('./update-software');
@@ -120,12 +126,24 @@ const RancherDetail = ({
 
   const onAccessRancherUrl = () =>
     trackAction(TrackingPageView.DetailRancher, TrackingEvent.accessUi);
-
   const shouldDisplayUpdateSoftware =
     getLatestVersionAvailable(rancher, versions) &&
     isReadyStatus &&
     !updateSoftwareResponseType;
 
+  const userLocale = getDateFnsLocale(i18n.language);
+
+  const displayDate = useCallback(
+    (value: string) =>
+      format(new Date(dateUsage), value, {
+        locale:
+          userLocale in locales
+            ? locales[userLocale as keyof typeof locales]
+            : locales.fr,
+      }),
+    [userLocale, locales, dateUsage],
+  );
+
   const isEligibleForUpgrade = plan === RancherPlanName.OVHCLOUD_EDITION;
 
   return (
@@ -248,14 +266,14 @@ const RancherDetail = ({
               </TileBlock>
               <TileBlock label={t('count_cpu_orchestrated')}>
                 <OsdsText color={ODS_THEME_COLOR_INTENT.text}>
-                  {rancher.currentState.usage?.orchestratedVcpus || '-'}
+                  {rancher.currentState.usage?.orchestratedVcpus}
                 </OsdsText>
-                {dateUsage && (
+                {displayDate && (
                   <div className="mt-3">
                     <OsdsText color={ODS_THEME_COLOR_INTENT.text}>
                       {t('last_update_date', {
-                        date: format(dateUsage, 'yyyy_MM_dd'),
-                        hour: format(dateUsage, 'HH:mm:ss'),
+                        date: displayDate('PPPP'),
+                        hour: displayDate('HH:mm:ss'),
                       })}
                     </OsdsText>
                   </div>