Merge pull request #161 from tarilabs/tarilabs-20250117-sync

periodic sync upstream KF to midstream ODH

Makefile

@@ -3,8 +3,7 @@ MKFILE_PATH := $(abspath $(lastword $(MAKEFILE_LIST)))
 PROJECT_PATH := $(patsubst %/,%,$(dir $(MKFILE_PATH)))
 PROJECT_BIN := $(PROJECT_PATH)/bin
 GO ?= "$(shell which go)"
-BFF_PATH := $(PROJECT_PATH)/clients/ui/bff
-UI_PATH := $(PROJECT_PATH)/clients/ui/frontend
+UI_PATH := $(PROJECT_PATH)/clients/ui
 CSI_PATH := $(PROJECT_PATH)/cmd/csi
 
 # ENVTEST_K8S_VERSION refers to the version of kubebuilder assets to be downloaded by envtest binary.
@@ -43,11 +42,6 @@ ifeq ($(IMG_REPO),model-registry-ui)
 	BUILD_PATH := $(UI_PATH)
 endif
 
-ifeq ($(IMG_REPO),model-registry-bff)
-    DOCKERFILE := $(BFF_PATH)/Dockerfile
-	BUILD_PATH := $(BFF_PATH)
-endif
-
 # The BUILD_PATH is still the root
 ifeq ($(IMG_REPO),model-registry-storage-initializer)
     DOCKERFILE := $(CSI_PATH)/Dockerfile.csi

clients/ui/.env

@@ -1,5 +1,6 @@
 
 ############### Default settings ###############
 CONTAINER_TOOL=docker
-IMG_BFF=kubeflow/model-registry-bff:latest
-IMG_FRONTEND=kubeflow/model-registry-ui:latest
+IMG_UI=kubeflow/model-registry-ui:latest
+IMG_UI_STANDALONE=kubeflow/model-registry-ui-standalone:latest
+PLATFORM=linux/amd64

clients/ui/.env.production

@@ -1 +1,4 @@
 APP_ENV=production
+MOCK_AUTH=false
+DEPLOYMENT_MODE=integrated
+STYLE_THEME=mui-theme

clients/ui/.env.test

@@ -0,0 +1 @@
+APP_ENV=test

clients/ui/.gitignore

@@ -6,3 +6,5 @@
 .DS_Store
 
 .env*.local
+
+!*.test

clients/ui/Dockerfile

@@ -0,0 +1,59 @@
+# Source code for the repos
+ARG UI_SOURCE_CODE=./frontend
+ARG BFF_SOURCE_CODE=./bff
+
+# Set the base images for the build stages
+ARG NODE_BASE_IMAGE=node:20
+ARG GOLANG_BASE_IMAGE=golang:1.22.2
+ARG DISTROLESS_BASE_IMAGE=gcr.io/distroless/static:nonroot
+
+# UI build stage
+FROM ${NODE_BASE_IMAGE} AS ui-builder
+
+ARG UI_SOURCE_CODE
+
+WORKDIR /usr/src/app
+
+# Copy the source code to the container
+COPY ${UI_SOURCE_CODE} /usr/src/app
+
+# Install the dependencies and build
+RUN npm cache clean --force
+RUN npm ci --omit=optional
+RUN npm run build:prod
+
+# BFF build stage
+FROM ${GOLANG_BASE_IMAGE} AS bff-builder
+
+ARG BFF_SOURCE_CODE
+
+ARG TARGETOS
+ARG TARGETARCH
+
+WORKDIR /usr/src/app
+
+# Copy the Go Modules manifests
+COPY ${BFF_SOURCE_CODE}/go.mod ${BFF_SOURCE_CODE}/go.sum ./
+
+# Download dependencies
+RUN go mod download
+
+# Copy the go source files
+COPY ${BFF_SOURCE_CODE}/cmd/main.go cmd/main.go
+COPY ${BFF_SOURCE_CODE}/internal/ internal/
+
+# Build the Go application
+RUN CGO_ENABLED=0 GOOS=${TARGETOS:-linux} GOARCH=${TARGETARCH} go build -a -o bff ./cmd/main.go
+
+# Final stage
+# Use distroless as minimal base image to package the application binary
+FROM ${DISTROLESS_BASE_IMAGE}
+WORKDIR /
+COPY --from=bff-builder /usr/src/app/bff ./
+COPY --from=ui-builder /usr/src/app/dist ./static/
+USER 65532:65532
+
+# Expose port 8080
+EXPOSE 8080
+
+ENTRYPOINT ["/bff"]

clients/ui/Makefile

@@ -44,36 +44,58 @@ dev-start:
 
 ############ Build ############
 
-.PHONY: build-bff
-build-bff:
-	$(CONTAINER_TOOL) build -t ${IMG_BFF} ./bff
+.PHONY: docker-build
+docker-build:
+	$(CONTAINER_TOOL) build -t ${IMG_UI} .
 
-.PHONY: build-frontend
-build-frontend:
-	$(CONTAINER_TOOL) build -t ${IMG_FRONTEND} ./frontend
+.PHONY: docker-build-standalone
+docker-build-standalone:
+	MOCK_AUTH=true DEPLOYMENT_MODE=standalone $(CONTAINER_TOOL) build -t ${IMG_UI_STANDALONE} .
 
-.PHONY: build
-build: build-bff build-frontend
+.PHONY: docker-buildx
+docker-buildx:
+	docker buildx build --platform ${PLATFORM} -t ${IMG_UI} --push .
 
-############ Push ############
+.PHONY: docker-buildx-standalone
+docker-buildx-standalone:
+	MOCK_AUTH=true DEPLOYMENT_MODE=standalone docker buildx build --platform ${PLATFORM} -t ${IMG_UI_STANDALONE} --push .
 
-.PHONY: push-bff
-push-bff:
-	${CONTAINER_TOOL} push ${IMG_BFF}
+############ Push ############
 
-.PHONY: push-frontend
-push-frontend:
-	${CONTAINER_TOOL} push ${IMG_FRONTEND}
+.PHONY: docker-push
+docker-push:
+	${CONTAINER_TOOL} push ${IMG_UI}
 
-.PHONY: push
-push: push-bff push-frontend
+.PHONY: docker-push-standalone
+docker-push-standalone:
+	${CONTAINER_TOOL} push ${IMG_UI_STANDALONE}
 
 ############ Deployment ############
 
-.PHONY: docker-compose
-docker-compose:
-	$(CONTAINER_TOOL) compose -f docker-compose.yaml up
-
 .PHONY: kind-deployment
 kind-deployment:
 	./scripts/deploy_kind_cluster.sh
+
+############ Build ############	
+.PHONY: frontend-build
+frontend-build:
+	cd frontend && npm run build:prod
+
+.PHONY: frontend-build-standalone
+frontend-build-standalone:
+	MOCK_AUTH=true DEPLOYMENT_MODE=standalone cd frontend && npm run build:prod
+
+.PHONY: bff-build
+bff-build:
+	cd bff && make build
+
+.PHONY: build
+build: frontend-build bff-build
+
+############ Run mocked ########
+.PHONY: run-local-mocked
+run-local-mocked: frontend-build-standalone bff-build
+	rm -r ./bff/static-local-run && cp -r ./frontend/dist/ ./bff/static-local-run/ && cd bff && make run STATIC_ASSETS_DIR=./static-local-run MOCK_K8S_CLIENT=true DEV_MODE=true
+
+
+

clients/ui/README.md

@@ -2,6 +2,7 @@
 [BFF requirements]: ./bff/README.md#pre-requisites
 [frontend dev setup]: ./frontend/docs/dev-setup.md#development
 [BFF dev setup]: ./bff/README.md#development
+[Model registry UI]: ./docs/README.md
 
 # Model Registry UI
 
@@ -24,14 +25,6 @@ To run the a mocked dev environment you can either:
 
 * Or follow the [frontend dev setup] and [BFF dev setup].
 
-### Docker deployment
-
-To build the Model Registry UI container, run the following command:
-
-```shell
-make docker-compose
-```
-
 ### Kubernetes Deployment
 
 For a in-depth guide on how to deploy the Model Registry UI, please refer to the [local kubernetes deployment](./bff/docs/dev-guide.md) documentation.
@@ -47,6 +40,14 @@ make kind-deployment
 You can find the OpenAPI specification for the Model Registry UI in the [openapi](./api/openapi) directory.
 A live version of the OpenAPI specification can be found [here](https://editor.swagger.io/?url=https://raw.githubusercontent.com/kubeflow/model-registry/main/clients/ui/api/openapi/mod-arch.yaml).
 
+## Targeted environments
+
+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.
+
 ## Environment Variables
 
 The following environment variables are used to configure the deployment and development environment for the Model Registry UI. These variables should be defined in a `.env.local` file in the `clients/ui` directory of the project. **This values will affect the build and push commands**.
@@ -58,56 +59,79 @@ The following environment variables are used to configure the deployment and dev
 * **Possible Values**: `docker`, `podman`, etc.
 * **Example**: `CONTAINER_TOOL=docker`
 
-### `IMG_BFF`
+### `IMG_UI`
 
-* **Description**: Specifies the image name and tag for the Backend For Frontend (BFF) service.
-* **Default Value**: `model-registry-bff:latest`
-* **Example**: `IMG_BFF=model-registry-bff:latest`
+* **Description**: Specifies the image name and tag for the UI (with BFF).
+* **Default Value**: `model-registry-ui:latest`
+* **Example**: `IMG_UI=model-registry-bff:latest`
 
-### `IMG_FRONTEND`
+### `IMG_UI_STANDALONE`
 
-* **Description**: Specifies the image name and tag for the frontend service.
-* **Default Value**: `model-registry-frontend:latest`
-* **Example**: `IMG_FRONTEND=model-registry-frontend:latest`
+* **Description**: Specifies the image name and tag for the UI (with BFF) in **standalone mode**, used for local kind deployment.
+* **Default Value**: `model-registry-ui-standalone:latest`
+* **Example**: `IMG_UI_STANDALONE=model-registry-bff:latest`
+
+### `PLATFORM`
+
+* **Description**: Specifies the platform for a **docker buildx** build.
+* **Default Value**: `linux/amd64`
+* **Example**: `PLATFORM=linux/amd64`
+
+### `MOCK_AUTH`
+
+* **Description**: Specifies whether to mock authentication in the UI.
+* **Default Value**: `true` (in dev mode) / `false` (in production mode)
+* **Possible Values**: `true`, `false`
+
+### `DEPLOYMENT_MODE`
+
+* **Description**: Specifies the deployment mode for the UI.
+* **Default Value**: `standalone` (in dev mode) / `integrated` (in production mode)
+* **Possible Values**: `standalone`, `integrated`
 
 ### Example `.env.local` File
 
 Here is an example of what your `.env.local` file might look like:
 
 ```shell
 CONTAINER_TOOL=docker
-IMG_BFF=model-registry-bff:latest
-IMG_FRONTEND=model-registry-frontend:latest
+IMG_UI=quay.io/<personal-registry>/model-registry-ui:latest
+IMG_UI_STANDALONE=quay.io/<personal-registry>/model-registry-ui-standalone:latest
+PLATFORM=linux/amd64
 ```
 
 ## Build and Push Commands
 
-The following Makefile targets are used to build and push the Docker images for the Backend For Frontend (BFF) and frontend services. These targets utilize the environment variables defined in the `.env.local` file.
+The following Makefile targets are used to build and push the Docker images the UI images. These targets utilize the environment variables defined in the `.env.local` file.
 
 ### Build Commands
 
-* **`build-bff`**: Builds the Docker image for the BFF service.
-  * Command: `make build-bff`
-  * This command uses the `CONTAINER_TOOL` and `IMG_BFF` environment variables to build the image.
+* **`docker-build`**: Builds the Docker image for the UI platform.
+  * Command: `make docker-build`
+  * This command uses the `CONTAINER_TOOL` and `IMG_UI` environment variables to push the image.
 
-* **`build-frontend`**: Builds the Docker image for the frontend service.
-  * Command: `make build-frontend`
-  * This command uses the `CONTAINER_TOOL` and `IMG_FRONTEND` environment variables to build the image.
+* **`docker-buildx`**: Builds the Docker image with buildX for multiarch support.
+  * Command: `make docker-buildx`
+  * This command uses the `CONTAINER_TOOL` and `IMG_UI` environment variables to push the image.
 
-* **`build`**: Builds the Docker images for both the BFF and frontend services.
-  * Command: `make build`
-  * This command runs both `build-bff` and `build-frontend` targets.
+* **`docker-build-standalone`**: Builds the Docker image for the UI platform **in standalone mode**.
+  * Command: `make docker-build-standalone`
+  * This command uses the `CONTAINER_TOOL` and `IMG_UI_STANDALONE` environment variables to push the image.
+
+* **`docker-buildx-standalone`**: Builds the Docker image with buildX for multiarch support **in standalone mode**.
+  * Command: `make docker-buildx-standalone`
+  * This command uses the `CONTAINER_TOOL` and `IMG_UI_STANDALONE` environment variables to push the image.
 
 ### Push Commands
 
-* **`push-bff`**: Pushes the Docker image for the BFF service to the container registry.
-  * Command: `make push-bff`
-  * This command uses the `CONTAINER_TOOL` and `IMG_BFF` environment variables to push the image.
+* **`docker-push`**: Pushes the Docker image for the UI service to the container registry.
+  * Command: `make docker-push`
+  * This command uses the `CONTAINER_TOOL` and `IMG_UI` environment variables to push the image.
+
+* **`docker-push-standalone`**: Pushes the Docker image for the UI service to the container registry **in standalone mode**.
+  * Command: `make docker-push-standalone`
+  * This command uses the `CONTAINER_TOOL` and `IMG_UI_STANDALONE` environment variables to push the image.
 
-* **`push-frontend`**: Pushes the Docker image for the frontend service to the container registry.
-  * Command: `make push-frontend`
-  * This command uses the `CONTAINER_TOOL` and `IMG_FRONTEND` environment variables to push the image.
+## Deployments
 
-* **`push`**: Pushes the Docker images for both the BFF and frontend services to the container registry.
-  * Command: `make push`
-  * This command runs both `push-bff` and `push-frontend` targets.
+For more information on how to deploy the Model Registry UI, please refer to the [Model registry UI] documentation.

clients/ui/bff/.gitignore

@@ -1 +1,2 @@
 /bin
+/static-local-run

clients/ui/bff/Makefile

@@ -1,11 +1,11 @@
-CONTAINER_TOOL ?= docker
-IMG ?= model-registry-bff:latest
 PORT ?= 4000
 MOCK_K8S_CLIENT ?= false
 MOCK_MR_CLIENT ?= false
 DEV_MODE ?= false
 DEV_MODE_PORT ?= 8080
 STANDALONE_MODE ?= true
+#frontend static assets root directory
+STATIC_ASSETS_DIR ?= ./static
 # ENVTEST_K8S_VERSION refers to the version of kubebuilder assets to be downloaded by envtest binary.
 ENVTEST_K8S_VERSION = 1.29.0
 
@@ -48,11 +48,7 @@ build: fmt vet test ## Builds the project to produce a binary executable.
 .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/main.go  --port=$(PORT) --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)
-
-.PHONY: docker-build
-docker-build: ## Builds a container for the project.
-	$(CONTAINER_TOOL) build -t ${IMG} .
+	go run ./cmd/main.go  --port=$(PORT) --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)
 
 ##@ Dependencies