From f4670ad8be4c94a60c3b0fdf7716ebf6837404ed Mon Sep 17 00:00:00 2001
From: kobe860219 <kobe860219@gmail.com>
Date: Tue, 24 Nov 2020 12:02:11 +0800
Subject: [PATCH] SUBMARINE-681. [WEB] Rewrite form with NG-ZORRO in
 environment page of workbench web
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### What is this PR for?
We use NG-ZORRO as the UI Component library in Workbench Web. But the form in environment page of WEB has not been used yet. We should make the WEB interface all use uniformly.

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

### Todos

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

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

### Screenshots (if appropriate)
<img width="1440" alt="截圖 2020-11-24 下午12 06 22" src="https://user-images.githubusercontent.com/48027290/100047460-7da11400-2e4d-11eb-821a-10bc43ef111a.png">
<img width="1440" alt="截圖 2020-11-24 下午12 03 24" src="https://user-images.githubusercontent.com/48027290/100047466-809c0480-2e4d-11eb-9b7a-8f7a0f65c74f.png">

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

Author: kobe860219 <kobe860219@gmail.com>

Closes #459 from kobe860219/SUBMARINE-681 and squashes the following commits:

7d6d405 [kobe860219] SUBMARINE-681. [WEB] Rewrite form with NG-ZORRO in environment page of workbench web
3a38862 [kobe860219] SUBMARINE-681. [WEB] Rewrite form with NG-ZORRO in environment page of workbench web
---
 .../environment/environment.component.html    | 224 +++++++++++-------
 .../environment/environment.component.ts      |  28 ++-
 2 files changed, 150 insertions(+), 102 deletions(-)

diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/environment/environment.component.html b/submarine-workbench/workbench-web/src/app/pages/workbench/environment/environment.component.html
index 0d100c68f5..d8bef06370 100644
--- a/submarine-workbench/workbench-web/src/app/pages/workbench/environment/environment.component.html
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/environment/environment.component.html
@@ -119,102 +119,144 @@ <h2>Environment</h2>
 </nz-layout>
 
 <nz-modal [(nzVisible)]="isVisible" nzTitle="Create Environment" [nzWidth]="700" (nzOnCancel)="isVisible = false">
-  <div *nzModalFooter>
-    <button nz-button nzType="default" (click)="closeModal()">Cancel</button>
-    <button id="go" nz-button nzType="primary" [disabled]="checkStatus()" (click)="createEnvironment()">Create</button>
-  </div>
-  <div>
-    <form [formGroup]="environmentForm">
-      <h2>Meta</h2>
-      <div class="single-field-group">
-        <label for="environmentName">
-          <span class="red-star">*</span>
-          Environment Name
-        </label>
-        <input
-          required
-          nz-input
-          type="text"
-          name="environmentName"
-          id="environmentName"
-          formControlName="environmentName"
-        />
+  <form nz-form [formGroup]="environmentForm" nzLayout="horizontal">
+    <div *nzModalFooter>
+      <button nz-button nzType="default" (click)="closeModal()">Cancel</button>
+      <button id="go" nz-button nzType="primary" [disabled]="checkStatus()" (click)="createEnvironment()">Create</button>
+    </div>
+    <h2>Meta</h2>
+    <nz-form-item>
+      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="environmentName">
+        Environment Name
+      </nz-form-label>
+      <div nz-col nzSpan="16">
+        <nz-form-control nzErrorTip="Please input environment name!">
+          <input
+            required
+            nz-input
+            style="width: 80%;"
+            type="text"
+            name="environmentName"
+            id="environmentName"
+            formControlName="environmentName"
+          />
+        </nz-form-control>
       </div>
-      <div class="single-field-group">
-        <label for="dockerImage">
-          <span class="red-star">*</span>
-          Docker Image
-        </label>
-        <input required nz-input type="text" name="dockerImage" id="dockerImage" formControlName="dockerImage" />
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="dockerImage">
+        Docker Image
+      </nz-form-label>
+      <div nz-col nzSpan="16">
+        <nz-form-control nzErrorTip="Please input docker image!">
+          <input 
+            required 
+            nz-input 
+            style="width: 80%;"
+            type="text" 
+            name="dockerImage" 
+            id="dockerImage" 
+            formControlName="dockerImage" />
+        </nz-form-control>
       </div>
-      <h2>Kernel Spec</h2>
-      <div class="single-field-group">
-        <label for="name">
-          <span class="red-star">*</span>
-          Name
-        </label>
-        <input required nz-input type="text" name="name" id="name" formControlName="name" />
+    </nz-form-item>
+    <h2>Kernel Spec</h2>
+    <nz-form-item>
+      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">
+        Name
+      </nz-form-label>
+      <div nz-col nzSpan="16">
+        <nz-form-control nzErrorTip="Please input name!">
+          <input 
+            required 
+            nz-input 
+            style="width: 80%;"
+            type="text" 
+            name="name" 
+            id="name" 
+            formControlName="name" />
+        </nz-form-control>
       </div>
-      <div formArrayName="channels">
-        <div *ngFor="let channel of channels.controls; let i = index">
-          <div class="single-field-group">
-            <label>Channel {{ i + 1 }}:</label>
-            <input required nz-input type="text" name="channel{{ i }}" id="channel{{ i }}" [formControlName]="i" />
-            <i
-              nz-icon
-              style="margin-left: 5px;"
-              nzType="close-circle"
-              nzTheme="fill"
-              (click)="deleteItem(channels, i)"
-            ></i>
+    </nz-form-item>
+    <div formArrayName="channels">
+      <div *ngFor="let channel of channels.controls; let i = index">
+        <nz-form-item>
+          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="channel">
+            Channel {{ i + 1 }}
+          </nz-form-label>
+          <div nz-col nzSpan="16">
+            <nz-form-control nzErrorTip="Please input channel!">
+              <input 
+                required 
+                nz-input 
+                style="width: 80%;" 
+                type="text" 
+                name="channel{{ i }}" 
+                id="channel{{ i }}" 
+                [formControlName]="i" />
+              <i
+                nz-icon
+                style="margin-left: 5px;"
+                nzType="close-circle"
+                nzTheme="fill"
+                (click)="deleteItem(channels, i)"
+              ></i>
+            </nz-form-control>
           </div>
-        </div>
+        </nz-form-item>
       </div>
-      <div style="margin: 10px;">
-        <button
-          nz-button
-          style="display: block; margin: auto;"
-          id="addChannel-btn"
-          type="default"
-          (click)="addChannel()"
-        >
-          New Channel
-        </button>
-      </div>
-      <div formArrayName="dependencies">
-        <div *ngFor="let channel of dependencies.controls; let i = index">
-          <div class="single-field-group">
-            <label>Dependency {{ i + 1 }}:</label>
-            <input
-              required
-              nz-input
-              type="text"
-              name="dependencies{{ i }}"
-              id="dependencies{{ i }}"
-              [formControlName]="i"
-            />
-            <i
-              nz-icon
-              style="margin-left: 5px;"
-              nzType="close-circle"
-              nzTheme="fill"
-              (click)="deleteItem(dependencies, i)"
-            ></i>
+    </div>
+    <div style="margin: 10px;">
+      <button
+        nz-button
+        style="display: block; margin: auto;"
+        id="addChannel-btn"
+        type="default"
+        (click)="addChannel()"
+      >
+        New Channel
+      </button>
+    </div>
+    <div formArrayName="dependencies">
+      <div *ngFor="let channel of dependencies.controls; let i = index">
+        <nz-form-item>
+          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="dependency">
+            Dependency {{ i + 1 }}
+          </nz-form-label>
+          <div nz-col nzSpan="16">
+            <nz-form-control nzErrorTip="Please input dependency!">
+              <input
+                required
+                nz-input
+                style="width: 80%;"
+                type="text"
+                name="dependencies{{ i }}"
+                id="dependencies{{ i }}"
+                [formControlName]="i"
+              />
+              <i
+                nz-icon
+                style="margin-left: 5px;"
+                nzType="close-circle"
+                nzTheme="fill"
+                (click)="deleteItem(dependencies, i)"
+              ></i>
+            </nz-form-control>
           </div>
-        </div>
+        </nz-form-item>
       </div>
-      <div style="margin: 10px;">
-        <button
-          style="margin-top: 10px;"
-          nz-button
-          style="display: block; margin: auto;"
-          id="addDep-btn"
-          type="default"
-          (click)="addDependencies()"
-        >
-          New Dependency
-        </button>
-      </div>
-    </form>
-  </div>
+    </div>
+    <div style="margin: 10px;">
+      <button
+        style="margin-top: 10px;"
+        nz-button
+        style="display: block; margin: auto;"
+        id="addDep-btn"
+        type="default"
+        (click)="addDependencies()"
+      >
+        New Dependency
+      </button>
+    </div>
+  </form>
 </nz-modal>
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/environment/environment.component.ts b/submarine-workbench/workbench-web/src/app/pages/workbench/environment/environment.component.ts
index e324e4c663..d936ad926c 100644
--- a/submarine-workbench/workbench-web/src/app/pages/workbench/environment/environment.component.ts
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/environment/environment.component.ts
@@ -18,10 +18,11 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Environment } from '@submarine/interfaces/environment-info';
 import { EnvironmentService } from '@submarine/services/environment.service';
 import { NzMessageService } from 'ng-zorro-antd';
+import { ExperimentValidatorService } from '@submarine/services/experiment.validator.service';
 
 @Component({
   selector: 'submarine-environment',
@@ -29,7 +30,12 @@ import { NzMessageService } from 'ng-zorro-antd';
   styleUrls: ['./environment.component.scss']
 })
 export class EnvironmentComponent implements OnInit {
-  constructor(private environmentService: EnvironmentService, private nzMessageService: NzMessageService) {}
+  constructor(
+    private environmentService: EnvironmentService, 
+    private nzMessageService: NzMessageService,
+    private fb: FormBuilder,
+    private experimentValidatorService: ExperimentValidatorService
+    ) {}
 
   environmentList: Environment[] = [];
   checkedList: boolean[] = [];
@@ -39,13 +45,13 @@ export class EnvironmentComponent implements OnInit {
   environmentForm;
 
   ngOnInit() {
-    this.environmentForm = new FormGroup({
-      environmentName: new FormControl(null, Validators.required),
-      dockerImage: new FormControl(null, Validators.required),
-      name: new FormControl(null, Validators.required),
-      channels: new FormArray([]),
-      dependencies: new FormArray([])
-    });
+    this.environmentForm = this.fb.group({
+      environmentName: [null, Validators.required],
+      dockerImage: [null, Validators.required],
+      name: [null, Validators.required],
+      channels: this.fb.array([]),
+      dependencies: this.fb.array([])
+    })
     this.fetchEnvironmentList();
   }
 
@@ -103,11 +109,11 @@ export class EnvironmentComponent implements OnInit {
   }
 
   addChannel() {
-    this.channels.push(new FormControl('', Validators.required));
+    this.channels.push(this.fb.control(null, Validators.required));
   }
 
   addDependencies() {
-    this.dependencies.push(new FormControl('', Validators.required));
+    this.dependencies.push(this.fb.control(null, Validators.required));
   }
 
   deleteItem(arr: FormArray, index: number) {