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 React 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/ui/v1beta1.

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

3. You can find React frontend under pkg/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.

First time

1. Clone the repository.

2. Go to /frontend folder.

3. Run npm install to install all dependencies.

It creates /frontend/node_modules folder with all dependencies from 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

If you want to edit only frontend without connection to the backend, you can start frontend server in your local environment. For it, run npm run start under /frontend folder. You can access the UI using this URL: http://localhost:3000/.

Serve UI frontend and backend

You can serve Katib UI locally. To make it you need to follow these steps:

1. Run npm run build under /frontend folder. It creates /frontend/build directory with optimized production build.

   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 script to react-scripts --max_old_space_size=4096 build to increase node memory up to 4 Gb.

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/ui/v1beta1.

4. 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 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 at step 1.

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) 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) SubmitParamsJob(w http.ResponseWriter, r *http.Request)
  • func (k *KatibUIHandler) SubmitYamlJob(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
	Status    string
	Namespace string
	Type      string
}

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) 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) SubmitParamsJob

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

func (*KatibUIHandler) SubmitYamlJob

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

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
}