From 8a8890be764293566c1e0bc363a0c9f0b3f564a8 Mon Sep 17 00:00:00 2001 From: Pierre-Philippe Prevost Date: Thu, 10 Oct 2024 16:45:19 +0200 Subject: [PATCH] fix(pci-rancher): fix dash and date (#13026) ref: TAPC-1615 Signed-off-by: Pierre-Philippe Co-authored-by: CDS Translator Agent --- .../manager/apps/pci-rancher/package.json | 1 + .../Table/NumberCell/NumberCell.component.tsx | 17 ++++++++++ .../TableContainer.component.tsx | 3 +- .../RancherDetail/RancherDetail.component.tsx | 32 +++++++++++++++---- 4 files changed, 45 insertions(+), 8 deletions(-) create mode 100644 packages/manager/apps/pci-rancher/src/components/Table/NumberCell/NumberCell.component.tsx diff --git a/packages/manager/apps/pci-rancher/package.json b/packages/manager/apps/pci-rancher/package.json index 3a80a8b9c911..45fab509ef6e 100644 --- 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 new file mode 100644 index 000000000000..c627d6512725 --- /dev/null +++ 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; +} + +function DisplayCellNumber({ cell }: Readonly) { + const number = cell.renderValue(); + return {number}; +} + +export default DisplayCellNumber; diff --git a/packages/manager/apps/pci-rancher/src/components/Table/TableContainer/TableContainer.component.tsx b/packages/manager/apps/pci-rancher/src/components/Table/TableContainer/TableContainer.component.tsx index 0d4f7aaf6546..f10a8bbfa256 100644 --- a/packages/manager/apps/pci-rancher/src/components/Table/TableContainer/TableContainer.component.tsx +++ b/packages/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/packages/manager/apps/pci-rancher/src/components/layout-helpers/Dashboard/RancherDetail/RancherDetail.component.tsx b/packages/manager/apps/pci-rancher/src/components/layout-helpers/Dashboard/RancherDetail/RancherDetail.component.tsx index 8182c28a1eac..2d52c2d7191c 100644 --- a/packages/manager/apps/pci-rancher/src/components/layout-helpers/Dashboard/RancherDetail/RancherDetail.component.tsx +++ b/packages/manager/apps/pci-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 = ({ - {rancher.currentState.usage?.orchestratedVcpus || '-'} + {rancher.currentState.usage?.orchestratedVcpus} - {dateUsage && ( + {displayDate && (
{t('last_update_date', { - date: format(dateUsage, 'yyyy_MM_dd'), - hour: format(dateUsage, 'HH:mm:ss'), + date: displayDate('PPPP'), + hour: displayDate('HH:mm:ss'), })}