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. Dockerfile and file to serve the UI main.go you can find under cmd/ui/v1beta1.

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

3. React frontend you can find under pkg/ui/v1beta1/frontend.

Requirements

To make changes to the UI you need to install:

• Tools, defined here.

• Node (10.13 or later) and npm (6.13 or later). You can find here how to download it.

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

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 will create /frontend/build directory with optimized production build.

2. Go to cmd/ui/v1beta1.

3. Run main.go file with appropriate flags. For example, if you clone Katib repository to /home folder, run this command:

go run main.go --build-dir=/home/katib/pkg/ui/v1beta1/frontend/build --port=8080

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 with your new image. After this, 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 will pick 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 ConfigMapsList
• type Decoder
• type JobType
• type JobView
• type KatibUIHandler
  • func NewKatibUIHandler() *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) FetchAllHPJobs(w http.ResponseWriter, r *http.Request)
  • func (k *KatibUIHandler) FetchAllNASJobs(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 TemplatesList
• type TrialTemplatesResponse
• type TrialTemplatesView

Constants

const (
	JobTypeHP        = "HP"
	JobTypeNAS       = "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 ConfigMapsList

type ConfigMapsList struct {
	ConfigMapName string
	TemplatesList []TemplatesList
}

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 JobType

type JobType string

type JobView

type JobView struct {
	Name      string
	Status    string
	Namespace string
}

type KatibUIHandler

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

func NewKatibUIHandler

func NewKatibUIHandler() *KatibUIHandler

func (*KatibUIHandler) AddTemplate

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

AddTemplate adds template to ConfigMap TODO: Add functionality to create new 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 delete template in ConfigMap TODO: Add functionality to delete configMap if there is no templates

func (*KatibUIHandler) EditTemplate

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

EditTemplate edits template in ConfigMap

func (*KatibUIHandler) FetchAllHPJobs

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

FetchAllHPJobs gets experiments in all namespaces.

func (*KatibUIHandler) FetchAllNASJobs

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

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 TemplatesList

type TemplatesList struct {
	Name string
	Yaml string
}

type TrialTemplatesResponse

type TrialTemplatesResponse struct {
	Data []TrialTemplatesView
}

type TrialTemplatesView

type TrialTemplatesView struct {
	Namespace      string
	ConfigMapsList []ConfigMapsList
}