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;