diff --git a/packages/manager/apps/hpc-vmware-managed-vcd/public/translations/hpc-vmware-managed-vcd/datacentres/Messages_fr_FR.json b/packages/manager/apps/hpc-vmware-managed-vcd/public/translations/hpc-vmware-managed-vcd/datacentres/Messages_fr_FR.json index bc878c531532..125be52c9d1f 100644 --- a/packages/manager/apps/hpc-vmware-managed-vcd/public/translations/hpc-vmware-managed-vcd/datacentres/Messages_fr_FR.json +++ b/packages/manager/apps/hpc-vmware-managed-vcd/public/translations/hpc-vmware-managed-vcd/datacentres/Messages_fr_FR.json @@ -6,5 +6,6 @@ "managed_vcd_vdc_quota_value": "{{quota}} Go", "managed_vcd_vdc_vcpu_speed": "Vitesse vCPU", "managed_vcd_vdc_vcpu_value": "{{speed}} GHz", - "managed_vcd_vdc_id": "ID" + "managed_vcd_vdc_id": "ID", + "managed_vcd_vdc_usage": "Usage" } diff --git a/packages/manager/apps/hpc-vmware-managed-vcd/src/components/tiles/datacentre-general-information-tile/DatacentreGeneralInformationTile.component.tsx b/packages/manager/apps/hpc-vmware-managed-vcd/src/components/tiles/datacentre-general-information-tile/DatacentreGeneralInformationTile.component.tsx index 66edd14e1fb7..e93c9ac41745 100644 --- a/packages/manager/apps/hpc-vmware-managed-vcd/src/components/tiles/datacentre-general-information-tile/DatacentreGeneralInformationTile.component.tsx +++ b/packages/manager/apps/hpc-vmware-managed-vcd/src/components/tiles/datacentre-general-information-tile/DatacentreGeneralInformationTile.component.tsx @@ -56,15 +56,6 @@ export default function DatacentreGenerationInformationTile({ ), }, - { - id: 'cpuCount', - label: tVdc('managed_vcd_vdc_vcpu_count'), - value: ( - - {vcdDatacentre?.currentState?.vCPUCount?.toString()} - - ), - }, { id: 'ramCount', label: tVdc('managed_vcd_vdc_ram_count'), @@ -76,17 +67,6 @@ export default function DatacentreGenerationInformationTile({ ), }, - { - id: 'vcpuSpeed', - label: tVdc('managed_vcd_vdc_vcpu_speed'), - value: ( - - {tVdc('managed_vcd_vdc_vcpu_value', { - speed: vcdDatacentre?.currentState?.vCPUSpeed, - })} - - ), - }, { id: 'interface', label: t('managed_vcd_dashboard_management_interface'), diff --git a/packages/manager/apps/hpc-vmware-managed-vcd/src/components/tiles/datacentre-usage-tile/DatacentreUsageTile.component.tsx b/packages/manager/apps/hpc-vmware-managed-vcd/src/components/tiles/datacentre-usage-tile/DatacentreUsageTile.component.tsx new file mode 100644 index 000000000000..9553b740cff3 --- /dev/null +++ b/packages/manager/apps/hpc-vmware-managed-vcd/src/components/tiles/datacentre-usage-tile/DatacentreUsageTile.component.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { + ActionMenu, + DashboardTile, + Description, +} from '@ovh-ux/manager-react-components'; +import { ODS_ICON_NAME } from '@ovhcloud/ods-components'; +import IVcdDatacentre from '@/types/vcd-datacenter.interface'; + +type TTileProps = { + vcdDatacentre: IVcdDatacentre; +}; + +export default function DatacentreUsageTile({ + vcdDatacentre, +}: Readonly) { + const { t } = useTranslation('hpc-vmware-managed-vcd/datacentres'); + + return ( +
+ + + {t('managed_vcd_vdc_vcpu_value', { + speed: vcdDatacentre?.currentState.vCPUSpeed, + })} + + +
+ ), + }, + { + id: 'vcpuCount', + label: t('managed_vcd_vdc_vcpu_count'), + value: ( + {vcdDatacentre?.currentState.vCPUCount} + ), + }, + ]} + /> + + ); +} diff --git a/packages/manager/apps/hpc-vmware-managed-vcd/src/components/tiles/datacentre-usage-tile/DatacentreUsageTile.spec.tsx b/packages/manager/apps/hpc-vmware-managed-vcd/src/components/tiles/datacentre-usage-tile/DatacentreUsageTile.spec.tsx new file mode 100644 index 000000000000..a6b36768edf7 --- /dev/null +++ b/packages/manager/apps/hpc-vmware-managed-vcd/src/components/tiles/datacentre-usage-tile/DatacentreUsageTile.spec.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { vi } from 'vitest'; +import { render } from '@testing-library/react'; +import { + ODS_THEME_TYPOGRAPHY_LEVEL, + ODS_THEME_TYPOGRAPHY_SIZE, +} from '@ovhcloud/ods-common-theming'; +import DatacentreUsageTile from './DatacentreUsageTile.component'; +import { datacentreList } from '../../../../mocks/vcd-organization/vcd-datacentre.mock'; + +type TTileItem = { + label: HTMLElement; + value: HTMLElement; +}; + +const testVDC = datacentreList[0]; + +vi.mock('react-i18next', () => ({ + useTranslation: () => ({ + t: (key: string, options: Record) => { + if (key === 'managed_vcd_vdc_vcpu_value') { + return `${options.speed} GHz`; + } + return key; + }, + }), +})); + +describe('DatacentreUsageTile component unit test suite', () => { + it('should define all sections with correct typo', () => { + // when + const { getByText } = render( + , + ); + + // then + const usageTitle = getByText('managed_vcd_vdc_usage'); + expect(usageTitle).toBeVisible(); + + // and + const tileItems: TTileItem[] = [ + { + label: getByText('managed_vcd_vdc_vcpu_speed'), + value: getByText(`${testVDC.currentState.vCPUSpeed} GHz`), + }, + { + label: getByText('managed_vcd_vdc_vcpu_count'), + value: getByText(testVDC.currentState.vCPUCount), + }, + ]; + + tileItems.forEach((item: TTileItem) => { + expect(item.label).toBeVisible(); + expect(item.value).toBeVisible(); + + expect(item.label).toHaveAttribute( + 'size', + ODS_THEME_TYPOGRAPHY_SIZE._200, + ); + expect(item.label).toHaveAttribute( + 'level', + ODS_THEME_TYPOGRAPHY_LEVEL.heading, + ); + }); + }); +}); diff --git a/packages/manager/apps/hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/general-informations/DatacentreGeneralInformation.page.tsx b/packages/manager/apps/hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/general-informations/DatacentreGeneralInformation.page.tsx index ddf7fceeb3fe..1e1e5b3ab7dc 100644 --- a/packages/manager/apps/hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/general-informations/DatacentreGeneralInformation.page.tsx +++ b/packages/manager/apps/hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/general-informations/DatacentreGeneralInformation.page.tsx @@ -5,6 +5,7 @@ import useManagedVcdOrganization from '@/data/hooks/useManagedVcdOrganization'; import { useManagedVcdDatacentre } from '@/data/hooks/useManagedVcdDatacentres'; import Loading from '@/components/loading/Loading.component'; import Errors from '@/components/error/Error.component'; +import DatacentreUsageTile from '@/components/tiles/datacentre-usage-tile/DatacentreUsageTile.component'; export default function DatacentresGeneralInformationPage() { const { id, vdcId } = useParams(); @@ -40,8 +41,9 @@ export default function DatacentresGeneralInformationPage() { vcdDatacentre={vcdDatacentre?.data} vcdOrganization={vcdOrganization?.data} /> - + + ); } diff --git a/packages/manager/apps/hpc-vmware-managed-vcd/src/pages/dashboard/organization/general-information/OrganizationGeneralInformation.page.tsx b/packages/manager/apps/hpc-vmware-managed-vcd/src/pages/dashboard/organization/general-information/OrganizationGeneralInformation.page.tsx index c6475d6117ed..fd25b01ba2c9 100644 --- a/packages/manager/apps/hpc-vmware-managed-vcd/src/pages/dashboard/organization/general-information/OrganizationGeneralInformation.page.tsx +++ b/packages/manager/apps/hpc-vmware-managed-vcd/src/pages/dashboard/organization/general-information/OrganizationGeneralInformation.page.tsx @@ -8,7 +8,7 @@ import OrganizationOptionsTile from '@/components/tiles/organization-options-til import OrganizationDataProtectionTile from '@/components/tiles/organization-data-tile/OrganizationDataProtectionTile.component'; import OrganizationServiceManagementTile from '@/components/tiles/organization-service-tile/OrganizationServiceManagementTile.component'; -function GeneralInformation() { +export default function GeneralInformation() { const { id } = useParams(); const { data: vcdOrganization, @@ -47,12 +47,8 @@ function GeneralInformation() { vcdOrganization={vcdOrganization?.data} /> -
- -
+ ); } - -export default GeneralInformation;