Add the Model Version Details and Model Version Archive pages (#428)

Signed-off-by: Griffin-Sullivan <[email protected]>

clients/ui/bff/internal/mocks/static_data_mock.go

@@ -82,7 +82,20 @@ func GetModelVersionMocks() []openapi.ModelVersion {
 		State:                    stateToPointer(openapi.MODELVERSIONSTATE_LIVE),
 	}
 
-	return []openapi.ModelVersion{model1, model2}
+	model3 := openapi.ModelVersion{
+		CustomProperties:         newCustomProperties(),
+		Name:                     "Version Three",
+		Description:              stringToPointer("This version didn't improve stuff and things"),
+		ExternalId:               stringToPointer("934589791"),
+		Id:                       stringToPointer("3"),
+		CreateTimeSinceEpoch:     stringToPointer("1725282249921"),
+		LastUpdateTimeSinceEpoch: stringToPointer("1725282249921"),
+		RegisteredModelId:        "3",
+		Author:                   stringToPointer("Sherlock Holmes"),
+		State:                    stateToPointer(openapi.MODELVERSIONSTATE_ARCHIVED),
+	}
+
+	return []openapi.ModelVersion{model1, model2, model3}
 }
 
 func GetModelVersionListMock() openapi.ModelVersionList {

clients/ui/frontend/src/__mocks__/mockModelArtifact.ts

@@ -1,34 +1,17 @@
-import { ModelArtifact, ModelArtifactState } from '~/app/types';
+import { ModelArtifact } from '~/app/types';
 
-type MockModelArtifact = {
-  id?: string;
-  name?: string;
-  uri?: string;
-  state?: ModelArtifactState;
-  author?: string;
-};
-
-export const mockModelArtifact = ({
-  id = '1',
-  name = 'test',
-  uri = 'test',
-  state = ModelArtifactState.LIVE,
-  author = 'Author 1',
-}: MockModelArtifact): ModelArtifact => ({
-  id,
-  name,
-  externalID: '1234132asdfasdf',
-  description: '',
-  createTimeSinceEpoch: '1710404288975',
-  lastUpdateTimeSinceEpoch: '1710404288975',
+export const mockModelArtifact = (partial?: Partial<ModelArtifact>): ModelArtifact => ({
+  createTimeSinceEpoch: '1712234877179',
+  id: '1',
+  lastUpdateTimeSinceEpoch: '1712234877179',
+  name: 'fraud detection model version 1',
+  description: 'Description of model version',
+  artifactType: 'model-artifact',
   customProperties: {},
-  uri,
-  state,
-  author,
-  modelFormatName: 'test',
-  storageKey: 'test',
-  storagePath: 'test',
-  modelFormatVersion: 'test',
-  serviceAccountName: 'test',
-  artifactType: 'test',
+  storageKey: 'test storage key',
+  storagePath: 'test path',
+  uri: 's3://test-bucket/demo-models/test-path?endpoint=test-endpoint&defaultRegion=test-region',
+  modelFormatName: 'test model format',
+  modelFormatVersion: 'test version 1',
+  ...partial,
 });

clients/ui/frontend/src/__mocks__/mockModelArtifactList.ts

@@ -0,0 +1,11 @@
+/* eslint-disable camelcase */
+import { ModelArtifactList } from '~/app/types';
+
+export const mockModelArtifactList = ({
+  items = [],
+}: Partial<ModelArtifactList>): ModelArtifactList => ({
+  items,
+  nextPageToken: '',
+  pageSize: 0,
+  size: 1,
+});

clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistry.ts

@@ -103,6 +103,10 @@ class ModelRegistry {
     cy.findByTestId('registered-models-table-toolbar').should('exist');
   }
 
+  shouldArchiveModelVersionsEmpty() {
+    cy.findByTestId('empty-archive-model-versions').should('exist');
+  }
+
   tabEnabled() {
     appChrome.findNavItem('Model Registry').should('exist');
     return this;

clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistryView/modelVersionArchive.ts

@@ -0,0 +1,128 @@
+import { TableRow } from '~/__tests__/cypress/cypress/pages/components/table';
+import { Modal } from '~/__tests__/cypress/cypress/pages/components/Modal';
+
+class ArchiveVersionTableRow extends TableRow {
+  findName() {
+    return this.find().findByTestId('model-version-name');
+  }
+
+  findDescription() {
+    return this.find().findByTestId('model-version-description');
+  }
+
+  findLabelPopoverText() {
+    return this.find().findByTestId('popover-label-text');
+  }
+
+  findLabelModalText() {
+    return this.find().findByTestId('modal-label-text');
+  }
+
+  shouldContainsPopoverLabels(labels: string[]) {
+    cy.findByTestId('popover-label-group').within(() => labels.map((label) => cy.contains(label)));
+    return this;
+  }
+}
+
+class RestoreVersionModal extends Modal {
+  constructor() {
+    super('Restore version?');
+  }
+
+  findRestoreButton() {
+    return cy.findByTestId('modal-submit-button');
+  }
+}
+
+class ArchiveVersionModal extends Modal {
+  constructor() {
+    super('Archive version?');
+  }
+
+  findArchiveButton() {
+    return cy.findByTestId('modal-submit-button');
+  }
+
+  findModalTextInput() {
+    return cy.findByTestId('confirm-archive-input');
+  }
+}
+
+class ModelVersionArchive {
+  private wait() {
+    cy.findByTestId('app-page-title').should('exist');
+    cy.testA11y();
+  }
+
+  visit() {
+    const rmId = '1';
+    const preferredModelRegistry = 'modelregistry-sample';
+    cy.visit(`/modelRegistry/${preferredModelRegistry}/registeredModels/${rmId}/versions/archive`);
+    this.wait();
+  }
+
+  visitArchiveVersionDetail() {
+    const mvId = '2';
+    const rmId = '1';
+    const preferredModelRegistry = 'modelregistry-sample';
+    cy.visit(
+      `/modelRegistry/${preferredModelRegistry}/registeredModels/${rmId}/versions/archive/${mvId}`,
+    );
+  }
+
+  visitModelVersionList() {
+    const rmId = '1';
+    const preferredModelRegistry = 'modelregistry-sample';
+    cy.visit(`/modelRegistry/${preferredModelRegistry}/registeredModels/${rmId}/versions`);
+    this.wait();
+  }
+
+  visitModelVersionDetails() {
+    const mvId = '3';
+    const rmId = '1';
+    const preferredModelRegistry = 'modelregistry-sample';
+    cy.visit(`/modelRegistry/${preferredModelRegistry}/registeredModels/${rmId}/versions/${mvId}`);
+    this.wait();
+  }
+
+  findModelVersionsTableKebab() {
+    return cy.findByTestId('model-versions-table-kebab-action');
+  }
+
+  shouldArchiveVersionsEmpty() {
+    cy.findByTestId('empty-archive-state').should('exist');
+  }
+
+  findArchiveVersionBreadcrumbItem() {
+    return cy.findByTestId('archive-version-page-breadcrumb');
+  }
+
+  findArchiveVersionTable() {
+    return cy.findByTestId('model-versions-archive-table');
+  }
+
+  findArchiveVersionsTableRows() {
+    return this.findArchiveVersionTable().find('tbody tr');
+  }
+
+  findRestoreButton() {
+    return cy.findByTestId('restore-button');
+  }
+
+  getRow(name: string) {
+    return new ArchiveVersionTableRow(() =>
+      this.findArchiveVersionTable()
+        .find(`[data-label="Version name"]`)
+        .contains(name)
+        .parents('tr'),
+    );
+  }
+
+  findModelVersionsDetailsHeaderAction() {
+    return cy.findByTestId('model-version-details-action-button');
+  }
+}
+
+export const modelVersionArchive = new ModelVersionArchive();
+export const restoreVersionModal = new RestoreVersionModal();
+export const archiveVersionModal = new ArchiveVersionModal();

clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistryView/modelVersionDetails.ts

@@ -0,0 +1,73 @@
+class ModelVersionDetails {
+  visit() {
+    const preferredModelRegistry = 'modelregistry-sample';
+    const rmId = '1';
+    const mvId = '1';
+    cy.visit(`/modelRegistry/${preferredModelRegistry}/registeredModels/${rmId}/versions/${mvId}`);
+    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');
+  }
+
+  findStorageURI() {
+    return cy.findByTestId('storage-uri');
+  }
+
+  findStorageEndpoint() {
+    return cy.findByTestId('storage-endpoint');
+  }
+
+  findStorageRegion() {
+    return cy.findByTestId('storage-region');
+  }
+
+  findStorageBucket() {
+    return cy.findByTestId('storage-bucket');
+  }
+
+  findStoragePath() {
+    return cy.findByTestId('storage-path');
+  }
+
+  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);
+  }
+
+  findDetailsTab() {
+    return cy.findByTestId('model-versions-details-tab');
+  }
+
+  findRegisteredDeploymentsTab() {
+    return cy.findByTestId('deployments-tab');
+  }
+}
+
+export const modelVersionDetails = new ModelVersionDetails();