Merge pull request #146 from kubeflow/main

[pull] main from kubeflow:main

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
 
@@ -14,41 +16,41 @@ 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)
 
 .PHONY: fmt
-fmt:
+fmt: ## Applies the correct code style to source files using go fmt.
 	go fmt ./...
 
-.PHONY: clean
+.PHONY: clean ## Deletes previously built binaries.
 clean:
 	rm -Rf ./bin
 
 .PHONY: lint
-lint: golangci-lint ## Run golangci-lint linter
+lint: golangci-lint ## Run golangci-lint to automatically check source code for programmatic and stylistic errors.
 	$(GOLANGCI_LINT) run
 
 .PHONY: lint-fix
-lint-fix: golangci-lint ## Run golangci-lint linter and perform fixes
+lint-fix: golangci-lint ## Run golangci-lint to automatically check source code for programmatic and stylistic errors and, additionally perform fixes where possible.
 	$(GOLANGCI_LINT) run --fix
 
 .PHONY: vet
-vet:  .
+vet:  . ## Runs static analysis tools on source files and reports suspicious constructs that could be bugs or syntactical errors.
 	go vet ./...
 
 .PHONY: test
-test: fmt vet envtest
+test: fmt vet envtest ## Runs the full test suite.
 	ENVTEST_ASSETS="$(shell $(ENVTEST) use $(ENVTEST_K8S_VERSION) --bin-dir $(LOCALBIN) -p path)" \
 	go test ./...
 
 .PHONY: build
-build: fmt vet test
+build: fmt vet test ## Builds the project to produce a binary executable.
 	go build -o bin/bff cmd/main.go
 
 .PHONY: run
-run: fmt vet envtest
+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)
+	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:
+docker-build: ## Builds a container for the project.
 	$(CONTAINER_TOOL) build -t ${IMG} .
 
 ##@ Dependencies

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
 }

clients/ui/frontend/package.json

@@ -35,7 +35,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@cypress/code-coverage": "^3.13.5",
-    "@mui/material": "^6.1.3",
+    "@mui/material": "^6.1.7",
     "@mui/icons-material": "^6.1.5",
     "@mui/types": "^7.2.17",
     "@testing-library/cypress": "^10.0.1",
@@ -69,7 +69,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "junit-report-merger": "^7.0.0",
     "mini-css-extract-plugin": "^2.9.0",
-    "postcss": "^8.4.48",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
     "prop-types": "^15.8.1",
     "raw-loader": "^4.0.2",
@@ -107,7 +107,7 @@
     "react-dom": "^18",
     "react-router": "^6.26.2",
     "sass": "^1.78.0",
-    "dompurify": "^3.1.7",
+    "dompurify": "^3.2.0",
     "showdown": "^2.1.0",
     "classnames": "^2.2.6"
   },