feat(ws): Notebooks 2.0 // Frontend // Fetch workspaces

Signed-off-by: Yehudit Kerido <yehudit.kerido@nokia.com>

Author: Yehudit Kerido

workspaces/frontend/src/__tests__/cypress/cypress/tests/e2e/Workspaces.cy.ts

@@ -1,36 +1,33 @@
-import { WorkspaceState } from '~/shared/types';
 import { home } from '~/__tests__/cypress/cypress/pages/home';
 import {
   mockWorkspaces,
   mockWorkspacesByNS,
 } from '~/__tests__/cypress/cypress/tests/mocked/workspace.mock';
+import type { Workspace } from '~/shared/types';
 import { mockNamespaces } from '~/__mocks__/mockNamespaces';
 import { mockBFFResponse } from '~/__mocks__/utils';
 
 // Helper function to validate the content of a single workspace row in the table
-const validateWorkspaceRow = (workspace: any, index: number) => {
+const validateWorkspaceRow = (workspace: Workspace, index: number) => {
   // Validate the workspace name
   cy.findByTestId(`workspace-row-${index}`)
     .find('[data-testid="workspace-name"]')
     .should('have.text', workspace.name);
 
-  // Map workspace state to the expected label
-  const expectedLabel = WorkspaceState[workspace.status.state];
-
-  // Validate the state label and pod configuration
-  cy.findByTestId(`workspace-row-${index}`)
-    .find('[data-testid="state-label"]')
-    .should('have.text', expectedLabel);
-
   cy.findByTestId(`workspace-row-${index}`)
     .find('[data-testid="pod-config"]')
-    .should('have.text', workspace.options.podConfig);
+    .should('have.text', workspace.pod_template.pod_config.current);
 };
 
 // Test suite for workspace-related tests
 describe('Workspaces Tests', () => {
   beforeEach(() => {
     home.visit();
+
+    cy.intercept('GET', '/api/v1/namespaces', {
+      body: mockBFFResponse(mockNamespaces),
+    }).as('getNamespaces');
+
     cy.intercept('GET', '/api/v1/workspaces', {
       body: mockBFFResponse(mockWorkspaces),
     }).as('getWorkspaces');
@@ -103,11 +100,18 @@ describe('Workspace by namespace functionality', () => {
 describe('Workspaces Component', () => {
   beforeEach(() => {
     // Mock the namespaces API response
+
+    cy.visit('/');
     cy.intercept('GET', '/api/v1/namespaces', {
       body: mockBFFResponse(mockNamespaces),
     }).as('getNamespaces');
-    cy.visit('/');
     cy.wait('@getNamespaces');
+    cy.intercept('GET', 'api/v1/workspaces', {
+      body: mockBFFResponse(mockWorkspaces),
+    }).as('getWorkspaces');
+    cy.intercept('GET', 'api/v1/workspaces/kubeflow', {
+      body: mockBFFResponse(mockWorkspacesByNS),
+    });
   });
 
   function openDeleteModal() {
@@ -122,6 +126,10 @@ describe('Workspaces Component', () => {
       () => cy.get('[aria-label="Close"]').click(),
     ];
 
+    // Change namespace to "kubeflow"
+    cy.findByTestId('namespace-toggle').click();
+    cy.findByTestId('dropdown-item-kubeflow').click();
+
     closeModalActions.forEach((closeAction) => {
       openDeleteModal();
       cy.findByTestId('delete-modal-input').type('Some Text');
@@ -138,6 +146,9 @@ describe('Workspaces Component', () => {
   });
 
   it('should verify the delete modal verification mechanism', () => {
+    // Change namespace to "kubeflow"
+    cy.findByTestId('namespace-toggle').click();
+    cy.findByTestId('dropdown-item-kubeflow').click();
     openDeleteModal();
     cy.findByTestId('delete-modal').within(() => {
       cy.get('strong')

workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspace.mock.ts

@@ -1,3 +1,4 @@
+import type { Workspace } from '~/shared/types';
 import { WorkspaceState } from '~/shared/types';
 
 const generateMockWorkspace = (
@@ -8,60 +9,66 @@ const generateMockWorkspace = (
   imageConfig: string,
   podConfig: string,
   pvcName: string,
-) => {
+): Workspace => {
   const currentTime = Date.now();
-  const lastActivity = currentTime - Math.floor(Math.random() * 1000000); // Random last activity time
-  const lastUpdate = currentTime - Math.floor(Math.random() * 100000); // Random last update time
+  const lastActivityTime = currentTime - Math.floor(Math.random() * 1000000); // Random last activity time
+  const lastUpdateTime = currentTime - Math.floor(Math.random() * 100000); // Random last update time
 
   return {
     name,
     namespace,
+    workspace_kind: {
+      name: 'jupyterlab',
+    },
+    defer_updates: paused,
     paused,
-    deferUpdates: !!paused,
-    kind: 'jupyter-lab',
-    cpu: 3,
-    ram: 500,
-    podTemplate: {
+    paused_time: paused ? currentTime - Math.floor(Math.random() * 1000000) : 0,
+    state,
+    state_message:
+      state === WorkspaceState.Running
+        ? 'Workspace is running smoothly.'
+        : state === WorkspaceState.Paused
+          ? 'Workspace is paused.'
+          : 'Workspace is operational.',
+    pod_template: {
+      pod_metadata: {
+        labels: {},
+        annotations: {},
+      },
       volumes: {
-        home: '/home',
+        home: {
+          pvc_name: `${pvcName}-home`,
+          mount_path: '/home/jovyan',
+          readOnly: false,
+        },
         data: [
           {
-            pvcName,
-            mountPath: '/data',
-            readOnly: paused, // Randomize based on paused state
+            pvc_name: pvcName,
+            mount_path: '/data/my-data',
+            readOnly: paused, // Set based on the paused state
           },
         ],
       },
-    },
-    options: {
-      imageConfig,
-      podConfig,
-    },
-    status: {
-      activity: {
-        lastActivity,
-        lastUpdate,
+      image_config: {
+        current: imageConfig,
+        desired: '',
+        redirect_chain: [],
       },
-      pauseTime: paused ? currentTime - Math.floor(Math.random() * 1000000) : 0,
-      pendingRestart: !!paused,
-      podTemplateOptions: {
-        imageConfig: {
-          desired: imageConfig,
-          redirectChain: [
-            {
-              source: 'base-image',
-              target: `optimized-${Math.floor(Math.random() * 100)}`,
-            },
-          ],
-        },
+      pod_config: {
+        current: podConfig,
+        desired: podConfig,
+        redirect_chain: [],
+      },
+    },
+    activity: {
+      last_activity: lastActivityTime,
+      last_update: lastUpdateTime,
+      last_probe: {
+        start_time_ms: lastUpdateTime - 1000, // Simulated probe timing
+        end_time_ms: lastUpdateTime,
+        result: 'default_result',
+        message: 'default_message',
       },
-      state,
-      stateMessage:
-        state === WorkspaceState.Running
-          ? 'Workspace is running smoothly.'
-          : state === WorkspaceState.Paused
-            ? 'Workspace is paused.'
-            : 'Workspace is operational.',
     },
   };
 };
@@ -74,7 +81,7 @@ const generateMockWorkspaces = (numWorkspaces: number, byNamespace = false) => {
     'jupyterlab_tensorflow_230',
     'jupyterlab_pytorch_120',
   ];
-  const namespaces = byNamespace ? ['kubeflow'] : ['kubeflow', 'system', 'user-example'];
+  const namespaces = byNamespace ? ['kubeflow'] : ['kubeflow', 'system', 'user-example', 'default'];
 
   for (let i = 1; i <= numWorkspaces; i++) {
     const state =

workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx

@@ -183,20 +183,19 @@ export const Workspaces: React.FunctionComponent = () => {
   const [activeSortIndex, setActiveSortIndex] = React.useState<number | null>(null);
   const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
 
-  const getSortableRowValues = (workspace: Workspace): (string | number)[] => {
-    const { redirectStatus, name, kind, image, podConfig, state, homeVol, cpu, ram, lastActivity } =
-      {
-        redirectStatus: '',
-        name: workspace.name,
-        kind: workspace.workspaceKind.name,
-        image: workspace.podTemplate.options.imageConfig.current.displayName,
-        podConfig: workspace.podTemplate.options.podConfig.current.displayName,
-        state: workspace.state,
-        homeVol: workspace.podTemplate.volumes.home?.pvcName ?? '',
-        cpu: extractCpuValue(workspace),
-        ram: extractMemoryValue(workspace),
-        lastActivity: workspace.activity.lastActivity,
-      };
+  const getSortableRowValues = (workspace: Workspace): (string | number | undefined)[] => {
+    const { name, kind, image, podConfig, state, homeVol, cpu, ram, lastActivity } = {
+      redirectStatus: '',
+      name: workspace.name,
+      kind: workspace.workspaceKind.name,
+      image: workspace.podTemplate.options.imageConfig.current.displayName,
+      podConfig: workspace.podTemplate.options.podConfig.current.displayName,
+      state: workspace.state,
+      homeVol: workspace.podTemplate.volumes.home?.pvcName ?? '',
+      cpu: extractCpuValue(workspace),
+      ram: extractMemoryValue(workspace),
+      lastActivity: workspace.activity.lastActivity,
+    };
     return [redirectStatus, name, kind, image, podConfig, state, homeVol, cpu, ram, lastActivity];
   };
 

workspaces/frontend/src/shared/types.ts

@@ -1,6 +1,10 @@
 import { Workspace } from '~/shared/api/backendApiTypes';
 
 export const formatRam = (valueInKb: number): string => {
+export const formatRam = (valueInKb: number | undefined | null): string => {
+  if (valueInKb === undefined || valueInKb === null) {
+    return 'N/A';
+  }
   const units = ['KB', 'MB', 'GB', 'TB'];
   let index = 0;
   let value = valueInKb;