feat: Integrate model registry via dynamic module federation

Author: lucferbux

frontend/config/webpack.common.js

@@ -3,8 +3,10 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+const webpack = require('webpack');
 const { setupWebpackDotenvFilesForEnv } = require('./dotenv');
 const GenerateExtensionsPlugin = require('./generateExtensionsPlugin');
+const { moduleFederationConfig, moduleFederationPlugins } = require('./moduleFederation');
 
 const RELATIVE_DIRNAME = process.env._ODH_RELATIVE_DIRNAME;
 const IS_PROJECT_ROOT_DIR = process.env._ODH_IS_PROJECT_ROOT_DIR;
@@ -232,6 +234,10 @@ module.exports = (env) => ({
     new MonacoWebpackPlugin({
       languages: ['yaml'],
     }),
+    new webpack.EnvironmentPlugin({
+      MF_CONFIG: JSON.stringify(moduleFederationConfig),
+    }),
+    ...moduleFederationPlugins,
   ],
   resolve: {
     extensions: ['.js', '.ts', '.tsx', '.jsx'],

frontend/config/webpack.dev.js

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 const { execSync } = require('child_process');
 const path = require('path');
-const webpack = require('webpack');
 const { merge } = require('webpack-merge');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
@@ -12,7 +11,7 @@ const smp = new SpeedMeasurePlugin({ disable: !process.env.MEASURE });
 
 setupDotenvFilesForEnv({ env: 'development' });
 const webpackCommon = require('./webpack.common.js');
-const { moduleFederationConfig, moduleFederationPlugins } = require('./moduleFederation');
+const { moduleFederationConfig } = require('./moduleFederation');
 
 const RELATIVE_DIRNAME = process.env._ODH_RELATIVE_DIRNAME;
 const IS_PROJECT_ROOT_DIR = process.env._ODH_IS_PROJECT_ROOT_DIR;
@@ -166,10 +165,6 @@ module.exports = smp.wrap(
       plugins: [
         new ForkTsCheckerWebpackPlugin(),
         new ReactRefreshWebpackPlugin({ overlay: false }),
-        new webpack.EnvironmentPlugin({
-          MF_CONFIG: JSON.stringify(moduleFederationConfig),
-        }),
-        ...moduleFederationPlugins,
       ],
     },
   ),

manifests/packages/model-registry/base/kustomization.yaml renamed to frontend/packages/model-registry/manifests/base/kustomization.yaml

@@ -13,7 +13,7 @@ spec:
     metadata:
       labels:
         app: model-registry-ui
-    spec: 
+    spec:
       serviceAccountName: model-registry-ui
       securityContext:
         seccompProfile:
@@ -53,8 +53,10 @@ spec:
         ports:
           - containerPort: 8080
         args:
-          - "--standalone-mode=false"
-          - "--default-platform=true"
+          - "--deployment-mode=federated"
+          - "--auth-method=user_token"
+          - "--auth-token-header=x-forwarded-access-token"
+          - "--auth-token-prefix="
           - "--port=8080"
         securityContext:
           allowPrivilegeEscalation: false

manifests/packages/model-registry/base/model-registry-ui-deployment.yaml renamed to frontend/packages/model-registry/manifests/base/model-registry-ui-deployment.yaml

@@ -31,6 +31,12 @@ spec:
           imagePullPolicy: Always
           ports:
             - containerPort: 8080
+          env:
+            - name: MODULE_FEDERATION_CONFIG
+              valueFrom:
+                configMapKeyRef:
+                  name: federation-config
+                  key: module-federation-config.json
           resources:
             requests:
               cpu: 500m
@@ -135,6 +141,9 @@ spec:
               name: odh-ca-cert
               subPath: odh-ca-bundle.crt
       volumes:
+        - name: federation-config
+          configMap:
+            name: federation-config
         - name: proxy-tls
           secret:
             secretName: dashboard-proxy-tls