Merge branch 'kubeflow:main' into main

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/bff/Makefile

@@ -3,6 +3,8 @@ IMG ?= model-registry-bff:latest
 PORT ?= 4000
 MOCK_K8S_CLIENT ?= false
 MOCK_MR_CLIENT ?= false
+DEV_MODE ?= false
+DEV_MODE_PORT ?= 8080
 # ENVTEST_K8S_VERSION refers to the version of kubebuilder assets to be downloaded by envtest binary.
 ENVTEST_K8S_VERSION = 1.29.0
 
@@ -45,7 +47,7 @@ build: fmt vet test
 .PHONY: run
 run: fmt vet envtest
 	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)
+	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)
 
 .PHONY: docker-build
 docker-build:

clients/ui/bff/cmd/main.go

@@ -4,11 +4,12 @@ import (
 	"context"
 	"flag"
 	"fmt"
-	"github.com/kubeflow/model-registry/ui/bff/internal/api"
-	"github.com/kubeflow/model-registry/ui/bff/internal/config"
 	"os/signal"
 	"syscall"
 
+	"github.com/kubeflow/model-registry/ui/bff/internal/api"
+	"github.com/kubeflow/model-registry/ui/bff/internal/config"
+
 	"log/slog"
 	"net/http"
 	"os"
@@ -21,6 +22,8 @@ func main() {
 	flag.IntVar(&cfg.Port, "port", getEnvAsInt("PORT", 4000), "API server port")
 	flag.BoolVar(&cfg.MockK8Client, "mock-k8s-client", false, "Use mock Kubernetes client")
 	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.Parse()
 
 	logger := slog.New(slog.NewTextHandler(os.Stdout, nil))

clients/ui/bff/docs/dev-guide.md

@@ -82,4 +82,15 @@ curl http://localhost:8080/api/model_registry/v1alpha3/registered_models
 You should receive a 200 response if everything is working correctly, the body should look like:
 ```json
 {"items":[],"nextPageToken":"","pageSize":0,"size":0}
-```
+```
+
+#### 6. Run BFF locally in Dev Mode
+To access your local kind cluster when running the BFF locally, you can use the `DEV_MODE` option. This is useful for when
+you want to test live changes on real cluster. To do so, simply run:
+```shell
+make run DEV_MODE=true
+```
+You can also specify the port you are forwarding to if it is something other than 8080:
+```shell
+make run DEV_MODE=true DEV_MODE_PORT=8081
+```

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

@@ -3,9 +3,11 @@ package api
 import (
 	"context"
 	"fmt"
+	"net/http"
+
 	"github.com/julienschmidt/httprouter"
+	"github.com/kubeflow/model-registry/ui/bff/internal/config"
 	"github.com/kubeflow/model-registry/ui/bff/internal/integrations"
-	"net/http"
 )
 
 type contextKey string
@@ -41,7 +43,7 @@ func (app *App) AttachRESTClient(handler func(http.ResponseWriter, *http.Request
 
 		modelRegistryID := ps.ByName(ModelRegistryId)
 
-		modelRegistryBaseURL, err := resolveModelRegistryURL(modelRegistryID, app.kubernetesClient)
+		modelRegistryBaseURL, err := resolveModelRegistryURL(modelRegistryID, app.kubernetesClient, app.config)
 		if err != nil {
 			app.serverErrorResponse(w, r, fmt.Errorf("failed to resolve model registry base URL): %v", err))
 			return
@@ -83,11 +85,17 @@ func resolveBearerToken(k8s integrations.KubernetesClientInterface, header http.
 	return bearerToken, nil
 }
 
-func resolveModelRegistryURL(id string, client integrations.KubernetesClientInterface) (string, error) {
+func resolveModelRegistryURL(id string, client integrations.KubernetesClientInterface, config config.EnvConfig) (string, error) {
 	serviceDetails, err := client.GetServiceDetailsByName(id)
 	if err != nil {
 		return "", err
 	}
+
+	if config.DevMode {
+		serviceDetails.ClusterIP = "localhost"
+		serviceDetails.HTTPPort = int32(config.DevModePort)
+	}
+
 	url := fmt.Sprintf("http://%s:%d/api/model_registry/v1alpha3", serviceDetails.ClusterIP, serviceDetails.HTTPPort)
 	return url, nil
 }

clients/ui/bff/internal/config/environment.go

@@ -4,4 +4,6 @@ type EnvConfig struct {
 	Port         int
 	MockK8Client bool
 	MockMRClient bool
+	DevMode      bool
+	DevModePort  int
 }