From 8befc570914cff5a6f981d580a03364f3133456b Mon Sep 17 00:00:00 2001
From: kobe860219 <kobe860219@gmail.com>
Date: Thu, 19 Nov 2020 01:13:05 +0800
Subject: [PATCH] SUBMARINE-676. Add NG-ZORRO UI component library to notebook
 page

---
 .../notebook/notebook.component.html          | 144 ++++++++++--------
 .../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 a7ffdd113..36f7ef55e 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 @@ <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"
@@ -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>
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 5c490c38b..402a08dd7 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
       }`;