v1beta1

README

Katib User Interface

This is the source code for the Katib UI. Current version of Katib UI is v1beta1. On the official Kubeflow website here you can find information how to use Katib UI. We are using Angular framework to create frontend and Go as a backend.

We are using Material UI to design frontend. Try to use Material UI components to implement new Katib UI features.

Folder structure

1. You can find Dockerfile and main.go - file to serve the UI under cmd/new-ui/v1beta1

2. You can find Go backend under pkg/new-ui/v1beta1

3. You can find Angular frontend under pkg/new-ui/v1beta1/frontend

Requirements

To make changes to the UI you need to install:

• Tools, defined here.

• node (v12 or later) and npm (v6.13 or later). Recommended to install node and npm using 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

While development you have different ways to run Katib UI.

1. Build and serve only the frontend. The dev server will also be proxying requests to the backend
2. Build the frontend and serve it via the backend locally

Serve only the frontend

You can run a webpack dev server that only exposes the frontend files, which can be useful for testing only the UI of the app. There's also a proxy.conf.json file which configures the dev server to send the backend requests to port 8000.

In order to build the UI locally, and expose it with a webpack dev server you will need to:

1. Create a module from the common library
2. Install the node modules of the app and also link the common-library module

You can build the common library with:

cd /tmp && git clone https://github.com/kubeflow/kubeflow.git \
  && cd kubeflow \
  && git checkout 24bcb8e \
  && cd components/crud-web-apps/common/frontend/kubeflow-common-lib

# build the common library module
npm i
npm run build

# link the module to your npm packages
# depending on where you npm stores the global packages you
# might need to use sudo
npm link dist/kubeflow

And then build and run the UI locally, on localhost:4200, with:

# If you've already cloned the repo then skip this step and just
# navigate to the pkg/new-ui/v1beta1/frontend dir
cd /tmp && git clone https://github.com/kubeflow/katib.git \
  && cd katib/pkg/new-ui/v1beta1/frontend

npm i
npm link kubeflow
npm run start

Serve the UI from the backend

This is the recommended way to test the web app e2e. In order to build the UI and serve it via the backend, locally, you will need to:

1. Build the UI locally. You have to follow the steps from the previous section, but instead of running npm run start you need to run npm run build:prod. It builds the frontend artifacts under frontend/dist/static folder.

   Moreover, you are able to run npm run build:watch instead of npm run build:prod. In that case, it starts a process which is watching the source code changes and building the frontend artifacts under frontend/dist/static folder.

   Learn more about Angular scripts in the official guide.

2. 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 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.

3. Go to cmd/new-ui/v1beta1.

4. Run main.go file with appropriate flags, where:

   • --build-dir - directory with the frontend artifacts.
   • --port - port to access Katib UI.
   • --db-manager-address - Katib DB manager external IP and port address.

   For example, if you use port-forwarding to expose katib-db-manager, run this command:

   go run main.go --build-dir=../../../pkg/new-ui/v1beta1/frontend/dist --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 directory run this: docker build . -f cmd/new-ui/v1beta1/Dockerfile -t <name of your image> to build the image.

After that, you can modify UI deployment with your new image. Then, follow these steps to access Katib UI.

Code style

To make frontend code consistent and easy to review we use Prettier. You can find Prettier config here. Check here, how to install Prettier CLI to check and format your code.

IDE integration

For VSCode you can install plugin: "Prettier - Code formatter" and it picks Prettier config automatically.

You can edit settings.json file for VSCode to autoformat on save.

  "settings": {
    "editor.formatOnSave": true
  }

For others IDE see this.

Check and format code

Before submitting PR check and format your code. To check your code run npm run format:check under /frontend folder. To format your code run npm run format:write under /frontend folder. If all files formatted you can submit the PR.

If you don't want to format some code, here is an instruction how to disable Prettier.

Documentation

Index

• Constants
• Variables
• type Block
• type ConfigMap
• type Decoder
• type ExperimentView
• type JobType
• type KatibUIHandler
  • func NewKatibUIHandler(dbManagerAddr string) *KatibUIHandler
  • func (k *KatibUIHandler) AddTemplate(w http.ResponseWriter, r *http.Request)
  • func (k *KatibUIHandler) CreateExperiment(w http.ResponseWriter, r *http.Request)
  • func (k *KatibUIHandler) DeleteExperiment(w http.ResponseWriter, r *http.Request)
  • func (k *KatibUIHandler) DeleteTemplate(w http.ResponseWriter, r *http.Request)
  • func (k *KatibUIHandler) EditTemplate(w http.ResponseWriter, r *http.Request)
  • func (k *KatibUIHandler) FetchAllExperiments(w http.ResponseWriter, r *http.Request)
  • func (k *KatibUIHandler) FetchExperiment(w http.ResponseWriter, r *http.Request)
  • func (k *KatibUIHandler) FetchHPJobInfo(w http.ResponseWriter, r *http.Request)
  • func (k *KatibUIHandler) FetchHPJobTrialInfo(w http.ResponseWriter, r *http.Request)
  • func (k *KatibUIHandler) FetchNASJobInfo(w http.ResponseWriter, r *http.Request)
  • func (k *KatibUIHandler) FetchNamespaces(w http.ResponseWriter, r *http.Request)
  • func (k *KatibUIHandler) FetchSuggestion(w http.ResponseWriter, r *http.Request)
  • func (k *KatibUIHandler) FetchTrialTemplates(w http.ResponseWriter, r *http.Request)
  • func (k *KatibUIHandler) ServeIndex(buildDir string) func(w http.ResponseWriter, r *http.Request)
• type NNView
• type Option
• type Template
• type TrialTemplatesDataView
• type TrialTemplatesResponse

Constants

const (
	ExperimentTypeHP  = "hp"
	ExperimentTypeNAS = "nas"
	ActionTypeAdd     = "add"
	ActionTypeEdit    = "edit"
	ActionTypeDelete  = "delete"
)

Variables

var (
	TrialTemplateLabel = map[string]string{
		consts.LabelTrialTemplateConfigMapName: consts.LabelTrialTemplateConfigMapValue}
)

Types

type Block

type Block struct {
	ID    int    `json:"opt_id"`
	Type  string `json:"opt_type"`
	Param Option `json:"opt_params"`
}

type ConfigMap

type ConfigMap struct {
	ConfigMapName string
	Templates     []Template
}

type Decoder

type Decoder struct {
	Layers     int            `json:"num_layers"`
	InputSize  []int          `json:"input_size"`
	OutputSize []int          `json:"output_size"`
	Embedding  map[int]*Block `json:"embedding"`
}

type ExperimentView

type ExperimentView struct {
	Name      string `json:"name"`
	Namespace string `json:"namespace"`
	Type      string `json:"type"`
	Status    string `json:"status"`
	v1beta1experiment.ExperimentStatus
}

type JobType

type JobType string

type KatibUIHandler

type KatibUIHandler struct {
	// contains filtered or unexported fields
}

func NewKatibUIHandler

func NewKatibUIHandler(dbManagerAddr string) *KatibUIHandler

func (*KatibUIHandler) AddTemplate

func (k *KatibUIHandler) AddTemplate(w http.ResponseWriter, r *http.Request)

AddTemplate adds template to ConfigMap

func (*KatibUIHandler) CreateExperiment

func (k *KatibUIHandler) CreateExperiment(w http.ResponseWriter, r *http.Request)

func (*KatibUIHandler) DeleteExperiment

func (k *KatibUIHandler) DeleteExperiment(w http.ResponseWriter, r *http.Request)

func (*KatibUIHandler) DeleteTemplate

func (k *KatibUIHandler) DeleteTemplate(w http.ResponseWriter, r *http.Request)

DeleteTemplate deletes template in ConfigMap

func (*KatibUIHandler) EditTemplate

func (k *KatibUIHandler) EditTemplate(w http.ResponseWriter, r *http.Request)

EditTemplate edits template in ConfigMap

func (*KatibUIHandler) FetchAllExperiments

func (k *KatibUIHandler) FetchAllExperiments(w http.ResponseWriter, r *http.Request)

FetchAllExperiments gets HP and NAS experiments in all namespaces.

func (*KatibUIHandler) FetchExperiment

func (k *KatibUIHandler) FetchExperiment(w http.ResponseWriter, r *http.Request)

FetchExperiment gets experiment in specific namespace.

func (*KatibUIHandler) FetchHPJobInfo

func (k *KatibUIHandler) FetchHPJobInfo(w http.ResponseWriter, r *http.Request)

func (*KatibUIHandler) FetchHPJobTrialInfo

func (k *KatibUIHandler) FetchHPJobTrialInfo(w http.ResponseWriter, r *http.Request)

FetchHPJobTrialInfo returns all metrics for the HP Job Trial

func (*KatibUIHandler) FetchNASJobInfo

func (k *KatibUIHandler) FetchNASJobInfo(w http.ResponseWriter, r *http.Request)

func (*KatibUIHandler) FetchNamespaces

func (k *KatibUIHandler) FetchNamespaces(w http.ResponseWriter, r *http.Request)

func (*KatibUIHandler) FetchSuggestion

func (k *KatibUIHandler) FetchSuggestion(w http.ResponseWriter, r *http.Request)

FetchSuggestion gets suggestion in specific namespace

func (*KatibUIHandler) FetchTrialTemplates

func (k *KatibUIHandler) FetchTrialTemplates(w http.ResponseWriter, r *http.Request)

FetchTrialTemplates gets all trial templates in all namespaces

func (*KatibUIHandler) ServeIndex

func (k *KatibUIHandler) ServeIndex(buildDir string) func(w http.ResponseWriter, r *http.Request)

ServeIndex will return index.html for any non-API URL

type NNView

type NNView struct {
	Name         string
	TrialName    string
	Architecture string
	MetricsName  []string
	MetricsValue []string
}

type Option

type Option struct {
	FilterNumber string `json:"num_filter"`
	FilterSize   string `json:"filter_size"`
	Stride       string `json:"stride"`
}

type Template

type Template struct {
	Path string
	Yaml string
}

type TrialTemplatesDataView

type TrialTemplatesDataView struct {
	ConfigMapNamespace string
	ConfigMaps         []ConfigMap
}

type TrialTemplatesResponse

type TrialTemplatesResponse struct {
	Data []TrialTemplatesDataView
}