ovh · darsene · Jan 14, 2025 · Jan 31, 2025
@@ -14,5 +14,6 @@
   "managed_vcd_vdc_order_quantity_title": "Menge auswählen",
   "managed_vcd_vdc_order_quantity_label": "Menge",
   "managed_vcd_vdc_order_cancel_cta": "Abbrechen",
-  "managed_vcd_vdc_order_confirm_cta": "Bestellen"
+  "managed_vcd_vdc_order_confirm_cta": "Bestellen",
+  "managed_vcd_vdc_order_performance_class": "{{performanceClass}}/TB"
 }
@@ -14,5 +14,6 @@
   "managed_vcd_vdc_order_quantity_title": "Choose a quantity",
   "managed_vcd_vdc_order_quantity_label": "Quantity",
   "managed_vcd_vdc_order_cancel_cta": "Cancel",
-  "managed_vcd_vdc_order_confirm_cta": "Order"
+  "managed_vcd_vdc_order_confirm_cta": "Order",
+  "managed_vcd_vdc_order_performance_class": "{{performanceClass}}/TB"
 }
@@ -14,5 +14,6 @@
   "managed_vcd_vdc_order_quantity_title": "Elegir una cantidad",
   "managed_vcd_vdc_order_quantity_label": "Cantidad",
   "managed_vcd_vdc_order_cancel_cta": "Cancelar",
-  "managed_vcd_vdc_order_confirm_cta": "Contratar"
+  "managed_vcd_vdc_order_confirm_cta": "Contratar",
+  "managed_vcd_vdc_order_performance_class": "{{performanceClass}}/TB"
 }
@@ -8,6 +8,7 @@
   "managed_vcd_vdc_order_ram_value": "{{ram}} Go",
   "managed_vcd_vdc_order_vcpu_count": "Nombre de vCPU",
   "managed_vcd_vdc_order_type": "Type",
+  "managed_vcd_vdc_order_performance_class": "{{performanceClass}}/To",
   "managed_vcd_vdc_order_price": "Prix",
   "managed_vcd_vdc_order_price_detail": "Prix pour 1 mois",
   "managed_vcd_vdc_order_quantity_title": "Choisir une quantité",

@@ -8,6 +8,7 @@
   "managed_vcd_vdc_order_ram_value": "{{ram}} Go",
   "managed_vcd_vdc_order_vcpu_count": "Nombre de vCPU",
   "managed_vcd_vdc_order_type": "Type",
+  "managed_vcd_vdc_order_performance_class": "{{performanceClass}}/To",
   "managed_vcd_vdc_order_price": "Prix",
   "managed_vcd_vdc_order_price_detail": "Prix pour 1 mois",
   "managed_vcd_vdc_order_quantity_title": "Choisir une quantité",

@@ -14,5 +14,6 @@
   "managed_vcd_vdc_order_quantity_title": "Scegliere una quantità",
   "managed_vcd_vdc_order_quantity_label": "Quantità",
   "managed_vcd_vdc_order_cancel_cta": "Annullare",
-  "managed_vcd_vdc_order_confirm_cta": "Ordinare"
+  "managed_vcd_vdc_order_confirm_cta": "Ordinare",
+  "managed_vcd_vdc_order_performance_class": "{{performanceClass}}/TB"
 }
@@ -14,5 +14,6 @@
   "managed_vcd_vdc_order_quantity_title": "Wybierz ilość",
   "managed_vcd_vdc_order_quantity_label": "Ilość",
   "managed_vcd_vdc_order_cancel_cta": "Anuluj",
-  "managed_vcd_vdc_order_confirm_cta": "Zamów"
+  "managed_vcd_vdc_order_confirm_cta": "Zamów",
+  "managed_vcd_vdc_order_performance_class": "{{performanceClass}}/TB"
 }
@@ -14,5 +14,6 @@
   "managed_vcd_vdc_order_quantity_title": "Escolher uma quantidade",
   "managed_vcd_vdc_order_quantity_label": "Quantidade",
   "managed_vcd_vdc_order_cancel_cta": "Anular",
-  "managed_vcd_vdc_order_confirm_cta": "Encomendar"
+  "managed_vcd_vdc_order_confirm_cta": "Encomendar",
+  "managed_vcd_vdc_order_performance_class": "{{performanceClass}}/TB"
 }
@@ -30,8 +30,8 @@ export const StorageOrderSelectCell = (storage: VCDOrderableStoragePriced) => {
   );
 };
 
-export const StorageOrderTypeCell = (storage: VCDOrderableStoragePriced) => (
-  <DataGridTextCell>{storage.name}</DataGridTextCell>
+export const StorageOrderTypeCell = ({ name }: VCDOrderableStoragePriced) => (
+  <DataGridTextCell>{name}</DataGridTextCell>
 );
 
 export const StorageOrderPriceCell = (storage: VCDOrderableStoragePriced) => {
@@ -45,3 +45,14 @@ export const StorageOrderPriceCell = (storage: VCDOrderableStoragePriced) => {
     </DataGridTextCell>
   );
 };
+
+export const StoragePerformanceClassCell = ({
+  performanceClass,
+}: VCDOrderableStoragePriced) => {
+  const { t } = useTranslation('datacentres/order');
+  return (
+    <DataGridTextCell>
+      {t('managed_vcd_vdc_order_performance_class', { performanceClass })}
+    </DataGridTextCell>
+  );
+};
@@ -8,8 +8,10 @@ import {
   StorageOrderPriceCell,
   StorageOrderSelectCell,
   StorageOrderTypeCell,
+  StoragePerformanceClassCell,
 } from '@/components/datagrid/storage/StorageOrderCells.component';
 import {
+  PERFORMANCE_CLASS_LABEL,
   STORAGE_ORDER_MAX_QUANTITY,
   STORAGE_ORDER_MIN_QUANTITY,
 } from './datacentreStorageOrder.constants';
@@ -31,6 +33,12 @@ export default function StorageOrderPage() {
       label: t('managed_vcd_vdc_order_type'),
       isSortable: false,
     },
+    {
+      id: 'performanceClass',
+      cell: StoragePerformanceClassCell,
+      label: PERFORMANCE_CLASS_LABEL,
+      isSortable: false,
+    },
     {
       id: 'price',
       cell: StorageOrderPriceCell,

@@ -3,9 +3,11 @@ import userEvent from '@testing-library/user-event';
 import {
   organizationList,
   datacentreList,
+  orderableResourceData,
 } from '@ovh-ux/manager-module-vcd-api';
 import { assertTextVisibility } from '@ovh-ux/manager-core-test-utils';
 import { labels, renderTest } from '../../../../test-utils';
+import { PERFORMANCE_CLASS_LABEL } from './datacentreStorageOrder.constants';
 
 const orderCTA = labels.datacentresStorage.managed_vcd_vdc_storage_order_cta;
 const orderTitle = labels.datacentresOrder.managed_vcd_vdc_order_storage_title;
@@ -17,11 +19,32 @@ describe('Datacentre Storage Order Page', () => {
       initialRoute: `/${organizationList[0].id}/datacentres/${datacentreList[0].id}/storage`,
     });
 
+    const { name, performanceClass } = orderableResourceData.storage[0];
+
+    // checks CTA
     await assertTextVisibility(orderCTA);
     const orderButton = screen.getByText(orderCTA);
     await waitFor(() => userEvent.click(orderButton));
 
     await assertTextVisibility(orderTitle);
+
+    // check datagrid content
+    await assertTextVisibility(
+      labels.datacentresOrder.managed_vcd_vdc_order_type,
+    );
+    await assertTextVisibility(name);
+
+    await assertTextVisibility(PERFORMANCE_CLASS_LABEL);
+    await assertTextVisibility(
+      labels.datacentresOrder.managed_vcd_vdc_order_performance_class
+        .toString()
+        .replace('{{performanceClass}}', performanceClass),
+    );
+
+    await assertTextVisibility(
+      labels.datacentresOrder.managed_vcd_vdc_order_price,
+    );
+    await assertTextVisibility('80.00 €');
   });
 
   it('display an error if orderableResource service is KO', async () => {

@@ -1,2 +1,3 @@
 export const STORAGE_ORDER_MIN_QUANTITY = 1;
 export const STORAGE_ORDER_MAX_QUANTITY = 50;
+export const PERFORMANCE_CLASS_LABEL = 'Performance class';
@@ -30,6 +30,7 @@ export const orderableResourceData: VCDOrderableResourceData = {
       name: 'vcd-datastore-1000',
       profile: 'vcd-datastore-1000',
       type: 'storage',
+      performanceClass: '250',
     },
   ],
 };
@@ -5,7 +5,9 @@ import { VCDCatalogProductPricing } from './vcd-catalog.type';
 export type VCDOrderableVHost = Omit<VCDComputeState, 'billingType'> & {
   vCPUSpeed: number;
 };
-export type VCDOrderableStorage = Omit<VCDStorageState, 'billingType'>;
+export type VCDOrderableStorage = Omit<VCDStorageState, 'billingType'> & {
+  performanceClass: string;
+};
 
 type WithPricing<T> = T & { pricing: VCDCatalogProductPricing };