SUBMARINE-681. [WEB] Rewrite form with NG-ZORRO in environment page of workbench web
### 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
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 0d100c6..d8bef06 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 @@
</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 e324e4c..d936ad9 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 @@
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 @@
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 @@
}
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) {
