Enable local development in kubeflow

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

clients/ui/Makefile

@@ -42,6 +42,19 @@ dev-frontend:
 dev-start: 
 	make -j 2 dev-bff dev-frontend
 
+########### Dev Integrated ############
+.PHONY: dev-start-kubeflow
+dev-start-kubeflow: 
+	make -j 2 dev-bff-kubeflow dev-frontend-kubeflow
+
+.PHONY: dev-frontend-kubeflow
+dev-frontend-kubeflow:
+	DEPLOYMENT_MODE=integrated && cd frontend && npm run start:dev
+
+.PHONY: dev-bff-kubeflow
+dev-bff-kubeflow:
+	cd bff && make run PORT=4000 MOCK_K8S_CLIENT=false MOCK_MR_CLIENT=false DEV_MODE=true STANDALONE_MODE=false DEV_MODE_PORT=8085
+
 ############ Build ############
 
 .PHONY: docker-build

clients/ui/docs/README.md

@@ -1,5 +1,6 @@
 [Local deployment]: ./local-deployment-guide.md
 [Local deployment UI]: ./local-deployment-guide-ui.md
+[Kubeflow development]: ./kubeflow-development-guide.md
 
 # Model Registry UI Docs
 
@@ -9,3 +10,4 @@ This directory contains documentation for the Model Registry UI.
 
 * [Local Deployment Guide][Local deployment]
 * [Local Deployment Guide UI][Local deployment UI]
+* [Kubeflow Development Guide][Kubeflow development]

clients/ui/docs/kubeflow-development-guide.md

@@ -0,0 +1,73 @@
+# Set up local development with kubeflow
+
+**Note: this should only be needed in edge cases in which we need to test a local integration with the kubeflow dashboard.**
+
+## Prerequisites
+
+- [Kubeflow repo](https://github.com/kubeflow/kubeflow/tree/master/components/centraldashboard#development)
+- [Model Registry repo](../README.md)
+
+## Setup
+
+### Kubeflow repo (under centraldashboard)
+
+1. Change the [webpack config](https://github.com/kubeflow/kubeflow/blob/master/components/centraldashboard/webpack.config.js#L186) proxies to allow Model Registry:
+
+```javascript
+        proxy: {
+            '/api/v1': {
+                target: 'http://localhost:4000',
+            },
+            '/api': {
+                target: 'http://localhost:8082',
+            },
+            '/jupyter': {
+                target: 'http://localhost:8085',
+                pathRewrite: {'^/jupyter': ''},
+            },
+            // NOTE: this makes `/notebook` requests fail with a 504 error
+            '/notebook': {
+                target: 'http://localhost:8086',
+                pathRewrite: {
+                    '^/notebook/(.*?)/(.*?)/(.*)':
+                        '/$1/services/$2/proxy/notebook/$1/$2/$3',
+                },
+            },
+            '/pipeline': {
+                target: 'http://localhost:8087',
+                pathRewrite: {'^/pipeline': ''},
+            },
+            '/model-registry': {
+                target: 'http://localhost:9000',
+                changeOrigin: true,
+                ws: true,
+                secure: false,
+            },
+        },
+```
+
+2. Run the centraldashboard:
+
+```shell
+npm run start dev
+```
+
+### Model Registry repo
+
+1. Just run the repo in kubeflow dev mode
+
+```shell
+make dev-start-kubeflow
+```
+
+### Access the cluster
+
+You need to have a kubeflow cluster up and running, to get the Model Registry working you'll need to port-forward these two services:
+
+```shell
+kubectl port-forward service/model-registry-service 8085:8080 -n kubeflow
+```
+
+```shell
+kubectl port-forward -n kubeflow svc/profiles-kfam 8081:8081
+```

clients/ui/docs/local-deployment-guide-ui.md

@@ -3,7 +3,7 @@
 # Deploying the Model Registry UI in a local cluster
 
 For this guide, we will be using kind for locally deploying our cluster. See
-the [Model registry server set up] guide for prerequisites on setting up kind 
+the [Model registry server set up] guide for prerequisites on setting up kind
 and deploying the model registry server.
 
 ## Setup
@@ -24,16 +24,33 @@ Create a namespace for model registry to run in, by default this is kubeflow, ru
 kubectl create namespace kubeflow
 ```
 
-### 3. Deploy Model Registry UI to cluster
+### 3. Build a standalone image for the UI
+
+Right now, the default image is targeted for the KF Central Dashboard. To build a standalone image for the UI, run:
 
-You can now deploy the UI and BFF to your newly created cluster using the kustomize configs in the root manifest directory:
 ```shell
-cd manifests/kustomize/options/ui/overlays/standalone
+make docker-build-standalone
+make docker-push-standalone
 ```
+
+**Note: You will need to set up `IMG_UI_STANDALONE` in your .env.local file to push the image to your own registry.**
+
+### 4. Deploy Model Registry UI to cluster
+
+You can now deploy the UI and BFF to your newly created cluster using the kustomize configs in the root manifest directory:
+
+First you need to set up your new image
+
 ```shell
-kustomize edit set namespace kubeflow
+cd manifests/kustomize/options/ui/base
+kustomize edit set image model-registry-ui-image=${IMG_UI_STANDALONE}
 ```
+
+Now you can set the namespace to kubeflow and apply the manifests:
+
 ```shell
+cd manifests/kustomize/options/ui/overlays/standalone
+kustomize edit set namespace kubeflow
 kubectl apply -k .
 ```
 
@@ -48,7 +65,7 @@ NAME                                  READY   STATUS    RESTARTS   AGE
 model-registry-ui-58755c4754-zdrnr    1/1     Running   0          11s
 ```
 
-### 4. Access the Model Registry UI running in the cluster
+### 5. Access the Model Registry UI running in the cluster
 
 Now that the pods are up and running you can access the UI.
 

clients/ui/docs/local-deployment-guide.md

@@ -33,7 +33,7 @@ kubectl cluster-info
 
 If everything is working correctly you should see output similar to:
 
-```
+``` shell
 Kubernetes control plane is running at https://127.0.0.1:58635
 CoreDNS is running at https://127.0.0.1:58635/api/v1/namespaces/kube-system/services/kube-dns:dns/proxy
 ```
@@ -105,6 +105,7 @@ 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}
 ```

clients/ui/frontend/config/dotenv.js

@@ -150,14 +150,14 @@ const setupDotenvFilesForEnv = ({ env }) => {
   const SRC_DIR = path.resolve(RELATIVE_DIRNAME, process.env.SRC_DIR || TS_BASE_URL || 'src');
   const COMMON_DIR = path.resolve(RELATIVE_DIRNAME, process.env.COMMON_DIR || '../common');
   const DIST_DIR = path.resolve(RELATIVE_DIRNAME, process.env.DIST_DIR || TS_OUT_DIR || 'public');
-  const HOST = process.env.HOST || 'localhost';
+  const DEPLOYMENT_MODE = process.env.DEPLOYMENT_MODE || 'integrated';
+  const HOST = process.env.HOST || DEPLOYMENT_MODE === 'integrated' ? '0.0.0.0' : 'localhost';
   const PORT = process.env.PORT || '9000';
   const PROXY_PROTOCOL = process.env.PROXY_PROTOCOL || 'http';
   const PROXY_HOST = process.env.PROXY_HOST || 'localhost';
   const PROXY_PORT = process.env.PROXY_PORT || process.env.PORT || 4000;
   const DEV_MODE = process.env.DEV_MODE || undefined;
   const OUTPUT_ONLY = process.env._OUTPUT_ONLY === 'true';
-  const DEPLOYMENT_MODE = process.env.DEPLOYMENT_MODE || 'integrated';
 
   process.env._RELATIVE_DIRNAME = RELATIVE_DIRNAME;
   process.env._IS_PROJECT_ROOT_DIR = IS_ROOT;