opendatahub-io · openshift-merge-bot · May 13, 2024 · May 8, 2024
diff --git a/frontend/src/__mocks__/mockModelArtifact.ts b/frontend/src/__mocks__/mockModelArtifact.ts
@@ -0,0 +1,13 @@
+import { ModelArtifact } from '~/concepts/modelRegistry/types';
+
+export const mockModelArtifact = (): ModelArtifact => ({
+  createTimeSinceEpoch: '1712234877179',
+  id: '1',
+  lastUpdateTimeSinceEpoch: '1712234877179',
+  name: 'fraud detection model version 1',
+  description: 'Description of model version',
+  artifactType: 'model-artifact',
+  customProperties: {},
+  storagePath: 'test path',
+  uri: 'https://huggingface.io/mnist.onnx',
+});
diff --git a/frontend/src/__mocks__/mockModelArtifactList.ts b/frontend/src/__mocks__/mockModelArtifactList.ts
@@ -0,0 +1,10 @@
+/* eslint-disable camelcase */
+import { ModelArtifactList } from '~/concepts/modelRegistry/types';
+import { mockModelArtifact } from './mockModelArtifact';
+
+export const mockModelArtifactList = (): ModelArtifactList => ({
+  items: [mockModelArtifact()],
+  nextPageToken: '',
+  pageSize: 0,
+  size: 1,
+});
diff --git a/frontend/src/__mocks__/mockModelVersion.ts b/frontend/src/__mocks__/mockModelVersion.ts
@@ -23,4 +23,5 @@ export const mockModelVersion = ({
   name,
   state: ModelVersionState.ARCHIVED,
   registeredModelId,
+  description: 'Description of model version',
 });
diff --git a/frontend/src/__tests__/cypress/cypress/e2e/modelRegistry/ModelRegistry.cy.ts b/frontend/src/__tests__/cypress/cypress/e2e/modelRegistry/ModelRegistry.cy.ts
@@ -80,6 +80,7 @@ describe('Model Registry', () => {
 
     modelRegistry.tabEnabled();
   });
+
   it('No registered models in the selected Model Registry', () => {
     initIntercepts({
       disableModelRegistryFeature: false,
@@ -92,7 +93,7 @@ describe('Model Registry', () => {
     modelRegistry.shouldregisteredModelsEmpty();
   });
 
-  it('Model registry table', () => {
+  it('Registered model table', () => {
     initIntercepts({
       disableModelRegistryFeature: false,
     });

diff --git a/frontend/src/__tests__/cypress/cypress/e2e/modelRegistry/ModelVersionDetails.cy.ts b/frontend/src/__tests__/cypress/cypress/e2e/modelRegistry/ModelVersionDetails.cy.ts
@@ -0,0 +1,162 @@
+/* eslint-disable camelcase */
+import {
+  mockDashboardConfig,
+  mockK8sResourceList,
+  mockRouteK8sResourceModelRegistry,
+} from '~/__mocks__';
+import { mockComponents } from '~/__mocks__/mockComponents';
+import { mockModelRegistry } from '~/__mocks__/mockModelRegistry';
+import { ModelRegistryModel, RouteModel } from '~/__tests__/cypress/cypress/utils/models';
+import { MODEL_REGISTRY_API_VERSION } from '~/concepts/modelRegistry/const';
+import { modelVersionDetails } from '~/__tests__/cypress/cypress/pages/modelRegistry/modelVersionDetails';
+import { mockRegisteredModel } from '~/__mocks__/mockRegisteredModel';
+import { mockModelVersion } from '~/__mocks__/mockModelVersion';
+import { mockModelVersionList } from '~/__mocks__/mockModelVersionList';
+import { mockModelArtifactList } from '~/__mocks__/mockModelArtifactList';
+import { verifyRelativeURL } from '~/__tests__/cypress/cypress/utils/url';
+import { ModelRegistryMetadataType } from '~/concepts/modelRegistry/types';
+
+const initIntercepts = () => {
+  cy.interceptOdh(
+    'GET /api/config',
+    mockDashboardConfig({
+      disableModelRegistry: false,
+    }),
+  );
+  cy.interceptOdh('GET /api/components', { query: { installed: 'true' } }, mockComponents());
+
+  cy.interceptK8sList(ModelRegistryModel, mockK8sResourceList([mockModelRegistry({})]));
+
+  cy.interceptK8s(ModelRegistryModel, mockModelRegistry({}));
+
+  cy.interceptK8s(
+    RouteModel,
+    mockRouteK8sResourceModelRegistry({
+      name: 'modelregistry-sample-http',
+      namespace: 'odh-model-registries',
+    }),
+  );
+
+  cy.interceptOdh(
+    `GET /api/service/modelregistry/modelregistry-sample/api/model_registry/${MODEL_REGISTRY_API_VERSION}/registered_models/1`,
+    mockRegisteredModel({}),
+  );
+
+  cy.interceptOdh(
+    `GET /api/service/modelregistry/modelregistry-sample/api/model_registry/${MODEL_REGISTRY_API_VERSION}/registered_models/1/versions`,
+    mockModelVersionList({
+      items: [
+        mockModelVersion({ name: 'Version 1', author: 'Author 1', registeredModelId: '1' }),
+        mockModelVersion({
+          author: 'Author 2',
+          registeredModelId: '1',
+          id: '2',
+          name: 'Version 2',
+        }),
+      ],
+    }),
+  );
+
+  cy.interceptOdh(
+    `GET /api/service/modelregistry/modelregistry-sample/api/model_registry/${MODEL_REGISTRY_API_VERSION}/model_versions/:id`,
+    { path: { id: '1' } },
+    mockModelVersion({
+      id: '1',
+      name: 'Version 1',
+      customProperties: {
+        'Testing label': {
+          metadataType: ModelRegistryMetadataType.STRING,
+          string_value: '',
+        },
+        Financial: {
+          metadataType: ModelRegistryMetadataType.STRING,
+          string_value: 'non-empty',
+        },
+        'Financial data': {
+          metadataType: ModelRegistryMetadataType.STRING,
+          string_value: '',
+        },
+        'Fraud detection': {
+          metadataType: ModelRegistryMetadataType.STRING,
+          string_value: '',
+        },
+        'Long label data to be truncated abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc':
+          {
+            metadataType: ModelRegistryMetadataType.STRING,
+            string_value: '',
+          },
+        'Machine learning': {
+          metadataType: ModelRegistryMetadataType.STRING,
+          string_value: '',
+        },
+        'Next data to be overflow': {
+          metadataType: ModelRegistryMetadataType.STRING,
+          string_value: '',
+        },
+        'Label x': {
+          metadataType: ModelRegistryMetadataType.STRING,
+          string_value: '',
+        },
+        'Label y': {
+          metadataType: ModelRegistryMetadataType.STRING,
+          string_value: '',
+        },
+        'Label z': {
+          metadataType: ModelRegistryMetadataType.STRING,
+          string_value: '',
+        },
+      },
+    }),
+  );
+
+  cy.interceptOdh(
+    `GET /api/service/modelregistry/modelregistry-sample/api/model_registry/${MODEL_REGISTRY_API_VERSION}/model_versions/:id`,
+    { path: { id: '2' } },
+    mockModelVersion({ id: '2', name: 'Version 2' }),
+  );
+
+  cy.interceptOdh(
+    `GET /api/service/modelregistry/modelregistry-sample/api/model_registry/${MODEL_REGISTRY_API_VERSION}/model_versions/1/artifacts`,
+    mockModelArtifactList(),
+  );
+};
+
+describe('Model version details', () => {
+  beforeEach(() => {
+    initIntercepts();
+    modelVersionDetails.visit();
+  });
+
+  it('Model version details page header', () => {
+    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/1/versions/1/details');
+    cy.findByTestId('app-page-title').should('have.text', 'Version 1');
+    cy.findByTestId('breadcrumb-version-name').should('have.text', 'Version 1');
+  });
+
+  it('Model version details tab', () => {
+    modelVersionDetails.findVersionId().contains('1');
+    modelVersionDetails.findDescription().should('have.text', 'Description of model version');
+    modelVersionDetails.findMoreLabelsButton().contains('6 more');
+    modelVersionDetails.findMoreLabelsButton().click();
+    modelVersionDetails.shouldContainsModalLabels([
+      'Testing label',
+      'Financial',
+      'Financial data',
+      'Fraud detection',
+      'Machine learning',
+      'Next data to be overflow',
+      'Label x',
+      'Label y',
+      'Label z',
+    ]);
+    modelVersionDetails.findStorageLocation().contains('https://huggingface.io/mnist.onnx');
+  });
+
+  it('Switching model versions', () => {
+    modelVersionDetails.findVersionId().contains('1');
+    modelVersionDetails.findModelVersionDropdownButton().click();
+    modelVersionDetails.findModelVersionDropdownSearch().fill('Version 2');
+    modelVersionDetails.findModelVersionDropdownItem('Version 2').click();
+    modelVersionDetails.findVersionId().contains('2');
+  });
+});
diff --git a/frontend/src/__tests__/cypress/cypress/e2e/modelRegistry/ModelVersions.cy.ts b/frontend/src/__tests__/cypress/cypress/e2e/modelRegistry/ModelVersions.cy.ts
@@ -10,7 +10,7 @@ import { be } from '~/__tests__/cypress/cypress/utils/should';
 import { ModelRegistryModel } from '~/__tests__/cypress/cypress/utils/models';
 import { verifyRelativeURL } from '~/__tests__/cypress/cypress/utils/url';
 import { mockRegisteredModel } from '~/__mocks__/mockRegisteredModel';
-import { ModelVersion } from '~/concepts/modelRegistry/types';
+import { ModelRegistryMetadataType, ModelVersion } from '~/concepts/modelRegistry/types';
 import { mockModelVersion } from '~/__mocks__/mockModelVersion';
 
 type HandlersProps = {
@@ -28,39 +28,39 @@ const initIntercepts = ({
       id: '1',
       customProperties: {
         Financial: {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: 'non-empty',
         },
         'Financial data': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Fraud detection': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Test label': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Machine learning': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Next data to be overflow': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Test label x': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Test label y': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Test label z': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
       },

diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelRegistry/modelVersionDetails.ts b/frontend/src/__tests__/cypress/cypress/pages/modelRegistry/modelVersionDetails.ts
@@ -0,0 +1,48 @@
+import { modelVersionUrl } from '~/pages/modelRegistry/screens/routeUtils';
+
+class ModelVersionDetails {
+  visit() {
+    cy.visit(modelVersionUrl('1', '1', 'modelregistry-sample'));
+    this.wait();
+  }
+
+  private wait() {
+    cy.findByTestId('app-page-title').should('exist');
+    cy.testA11y();
+  }
+
+  findVersionId() {
+    return cy.findByTestId('model-version-id');
+  }
+
+  findDescription() {
+    return cy.findByTestId('model-version-description');
+  }
+
+  findMoreLabelsButton() {
+    return cy.findByTestId('label-group').find('button');
+  }
+
+  findStorageLocation() {
+    return cy.findByTestId('storage-location');
+  }
+
+  shouldContainsModalLabels(labels: string[]) {
+    cy.findByTestId('label-group').within(() => labels.map((label) => cy.contains(label)));
+    return this;
+  }
+
+  findModelVersionDropdownButton() {
+    return cy.findByTestId('model-version-toggle-button');
+  }
+
+  findModelVersionDropdownSearch() {
+    return cy.findByTestId('search-input');
+  }
+
+  findModelVersionDropdownItem(name: string) {
+    return cy.findByTestId('model-version-selector-list').find('li').contains(name);
+  }
+}
+
+export const modelVersionDetails = new ModelVersionDetails();
diff --git a/frontend/src/__tests__/cypress/cypress/support/commands/odh.ts b/frontend/src/__tests__/cypress/cypress/support/commands/odh.ts
@@ -2,6 +2,8 @@ import { K8sResourceListResult, K8sStatus } from '@openshift/dynamic-plugin-sdk-
 import type { GenericStaticResponse, RouteHandlerController } from 'cypress/types/net-stubbing';
 import { BaseMetricCreationResponse, BaseMetricListResponse } from '~/api';
 import {
+  ModelArtifactList,
+  ModelVersion,
   ModelVersionList,
   RegisteredModel,
   RegisteredModelList,
@@ -321,16 +323,32 @@ declare global {
       ): Cypress.Chainable<null>;
 
       interceptOdh(
-        type: 'DELETE /api/service/pipelines/:projectId/dspa/apis/v2beta1/recurringruns/:pipeline_id',
-        options: { path: { projectId: string; pipeline_id: string } },
-        response: OdhResponse<K8sStatus>,
+        type: `GET /api/service/modelregistry/modelregistry-sample/api/model_registry/v1alpha3/registered_models/1`,
+        response: OdhResponse<RegisteredModel | undefined>,
+      ): Cypress.Chainable<null>;
+
+      interceptOdh(
+        type: `GET /api/service/modelregistry/modelregistry-sample/api/model_registry/v1alpha3/model_versions/:id`,
+        options: { path: { id: string } },
+        response: OdhResponse<ModelVersion | undefined>,
+      ): Cypress.Chainable<null>;
+
+      interceptOdh(
+        type: `GET /api/service/modelregistry/modelregistry-sample/api/model_registry/v1alpha3/model_versions/1/artifacts`,
+        response: OdhResponse<ModelArtifactList | undefined>,
       ): Cypress.Chainable<null>;
 
       interceptOdh(
         type: 'GET /api/service/modelregistry/modelregistry-sample/api/model_registry/v1alpha3/registered_models/1/versions',
         response: OdhResponse<ModelVersionList | undefined>,
       ): Cypress.Chainable<null>;
 
+      interceptOdh(
+        type: 'DELETE /api/service/pipelines/:projectId/dspa/apis/v2beta1/recurringruns/:pipeline_id',
+        options: { path: { projectId: string; pipeline_id: string } },
+        response: OdhResponse<K8sStatus>,
+      ): Cypress.Chainable<null>;
+
       interceptOdh(
         type: 'GET /api/rolebindings/opendatahub/openshift-ai-notebooks-image-pullers',
         response: OdhResponse<K8sResourceListResult<RoleBindingKind>>,

diff --git a/frontend/src/components/EditableLabelsDescriptionListGroup.tsx b/frontend/src/components/EditableLabelsDescriptionListGroup.tsx
@@ -103,11 +103,18 @@ const EditableLabelsDescriptionListGroup: React.FC<EditableTextDescriptionListGr
         isSavingEdits={isSavingEdits}
         contentWhenEditing={
           <LabelGroup
+            data-testid="label-group"
             isEditable={!isSavingEdits}
             numLabels={unsavedLabels.length}
             addLabelControl={
               !isSavingEdits && (
-                <Label color="blue" variant="outline" isOverflowLabel onClick={toggleAddLabelModal}>
+                <Label
+                  textMaxWidth="40ch"
+                  color="blue"
+                  variant="outline"
+                  isOverflowLabel
+                  onClick={toggleAddLabelModal}
+                >
                   Add label
                 </Label>
               )
@@ -151,9 +158,9 @@ const EditableLabelsDescriptionListGroup: React.FC<EditableTextDescriptionListGr
           setIsEditing(false);
         }}
       >
-        <LabelGroup>
+        <LabelGroup data-testid="label-group">
           {labels.map((label) => (
-            <Label key={label} color="blue" data-testid="label">
+            <Label textMaxWidth="40ch" key={label} color="blue" data-testid="label">
               {label}
             </Label>
           ))}