Skip to content

Commit

Permalink
SUBMARINE-676. Add NG-ZORRO UI component library to notebook page
Browse files Browse the repository at this point in the history
  • Loading branch information
@kobe860219
kobe860219 committed Nov 27, 2020
1 parent 4c6f7f1 commit 8befc57
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
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
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 8befc57

Please sign in to comment.