feat(ai.notebooks): logs tab

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

@@ -70,7 +70,6 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.50.1",
     "react-i18next": "^14.0.5",
-    "react-router": "^6.21.3",
     "react-router-dom": "^6.3.0",
     "sonner": "^1.4.0",
     "tailwind-merge": "^2.2.1",

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

@@ -3,7 +3,8 @@
   "createNewNotebook": "Créer un notebook",
   "tableHeaderName": "Name",
   "tableHeaderLocation": "Région",
-  "tableHeaderEnvironment": "Environnement",
+  "tableHeaderFramework": "Framework",
+  "tableHeaderEditor": "Editeur",
   "tableHeaderResources": "Ressources",
   "tableHeaderPrivacy": "Confidentialité ",
   "networkSecureTitle": "Privé",

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

@@ -54,5 +54,8 @@
   "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é"
+  "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-notebooks/public/translations/pci-ai-notebooks/notebooks/notebook/Messages_fr_FR.json

@@ -1,7 +1,7 @@
 {
   "dashboardTab": "Dashboard",
   "dataTab": "Données attachées",
-  "backupTab": "Backup",
+  "backupTab": "Backups",
   "logsTab": "Logs",
   "publicAccessLabel": "Public",
   "privateAccessLabel": "Privé",

packages/manager/apps/pci-ai-notebooks/public/translations/pci-ai-notebooks/notebooks/notebook/attached-data/Messages_fr_FR.json

@@ -1,5 +1,6 @@
 {
-  "attachedDataTitle": "Attacher des conteneurs de données",
+  "breadcrumb": "Conteneurs de données",
+  "attachedDataTitle": "Conteneurs de données",
   "attachedDataDescription": "Si nécessaire, vous pouvez attacher des conteneurs Object Storage OVHcloud à votre notebook. Une fois attachés, ceux-ci seront temporairement chargés et mis en cache près de votre instance afin de réduire la latence et d’améliorer les performances. La bonne pratique est d’attacher un conteneur avec vos données entrantes et un autre avec vos données sortantes.",
   "attachedDataInfoLink": "En savoir plus sur le stockage de données.",
   "synchroniseDataButton": "Synchronisation globale des données",

packages/manager/apps/pci-ai-notebooks/public/translations/pci-ai-notebooks/notebooks/notebook/backups/Messages_fr_FR.json

@@ -0,0 +1,17 @@
+{
+  "breadcrumb": "Backups",
+  "title": "Sauvegardes",
+  "description": "Vous trouverez ci-dessous la liste de vos sauvegardes. Vous pouvez créer un nouveau notebook à partir du chacune d'entre elles",
+  "tableHeaderId": "Id",
+  "tableHeaderCreationDate": "Date de création",
+  "tableHeaderUpdateDate": "Date de modification",
+  "backupDropdownMenuLabel": "Action",
+  "tableActionFork": "Fork",
+  "forkBackupTitle": "Commander un notebook depuis un backup",
+  "forkBackupDescription": "Utiliser le backup {{id}} créé le {{date}} pour commander un nouveau notebook?",
+  "forkButtonCancel": "Annuler",
+  "forkBackupButtonConfirm": "Commander",
+  "forkToastErrorTitle": "Une erreur est survenue",
+  "forkToastSuccessTitle": "Succés",
+  "forkToastSuccessDescription": "votre notebook a été créé avec succès"
+}

packages/manager/apps/pci-ai-notebooks/public/translations/pci-ai-notebooks/notebooks/notebook/dashboard/Messages_fr_FR.json

@@ -7,6 +7,7 @@
   "billingSupportTitle": "Support & Facturation",
   "configurationTitle": "Configuration",
   "cliTitle": "CLI",
+  "cliCodeTitle": "Vous pouvez créer le même notebook en utilisant ces lignes de commande dans votre ovhai CLI.",
   "powerTitleSection": "Power",
   "computeTitleSection": "Compute",
   "storageTitleSection": "Stockage",

packages/manager/apps/pci-ai-notebooks/public/translations/pci-ai-notebooks/notebooks/notebook/logs/Messages_fr_FR.json

@@ -0,0 +1,6 @@
+{
+  "breadcrumb": "Logs",
+  "title": "Logs",
+  "description": "Pour vous aider à suivre et à piloter votre notebook, vous trouverez les derniers événements (logs) ci-dessous, quasiment en direct.",
+  "autoRefreshInputLabel": "Auto-Refresh"
+}

packages/manager/apps/pci-ai-notebooks/src/__tests__/helpers/mocks/datasync.ts

@@ -2,6 +2,7 @@ import * as ai from '@/types/cloud/project/ai';
 
 export const mockedDataSyncSpec: ai.volume.DataSyncSpec = {
   direction: ai.volume.DataSyncEnum.pull,
+  manual: true,
   volume: '1934e1d3-2ba0-4000-8fd3-6f11081e4401',
 };
 
@@ -10,7 +11,35 @@ export const mockedDataSync: ai.volume.DataSync = {
   id: 'idDuDataSync',
   spec: {
     direction: ai.volume.DataSyncEnum.pull,
+    manual: true,
     volume: '1934e1d3-2ba0-4000-8fd3-6f11081e4401',
   },
+  status: {
+    endedAt: 'endedAT',
+    info: {
+      code: ai.InfoCodeEnum.APP_ERROR,
+      message: 'error_message',
+    },
+    progress: [
+      {
+        completed: 1,
+        createdAt: 'createdAt',
+        deleted: 1,
+        direction: ai.volume.DataSyncEnum.pull,
+        failed: 3,
+        id: 'id',
+        info: 'info',
+        processed: 1,
+        skipped: 1,
+        state: ai.volume.DataSyncProgressStateEnum.DONE,
+        total: 1,
+        transferredBytes: 1,
+        updatedAt: 'updatedAt',
+      },
+    ],
+    queuedAt: 'queudAt',
+    startedAt: 'startedAt',
+    state: ai.volume.DataSyncStateEnum.DONE,
+  },
   updatedAt: 'updatedAt',
 };

packages/manager/apps/pci-ai-notebooks/src/__tests__/helpers/mocks/job.ts

@@ -1,4 +1,5 @@
 import * as ai from '@/types/cloud/project/ai';
+import { mockedDataSync } from './datasync';
 
 export const mockedJobSpec: ai.job.JobSpec = {
   image: 'image',
@@ -15,38 +16,7 @@ export const mockedJobSpec: ai.job.JobSpec = {
   },
 };
 export const mockedJobStatus: ai.job.JobStatus = {
-  dataSync: [
-    {
-      createdAt: 'createdAt',
-      id: 'datasyncId',
-      status: {
-        info: {
-          code: ai.InfoCodeEnum.APP_RUNNING,
-          message: 'message',
-        },
-        progress: [
-          {
-            completed: 1,
-            createdAt: 'createdAt',
-            deleted: 0,
-            direction: ai.volume.DataSyncEnum.push,
-            failed: 0,
-            id: 'progressId',
-            info: 'info',
-            processed: 3,
-            skipped: 1,
-            state: ai.volume.DataSyncProgressStateEnum.DONE,
-            total: 2,
-            transferredBytes: 30,
-            updatedAt: 'updatedAt',
-          },
-        ],
-        queuedAt: 'queuedAt',
-        state: ai.volume.DataSyncStateEnum.DONE,
-      },
-      updatedAt: 'updatedAt',
-    },
-  ],
+  dataSync: [mockedDataSync],
   history: [
     {
       date: 'date',

packages/manager/apps/pci-ai-notebooks/src/__tests__/helpers/mocks/logs.ts

@@ -0,0 +1,23 @@
+import * as ai from '@/types/cloud/project/ai';
+
+export const mockedLogs: ai.Logs = {
+  lastActivity: 'now',
+  logs: [
+    {
+      content: 'my first line log',
+      timestamp: '2024-11-27T15:15:35.684Z',
+    },
+    {
+      content: 'my second line log',
+      timestamp: '2024-11-27T15:15:36.684Z',
+    },
+    {
+      content: 'my third line log',
+      timestamp: '2024-11-27T15:15:37.684Z',
+    },
+    {
+      content: 'another line log',
+      timestamp: '2024-11-27T15:15:38.684Z',
+    },
+  ],
+};

packages/manager/apps/pci-ai-notebooks/src/__tests__/helpers/mocks/notebook.ts

@@ -1,5 +1,6 @@
 import * as ai from '@/types/cloud/project/ai';
 import { mockedJobStatus } from './job';
+import { mockedDataSync } from './datasync';
 
 export const mockedNotebookSpec: ai.notebook.NotebookSpec = {
   env: {
@@ -27,38 +28,7 @@ export const mockedNotebookSpec: ai.notebook.NotebookSpec = {
 };
 
 export const mockedNotebookStatus: ai.notebook.NotebookStatus = {
-  dataSync: [
-    {
-      createdAt: 'createdAt',
-      id: 'datasyncId',
-      status: {
-        info: {
-          code: ai.InfoCodeEnum.APP_RUNNING,
-          message: 'message',
-        },
-        progress: [
-          {
-            completed: 1,
-            createdAt: 'createdAt',
-            deleted: 0,
-            direction: ai.volume.DataSyncEnum.push,
-            failed: 0,
-            id: 'progressId',
-            info: 'info',
-            processed: 3,
-            skipped: 1,
-            state: ai.volume.DataSyncProgressStateEnum.DONE,
-            total: 2,
-            transferredBytes: 30,
-            updatedAt: 'updatedAt',
-          },
-        ],
-        queuedAt: 'queuedAt',
-        state: ai.volume.DataSyncStateEnum.DONE,
-      },
-      updatedAt: 'updatedAt',
-    },
-  ],
+  dataSync: [mockedDataSync],
 
   info: {
     code: ai.InfoCodeEnum.JOB_DONE,

packages/manager/apps/pci-ai-notebooks/src/__tests__/helpers/mocks/notebook/editor.ts

@@ -1,10 +1,10 @@
 import * as ai from '@/types/cloud/project/ai';
 
-export const mockedEditor: ai.notebook.Editor = {
+export const mockedEditor: ai.capabilities.notebook.Editor = {
   description: 'description',
   docUrl: 'docURl',
   id: 'editorId',
   logoUrl: 'logo',
   name: 'EditorName',
-  version: 'version',
+  versions: ['version'],
 };

packages/manager/apps/pci-ai-notebooks/src/__tests__/helpers/mocks/sshkey.ts

@@ -6,3 +6,11 @@ export const mockedSshKey: sshkey.SshKey = {
   publicKey: 'publicKey',
   regions: ['GRA'],
 };
+
+export const mockedSshKeyDetail: sshkey.SshKeyDetail = {
+  fingerPrint: 'fingerPrint',
+  id: 'id',
+  name: 'name',
+  publicKey: 'publicKey',
+  regions: ['GRA', 'BHS'],
+};

packages/manager/apps/pci-ai-notebooks/src/components/route-modal/RouteModal.tsx

@@ -0,0 +1,61 @@
+import { useNavigate } from 'react-router-dom';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+} from '../ui/dialog';
+import { Skeleton } from '../ui/skeleton';
+
+interface RouteModalProps {
+  backUrl?: string;
+  isLoading?: boolean;
+  children: React.ReactNode | React.ReactNode[];
+  onClose?: () => void;
+}
+const RouteModal = ({
+  backUrl,
+  isLoading = false,
+  children,
+  onClose,
+}: RouteModalProps) => {
+  const navigate = useNavigate();
+  const onOpenChange = (open: boolean) => {
+    if (!open) {
+      if (onClose) {
+        onClose();
+        return;
+      }
+      if (backUrl) navigate(backUrl);
+    }
+  };
+
+  return (
+    <Dialog defaultOpen onOpenChange={onOpenChange}>
+      {isLoading ? (
+        <DialogContent>
+          <DialogHeader>
+            <Skeleton className="w-3/5 h-5" />
+          </DialogHeader>
+          <DialogDescription className="flex flex-col gap-2">
+            <Skeleton className="w-4/5 h-4" />
+            <Skeleton className="w-100 h-4" />
+            <Skeleton className="w-2/3 h-4" />
+            <Skeleton className="w-4/5 h-4" />
+            <Skeleton className="w-1/3 h-4" />
+            <Skeleton className="w-4/5 h-4" />
+          </DialogDescription>
+          <DialogFooter className="flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 flex justify-end mt-2">
+            <Skeleton className="w-20 h-10" />
+            <Skeleton className="w-20 h-10" />
+          </DialogFooter>
+        </DialogContent>
+      ) : (
+        children
+      )}
+    </Dialog>
+  );
+};
+
+export default RouteModal;

packages/manager/apps/pci-ai-notebooks/src/components/ui/data-table.tsx

@@ -250,7 +250,8 @@ DataTable.Skeleton = function DataTableSkeleton({
             {Array.from({ length: columns }).map((col, iCol) => (
               <TableCell key={`${col}${iCol}`}>
                 <Skeleton
-                  style={{ width: `${width}px`, height: `${height}px` }}
+                  className='block'
+                  style={{ width: `${width}px`, height: `${height}px`}}
                 />
               </TableCell>
             ))}

packages/manager/apps/pci-ai-notebooks/src/components/ui/skeleton.tsx

@@ -5,7 +5,7 @@ function Skeleton({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <div
+    <span
       className={cn("animate-pulse rounded-md bg-muted", className)}
       {...props}
     />

packages/manager/apps/pci-ai-notebooks/src/configuration/polling.constants.ts

@@ -1,10 +1,12 @@
 export const POLLING = {
   NOTEBOOKS: 30_000,
   NOTEBOOK: 30_000,
+  LOGS: 30_000,
+  BACKUPS: 30_000,
 };
 
 export const USER_INACTIVITY_TIMEOUT = 5 * 60_000; // inactivity after 5 minutes
 
 export const TERMINATE_CONFIRMATION = 'TERMINATE';
 
-export const TIMELINE_MAX = -7;
+export const TIMELINE_MAX = -7;

packages/manager/apps/pci-ai-notebooks/src/configuration/tracking.constants.ts

@@ -1,11 +1,2 @@
-const APP_TRACKING_PREFIX = 'PublicCloud::databases_analytics::databases';
+export const APP_TRACKING_PREFIX = 'PublicCloud::ai::notebooks';
 export const PCI_LEVEL2 = '86';
-export const TRACKING = {
-  onboarding: {
-    page: () => `${APP_TRACKING_PREFIX}::databases::onboarding`,
-    createDatabaseClick: () =>
-      `${APP_TRACKING_PREFIX}::page::button::create_databases`,
-    guideClick: (guideName: string) =>
-      `${APP_TRACKING_PREFIX}::page::tile-tutorial::go-to-${guideName}`,
-  },
-};