UI: Optimisation and enhancements for v1beta1 Katib UI (kubeflow#1232)

* UI improvements

* Add db-manager-addr flag
Modify README

* Fix graphviz

* Modify README

* Remove ID

* Add zoom to graphviz

* Remove unused scripts from index

* Fix doc

* Change npm install to npm ci
Commit package-lock

* fix npm version

* Increase max_old_space_size

* Set react-scripts to 3.2.0

* Modify doc

cmd/ui/v1beta1/Dockerfile

@@ -1,7 +1,7 @@
-FROM node:10.16.2-alpine AS npm-build
+FROM node:12.18.1 AS npm-build
 
 ADD /pkg/ui/v1beta1/frontend /frontend
-RUN cd /frontend && npm install
+RUN cd /frontend && npm ci
 RUN cd /frontend && npm run build
 RUN rm -rf /frontend/node_modules
 

cmd/ui/v1beta1/main.go

@@ -8,21 +8,24 @@ import (
 
 	_ "k8s.io/client-go/plugin/pkg/client/auth/gcp"
 
+	common_v1beta1 "github.com/kubeflow/katib/pkg/common/v1beta1"
 	ui "github.com/kubeflow/katib/pkg/ui/v1beta1"
 )
 
 var (
-	port, host, buildDir *string
+	port, host, buildDir, dbManagerAddr *string
 )
 
 func init() {
-	port = flag.String("port", "80", "the port to listen to for incoming HTTP connections")
-	host = flag.String("host", "0.0.0.0", "the host to listen to for incoming HTTP connections")
-	buildDir = flag.String("build-dir", "/app/build", "the dir of frontend")
+	port = flag.String("port", "80", "The port to listen to for incoming HTTP connections")
+	host = flag.String("host", "0.0.0.0", "The host to listen to for incoming HTTP connections")
+	buildDir = flag.String("build-dir", "/app/build", "The dir of frontend")
+	dbManagerAddr = flag.String("db-manager-address", common_v1beta1.GetDBManagerAddr(), "The address of Katib DB manager")
 }
+
 func main() {
 	flag.Parse()
-	kuh := ui.NewKatibUIHandler()
+	kuh := ui.NewKatibUIHandler(*dbManagerAddr)
 
 	log.Printf("Serving the frontend dir %s", *buildDir)
 	frontend := http.FileServer(http.Dir(*buildDir))

pkg/ui/v1beta1/README.md

@@ -7,19 +7,19 @@ We are using [Material UI](https://material-ui.com/) to design frontend. Try to
 
 ## Folder structure
 
-1. `Dockerfile` and file to serve the UI `main.go` you can find under [cmd/ui/v1beta1](https://github.com/kubeflow/katib/tree/master/cmd/ui/v1beta1).
+1. You can find `Dockerfile` and `main.go` - file to serve the UI under [cmd/ui/v1beta1](https://github.com/kubeflow/katib/tree/master/cmd/ui/v1beta1).
 
-2. Go backend you can find under [pkg/ui/v1beta1](https://github.com/kubeflow/katib/tree/master/pkg/ui/v1beta1).
+1. You can find Go backend under [pkg/ui/v1beta1](https://github.com/kubeflow/katib/tree/master/pkg/ui/v1beta1).
 
-3. React frontend you can find under [pkg/ui/v1beta1/frontend](https://github.com/kubeflow/katib/tree/master/pkg/ui/v1beta1/frontend).
+1. You can find React frontend under [pkg/ui/v1beta1/frontend](https://github.com/kubeflow/katib/tree/master/pkg/ui/v1beta1/frontend).
 
 ## Requirements
 
 To make changes to the UI you need to install:
 
 - Tools, defined [here](https://github.com/kubeflow/katib/blob/master/docs/developer-guide.md#requirements).
 
-- `Node` (10.13 or later) and `npm` (6.13 or later). You can find [here](https://nodejs.org/en/download/) how to download it.
+- `node` (v12 or later) and `npm` (v6.13 or later). Recommended to install `node` and `npm` using [`nvm`](https://github.com/nvm-sh/nvm). After installing `nvm`, you can run `nvm install 12.18.1` to install `node` version 12.18.1 and run `nvm use 12.18.1` to use that version.
 
 ## Development
 
@@ -29,11 +29,11 @@ While development you have different ways to run Katib UI.
 
 1. Clone the repository.
 
-2. Go to `/frontend` folder.
+1. Go to `/frontend` folder.
 
-3. Run `npm install` to install all dependencies.
+1. Run `npm install` to install all dependencies.
 
-It will create `/frontend/node_modules` folder with all dependencies from `package.json`. If you want to add new package, edit `/frontend/package.json` file with new dependency.
+It creates `/frontend/node_modules` folder with all dependencies from [`package.json`](https://github.com/kubeflow/katib/blob/master/pkg/ui/v1beta1/frontend/package.json). If you want to add new package, run `npm install <package>@<version>`. That should update `/frontend/package.json` and `/frontend/package-lock.json` with the new dependency.
 
 ### Start frontend server
 
@@ -43,21 +43,33 @@ If you want to edit only frontend without connection to the backend, you can sta
 
 You can serve Katib UI locally. To make it you need to follow these steps:
 
-1. Run `npm run build` under `/frontend` folder. It will create `/frontend/build` directory with optimized production build.
+1. Run `npm run build` under `/frontend` folder. It creates `/frontend/build` directory with optimized production build.
 
-2. Go to `cmd/ui/v1beta1`.
+   If your `node` memory limit is not enough to build the frontend, you may see this error while building: `FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory`. To fix it, you can try to increase `node` memory limit. For that, change [`build`](https://github.com/kubeflow/katib/blob/master/pkg/ui/v1beta1/frontend/package.json#L28) script to `react-scripts --max_old_space_size=4096 build` to increase `node` memory up to 4 Gb.
 
-3. Run `main.go` file with appropriate flags. For example, if you clone Katib repository to `/home` folder, run this command:
+1. Run `kubectl port-forward svc/katib-db-manager 6789 -n kubeflow` to expose `katib-db-manager` service for external access. You can use [different ways](https://kubernetes.io/docs/tasks/access-application-cluster/) to get external address for Kubernetes service. After exposing service, you should be able to receive information by running `wget <external-ip>:<service-port>`. In case of port-forwarding above, you have to run `wget localhost:6789`.
 
-```
-go run main.go --build-dir=/home/katib/pkg/ui/v1beta1/frontend/build --port=8080
-```
+1. Go to `cmd/ui/v1beta1`.
+
+1. Run `main.go` file with appropriate flags, where:
+
+   - `--build-dir` - builded frontend directory.
+   - `--port` - port to access Katib UI.
+   - `--db-manager-address` - Katib DB manager external IP and port address.
+
+   For example, if you clone Katib repository to `/home` folder and use port-forwarding to expose `katib-db-manager`, run this command:
+
+   ```
+   go run main.go --build-dir=/home/katib/pkg/ui/v1beta1/frontend/build --port=8080 --db-manager-address=localhost:6789
+   ```
 
 After that, you can access the UI using this URL: `http://localhost:8080/katib/`.
 
 ## Production
 
-To run Katib UI in Production, after all changes in frontend and backend, you need to create an image for the UI. Under `katib` repository run this: `docker build . -f cmd/ui/v1beta1/Dockerfile -t <name of your image>` to build image. You can modify UI [deployment](https://github.com/kubeflow/katib/blob/master/manifests/v1beta1/ui/deployment.yaml#L24) with your new image. After this, follow [these steps](https://www.kubeflow.org/docs/components/hyperparameter-tuning/hyperparameter/#accessing-the-katib-ui) to access Katib UI.
+To run Katib UI in Production, after all changes in frontend and backend, you need to create an image for the UI. Under `/katib` directory run this: `docker build . -f cmd/ui/v1beta1/Dockerfile -t <name of your image>` to build the image. If Docker resources are not enough to build the frontend, you get `node` out of memory error. You can try to increase Docker resources or modify `package.json` as detailed [above](https://github.com/kubeflow/katib/tree/master/pkg/ui/v1beta1#serve-ui-frontend-and-backend) at step 1.
+
+After that, you can modify UI [deployment](https://github.com/kubeflow/katib/blob/master/manifests/v1beta1/ui/deployment.yaml#L24) with your new image. Then, follow [these steps](https://www.kubeflow.org/docs/components/hyperparameter-tuning/hyperparameter/#accessing-the-katib-ui) to access Katib UI.
 
 ## Code style
 
@@ -66,7 +78,7 @@ Check [here](https://prettier.io/docs/en/install.html), how to install Prettier
 
 ### IDE integration
 
-For VSCode you can install plugin: "Prettier - Code formatter" and it will pick Prettier config automatically.
+For VSCode you can install plugin: "Prettier - Code formatter" and it picks Prettier config automatically.
 
 You can edit [settings.json](https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations) file for VSCode to autoformat on save.
 

pkg/ui/v1beta1/backend.go

@@ -12,23 +12,24 @@ import (
 
 	experimentv1beta1 "github.com/kubeflow/katib/pkg/apis/controller/experiments/v1beta1"
 	api_pb_v1beta1 "github.com/kubeflow/katib/pkg/apis/manager/v1beta1"
-	common_v1beta1 "github.com/kubeflow/katib/pkg/common/v1beta1"
+
 	"github.com/kubeflow/katib/pkg/util/v1beta1/katibclient"
 )
 
-func NewKatibUIHandler() *KatibUIHandler {
+func NewKatibUIHandler(dbManagerAddr string) *KatibUIHandler {
 	kclient, err := katibclient.NewClient(client.Options{})
 	if err != nil {
 		log.Printf("NewClient for Katib failed: %v", err)
 		panic(err)
 	}
 	return &KatibUIHandler{
-		katibClient: kclient,
+		katibClient:   kclient,
+		dbManagerAddr: dbManagerAddr,
 	}
 }
 
 func (k *KatibUIHandler) connectManager() (*grpc.ClientConn, api_pb_v1beta1.ManagerClient) {
-	conn, err := grpc.Dial(common_v1beta1.GetDBManagerAddr(), grpc.WithInsecure())
+	conn, err := grpc.Dial(k.dbManagerAddr, grpc.WithInsecure())
 	if err != nil {
 		log.Printf("Dial to GRPC failed: %v", err)
 		return nil, nil

pkg/ui/v1beta1/frontend/.gitignore

@@ -8,7 +8,6 @@
 # testing
 /coverage
 
-
 # misc
 .DS_Store
 .env.local
@@ -20,8 +19,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# package-lock
-package-lock.json
-
 # build
 /build