Tweak to support federated platform (kubeflow#1219)

Signed-off-by: lucferbux <[email protected]>

Author: lucferbux

.github/workflows/build-and-push-ui-images-standalone.yml

@@ -74,5 +74,6 @@ jobs:
         labels: ${{ steps.meta.outputs.labels }}
         build-args: |
           DEPLOYMENT_MODE=standalone
+          STYLE_THEME=mui-theme
         cache-from: type=gha
         cache-to: type=gha,mode=max

.github/workflows/build-and-push-ui-images.yml

@@ -1,4 +1,5 @@
-name: Build and Push UI and BFF Images
+name: Build and Push UI Image
+# this workflow builds an image to support local testing
 on:
   push:
     branches:
@@ -7,51 +8,72 @@ on:
       - 'v*'
     paths:
       - 'clients/ui/**'
+      - '!LICENSE*'
+      - '!DOCKERFILE*'
+      - '!**.gitignore'
+      - '!**.md'
+      - '!**.txt'
 env:
   IMG_REGISTRY: ghcr.io
   IMG_ORG: kubeflow
-  IMG_UI_REPO: model-registry/ui
-  PUSH_IMAGE: true
+  IMG_UI_REPO: model-registry/ui # this image is intended for local development, not production
   DOCKER_USER: ${{ github.actor }}
   DOCKER_PWD: ${{ secrets.GITHUB_TOKEN }}
 jobs:
-  build-image:
+  build-and-push:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
     steps:
-      # Assign context variable for various action contexts (tag, main, CI)
-      - name: Assigning tag context
-        if: github.head_ref == '' && startsWith(github.ref, 'refs/tags/v')
-        run: echo "BUILD_CONTEXT=tag" >> $GITHUB_ENV
-      # Assign context variable for various action contexts (main, CI)
-      - name: Assigning main context
-        if: github.head_ref == '' && github.ref == 'refs/heads/main'
-        run: echo "BUILD_CONTEXT=main" >> $GITHUB_ENV
-      # checkout branch
-      - uses: actions/checkout@v4
-      # set image version
-      - name: Set main-branch environment
-        if: env.BUILD_CONTEXT == 'main'
-        run: |
-          commit_sha=${{ github.event.after }}
-          tag=main-${commit_sha:0:7}
-          echo "VERSION=${tag}" >> $GITHUB_ENV
-      - name: Set tag environment
-        if: env.BUILD_CONTEXT == 'tag'
-        run: |
-          echo "VERSION=${{ github.ref_name }}" >> $GITHUB_ENV
-      - name: Build and Push UI Image
-        shell: bash
-        env:
-          IMG_REPO: ${{ env.IMG_UI_REPO }}
-        run: ./scripts/build_deploy.sh
-      - name: Tag Latest UI Image
-        if: env.BUILD_CONTEXT == 'main'
-        shell: bash
-        env:
-          IMG_REPO: ${{ env.IMG_UI_REPO }}
-          IMG: "${{ env.IMG_REGISTRY }}/${{ env.IMG_ORG }}/${{ env.IMG_UI_REPO }}"
-          BUILD_IMAGE: false # image is already built in "Build and Push UI Image" step
-        run: |
-          docker tag ${{ env.IMG }}:$VERSION ${{ env.IMG }}:latest
-          # BUILD_IMAGE=false skip the build, just push the tag made above
-          VERSION=latest ./scripts/build_deploy.sh
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v3
+
+    - name: Log in to the Container registry
+      uses: docker/login-action@v3
+      with:
+        registry: ${{ env.IMG_REGISTRY }}
+        username: ${{ env.DOCKER_USER }}
+        password: ${{ env.DOCKER_PWD }}
+
+    - name: Set main-branch environment
+      if: github.ref == 'refs/heads/main'
+      run: |
+        commit_sha=${{ github.sha }}
+        tag=main-${commit_sha:0:7}
+        echo "VERSION=${tag}" >> $GITHUB_ENV
+      
+    - name: Set tag environment
+      if: startsWith(github.ref, 'refs/tags/v')
+      run: |
+        echo "VERSION=${{ github.ref_name }}" >> $GITHUB_ENV
+
+    - name: Extract metadata (tags, labels) for Docker
+      id: meta
+      uses: docker/metadata-action@v5
+      with:
+        images: "${{ env.IMG_REGISTRY }}/${{ env.IMG_ORG }}/${{ env.IMG_UI_REPO }}"
+        tags: |
+          type=ref,event=branch
+          type=ref,event=pr
+          type=semver,pattern={{version}}
+          type=semver,pattern={{major}}.{{minor}}
+          type=sha
+          type=raw,value=${{ env.VERSION }},enable=${{ env.VERSION != '' }}
+          type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' }}
+
+    - name: Build and push Docker image
+      uses: docker/build-push-action@v6
+      with:
+        context: ./clients/ui
+        push: true
+        tags: ${{ steps.meta.outputs.tags }}
+        labels: ${{ steps.meta.outputs.labels }}
+        build-args: |
+          DEPLOYMENT_MODE=kubeflow
+          STYLE_THEME=mui-theme
+        cache-from: type=gha
+        cache-to: type=gha,mode=max

clients/ui/.env

@@ -3,4 +3,7 @@
 CONTAINER_TOOL=docker
 IMG_UI=ghcr.io/kubeflow/model-registry/ui:latest
 IMG_UI_STANDALONE=ghcr.io/kubeflow/model-registry/ui-standalone:latest
+IMG_UI_FEDERATED=ghcr.io/kubeflow/model-registry/ui-federated:latest
 PLATFORM=linux/amd64
+STYLE_THEME=mui-theme
+DEPLOYMENT_MODE=kubeflow

clients/ui/.env.production

@@ -1,3 +1,2 @@
 APP_ENV=production
-DEPLOYMENT_MODE=integrated
-STYLE_THEME=mui-theme
+

clients/ui/Dockerfile

@@ -12,6 +12,7 @@ FROM ${NODE_BASE_IMAGE} AS ui-builder
 
 ARG UI_SOURCE_CODE
 ARG DEPLOYMENT_MODE
+ARG STYLE_THEME
 
 WORKDIR /usr/src/app
 

clients/ui/Makefile

@@ -32,46 +32,67 @@ dev-install-dependencies:
 
 .PHONY: dev-bff
 dev-bff:
-	cd bff && make run PORT=4000 MOCK_K8S_CLIENT=true MOCK_MR_CLIENT=true DEV_MODE=true STANDALONE_MODE=true
+	cd bff && make run PORT=4000 MOCK_K8S_CLIENT=true MOCK_MR_CLIENT=true DEV_MODE=true STANDALONE_MODE=true FEDERATED_PLATFORM=false
 
 .PHONY: dev-frontend
 dev-frontend:
-	cd frontend && npm run start:dev
+	DEPLOYMENT_MODE=standalone && STYLE_THEME=mui-theme cd frontend && npm run start:dev
 
 .PHONY: dev-start
 dev-start: 
 	make -j 2 dev-bff dev-frontend
 
-########### Dev Integrated ############
+########### Dev Kubeflow ############
 .PHONY: dev-start-kubeflow
 dev-start-kubeflow: 
 	make -j 2 dev-bff-kubeflow dev-frontend-kubeflow
 
 .PHONY: dev-frontend-kubeflow
 dev-frontend-kubeflow:
-	DEPLOYMENT_MODE=integrated && cd frontend && npm run start:dev
+	DEPLOYMENT_MODE=kubeflow && STYLE_THEME=mui-theme && cd frontend && npm run start:dev
 
 .PHONY: dev-bff-kubeflow
 dev-bff-kubeflow:
-	cd bff && make run PORT=4000 MOCK_K8S_CLIENT=false MOCK_MR_CLIENT=false DEV_MODE=true STANDALONE_MODE=false DEV_MODE_PORT=8085
+	cd bff && make run PORT=4000 MOCK_K8S_CLIENT=false MOCK_MR_CLIENT=false DEV_MODE=true STANDALONE_MODE=false FEDERATED_PLATFORM=false DEV_MODE_PORT=8085
+
+########### Dev Federated ############
+.PHONY: dev-start-federated
+dev-start-federated: 
+	make -j 2 dev-bff-federated dev-frontend-federated
+
+.PHONY: dev-frontend-federated
+dev-frontend-federated:
+	DEPLOYMENT_MODE=federated && STYLE_THEME=patternfly && cd frontend && npm run start:dev
+
+.PHONY: dev-bff-federated
+dev-bff-federated:
+	cd bff && make run PORT=4000 MOCK_K8S_CLIENT=false MOCK_MR_CLIENT=false DEV_MODE=true STANDALONE_MODE=false FEDERATED_PLATFORM=true DEV_MODE_PORT=8085
 
 ############ Build ############
 
 .PHONY: docker-build
 docker-build:
-	$(CONTAINER_TOOL) build -t ${IMG_UI} .
+	$(CONTAINER_TOOL) build --build-arg DEPLOYMENT_MODE=kubeflow --build-arg STYLE_THEME=mui-theme -t ${IMG_UI} .
 
 .PHONY: docker-build-standalone
 docker-build-standalone:
-	$(CONTAINER_TOOL) build --build-arg DEPLOYMENT_MODE=standalone -t ${IMG_UI_STANDALONE} .
+	$(CONTAINER_TOOL) build --build-arg DEPLOYMENT_MODE=standalone --build-arg STYLE_THEME=mui-theme -t ${IMG_UI_STANDALONE} .
+
+.PHONY: docker-build-federated
+docker-build-federated:
+	$(CONTAINER_TOOL) build --build-arg DEPLOYMENT_MODE=federated --build-arg STYLE_THEME=patternfly -t ${IMG_UI_FEDERATED} .
 
 .PHONY: docker-buildx
 docker-buildx:
-	docker buildx build --platform ${PLATFORM} -t ${IMG_UI} --push .
+	docker buildx build --build-arg DEPLOYMENT_MODE=kubeflow --build-arg STYLE_THEME=mui-theme --platform ${PLATFORM} -t ${IMG_UI} --push .
 
 .PHONY: docker-buildx-standalone
 docker-buildx-standalone:
-	docker buildx build --build-arg DEPLOYMENT_MODE=standalone --platform ${PLATFORM} -t ${IMG_UI_STANDALONE} --push .
+	docker buildx build --build-arg DEPLOYMENT_MODE=standalone --build-arg STYLE_THEME=mui-theme --platform ${PLATFORM} -t ${IMG_UI_STANDALONE} --push .
+
+.PHONY: docker-buildx-federated
+docker-buildx-federated:
+	docker buildx build --build-arg DEPLOYMENT_MODE=federated --build-arg STYLE_THEME=patternfly --platform ${PLATFORM} -t ${IMG_UI_FEDERATED} --push .
 
 ############ Push ############
 
@@ -83,6 +104,10 @@ docker-push:
 docker-push-standalone:
 	${CONTAINER_TOOL} push ${IMG_UI_STANDALONE}
 
+.PHONY: docker-push-federated
+docker-push-federated:
+	${CONTAINER_TOOL} push ${IMG_UI_FEDERATED}
+
 ############ Deployment ############
 
 .PHONY: kind-deployment
@@ -96,7 +121,7 @@ kubeflow-deployment:
 ############ Build ############	
 .PHONY: frontend-build
 frontend-build:
-	cd frontend && npm run build:prod
+	cd frontend && DEPLOYMENT_MODE=kubeflow && npm run build:prod
 
 .PHONY: frontend-build-standalone
 frontend-build-standalone:

clients/ui/README.md

@@ -24,7 +24,7 @@ There's two main environments that the Model Registry UI is targeted for:
 
 1. **Standalone**: This is the default environment for local development. The UI is served by the BFF and the BFF is responsible for serving the API requests. The BFF exposes a `/namespace` endpoint that returns all the namespaces in the cluster and the UI sends a user header `kubeflow-user` to authenticate the calls.
 
-2. **Integrated**: This is the environment where the UI is served by the Kubeflow Ingress and the BFF is served by the Kubeflow API Gateway. The BFF is responsible for serving the API requests and namespace selection is leveraged from Kubeflow.
+2. **Kubeflow**: This is the environment where the UI is served by the Kubeflow Ingress and the BFF is served by the Kubeflow API Gateway. The BFF is responsible for serving the API requests and namespace selection is leveraged from Kubeflow.
 
 ## Environment Variables
 
@@ -49,6 +49,12 @@ The following environment variables are used to configure the deployment and dev
 * **Default Value**: `ghcr.io/kubeflow/model-registry/ui-standalone:latest`
 * **Example**: `IMG_UI_STANDALONE=ghcr.io/kubeflow/model-registry/ui-standalone:latest`
 
+### `IMG_UI_FEDERATED`
+
+* **Description**: Specifies the image name and tag for the UI (with BFF) in **federated mode**, used for federated mode outside kubeflow.
+* **Default Value**: `ghcr.io/kubeflow/model-registry/ui-federated:latest`
+* **Example**: `IMG_UI_FEDERATED=ghcr.io/kubeflow/model-registry/ui-federated:latest`
+
 ### `PLATFORM`
 
 * **Description**: Specifies the platform for a **docker buildx** build.
@@ -58,8 +64,17 @@ The following environment variables are used to configure the deployment and dev
 ### `DEPLOYMENT_MODE`
 
 * **Description**: Specifies the deployment mode for the UI.
-* **Default Value**: `standalone` (in dev mode) / `integrated` (in production mode)
-* **Possible Values**: `standalone`, `integrated`
+* **Default Value**: `standalone`
+* **Note**: This variable is used to determine how the UI is built and deployed.
+* **Possible Values**: `standalone`, `kubeflow`, `federated`
+* **Example**: `DEPLOYMENT_MODE=standalone`
+
+### `STYLE_THEME`
+
+* **Description**: Specifies the theme/styling framework to be used for the UI.
+* **Default Value**: `mui-theme`
+* **Possible Values**: `mui-theme`, `patternfly-theme`
+* **Example**: `STYLE_THEME=mui-theme`
 
 ### Example `.env.local` File
 

clients/ui/bff/Makefile

@@ -3,7 +3,7 @@ MOCK_K8S_CLIENT ?= false
 MOCK_MR_CLIENT ?= false
 DEV_MODE ?= false
 DEV_MODE_PORT ?= 8080
-STANDALONE_MODE ?= true
+DEPLOYMENT_MODE ?= kubeflow
 AUTH_METHOD ?= internal
 AUTH_TOKEN_HEADER ?= Authorization
 AUTH_TOKEN_PREFIX ?= Bearer\
@@ -59,7 +59,7 @@ endif
 .PHONY: run
 run: fmt vet envtest ## Runs the project.
 	ENVTEST_ASSETS="$(shell $(ENVTEST) use $(ENVTEST_K8S_VERSION) --bin-dir $(LOCALBIN) -p path)" \
-	go run ./cmd --port=$(PORT) --auth-method=${AUTH_METHOD} --auth-token-header=$(AUTH_TOKEN_HEADER) --auth-token-prefix="$(AUTH_TOKEN_PREFIX)" --static-assets-dir=$(STATIC_ASSETS_DIR) --mock-k8s-client=$(MOCK_K8S_CLIENT) --mock-mr-client=$(MOCK_MR_CLIENT) --dev-mode=$(DEV_MODE) --dev-mode-port=$(DEV_MODE_PORT)  --standalone-mode=$(STANDALONE_MODE) --log-level=$(LOG_LEVEL) --allowed-origins=$(ALLOWED_ORIGINS)
+	go run ./cmd --port=$(PORT) --auth-method=${AUTH_METHOD} --auth-token-header=$(AUTH_TOKEN_HEADER) --auth-token-prefix="$(AUTH_TOKEN_PREFIX)" --static-assets-dir=$(STATIC_ASSETS_DIR) --mock-k8s-client=$(MOCK_K8S_CLIENT) --mock-mr-client=$(MOCK_MR_CLIENT) --dev-mode=$(DEV_MODE) --dev-mode-port=$(DEV_MODE_PORT)  --deployment-mode=$(DEPLOYMENT_MODE) --log-level=$(LOG_LEVEL) --allowed-origins=$(ALLOWED_ORIGINS)
 
 ##@ Dependencies
 

clients/ui/bff/cmd/main.go

@@ -20,6 +20,7 @@ import (
 func main() {
 	var cfg config.EnvConfig
 	var certFile, keyFile string
+
 	fmt.Println("Starting Model Registry UI BFF!")
 	flag.IntVar(&cfg.Port, "port", getEnvAsInt("PORT", 8080), "API server port")
 	flag.StringVar(&certFile, "cert-file", "", "Path to TLS certificate file")
@@ -28,15 +29,34 @@ func main() {
 	flag.BoolVar(&cfg.MockMRClient, "mock-mr-client", false, "Use mock Model Registry client")
 	flag.BoolVar(&cfg.DevMode, "dev-mode", false, "Use development mode for access to local K8s cluster")
 	flag.IntVar(&cfg.DevModePort, "dev-mode-port", getEnvAsInt("DEV_MODE_PORT", 8080), "Use port when in development mode")
-	flag.BoolVar(&cfg.StandaloneMode, "standalone-mode", false, "Use standalone mode for enabling endpoints in standalone mode")
+
+	// New deployment mode flag
+	flag.Var(&cfg.DeploymentMode, "deployment-mode", "Deployment mode (kubeflow, federated, or standalone)")
+
 	flag.StringVar(&cfg.StaticAssetsDir, "static-assets-dir", "./static", "Configure frontend static assets root directory")
 	flag.TextVar(&cfg.LogLevel, "log-level", parseLevel(getEnvAsString("LOG_LEVEL", "INFO")), "Sets server log level, possible values: error, warn, info, debug")
 	flag.Func("allowed-origins", "Sets allowed origins for CORS purposes, accepts a comma separated list of origins or * to allow all, default none", newOriginParser(&cfg.AllowedOrigins, getEnvAsString("ALLOWED_ORIGINS", "")))
 	flag.StringVar(&cfg.AuthMethod, "auth-method", "internal", "Authentication method (internal or user_token)")
 	flag.StringVar(&cfg.AuthTokenHeader, "auth-token-header", getEnvAsString("AUTH_TOKEN_HEADER", config.DefaultAuthTokenHeader), "Header used to extract the token (e.g., Authorization)")
 	flag.StringVar(&cfg.AuthTokenPrefix, "auth-token-prefix", getEnvAsString("AUTH_TOKEN_PREFIX", config.DefaultAuthTokenPrefix), "Prefix used in the token header (e.g., 'Bearer ')")
+
+	// Deprecated flags - kept for backward compatibility
+	flag.BoolVar(&cfg.StandaloneMode, "standalone-mode", false, "DEPRECATED: Use -deployment-mode=standalone instead")
+	flag.BoolVar(&cfg.FederatedPlatform, "federated-platform", false, "DEPRECATED: Use -deployment-mode=federated instead")
+
 	flag.Parse()
 
+	// Handle backward compatibility: if old flags are used, override deployment mode
+	if cfg.StandaloneMode {
+		cfg.DeploymentMode = config.DeploymentModeStandalone
+	} else if cfg.FederatedPlatform {
+		cfg.DeploymentMode = config.DeploymentModeFederated
+	}
+
+	// Ensure the deprecated boolean fields are consistent with the new deployment mode
+	cfg.StandaloneMode = cfg.DeploymentMode.IsStandaloneMode()
+	cfg.FederatedPlatform = cfg.DeploymentMode.IsFederatedMode()
+
 	logger := slog.New(slog.NewTextHandler(os.Stdout, &slog.HandlerOptions{
 		Level: cfg.LogLevel,
 	}))

clients/ui/bff/internal/api/app.go

@@ -161,8 +161,10 @@ func (app *App) Routes() http.Handler {
 	apiRouter.GET(UserPath, app.UserHandler)
 	apiRouter.GET(ModelRegistryListPath, app.AttachNamespace(app.RequireListServiceAccessInNamespace(app.GetAllModelRegistriesHandler)))
 
-	// Standalone "only" routes
-	if app.config.StandaloneMode {
+	// Enable these routes in all cases except Kubeflow integration mode
+	// (Kubeflow integration mode is when DeploymentMode is kubeflow)
+	isKubeflowIntegrationMode := app.config.DeploymentMode.IsKubeflowMode()
+	if !isKubeflowIntegrationMode {
 		// This namespace endpoint is used on standalone mode to simulate
 		// Kubeflow Central Dashboard namespace selector dropdown on our standalone web app
 		apiRouter.GET(NamespaceListPath, app.GetNamespacesHandler)