Enhance builds and push (#559)

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

clients/ui/.env

@@ -0,0 +1,5 @@
+
+############### Default settings ###############
+CONTAINER_TOOL=docker
+IMG_BFF=kubeflow/model-registry-bff:dev-latest
+IMG_FRONTEND=kubeflow/model-registry-ui:dev-latest

clients/ui/.gitignore

@@ -0,0 +1,8 @@
+# editor
+.idea/
+.vscode/
+
+# misc
+.DS_Store
+
+.env*.local

clients/ui/Makefile

@@ -1,4 +1,20 @@
-CONTAINER_TOOL ?= docker
+DEFAULT_ENV_FILE := .env
+ifneq ("$(wildcard $(DEFAULT_ENV_FILE))","")
+include ${DEFAULT_ENV_FILE}
+export $(shell sed 's/=.*//' ${DEFAULT_ENV_FILE})
+endif
+
+DEV_ENV_FILE := .env.development
+ifneq ("$(wildcard $(DEV_ENV_FILE))","")
+include ${DEV_ENV_FILE}
+export $(shell sed 's/=.*//' ${DEV_ENV_FILE})
+endif
+
+ENV_FILE := .env.local
+ifneq ("$(wildcard $(ENV_FILE))","")
+include ${ENV_FILE}
+export $(shell sed 's/=.*//' ${ENV_FILE})
+endif
 
 .PHONY: all
 all: build
@@ -7,6 +23,9 @@ all: build
 help: ## Display this help.
 	@awk 'BEGIN {FS = ":.*##"; printf "\nUsage:\n  make \033[36m<target>\033[0m\n"} /^[a-zA-Z_0-9-]+:.*?##/ { printf "  \033[36m%-15s\033[0m %s\n", $$1, $$2 } /^##@/ { printf "\n\033[1m%s\033[0m\n", substr($$0, 5) } ' $(MAKEFILE_LIST)
 
+
+############ Dev Environment ############
+
 .PHONY: dev-install-dependencies
 dev-install-dependencies:
 	cd frontend && npm install
@@ -23,6 +42,34 @@ dev-frontend:
 dev-start: 
 	make -j 2 dev-bff dev-frontend
 
+############ Build ############
+
+.PHONY: build-bff
+build-bff:
+	$(CONTAINER_TOOL) build -t ${IMG_BFF} ./bff
+
+.PHONY: build-frontend
+build-frontend:
+	$(CONTAINER_TOOL) build -t ${IMG_FRONTEND} ./frontend
+
+.PHONY: build
+build: build-bff build-frontend
+
+############ Push ############
+
+.PHONY: push-bff
+push-bff:
+	${CONTAINER_TOOL} push ${IMG_BFF}
+
+.PHONY: push-frontend
+push-frontend:
+	${CONTAINER_TOOL} push ${IMG_FRONTEND}
+
+.PHONY: push
+push: push-bff push-frontend
+
+############ Deployment ############
+
 .PHONY: docker-compose
 docker-compose:
 	$(CONTAINER_TOOL) compose -f docker-compose.yaml up

clients/ui/README.md

@@ -46,3 +46,68 @@ 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).
+
+## 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**.
+
+### `CONTAINER_TOOL`
+
+* **Description**: Specifies the container tool to be used for building and running containers.
+* **Default Value**: `docker`
+* **Possible Values**: `docker`, `podman`, etc.
+* **Example**: `CONTAINER_TOOL=docker`
+
+### `IMG_BFF`
+
+* **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`
+
+### `IMG_FRONTEND`
+
+* **Description**: Specifies the image name and tag for the frontend service.
+* **Default Value**: `model-registry-frontend:latest`
+* **Example**: `IMG_FRONTEND=model-registry-frontend:latest`
+
+### 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
+```
+
+## 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.
+
+### 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.
+
+* **`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.
+
+* **`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.
+
+### 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.
+
+* **`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.
+
+* **`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.

clients/ui/manifests/base/kustomization.yaml

@@ -2,15 +2,17 @@ apiVersion: kustomize.config.k8s.io/v1beta1
 kind: Kustomization
 
 resources:
-  - model-registry-bff-role.yaml
-  - model-registry-bff-service.yaml
-  - model-registry-bff-deployment.yaml
-  - model-registry-ui-service.yaml
-  - model-registry-ui-deployment.yaml
-  - model-registry-service-account.yaml
+- model-registry-bff-role.yaml
+- model-registry-bff-service.yaml
+- model-registry-bff-deployment.yaml
+- model-registry-ui-service.yaml
+- model-registry-ui-deployment.yaml
+- model-registry-service-account.yaml
 
 images:
-  - name: model-registry-ui-image
-    newName: kubeflow/model-registry-ui:latest
-  - name: model-registry-bff-image
-    newName: kubeflow/model-registry-bff:latest
+- name: model-registry-bff-image
+  newName: kubeflow/model-registry-bff
+  newTag: latest
+- name: model-registry-ui-image
+  newName: kubeflow/model-registry-ui
+  newTag: latest

clients/ui/scripts/deploy_kind_cluster.sh

@@ -33,23 +33,29 @@ else
     kubectl get pods -n kubeflow
 fi
 
+pushd  ./manifests/base
+kustomize edit set namespace kubeflow
+kustomize edit set image model-registry-ui-image=${IMG_FRONTEND}
+kustomize edit set image model-registry-bff-image=${IMG_BFF}
+
 # Step 4: Deploy model registry UI
 echo "Deploying Model Registry UI..."
-kubectl apply -n kubeflow -k ./manifests/base
+kubectl apply -n kubeflow -k .
 
 # Wait for deployment to be available
 echo "Waiting Model Registry UI to be available..."
 kubectl wait --for=condition=available -n kubeflow deployment/model-registry-ui --timeout=1m
 
+pushd  ../user-rbac
 # Step 5: Apply admin user service account in the cluster
 echo "Applying admin user service account and rolebinding..."
-kubectl apply -k ./manifests/user-rbac
+kubectl apply -k .
 
 # Step 6: Generate token for admin user and display it
 echo "Generating token for admin user, copy the following token in the local storage with key 'x-forwarded-access-token'..."
 echo -e "\033[32m$(kubectl -n kube-system create token admin-user)\033[0m"
 
 # Step 5: Port-forward the service
-echo "Portfowarding Model Registry UI..."
+echo "Port-fowarding Model Registry UI..."
 echo -e "\033[32mDashboard available in http://localhost:8080\033[0m"
 kubectl port-forward svc/model-registry-ui-service -n kubeflow 8080:8080