feat: Enhance the dashboard to support deploying NIM with a PVC (opendatahub-io#4447)

* v1

* fix: lint

* hide on edit

* refactor: DEFAULT_MODEL_PATH

* model pvc dropdown

* deletion logic

* fix: lint

* fix for current tests

* fix:lint

* lint

* defaultMockInferenceServiceData

* added testid's

* tests + info

* coderabbitai

* deleted comment

* no model is selected + relativeTime

Author: mtalvi

frontend/src/__mocks__/mockNimResource.ts

@@ -174,3 +174,179 @@ export const mockNimModelPVC = (): PersistentVolumeClaimKind => {
 export const mockNimServingResource = (
   resource: ConfigMapKind | SecretKind,
 ): NimServingResponse => ({ body: { body: resource } });
+
+// Mock PVC that contains a specific model
+type MockNimPVCOptions = {
+  name?: string;
+  namespace?: string;
+  modelName?: string;
+  servingRuntimeName?: string;
+  size?: string;
+  storageClassName?: string;
+  createdDaysAgo?: number;
+};
+
+export const mockNimModelPVCWithModel = ({
+  name = 'nim-pvc-arctic-embed-l',
+  namespace = 'test-project',
+  modelName = 'arctic-embed-l',
+  servingRuntimeName = 'test-serving-runtime',
+  size = '50Gi',
+  storageClassName = 'fast-ssd',
+  createdDaysAgo = 2,
+}: MockNimPVCOptions = {}): PersistentVolumeClaimKind => {
+  const createdDate = new Date();
+  createdDate.setDate(createdDate.getDate() - createdDaysAgo);
+
+  const pvc = mockPVCK8sResource({
+    name,
+    namespace,
+    storageClassName,
+  });
+
+  // Add annotations that indicate this PVC contains a specific model
+  if (!pvc.metadata.annotations) {
+    pvc.metadata.annotations = {};
+  }
+  pvc.metadata.annotations['nim.nvidia.com/model-name'] = modelName;
+  pvc.metadata.annotations['nim.nvidia.com/serving-runtime'] = servingRuntimeName;
+  pvc.metadata.annotations['openshift.io/description'] = `NIM PVC containing ${modelName} model`;
+
+  // Set creation timestamp and storage size manually
+  pvc.metadata.creationTimestamp = createdDate.toISOString();
+
+  // Set the size in spec and status
+  pvc.spec.resources.requests = { storage: size };
+  if (pvc.status) {
+    pvc.status.capacity = { storage: size };
+  }
+
+  return pvc;
+};
+
+// Mock ServingRuntime that uses a specific PVC
+type MockNimServingRuntimeWithPVCOptions = {
+  name?: string;
+  namespace?: string;
+  displayName?: string;
+  pvcName?: string;
+  modelName?: string;
+  createdDaysAgo?: number;
+};
+
+export const mockNimServingRuntimeWithPVC = ({
+  name = 'test-serving-runtime',
+  namespace = 'test-project',
+  displayName = 'Test Serving Runtime',
+  pvcName = 'nim-pvc-arctic-embed-l',
+  modelName = 'arctic-embed-l',
+  createdDaysAgo = 2,
+}: MockNimServingRuntimeWithPVCOptions = {}): ServingRuntimeKind => {
+  const createdDate = new Date();
+  createdDate.setDate(createdDate.getDate() - createdDaysAgo);
+
+  const servingRuntime = mockServingRuntimeK8sResource({
+    name,
+    displayName,
+    namespace,
+  });
+
+  // Add NIM-specific annotations
+  if (!servingRuntime.metadata.annotations) {
+    servingRuntime.metadata.annotations = {};
+  }
+  servingRuntime.metadata.annotations['opendatahub.io/template-display-name'] = 'NVIDIA NIM';
+  servingRuntime.metadata.annotations['opendatahub.io/template-name'] = 'nvidia-nim-runtime';
+
+  // Set creation timestamp
+  servingRuntime.metadata.creationTimestamp = createdDate.toISOString();
+
+  // Add PVC volume configuration - this is key for PVC discovery
+  servingRuntime.spec.volumes = [
+    {
+      name: 'model-storage',
+      persistentVolumeClaim: {
+        claimName: pvcName,
+      },
+    },
+  ];
+
+  // Add volume mount to container
+  if (!servingRuntime.spec.containers[0].volumeMounts) {
+    servingRuntime.spec.containers[0].volumeMounts = [];
+  }
+  servingRuntime.spec.containers[0].volumeMounts.push({
+    name: 'model-storage',
+    mountPath: '/mnt/models/cache',
+  });
+
+  // Set supported model format to match the model - use the passed modelName
+  servingRuntime.spec.supportedModelFormats = [
+    {
+      name: modelName, // Use the modelName parameter directly
+      version: '1',
+      autoSelect: true,
+    },
+  ];
+
+  // Set NIM container image to include the model name
+  servingRuntime.spec.containers[0].image = `nvcr.io/nim/snowflake/${modelName}:1.0.1`;
+
+  return servingRuntime;
+};
+
+// Mock multiple PVCs for testing selection scenarios
+export const mockMultipleNimPVCs = (): PersistentVolumeClaimKind[] => [
+  // Recent PVC with arctic-embed-l
+  mockNimModelPVCWithModel({
+    name: 'nim-pvc-arctic-recent',
+    modelName: 'arctic-embed-l',
+    servingRuntimeName: 'arctic-runtime-1',
+    createdDaysAgo: 1,
+    size: '30Gi',
+  }),
+  // Older PVC with arctic-embed-l
+  mockNimModelPVCWithModel({
+    name: 'nim-pvc-arctic-old',
+    modelName: 'arctic-embed-l',
+    servingRuntimeName: 'arctic-runtime-2',
+    createdDaysAgo: 5,
+    size: '40Gi',
+  }),
+  // PVC with different model (should not show up when arctic is selected)
+  mockNimModelPVCWithModel({
+    name: 'nim-pvc-alphafold',
+    modelName: 'alphafold2',
+    servingRuntimeName: 'alphafold-runtime',
+    createdDaysAgo: 3,
+    size: '60Gi',
+  }),
+];
+
+// Mock multiple ServingRuntimes that use different PVCs
+export const mockMultipleNimServingRuntimes = (): ServingRuntimeKind[] => [
+  // ServingRuntime using first PVC
+  mockNimServingRuntimeWithPVC({
+    name: 'arctic-runtime-1',
+    displayName: 'Arctic Runtime 1',
+    pvcName: 'nim-pvc-arctic-recent',
+    modelName: 'arctic-embed-l',
+    createdDaysAgo: 1,
+  }),
+  // ServingRuntime using second PVC
+  mockNimServingRuntimeWithPVC({
+    name: 'arctic-runtime-2',
+    displayName: 'Arctic Runtime 2',
+    pvcName: 'nim-pvc-arctic-old',
+    modelName: 'arctic-embed-l',
+    createdDaysAgo: 5,
+  }),
+  // ServingRuntime using different model PVC
+  mockNimServingRuntimeWithPVC({
+    name: 'alphafold-runtime',
+    displayName: 'AlphaFold Runtime',
+    pvcName: 'nim-pvc-alphafold',
+    modelName: 'alphafold2',
+    createdDaysAgo: 3,
+  }),
+];

frontend/src/__tests__/cypress/cypress/pages/components/NIMDeployModal.ts

@@ -80,6 +80,210 @@ class NIMDeployModal extends Modal {
   findServiceAccountNameInput() {
     return this.find().findByTestId('service-account-form-name');
   }
+
+  // PVC Storage Option Selection
+  findCreateNewPVCRadio() {
+    return this.find().findByTestId('create-new-pvc');
+  }
+
+  findUseExistingPVCRadio() {
+    return this.find().findByTestId('use-existing-pvc');
+  }
+
+  // PVC Size Section (for new PVC creation)
+  findPVCSizeSection() {
+    return this.find().findByTestId('pvc-size');
+  }
+
+  // PVC Selection Section (for existing PVC)
+  findPVCSelectionSection() {
+    return this.find().findByTestId('pvc-selection-section');
+  }
+
+  findManualPVCInput() {
+    return this.find().findByTestId('manual-pvc-input');
+  }
+
+  findUseManualPVCButton() {
+    return this.find().findByTestId('use-manual-pvc-button');
+  }
+
+  // Model Path Section
+  findModelPathSection() {
+    return this.find().findByTestId('model-path-section');
+  }
+
+  findModelPathInput() {
+    return this.find().findByTestId('model-path-input');
+  }
+
+  // Alert Messages
+  findNoCompatiblePVCsAlert() {
+    return this.find().findByTestId('no-compatible-pvcs-alert');
+  }
+
+  findCompatiblePVCsFoundMessage() {
+    return this.find().findByTestId('compatible-pvcs-found-message');
+  }
+
+  findPVCLoadingSpinner() {
+    return this.find().findByTestId('pvc-loading-spinner');
+  }
+
+  findPVCLoadingErrorAlert() {
+    return this.find().findByTestId('pvc-loading-error-alert');
+  }
+
+  // Helper methods for testing PVC workflows
+  selectCreateNewPVC() {
+    this.findCreateNewPVCRadio().click();
+    return this;
+  }
+
+  selectUseExistingPVC() {
+    this.findUseExistingPVCRadio().click();
+    return this;
+  }
+
+  setModelPath(path: string) {
+    this.findModelPathInput().clear().type(path);
+    return this;
+  }
+
+  // Assertion helpers
+  shouldShowCreateNewPVCOption() {
+    this.findCreateNewPVCRadio().should('be.visible');
+    return this;
+  }
+
+  shouldShowUseExistingPVCOption() {
+    this.findUseExistingPVCRadio().should('be.visible');
+    return this;
+  }
+
+  // FIXED: Removed unused 'modelName' parameter and hardcoded the expected text
+  shouldShowNoCompatiblePVCsAlert() {
+    this.findNoCompatiblePVCsAlert().should(
+      'contain.text',
+      'No existing storage volumes found that contain arctic-embed-l',
+    );
+    return this;
+  }
+
+  shouldHaveModelPath(path: string) {
+    this.findModelPathInput().should('have.value', path);
+    return this;
+  }
+
+  shouldDisableModelPathInput() {
+    this.findModelPathInput().should('be.disabled');
+    return this;
+  }
+
+  shouldDisableManualPVCInput() {
+    this.findManualPVCInput().should('be.disabled');
+    return this;
+  }
+
+  // SimpleSelect dropdown methods
+  findExistingPVCSelect() {
+    return this.find().contains('Select from');
+  }
+
+  findExistingPVCSelectByText() {
+    return this.find().contains('Select from');
+  }
+
+  // FIXED: Removed unnecessary waits and console statements - streamlined approach
+  clickExistingPVCSelect() {
+    this.find()
+      .contains('Select from')
+      .then(($selectText) => {
+        // Try clicking the text directly first
+        cy.wrap($selectText).click({ force: true });
+
+        // Check if dropdown opened, if not try parent element
+        cy.get(
+          '[role="listbox"], [role="menu"], .pf-v6-c-menu__content, .pf-v6-c-select__menu',
+        ).then(($dropdown) => {
+          if ($dropdown.length === 0) {
+            // Try clicking the parent element if direct click didn't work
+            cy.wrap($selectText)
+              .closest('.pf-v6-c-menu-toggle, button, [role="button"]')
+              .click({ force: true });
+          }
+        });
+      });
+    return this;
+  }
+
+  // FIXED: Removed console statements and unnecessary waits - simplified to essential logic
+  selectExistingPVCRobust(pvcName: string) {
+    this.find()
+      .contains('Select from')
+      .then(($element) => {
+        // Primary approach: click the element
+        cy.wrap($element).click({ force: true });
+
+        cy.get('body').then(() => {
+          cy.get(
+            '[role="listbox"], [role="menu"], .pf-v6-c-menu__content, .pf-v6-c-select__menu',
+          ).then(($dropdown) => {
+            if ($dropdown.length > 0) {
+              // Dropdown opened successfully
+              cy.wrap($dropdown).should('be.visible').contains(pvcName).click();
+            } else {
+              // Fallback approaches
+              cy.wrap($element).parent().click({ force: true });
+
+              cy.get('.pf-v6-c-menu-toggle, [data-testid*="select"], button')
+                .contains('Select from')
+                .click({ force: true });
+
+              // Final attempt with broader selectors
+              cy.get(
+                '[role="listbox"], [role="menu"], .pf-v6-c-menu__content, .pf-v6-c-select__menu, [data-popper-placement]',
+                { timeout: 5000 },
+              )
+                .should('be.visible')
+                .contains(pvcName)
+                .click();
+            }
+          });
+        });
+      });
+
+    return this;
+  }
+
+  // Main PVC selection method - uses the robust approach
+  selectExistingPVC(pvcName: string) {
+    return this.selectExistingPVCRobust(pvcName);
+  }
+
+  shouldShowPVCLoadingSpinner() {
+    this.find().findByTestId('pvc-loading-spinner').should('be.visible');
+    return this;
+  }
+
+  shouldShowCompatiblePVCs(count: number) {
+    this.find()
+      .findByTestId('compatible-pvcs-found-message')
+      .should('contain.text', `Found ${count} storage volume(s)`);
+    this.findExistingPVCSelectByText().should('be.visible');
+    this.find().findByTestId('use-manual-pvc-button').should('be.visible');
+    return this;
+  }
+
+  enterManualPVCName(pvcName: string) {
+    this.find().findByTestId('use-manual-pvc-button').click();
+    this.findManualPVCInput().clear().type(pvcName);
+    return this;
+  }
+
+  findBackToCompatibleListButton() {
+    return this.find().findByTestId('back-to-compatible-list-button');
+  }
 }
 
 export const nimDeployModal = new NIMDeployModal();