Feat/pci ai tools qpu creation page list

packages/manager/apps/pci-ai-tools/package.json

@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@datatr-ux/ods-tailwind-config": "^1.0.3",
-    "@datatr-ux/ovhcloud-types": "^1.0.11",
+    "@datatr-ux/ovhcloud-types": "^1.0.34",
     "@datatr-ux/uxlib": "^0.0.11-beta-8",
     "@hookform/resolvers": "^5.0.1",
     "@ovh-ux/manager-config": "^8.6.5",

packages/manager/apps/pci-ai-tools/public/translations/ai-tools/Messages_fr_FR.json

@@ -3,5 +3,6 @@
   "crumb-notebook": "AI Notebooks",
   "crumb-quantum": "Emulators",
   "crumb-training": "AI Training",
-  "crumb-deploy": "AI Deploy"
+  "crumb-deploy": "AI Deploy",
+  "crumb-qpu": "QPUs"
 }

packages/manager/apps/pci-ai-tools/public/translations/ai-tools/components/qpu/Messages_fr_FR.json

@@ -0,0 +1,24 @@
+{
+  "fieldQpuDescription": "Séléctionner le type de ressources",
+  "tableHeadType": "Type",
+  "tableHeadDescription": "Description",
+  "tableHeadQubits": "Qubits",
+  "tableHeadMemory": "RAM",
+  "tableHeadStorage": "Stockage",
+  "tableHeadPrice": "Prix / heure",
+  "gpuMemorySpec": "{{memory}} RAM",
+  "cpuCores_one": "CPU: {{count}} vCore",
+  "cpuCores_other": "CPU: {{count}} vCores",
+  "ramSpec": "RAM: {{ram}}",
+  "localStorageSpec": "Stockage local éphémère: {{disk}} SSD",
+  "networkSpec": "Réseau public: {{network}}/s",
+  "resourcePrice": "Prix ressources",
+  "updateQpuTitle": "Modifier les ressources",
+  "fieldQpuQuantityDescription": "Sélectionner la quantité de ressources",
+  "fieldQpuQuantityInformation": "Quantité maximale pour ",
+  "updateQpuButtonCancel": "Annuler",
+  "updateQpuButtonConfirm": "Confirmer",
+  "updateQpuToastErrorTitle": "Erreur",
+  "updateQpuToastSuccessTitle": "Succés",
+  "updateQpuToastSuccessDescription": "L'application a été mise à jour"
+}

packages/manager/apps/pci-ai-tools/public/translations/ai-tools/notebooks/create/Messages_fr_FR.json

@@ -47,6 +47,7 @@
   "errorGetCommandCli": "Une erreur est survenue lors de la génération de code équivalent pour la CLI",
   "cliEquivalentModalTitle": "Création d’un notebook équivalent",
   "cliEquivalentModalDescription": "Commande CLI",
+  "qpuQubits": "Qubits",
   "cliEquivalentModalToastMessage": "Le code a été copié",
   "errorCreatingNotebook": "Erreur",
   "successCreatingNotebookTitle": "Succès",

packages/manager/apps/pci-ai-tools/public/translations/ai-tools/qpu/create/Messages_fr_FR.json

@@ -0,0 +1,54 @@
+{
+  "title": "Créer un notebook",
+  "breadcrumb": "Créer un notebook",
+  "summaryTitle": "Votre commande",
+  "fieldConfigurationNameLabel": "Nom du notebook",
+  "summaryFieldNameLabel": "Nom:",
+  "summaryFieldRegionLabel": "Région:",
+  "fieldRegionLabel": "Localisation",
+  "fieldFlavorLabel": "Ressources",
+  "fieldFlavorDescription": "Séléctionner le type de ressources",
+  "fieldFQpuDescription": "Sélectionnez le QPU que vous souhaitez utiliser ",
+  "fieldFlavorQuantityDescription": "Sélectionner la quantité de ressources",
+  "fieldFlavorQuantityInformation": "Quantité maximale pour",
+  "summaryFieldFlavorLabel": "Ressources:",
+  "summaryFieldFlavorCores_one": "{{count}} vCore",
+  "summaryFieldFlavorCores_other": "{{count}} vCores",
+  "summaryFieldFlavorMemory": "{{memory}} RAM",
+  "summaryFieldStorage": "{{disk}} SSD",
+  "summaryFieldNetwork": "{{network}}/s",
+  "fieldFrameworkLabel": "Frameworks",
+  "fieldFrameworkVersionDescription": "Sélectionner la version",
+  "summaryFieldFrameworkLabel": "Framework:",
+  "fieldEditorLabel": "Editors",
+  "summaryFieldEditorLabel": "Editor:",
+  "fieldConfigurationLabel": "Configurez vos options",
+  "fieldConfigurationPrivacyLabel": "Confidentialité",
+  "summaryFieldPrivacyLabel": "Confidentialité:",
+  "summaryFieldPublicLabel": "Public",
+  "summaryFieldPrivateLabel": "Private",
+  "formButtonAdvancedConfiguration": "Configuration avancée",
+  "summaryFieldVolumesLabel": "Volume:",
+  "summaryFieldVolumes_one": "{{count}} volume configuré",
+  "summaryFieldVolumes_other": "{{count}} volumes configurés",
+  "fieldConfigurationLabelsLabel": "Labels",
+  "summaryFieldLabelsLabel": "Labels:",
+  "summaryFieldLabels_one": "{{count}} label configuré",
+  "summaryFieldLabels_other": "{{count}} labels configurés",
+  "fieldConfigurationSSHKeysLabel": "Clés publiques SSH",
+  "sshkeyAddButtonLabel": "Configurer une clé SSH",
+  "sshKeyConfigurationHelper": "Configurer une clé SSH que vous pourrez utiliser sur tout l'univers Public Cloud d'OVHcloud.",
+  "sshKeyConfigurationHelperBis": "Utilisez la liste déroulante ci-dessous pour lier des clés SSH à votre notebook",
+  "summaryFieldSSHLabel": "Clés SSH:",
+  "summaryFieldSshKey_one": "{{count}} clé configurée",
+  "summaryFieldSshKey_other": "{{count}} clés configurées",
+  "orderButton": "Commander",
+  "cliCode": "Equivalent CLI",
+  "errorGetCommandCli": "Une erreur est survenue lors de la génération de code équivalent pour la CLI",
+  "cliEquivalentModalTitle": "Création d’un notebook équivalent",
+  "cliEquivalentModalDescription": "Commande CLI",
+  "cliEquivalentModalToastMessage": "Le code a été copié",
+  "errorCreatingNotebook": "Erreur",
+  "successCreatingNotebookTitle": "Succès",
+  "successCreatingNotebookDescription": "Votre notebook a été créé avec succès"
+}

packages/manager/apps/pci-ai-tools/public/translations/ai-tools/qpu/onboarding/Messages_fr_FR.json

@@ -0,0 +1,7 @@
+{
+  "Title": "QPUs",
+  "createNotebookButton": "Créer un Notebook",
+  "Description1": "Explorez l'informatique quantique en toute liberté grâce à nos notebooks prêts à l'emploi dans le cloud",
+  "Description2": "Simulez jusqu'à 20 qubits en quelques secondes, sans contrainte d'installation ni de configuration.",
+  "Description3": "Accédez à un environnement préconfiguré, compatible avec les principaux frameworks (Pulser, Mimiq, Perceval, Callisto, Qleo, Qiskit, MyQLM, …) et collaborez facilement avec vos équipes via une interface partagée et sécurisée"
+}

packages/manager/apps/pci-ai-tools/src/__tests__/helpers/mocks/capabilities/qpuFlavor.ts

@@ -0,0 +1,25 @@
+import quantum from '@/types/Quantum';
+import { mockedNotebook } from '../notebook/notebook';
+import ai from '@/types/AI';
+
+export const mockedCapabilitiesQPUFlavor: quantum.capabilities.QPUFlavor = {
+  description: 'Pasqal QPU Orion beta',
+  id: 'orion-beta',
+  name: 'Orion beta',
+  qubits: 100,
+};
+
+export const mockedNotebookWithQPU: ai.notebook.Notebook & {
+  qpuDetail?: quantum.capabilities.QPUFlavor;
+} = {
+  ...mockedNotebook,
+  id: 'notebook-qpu-1',
+  spec: {
+    ...mockedNotebook.spec,
+    region: 'GRA',
+    quantumResources: {
+      qpuFlavorId: mockedCapabilitiesQPUFlavor.id,
+    },
+  },
+  qpuDetail: mockedCapabilitiesQPUFlavor,
+};

packages/manager/apps/pci-ai-tools/src/components/order/price/OrderPrice.component.tsx

@@ -3,20 +3,38 @@ import Price from '@/components/price/Price.component';
 import publicCatalog from '@/types/Catalog';
 
 interface OrderPriceProps {
-  minuteConverter: number;
   price: publicCatalog.Pricing;
   quantity: number;
+  section?: string;
+  showPriceLabel?: boolean;
+  isQPU?: boolean;
+  minuteConverter?: number;
 }
-const OrderPrice = ({ minuteConverter, price, quantity }: OrderPriceProps) => {
+const OrderPrice = ({
+  price,
+  quantity,
+  section,
+  showPriceLabel = true,
+  isQPU = false,
+  minuteConverter,
+}: OrderPriceProps) => {
   const { t } = useTranslation('ai-tools/pricing');
+
+  // Conversion factor : Notebook minuteConverter, QPU : 3600s/h
+  const conversionFactor = isQPU ? 3600 : minuteConverter;
+
+  const priceInUcents = quantity * conversionFactor * (price.price || 0);
+  const taxInUcents = quantity * conversionFactor * (price.tax || 0);
+
   return (
     <div data-testid="order-price-container" className="flex flex-col gap-2">
-      <p>{t('pricingLabel')}</p>
+      {showPriceLabel && <p>{t('pricingLabel')}</p>}
       <div className="inline-block">
+        <span className="font-bold">{section}</span>
         <Price
+          priceInUcents={priceInUcents}
+          taxInUcents={taxInUcents}
           decimals={2}
-          priceInUcents={minuteConverter * quantity * price.price}
-          taxInUcents={minuteConverter * quantity * price.tax}
           displayInHour={true}
         />
       </div>

packages/manager/apps/pci-ai-tools/src/components/order/qpu/QpuSelect.component.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Cpu } from 'lucide-react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@datatr-ux/uxlib';
+import { cn } from '@/lib/utils';
+import { Qpu } from '@/types/orderFunnel';
+import Price from '@/components/price/Price.component';
+
+interface QpusSelectProps {
+  qpus: Qpu[];
+  value: string;
+  onChange: (newQpu: string) => void;
+  className?: string;
+  isUpdate?: boolean;
+}
+
+const QpusSelect = React.forwardRef<HTMLTableElement, QpusSelectProps>(
+  ({ qpus, value, onChange, isUpdate, className }, ref) => {
+    const { t } = useTranslation('ai-tools/components/qpu');
+
+    qpus.sort((a, b) => a.pricing[0].price - b.pricing[0].price);
+    const clickInput = (qpuName: string) => {
+      const inputElement = document.getElementById(
+        `qpu-${qpuName}`,
+      ) as HTMLInputElement | null;
+      if (inputElement) {
+        inputElement.click();
+      }
+    };
+    const handleKeyDown = (
+      e: React.KeyboardEvent<HTMLTableRowElement>,
+      qpuName: string,
+    ) => {
+      if (e.key === 'Enter') {
+        clickInput(qpuName);
+      }
+    };
+    return (
+      <Table
+        data-testid="qpu-select-table"
+        ref={ref}
+        className={cn('min-w-max w-full', className)}
+      >
+        <TableHeader
+          className="border bg-[#f7f8f8]"
+          data-testid="qpu-select-table-header"
+        >
+          <TableRow>
+            <TableHead className="h-10 px-2 border font-semibold text-primary-800">
+              {t('tableHeadType')}
+            </TableHead>
+            {!isUpdate && (
+              <TableHead className="h-10 px-2 border font-semibold text-primary-800">
+                {t('tableHeadDescription')}
+              </TableHead>
+            )}
+            <TableHead className="h-10 px-2 border font-semibold text-primary-800">
+              {t('tableHeadQubits')}
+            </TableHead>
+            <TableHead className="h-10 px-2 border font-semibold text-primary-800">
+              {t('tableHeadPrice')}
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody data-testid="qpu-select-table-body">
+          {qpus.map((qpu) => (
+            <TableRow
+              data-testid={`qpu-table-row-${qpu.id}`}
+              tabIndex={0}
+              onClick={() => clickInput(qpu.id)}
+              onKeyDown={(e) => handleKeyDown(e, qpu.id)}
+              key={qpu.id}
+              className={`border hover:bg-primary-50 cursor-pointer text-[#4d5592] ${
+                value === qpu.id
+                  ? 'bg-primary-50 font-semibold !border-2 border-primary-500'
+                  : ''
+              }`}
+            >
+              <td className="hidden">
+                <input
+                  type="radio"
+                  name="qpu-select"
+                  onChange={(e) => onChange(e.target.value)}
+                  className="hidden"
+                  id={`qpu-${qpu.id}`}
+                  value={qpu.id}
+                  checked={value === qpu.id}
+                />
+              </td>
+              <TableCell className="text-[#4d5592] border capitalize">
+                <div className="flex gap-2 w-full items-center">
+                  <Cpu className="size-4" />
+                  <span>{qpu.id}</span>
+                </div>
+              </TableCell>
+              {!isUpdate && (
+                <TableCell className="text-[#4d5592] border capitalize">
+                  {qpu.description}
+                </TableCell>
+              )}
+              <TableCell className="text-[#4d5592] border capitalize">
+                {qpu.qubits}
+              </TableCell>
+              <TableCell className="text-[#4d5592] border capitalize">
+                <Price
+                  priceInUcents={qpu.pricing[0]?.price}
+                  taxInUcents={qpu.pricing[0]?.tax}
+                  decimals={2}
+                  displayInHour={true}
+                  isQPU={true}
+                />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    );
+  },
+);
+
+QpusSelect.displayName = 'QpusSelect';
+
+export default QpusSelect;

packages/manager/apps/pci-ai-tools/src/components/price/Price.component.tsx

@@ -5,14 +5,16 @@ import { useGetCatalog } from '@/data/hooks/catalog/useGetCatalog.hook';
 interface PriceProps {
   priceInUcents: number;
   taxInUcents: number;
-  decimals: number;
-  displayInHour: boolean;
+  decimals?: number;
+  displayInHour?: boolean;
+  isQPU?: boolean;
 }
 const Price = ({
   priceInUcents,
   taxInUcents,
   decimals = 2,
   displayInHour = true,
+  isQPU = false,
 }: PriceProps) => {
   const { t } = useTranslation('ai-tools/pricing');
   const catalog = useGetCatalog();
@@ -28,8 +30,10 @@ const Price = ({
   }
 
   const ucentToEur = 100_000_000;
-  const price = priceInUcents / ucentToEur;
-  const priceWithTax = (priceInUcents + taxInUcents) / ucentToEur;
+  // price/s price/h
+  const factor = isQPU ? 3600 : 1;
+  const price = (priceInUcents / ucentToEur) * factor;
+  const priceWithTax = ((priceInUcents + taxInUcents) / ucentToEur) * factor;
   const formatPrice = (value: number) => {
     const formatter = new Intl.NumberFormat(locale.replace('_', '-'), {
       style: 'currency',

packages/manager/apps/pci-ai-tools/src/configuration/roadmap-changelog.constants.ts

@@ -16,6 +16,24 @@ export const NotebookRoadmapLinks = [
   },
 ];
 
+export const QpuRoadmapLinks = [
+  {
+    label: 'Changelog',
+    url:
+      'https://github.com/orgs/ovh/projects/16/views/6?sliceBy%5Bvalue%5D=Quantum+QPU',
+  },
+  {
+    label: 'Roadmap',
+    url:
+      'https://github.com/orgs/ovh/projects/16/views/1?sliceBy%5Bvalue%5D=Quantum+QPU',
+  },
+  {
+    label: 'Feature Request',
+    url:
+      'https://github.com/ovh/public-cloud-roadmap/issues/new?assignees=&labels=&projects=&template=feature_request.md&title=',
+  },
+];
+
 export const EmulatorRoadmapLinks = [
   {
     label: 'Changelog',