diff --git a/clients/ui/.env b/clients/ui/.env new file mode 100644 index 000000000..02d80d092 --- /dev/null +++ b/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 diff --git a/clients/ui/.gitignore b/clients/ui/.gitignore new file mode 100644 index 000000000..93251d2f4 --- /dev/null +++ b/clients/ui/.gitignore @@ -0,0 +1,8 @@ +# editor +.idea/ +.vscode/ + +# misc +.DS_Store + +.env*.local diff --git a/clients/ui/Makefile b/clients/ui/Makefile index addcf8986..648d578cf 100644 --- a/clients/ui/Makefile +++ b/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\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 diff --git a/clients/ui/README.md b/clients/ui/README.md index fe7b80a69..ef0de6793 100644 --- a/clients/ui/README.md +++ b/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 project. These variables should be defined in a `.env.local` file in the root 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. diff --git a/clients/ui/manifests/base/kustomization.yaml b/clients/ui/manifests/base/kustomization.yaml index 939b4d754..484d69f27 100644 --- a/clients/ui/manifests/base/kustomization.yaml +++ b/clients/ui/manifests/base/kustomization.yaml @@ -2,15 +2,18 @@ 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: test-eder +namespace: latest diff --git a/clients/ui/scripts/deploy_kind_cluster.sh b/clients/ui/scripts/deploy_kind_cluster.sh index 648199314..43f8afb71 100755 --- a/clients/ui/scripts/deploy_kind_cluster.sh +++ b/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