Add Istio overlay for UI integration with Central Dashboard

Signed-off-by: Griffin-Sullivan <[email protected]>
kubeflow · Jan 7, 2025 · 3ae2905 · 3ae2905
1 parent 7249588
commit 3ae2905
Show file tree

Hide file tree

Showing 47 changed files with 306 additions and 94 deletions.
diff --git a/clients/ui/frontend/config/dotenv.js b/clients/ui/frontend/config/dotenv.js
@@ -157,6 +157,7 @@ const setupDotenvFilesForEnv = ({ env }) => {
   const PROXY_PORT = process.env.PROXY_PORT || process.env.PORT || 4000;
   const DEV_MODE = process.env.DEV_MODE || undefined;
   const OUTPUT_ONLY = process.env._OUTPUT_ONLY === 'true';
+  const DEPLOYMENT_MODE = process.env.DEPLOYMENT_MODE || 'integrated';
 
   process.env._RELATIVE_DIRNAME = RELATIVE_DIRNAME;
   process.env._IS_PROJECT_ROOT_DIR = IS_ROOT;
@@ -172,6 +173,7 @@ const setupDotenvFilesForEnv = ({ env }) => {
   process.env._PROXY_PORT = PROXY_PORT;
   process.env._OUTPUT_ONLY = OUTPUT_ONLY;
   process.env._DEV_MODE = DEV_MODE;
+  process.env._DEPLOYMENT_MODE = DEPLOYMENT_MODE;
 };
 
 module.exports = { setupWebpackDotenvFilesForEnv, setupDotenvFilesForEnv };
diff --git a/clients/ui/frontend/config/webpack.common.js b/clients/ui/frontend/config/webpack.common.js
@@ -14,6 +14,8 @@ const OUTPUT_ONLY = process.env._OUTPUT_ONLY;
 const FAVICON = process.env.FAVICON;
 const PRODUCT_NAME = process.env.PRODUCT_NAME;
 const COVERAGE = process.env.COVERAGE;
+const DEPLOYMENT_MODE = process.env._DEPLOYMENT_MODE;
+const BASE_PATH = DEPLOYMENT_MODE === 'integrated' ? '/model-registry/' : PUBLIC_PATH;
 
 if (OUTPUT_ONLY !== 'true') {
   console.info(
@@ -173,7 +175,7 @@ module.exports = (env) => {
     output: {
       filename: '[name].bundle.js',
       path: DIST_DIR,
-      publicPath: PUBLIC_PATH,
+      publicPath: BASE_PATH,
     },
     plugins: [
       ...setupWebpackDotenvFilesForEnv({
@@ -184,6 +186,7 @@ module.exports = (env) => {
         template: path.join(SRC_DIR, 'index.html'),
         title: PRODUCT_NAME,
         favicon: path.join(SRC_DIR, 'images', FAVICON),
+        baseUrl: BASE_PATH
       }),
       new CopyPlugin({
         patterns: [

diff --git a/clients/ui/frontend/src/__mocks__/mockNamespace.ts b/clients/ui/frontend/src/__mocks__/mockNamespace.ts
@@ -0,0 +1,9 @@
+import { Namespace } from '~/shared/types';
+
+type MockNamespace = {
+  name?: string;
+};
+
+export const mockNamespace = ({ name = 'kubeflow' }: MockNamespace): Namespace => ({
+  name,
+});
diff --git a/clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistry.ts b/clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistry.ts
@@ -59,7 +59,7 @@ class ModelRegistry {
   }
 
   visit() {
-    cy.visit(`/modelRegistry`);
+    cy.visit(`/model-registry`);
     this.wait();
   }
 

diff --git a/clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistrySettings.ts b/clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistrySettings.ts
@@ -28,7 +28,7 @@ export enum DatabaseDetailsTestId {
 
 class ModelRegistrySettings {
   visit(wait = true) {
-    cy.visit('/modelRegistrySettings');
+    cy.visit('/model-registry-settings');
     if (wait) {
       this.wait();
     }

diff --git a/.../ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistryView/modelVersionArchive.ts b/.../ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistryView/modelVersionArchive.ts
@@ -57,7 +57,7 @@ class ModelVersionArchive {
   visit() {
     const rmId = '1';
     const preferredModelRegistry = 'modelregistry-sample';
-    cy.visit(`/modelRegistry/${preferredModelRegistry}/registeredModels/${rmId}/versions/archive`);
+    cy.visit(`/model-registry/${preferredModelRegistry}/registeredModels/${rmId}/versions/archive`);
     this.wait();
   }
 
@@ -66,22 +66,22 @@ class ModelVersionArchive {
     const rmId = '1';
     const preferredModelRegistry = 'modelregistry-sample';
     cy.visit(
-      `/modelRegistry/${preferredModelRegistry}/registeredModels/${rmId}/versions/archive/${mvId}`,
+      `/model-registry/${preferredModelRegistry}/registeredModels/${rmId}/versions/archive/${mvId}`,
     );
   }
 
   visitModelVersionList() {
     const rmId = '1';
     const preferredModelRegistry = 'modelregistry-sample';
-    cy.visit(`/modelRegistry/${preferredModelRegistry}/registeredModels/${rmId}/versions`);
+    cy.visit(`/model-registry/${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}`);
+    cy.visit(`/model-registry/${preferredModelRegistry}/registeredModels/${rmId}/versions/${mvId}`);
     this.wait();
   }
 

diff --git a/.../ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistryView/modelVersionDetails.ts b/.../ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistryView/modelVersionDetails.ts
@@ -3,7 +3,7 @@ class ModelVersionDetails {
     const preferredModelRegistry = 'modelregistry-sample';
     const rmId = '1';
     const mvId = '1';
-    cy.visit(`/modelRegistry/${preferredModelRegistry}/registeredModels/${rmId}/versions/${mvId}`);
+    cy.visit(`/model-registry/${preferredModelRegistry}/registeredModels/${rmId}/versions/${mvId}`);
     this.wait();
   }
 

diff --git a/...ts/ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistryView/registerModelPage.ts b/...ts/ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistryView/registerModelPage.ts
@@ -17,7 +17,7 @@ export enum FormFieldSelector {
 class RegisterModelPage {
   visit() {
     const preferredModelRegistry = 'modelregistry-sample';
-    cy.visit(`/modelRegistry/${preferredModelRegistry}/registerModel`);
+    cy.visit(`/model-registry/${preferredModelRegistry}/registerModel`);
     this.wait();
   }
 

diff --git a/.../frontend/src/__tests__/cypress/cypress/pages/modelRegistryView/registeredModelArchive.ts b/.../frontend/src/__tests__/cypress/cypress/pages/modelRegistryView/registeredModelArchive.ts
@@ -56,31 +56,31 @@ class ModelArchive {
 
   visit() {
     const preferredModelRegistry = 'modelregistry-sample';
-    cy.visit(`/modelRegistry/${preferredModelRegistry}/registeredModels/archive`);
+    cy.visit(`/model-registry/${preferredModelRegistry}/registeredModels/archive`);
     this.wait();
   }
 
   visitArchiveModelDetail() {
     const rmId = '2';
     const preferredModelRegistry = 'modelregistry-sample';
-    cy.visit(`/modelRegistry/${preferredModelRegistry}/registeredModels/archive/${rmId}`);
+    cy.visit(`/model-registry/${preferredModelRegistry}/registeredModels/archive/${rmId}`);
   }
 
   visitArchiveModelVersionList() {
     const rmId = '2';
     const preferredModelRegistry = 'modelregistry-sample';
-    cy.visit(`/modelRegistry/${preferredModelRegistry}/registeredModels/archive/${rmId}/versions`);
+    cy.visit(`/model-registry/${preferredModelRegistry}/registeredModels/archive/${rmId}/versions`);
   }
 
   visitModelList() {
-    cy.visit('/modelRegistry/modelregistry-sample');
+    cy.visit('/model-registry/modelregistry-sample');
     this.wait();
   }
 
   visitModelDetails() {
     const rmId = '2';
     const preferredModelRegistry = 'modelregistry-sample';
-    cy.visit(`/modelRegistry/${preferredModelRegistry}/registeredModels/${rmId}`);
+    cy.visit(`/model-registry/${preferredModelRegistry}/registeredModels/${rmId}`);
     this.wait();
   }
 

diff --git a/clients/ui/frontend/src/__tests__/cypress/cypress/support/commands/api.ts b/clients/ui/frontend/src/__tests__/cypress/cypress/support/commands/api.ts
@@ -9,7 +9,7 @@ import type {
   RegisteredModel,
   RegisteredModelList,
 } from '~/app/types';
-import type { UserSettings } from '~/shared/types';
+import type { Namespace, UserSettings } from '~/shared/types';
 
 const MODEL_REGISTRY_API_VERSION = 'v1';
 export { MODEL_REGISTRY_API_VERSION };
@@ -108,6 +108,11 @@ declare global {
           type: 'GET /api/:apiVersion/user',
           options: { path: { apiVersion: string } },
           response: ApiResponse<UserSettings>,
+        ) => Cypress.Chainable<null>) &
+        ((
+          type: 'GET /api/:apiVersion/namespaces',
+          options: { path: { apiVersion: string } },
+          response: ApiResponse<Namespace[]>,
         ) => Cypress.Chainable<null>);
     }
   }

diff --git a/clients/ui/frontend/src/__tests__/cypress/cypress/support/e2e.ts b/clients/ui/frontend/src/__tests__/cypress/cypress/support/e2e.ts
@@ -18,6 +18,7 @@ import '@cypress/code-coverage/support';
 import { mockUserSettings } from '~/__mocks__/mockUserSettings';
 import 'cypress-mochawesome-reporter/register';
 import './commands';
+import { mockNamespace } from '~/__mocks__/mockNamespace';
 import { MODEL_REGISTRY_API_VERSION } from './commands/api';
 
 chai.use(chaiSubset);
@@ -40,5 +41,15 @@ beforeEach(() => {
       },
       mockUserSettings({}),
     );
+
+    cy.interceptApi(
+      'GET /api/:apiVersion/namespaces',
+      {
+        path: {
+          apiVersion: MODEL_REGISTRY_API_VERSION,
+        },
+      },
+      [mockNamespace({})],
+    );
   }
 });
diff --git a/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelVersionArchive.cy.ts b/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelVersionArchive.cy.ts
@@ -129,7 +129,7 @@ describe('Model version archive list', () => {
   it('No archive versions in the selected registered model', () => {
     initIntercepts({ modelVersions: [mockModelVersion({ id: '3', name: 'model version 2' })] });
     modelVersionArchive.visitModelVersionList();
-    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/1/versions');
+    verifyRelativeURL('/model-registry/modelregistry-sample/registeredModels/1/versions');
     modelVersionArchive
       .findModelVersionsTableKebab()
       .findDropdownItem('View archived versions')
@@ -140,23 +140,23 @@ describe('Model version archive list', () => {
   it('Archived version details browser back button should lead to archived versions table', () => {
     initIntercepts({});
     modelVersionArchive.visit();
-    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/1/versions/archive');
+    verifyRelativeURL('/model-registry/modelregistry-sample/registeredModels/1/versions/archive');
     modelVersionArchive.findArchiveVersionBreadcrumbItem().contains('Archived version');
     const archiveVersionRow = modelVersionArchive.getRow('model version 2');
     archiveVersionRow.findName().contains('model version 2').click();
     verifyRelativeURL(
-      '/modelRegistry/modelregistry-sample/registeredModels/1/versions/archive/2/details',
+      '/model-registry/modelregistry-sample/registeredModels/1/versions/archive/2/details',
     );
     cy.go('back');
-    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/1/versions/archive');
+    verifyRelativeURL('/model-registry/modelregistry-sample/registeredModels/1/versions/archive');
     modelVersionArchive.findArchiveVersionBreadcrumbItem().contains('Archived version');
     archiveVersionRow.findName().contains('model version 2').should('exist');
   });
 
   it('Archive version list', () => {
     initIntercepts({});
     modelVersionArchive.visit();
-    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/1/versions/archive');
+    verifyRelativeURL('/model-registry/modelregistry-sample/registeredModels/1/versions/archive');
 
     //breadcrumb
     modelVersionArchive.findArchiveVersionBreadcrumbItem().contains('Archived version');

diff --git a/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelVersionDetails.cy.ts b/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelVersionDetails.cy.ts
@@ -139,7 +139,7 @@ describe('Model version details', () => {
 
     it('Model version details page header', () => {
       verifyRelativeURL(
-        '/modelRegistry/modelregistry-sample/registeredModels/1/versions/1/details',
+        '/model-registry/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');

diff --git a/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelVersions.cy.ts b/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelVersions.cy.ts
@@ -110,7 +110,7 @@ describe('Model Versions', () => {
     modelRegistry.visit();
     const registeredModelRow = modelRegistry.getRow('Fraud detection model');
     registeredModelRow.findName().contains('Fraud detection model').click();
-    verifyRelativeURL(`/modelRegistry/modelregistry-sample/registeredModels/1/versions`);
+    verifyRelativeURL(`/model-registry/modelregistry-sample/registeredModels/1/versions`);
     modelRegistry.shouldmodelVersionsEmpty();
   });
 
@@ -122,9 +122,9 @@ describe('Model Versions', () => {
     modelRegistry.visit();
     const registeredModelRow = modelRegistry.getRow('Fraud detection model');
     registeredModelRow.findName().contains('Fraud detection model').click();
-    verifyRelativeURL(`/modelRegistry/modelregistry-sample/registeredModels/1/versions`);
+    verifyRelativeURL(`/model-registry/modelregistry-sample/registeredModels/1/versions`);
     cy.go('back');
-    verifyRelativeURL(`/modelRegistry/modelregistry-sample`);
+    verifyRelativeURL(`/model-registry/modelregistry-sample`);
     registeredModelRow.findName().contains('Fraud detection model').should('exist');
   });
 
@@ -143,7 +143,7 @@ describe('Model Versions', () => {
     //cy.reload();
     const registeredModelRow = modelRegistry.getRow('Fraud detection model');
     registeredModelRow.findName().contains('Fraud detection model').click();
-    verifyRelativeURL(`/modelRegistry/modelregistry-sample/registeredModels/1/versions`);
+    verifyRelativeURL(`/model-registry/modelregistry-sample/registeredModels/1/versions`);
     modelRegistry.findModelBreadcrumbItem().contains('test');
     //modelRegistry.findModelVersionsTableKebab().findDropdownItem('View archived versions');
     //modelRegistry.findModelVersionsHeaderAction().findDropdownItem('Archive model');
@@ -209,10 +209,10 @@ describe('Model Versions', () => {
     registeredModelRow.findName().contains('Fraud detection model').click();
     const modelVersionRow = modelRegistry.getModelVersionRow('model version');
     modelVersionRow.findModelVersionName().contains('model version').click();
-    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/1/versions/1/details');
+    verifyRelativeURL('/model-registry/modelregistry-sample/registeredModels/1/versions/1/details');
     cy.findByTestId('app-page-title').should('have.text', 'model version');
     cy.findByTestId('breadcrumb-version-name').should('have.text', 'model version');
     cy.go('back');
-    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/1/versions');
+    verifyRelativeURL('/model-registry/modelregistry-sample/registeredModels/1/versions');
   });
 });
diff --git a/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/registeredModelArchive.cy.ts b/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/registeredModelArchive.cy.ts
@@ -133,28 +133,28 @@ describe('Model archive list', () => {
       registeredModels: [],
     });
     registeredModelArchive.visit();
-    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/archive');
+    verifyRelativeURL('/model-registry/modelregistry-sample/registeredModels/archive');
     registeredModelArchive.shouldArchiveVersionsEmpty();
   });
 
   it('Archived model details browser back button should lead to archived models table', () => {
     initIntercepts({});
     registeredModelArchive.visit();
-    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/archive');
+    verifyRelativeURL('/model-registry/modelregistry-sample/registeredModels/archive');
     registeredModelArchive.findArchiveModelBreadcrumbItem().contains('Archived models');
     const archiveModelRow = registeredModelArchive.getRow('model 2');
     archiveModelRow.findName().contains('model 2').click();
-    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/archive/2/versions');
+    verifyRelativeURL('/model-registry/modelregistry-sample/registeredModels/archive/2/versions');
     cy.findByTestId('app-page-title').should('have.text', 'model 2Archived');
     cy.go('back');
-    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/archive');
+    verifyRelativeURL('/model-registry/modelregistry-sample/registeredModels/archive');
     registeredModelArchive.findArchiveModelTable().should('be.visible');
   });
 
   it('Archived model with no versions', () => {
     initIntercepts({ modelVersions: [] });
     registeredModelArchive.visit();
-    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/archive');
+    verifyRelativeURL('/model-registry/modelregistry-sample/registeredModels/archive');
     registeredModelArchive.findArchiveModelBreadcrumbItem().contains('Archived models');
     const archiveModelRow = registeredModelArchive.getRow('model 2');
     archiveModelRow.findName().contains('model 2').click();
@@ -164,23 +164,23 @@ describe('Model archive list', () => {
   it('Archived model flow', () => {
     initIntercepts({});
     registeredModelArchive.visitArchiveModelVersionList();
-    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/archive/2/versions');
+    verifyRelativeURL('/model-registry/modelregistry-sample/registeredModels/archive/2/versions');
 
     modelRegistry.findModelVersionsTable().should('be.visible');
     modelRegistry.findModelVersionsTableRows().should('have.length', 2);
     const version = modelRegistry.getModelVersionRow('model version');
     version.findModelVersionName().contains('model version').click();
     verifyRelativeURL(
-      '/modelRegistry/modelregistry-sample/registeredModels/archive/2/versions/1/details',
+      '/model-registry/modelregistry-sample/registeredModels/archive/2/versions/1/details',
     );
     cy.go('back');
-    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/archive/2/versions');
+    verifyRelativeURL('/model-registry/modelregistry-sample/registeredModels/archive/2/versions');
   });
 
   it('Archive models list', () => {
     initIntercepts({});
     registeredModelArchive.visit();
-    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/archive');
+    verifyRelativeURL('/model-registry/modelregistry-sample/registeredModels/archive');
 
     //breadcrumb
     registeredModelArchive.findArchiveModelBreadcrumbItem().contains('Archived models');
@@ -233,7 +233,7 @@ describe('Model archive list', () => {
     archiveModelRow.findKebabAction('View details').click();
     cy.location('pathname').should(
       'be.equals',
-      '/modelRegistry/modelregistry-sample/registeredModels/archive/2/details',
+      '/model-registry/modelregistry-sample/registeredModels/archive/2/details',
     );
   });
 });