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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  Spinner,
   Drawer,
   DrawerContent,
   DrawerContentBody,
@@ -63,7 +64,7 @@ export enum ActionType {
 
 export const Workspaces: React.FunctionComponent = () => {
   const { selectedNamespace } = useNamespaceContext();
-  const [initialWorkspaces, loading, error] = useWorkspaces(selectedNamespace);
+  const [initialWorkspaces, loaded, error] = useWorkspaces(selectedNamespace);
   if (error) {
     console.log(error.message); // TODO: Verify how to handle errors display.
   }
@@ -103,12 +104,15 @@ export const Workspaces: React.FunctionComponent = () => {
   };
 
   // change when fetch workspaces is implemented
-  const [workspaces, setWorkspaces] = useState(initialWorkspaces);
+  const [workspaces, setWorkspaces] = React.useState<Workspace[]>([]);
   const [expandedWorkspacesNames, setExpandedWorkspacesNames] = React.useState<string[]>([]);
   const [selectedWorkspace, setSelectedWorkspace] = React.useState<Workspace | null>(null);
   const [workspaceToDelete, setWorkspaceToDelete] = React.useState<Workspace | null>(null);
   const [isActionAlertModalOpen, setIsActionAlertModalOpen] = React.useState(false);
   const [activeActionType, setActiveActionType] = React.useState<ActionType | null>(null);
+  React.useEffect(() => {
+    setWorkspaces(initialWorkspaces);
+  }, [initialWorkspaces]);
 
   const selectWorkspace = React.useCallback(
     (newSelectedWorkspace) => {
@@ -152,15 +156,15 @@ export const Workspaces: React.FunctionComponent = () => {
           case columnNames.name:
             return workspace.name.search(searchValueInput) >= 0;
           case columnNames.kind:
-            return workspace.kind.search(searchValueInput) >= 0;
+            return workspace.workspace_kind.name.search(searchValueInput) >= 0;
           case columnNames.image:
-            return workspace.options.imageConfig.search(searchValueInput) >= 0;
+            return workspace.pod_template.image_config.current.search(searchValueInput) >= 0;
           case columnNames.podConfig:
-            return workspace.options.podConfig.search(searchValueInput) >= 0;
+            return workspace.pod_template.pod_config.current.search(searchValueInput) >= 0;
           case columnNames.state:
-            return WorkspaceState[workspace.status.state].search(searchValueInput) >= 0;
+            return WorkspaceState[workspace.state].search(searchValueInput) >= 0;
           case columnNames.homeVol:
-            return workspace.podTemplate.volumes.home.search(searchValueInput) >= 0;
+            return workspace.pod_template.volumes.home.pvc_name.search(searchValueInput) >= 0;
           default:
             return true;
         }
@@ -174,20 +178,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 } =
-      {
+  const getSortableRowValues = (workspace: Workspace): (string | number | undefined)[] => {
+    const { name, kind, image, podConfig, state, homeVol, cpu, ram, lastActivity } = {
         redirectStatus: '',
-        name: workspace.name,
-        kind: workspace.kind,
-        image: workspace.options.imageConfig,
-        podConfig: workspace.options.podConfig,
-        state: WorkspaceState[workspace.status.state],
-        homeVol: workspace.podTemplate.volumes.home,
-        cpu: workspace.cpu,
-        ram: workspace.ram,
-        lastActivity: workspace.status.activity.lastActivity,
-      };
+      name: workspace.name,
+      kind: workspace.workspace_kind.name,
+      image: workspace.pod_template.image_config.current,
+      podConfig: workspace.pod_template.pod_config.current,
+      state: workspace.state,
+      homeVol: workspace.pod_template.volumes.home.pvc_name,
+      cpu: workspace.cpu,
+      ram: workspace.ram,
+      lastActivity: workspace.activity.last_activity,
+    };
     return [redirectStatus, name, kind, image, podConfig, state, homeVol, cpu, ram, lastActivity];
   };
 

workspaces/frontend/src/shared/types.ts

@@ -1,9 +1,9 @@
 export interface WorkspaceIcon {
-  url: string;
+    url: string;
 }
 
 export interface WorkspaceLogo {
-  url: string;
+    url: string;
 }
 
 export interface WorkspaceKind {
@@ -67,32 +67,32 @@ export interface WorkspaceKind {
 }
 
 export enum WorkspaceState {
-  Running,
-  Terminating,
-  Paused,
-  Pending,
-  Error,
-  Unknown,
+    Running,
+    Terminating,
+    Paused,
+    Pending,
+    Error,
+    Unknown,
 }
 
 export interface WorkspaceStatus {
-  activity: {
-    lastActivity: number;
-    lastUpdate: number;
-  };
-  pauseTime: number;
-  pendingRestart: boolean;
-  podTemplateOptions: {
-    imageConfig: {
-      desired: string;
-      redirectChain: {
-        source: string;
-        target: string;
-      }[];
+    activity: {
+        lastActivity: number;
+        lastUpdate: number;
     };
-  };
-  state: WorkspaceState;
-  stateMessage: string;
+    pauseTime: number;
+    pendingRestart: boolean;
+    podTemplateOptions: {
+        imageConfig: {
+            desired: string;
+            redirectChain: {
+                source: string;
+                target: string;
+            }[];
+        };
+    };
+    state: WorkspaceState;
+    stateMessage: string;
 }
 
 export interface Workspace {
@@ -143,4 +143,4 @@ export type WorkspacesColumnNames = {
   ram: string;
   lastActivity: string;
   redirectStatus: string;
-};
+};

workspaces/frontend/src/shared/utilities/WorkspaceUtils.ts

@@ -1,4 +1,7 @@
-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;