This is an automated email from the ASF dual-hosted git repository.
wenchih pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/submarine.git
The following commit(s) were added to refs/heads/master by this push:
new c360271 SUBMARINE-676. Add NG-ZORRO UI component library to notebook
page
c360271 is described below
commit c360271fd35004e442c8e94c56fc70b66139cbb1
Author: kobe860219 <[email protected]>
AuthorDate: Thu Nov 19 01:13:05 2020 +0800
SUBMARINE-676. Add NG-ZORRO UI component library to notebook page
### 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)
### 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
---
.../workbench/notebook/notebook.component.html | 144 +++++++++++----------
.../pages/workbench/notebook/notebook.component.ts | 27 ++--
2 files changed, 91 insertions(+), 80 deletions(-)
diff --git
a/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook.component.html
b/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook.component.html
index a7ffdd1..36f7ef5 100644
---
a/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook.component.html
+++
b/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook.component.html
@@ -105,26 +105,26 @@
(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"
@@ -133,67 +133,77 @@
[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>
diff --git
a/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook.component.ts
b/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook.component.ts
index 5c490c3..402a08d 100644
---
a/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook.component.ts
+++
b/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook.component.ts
@@ -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',
@@ -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() {
@@ -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();
}
@@ -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
}`;
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
