Skip to content
This repository has been archived by the owner on Jul 10, 2024. It is now read-only.

Commit

Permalink
SUBMARINE-681. [WEB] Rewrite form with NG-ZORRO in environment page o…
Browse files Browse the repository at this point in the history 
…f 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 <[email protected]>

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
  • Loading branch information
@kobe860219 @pingsutw
kobe860219 authored and pingsutw committed Nov 29, 2020
1 parent 514fa33 commit f4670ad
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 102 deletions.
224 changes: 133 additions & 91 deletions ...ne-workbench/workbench-web/src/app/pages/workbench/environment/environment.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
28 changes: 17 additions & 11 deletions ...rine-workbench/workbench-web/src/app/pages/workbench/environment/environment.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,24 @@
*/

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',
templateUrl: './environment.component.html',
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[] = [];
Expand All @@ -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();
}

Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit f4670ad

Please sign in to comment.