Skip to content
This repository was archived by the owner on Jul 10, 2024. It is now read-only.

Commit

Permalink
SUBMARINE-676. Add NG-ZORRO UI component library to notebook page
Browse files Browse the repository at this point in the history 
### What is this PR for?
We use NG-ZORRO as the UI Component library in Workbench Web. But the form in notebook page of WEB has not been used yet. We should make the WEB interface all use uniformly.

### What type of PR is it?
[Refactoring]

### Todos

### What is the Jira issue?
https://issues.apache.org/jira/browse/SUBMARINE-676

### How should this be tested?
https://travis-ci.org/github/kobe860219/submarine/builds/744476551

### Screenshots (if appropriate)
![x3ie8-uk0nv](https://user-images.githubusercontent.com/48027290/99566311-b2edd200-2a07-11eb-96ea-c387bfef4ebe.gif)

### Questions:
* Does the licenses files need update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No

Author: kobe860219 <[email protected]>

Closes #454 from kobe860219/SUBMARINE-676 and squashes the following commits:

8befc57 [kobe860219] SUBMARINE-676. Add NG-ZORRO UI component library to notebook page
  • Loading branch information
@kobe860219 @lowc1012
kobe860219 authored and lowc1012 committed Nov 28, 2020
1 parent 1a58d0a commit c360271
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 80 deletions.
144 changes: 77 additions & 67 deletions submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,26 +105,26 @@ <h2>Notebook List</h2>
(nzOnCancel)="isVisible = false"
[nzWidth]="700"
>
<form [formGroup]="notebookForm">
<form nz-form [formGroup]="notebookForm" nzLayout="horizontal">
<div *nzModalFooter>
<button nz-button nzType="default" (click)="isVisible = false">Cancel</button>
<button id="create-btn" nz-button nzType="primary" [disabled]="checkStatus()" (click)="handleOk()">
Create
</button>
</div>
<div style="margin-top: 30px;">
<div class="newNotebookForm">
<label for="notebookName">
<span class="red-star">*</span>
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="notebookName">
Notebook Name
</label>
<input nz-input required type="text" name="notebookName" id="notebookName" formControlName="notebookName" />
</div>
<div class="newNotebookForm">
<label for="environment">
<span class="red-star">*</span>
Environment
</label>
</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input nz-input required type="text" name="notebookName" id="notebookName" formControlName="notebookName" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="environment">
Environment
</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<nz-select required name="select-envName" formControlName="envName">
<nz-option
*ngFor="let env of envNameList; let i; of: index"
Expand All @@ -133,67 +133,77 @@ <h2>Notebook List</h2>
[nzLabel]="env"
></nz-option>
</nz-select>
</div>
<div class="newNotebookForm">
<label for="cpus">
<span class="red-star">*</span>
CPU
</label>
<input nz-input required type="number" name="cpus" id="cpus" formControlName="cpus" />
</div>
<div class="newNotebookForm">
<label for="gpus">
GPU
</label>
<input nz-input type="number" name="gpus" id="gpus" formControlName="gpus" />
</div>
<div class="newNotebookForm">
<label for="memoryNum">
<span class="red-star">*</span>
Memory
</label>
<div class="memory-input-group">
<input nz-input required name="memoryNum" placeholder="EX:1024" formControlName="memoryNum" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="cpus">
CPU
</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input nz-input min="0" required type="number" name="cpus" id="cpus" formControlName="cpus" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="gpus">
GPU
</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input nz-input min="0" type="number" name="gpus" id="gpus" formControlName="gpus" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="memoryNum">
Memory
</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<div nz-col nzSpan="6">
<input nz-input required name="memoryNum" placeholder="EX:1024" formControlName="memoryNum" />
</div>
<div nz-col nzSpan="6" style="margin-left: 5px;">
<nz-select formControlName="unit">
<nz-option *ngFor="let unit of MEMORY_UNITS" [nzValue]="unit" [nzLabel]="unit"></nz-option>
</nz-select>
</div>
</div>
<div formArrayName="envVars">
<ng-container *ngFor="let envVar of envVars.controls; index as i">
<div [formGroupName]="i" class="newNotebookForm">
<label for="envVar{{ i }}">EnvVar {{ i + 1 }}</label>
<div>
<input
style="width: 30%;"
nz-input
id="key{{ i }}"
name="key{{ i }}"
placeholder="Key"
formControlName="key"
/>
<input
style="width: 50%; margin-left: 10px;"
nz-input
id="value{{ i }}"
name="value{{ i }}"
placeholder="Value"
formControlName="value"
/>
<i
nz-icon
style="margin-left: 5px;"
nzType="close-circle"
nzTheme="fill"
(click)="deleteItem(envVars, i)"
></i>
</div>
</nz-form-control>
</nz-form-item>
<div formArrayName="envVars">
<ng-container *ngFor="let envVar of envVars.controls; index as i">
<nz-form-item>
<nz-form-label nzRequired [nzSm]="6" [nzXs]="24">EnvVar{{ i+1 }}</nz-form-label>
<div [formGroupName]="i">
<div nz-col nzSpan="12">
<input
style="width: 30%;"
nz-input
required
id="key{{ i }}"
name="key{{ i }}"
placeholder="Key"
formControlName="key"
/>
<input
style="width: 60%; margin-left: 10px;"
nz-input
required
id="value{{ i }}"
name="value{{ i }}"
placeholder="Value"
formControlName="value"
/>
<i
nz-icon
style="margin-left: 5px;"
nzType="close-circle"
nzTheme="fill"
(click)="deleteItem(envVars, i)"
></i>
</div>
</ng-container>
</div>
</div>
</nz-form-item>
</ng-container>
</div>
<button nz-button style="display: block; margin: auto;" id="envVar-btn" type="default" (click)="onCreateEnvVar()">
Add New EnvVar
New EnvVar
</button>
</form>
</nz-modal>
27 changes: 14 additions & 13 deletions submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,13 @@
*/

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
import { FormArray, FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms';
import { NotebookService } from '@submarine/services/notebook.service';
import { NzMessageService } from 'ng-zorro-antd/message';
import { EnvironmentService } from '@submarine/services/environment.service';
import { ExperimentValidatorService } from '@submarine/services/experiment.validator.service';
import { UserService } from '@submarine/services/user.service';
import { nullSafeIsEquivalent } from '@angular/compiler/src/output/output_ast';

@Component({
selector: 'submarine-notebook',
Expand Down Expand Up @@ -56,7 +57,8 @@ export class NotebookComponent implements OnInit {
private nzMessageService: NzMessageService,
private environmentService: EnvironmentService,
private experimentValidatorService: ExperimentValidatorService,
private userService: UserService
private userService: UserService,
private fb: FormBuilder
) {}

ngOnInit() {
Expand All @@ -65,18 +67,17 @@ export class NotebookComponent implements OnInit {
this.fetchNotebookList(this.userId);
});

this.notebookForm = new FormGroup({
notebookName: new FormControl('', [
this.notebookForm = this.fb.group({
notebookName: [null, [
Validators.maxLength(63),
Validators.pattern('^([a-z]|[a-z][-a-z0-9]*[a-z0-9])$'),
Validators.required
]),
envName: new FormControl(null, Validators.required), // Environment
envVars: new FormArray([], [this.experimentValidatorService.nameValidatorFactory('key')]),
cpus: new FormControl(null, [Validators.min(1), Validators.required]),
gpus: new FormControl(null),
memoryNum: new FormControl(null, [Validators.required]),
unit: new FormControl(this.MEMORY_UNITS[0], [Validators.required])
Validators.required]],
envName: [null, Validators.required], // Environment
envVars: this.fb.array([], [this.experimentValidatorService.nameValidatorFactory('key')]),
cpus: [null, [Validators.min(1), Validators.required]],
gpus: [null],
memoryNum: [null, [Validators.required]],
unit: [this.MEMORY_UNITS[0], [Validators.required]]
});
this.fetchEnvList();
}
Expand Down Expand Up @@ -238,7 +239,7 @@ export class NotebookComponent implements OnInit {
createNotebookSpec() {
// Check GPU, then develope resources spec
let resourceSpec;
if (this.notebookForm.get('gpus').value === 0) {
if (this.notebookForm.get('gpus').value === 0 || this.notebookForm.get('gpus').value == null) {
resourceSpec = `cpu=${this.notebookForm.get('cpus').value},memory=${this.notebookForm.get('memoryNum').value}${
this.notebookForm.get('unit').value
}`;
Expand Down

0 comments on commit c360271

Please sign in to comment.