This is an automated email from the ASF dual-hosted git repository.
liuxun pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/submarine.git
The following commit(s) were added to refs/heads/master by this push:
new ca2af0f SUBMARINE-522. [WEB] Improve experiment information page
ca2af0f is described below
commit ca2af0f295244f8e3bc99890c1cdf9ef7ec5bcf4
Author: kobe860219 <[email protected]>
AuthorDate: Sun Jun 28 21:59:30 2020 +0800
SUBMARINE-522. [WEB] Improve experiment information page
### What is this PR for?
1. Pre-add column of duration. (Future work)
2. Support pod select, and improve log page.
### What type of PR is it?
[ Feature]
### Todos
### What is the Jira issue?
https://issues.apache.org/jira/browse/SUBMARINE-522
### How should this be tested?
https://travis-ci.org/github/kobe860219/submarine
### Screenshots (if appropriate)
<img width="1402" alt="螢幕快照 2020-06-29 下午8 05 56"
src="https://user-images.githubusercontent.com/48027290/86003239-19b42400-ba44-11ea-9df4-95d6762fa731.png";>
<img width="1405" alt="螢幕快照 2020-06-29 下午8 05 43"
src="https://user-images.githubusercontent.com/48027290/86003253-1de04180-ba44-11ea-89bb-0344869b6fd4.png";>
<img width="1439" alt="螢幕快照 2020-06-29 下午8 05 31"
src="https://user-images.githubusercontent.com/48027290/86003256-1f116e80-ba44-11ea-81f0-06271b82edba.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 #331 from kobe860219/SUBMARINE-522 and squashes the following
commits:
9923d2e [kobe860219] Remove scrollable of table.
a8a8301 [kobe860219] Recover proxy.conf
aa482ce [kobe860219] Run prettier for code style.
a0b9eae [kobe860219] SUBMARINE-522. [WEB] Improve experiment information
page.
27d0039 [kobe860219] Table scorllable and default select for choosing pod
done.
3176f15 [kobe860219] Pipe time done and duration table column added.
---
.../experiment-info/experiment-info.component.html | 22 ++++++++++-----
.../experiment-info/experiment-info.component.scss | 5 +++-
.../experiment-info/experiment-info.component.ts | 20 ++++++++++++++
.../experiment-info/outputs/outputs.component.html | 32 ++--------------------
.../experiment-info/outputs/outputs.component.scss | 19 -------------
.../experiment-info/outputs/outputs.component.ts | 32 ++--------------------
.../workbench/experiment/experiment.component.html | 26 ++++++++++++------
7 files changed, 62 insertions(+), 94 deletions(-)
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.html
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.html
index 8038ef1..b1fe40b 100644
---
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.html
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.html
@@ -21,10 +21,10 @@
*ngIf="!isLoading"
style="margin-top: 10px;"
id="experimentTable"
- nzBordered
#basicTable
[nzData]="[experimentInfo]"
[nzShowPagination]="false"
+ nzSize="small"
>
<thead>
<tr>
@@ -33,18 +33,20 @@
<th>Created Time</th>
<th>Running Time</th>
<th>Finished Time</th>
+ <th>Duration</th>
<th>Status</th>
<th>Progress</th>
- <th nzMinWidth="40px">Action</th>
+ <th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ experimentInfo.name }}</td>
<td>{{ experimentInfo.experimentId }}</td>
- <td>{{ experimentInfo.createdTime }}</td>
- <td>{{ experimentInfo.runningTime }}</td>
- <td>{{ experimentInfo.finishedTime }}</td>
+ <td>{{ experimentInfo.createdTime | date: 'M/d/yyyy, h:mm a' }}</td>
+ <td>{{ experimentInfo.runningTime | date: 'M/d/yyyy, h:mm a' }}</td>
+ <td>{{ experimentInfo.finishedTime | date: 'M/d/yyyy, h:mm a' }}</td>
+ <td></td>
<td>{{ experimentInfo.status }}</td>
<td *ngIf="experimentInfo.status === 'Succeeded'">
<nz-progress nzStrokeLinecap="round" [nzPercent]="100"></nz-progress>
@@ -52,8 +54,9 @@
<td *ngIf="experimentInfo.status !== 'Succeeded'">
<nz-progress nzStrokeLinecap="round" [nzPercent]="50"></nz-progress>
</td>
- <td class="td-action" nzRight="0px">
+ <td class="td-action">
<a (click)="startExperiment()">Start</a>
+ <nz-divider nzType="vertical"></nz-divider>
<a nz-dropdown [nzDropdownMenu]="more">
More
<i nz-icon nzType="down"></i>
@@ -79,6 +82,11 @@
</tbody>
</nz-table>
<nz-spin *ngIf="isLoading"></nz-spin>
+<div style="background-color: white;">
+ <nz-select style="margin-top: 10px; margin-bottom: 10px;"
[(ngModel)]="selectedPod">
+ <nz-option *ngFor="let pod of logContent; let i; of: index" [nzValue]="i"
[nzLabel]="pod.podName"></nz-option>
+ </nz-select>
+</div>
<nz-layout>
<nz-sider style="background-color: white;">
<ul nz-menu>
@@ -105,7 +113,7 @@
<submarine-charts *ngSwitchCase="0"></submarine-charts>
<submarine-hyper-params *ngSwitchCase="1"></submarine-hyper-params>
<submarine-metrics *ngSwitchCase="2"></submarine-metrics>
- <submarine-outputs *ngSwitchCase="3"
[experimentOutputID]="experimentID"></submarine-outputs>
+ <submarine-outputs *ngSwitchCase="3"
[pod]="selectedPod"></submarine-outputs>
</div>
</nz-layout>
</nz-layout>
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.scss
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.scss
index 42264fe..cc57ef2 100644
---
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.scss
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.scss
@@ -17,4 +17,7 @@
* under the License.
*/
-
+ nz-select {
+ margin-right: 8px;
+ width: 250px;
+ }
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.ts
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.ts
index c6dae0e..6bc1b4f 100644
---
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.ts
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.ts
@@ -22,6 +22,9 @@ import { ActivatedRoute, Router } from '@angular/router';
import { ExperimentInfo } from '@submarine/interfaces/experiment-info';
import { ExperimentService } from '@submarine/services/experiment.service';
import { NzMessageService } from 'ng-zorro-antd';
+import { isArray } from 'util';
+import { toArray } from 'rxjs/operators';
+import { ArrayType } from '@angular/compiler';
@Component({
selector: 'submarine-experiment-info',
@@ -33,6 +36,8 @@ export class ExperimentInfoComponent implements OnInit {
experimentID;
experimentInfo: ExperimentInfo;
currentState = 0;
+ logContent;
+ selectedPod;
constructor(
private router: Router,
@@ -53,6 +58,21 @@ export class ExperimentInfoComponent implements OnInit {
this.router.navigate(['/workbench/experiment']);
}
);
+
+ this.getExperimentPod();
+ }
+
+ getExperimentPod() {
+ this.experimentService.getExperimentLog(this.experimentID).subscribe(
+ (result) => {
+ this.logContent = result.logContent;
+ this.selectedPod = this.logContent[0];
+ },
+ (err) => {
+ this.nzMessageService.error('Cannot load pod of ' + this.experimentID);
+ console.log(err);
+ }
+ );
}
onDeleteExperiment() {
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/outputs/outputs.component.html
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/outputs/outputs.component.html
index 60143f6..b574ada 100644
---
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/outputs/outputs.component.html
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/outputs/outputs.component.html
@@ -16,34 +16,6 @@
~ specific language governing permissions and limitations
~ under the License.
-->
-<div id="outputDiv">
- <div *ngIf="!isShowing" id="podListDiv">
- <nz-table #podArr nzSize="middle" [nzData]="podNameArr">
- <thead>
- <tr>
- <th style="padding: 5px;">Pod Name</th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let pod of podArr.data; let i = index">
- <a (click)="show(i)">{{ pod }}</a>
- </tr>
- </tbody>
- </nz-table>
- </div>
- <div *ngIf="isShowing">
- <div id="logActionDiv">
- <button class="logActionBtn" nz-button nzType="primary"
(click)="isShowing = false">
- <i nz-icon nzType="step-backward" nzTheme="outline"></i>
- Back
- </button>
- <button class="logActionBtn" nz-button nzType="primary"
(click)="export()">
- <i nz-icon nzType="export" nzTheme="outline"></i>
- Export
- </button>
- </div>
- <div id="showLogDiv">
- <p style="white-space: nowrap;" *ngFor="let log of logDetailArr; let j =
index">[{{ j }}] {{ log }}</p>
- </div>
- </div>
+<div id="showLogDiv">
+ <p style="white-space: nowrap;" *ngFor="let log of pod.podLog; let j =
index">[{{ j }}] {{ log }}</p>
</div>
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/outputs/outputs.component.scss
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/outputs/outputs.component.scss
index 57ed087..2c5c42f 100644
---
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/outputs/outputs.component.scss
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/outputs/outputs.component.scss
@@ -17,25 +17,6 @@
* under the License.
*/
-#outputDiv{
- background-color: white;
-}
-
-#podListDiv{
- background-color: white;
- padding: 10px;
- height:280px;
- overflow:auto;
-}
-
-#outputActionDiv{
- padding: 10px;
-}
-
-.logActionBtn{
- margin: 5px;
-}
-
#showLogDiv{
background-color: gainsboro;
color: red;
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/outputs/outputs.component.ts
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/outputs/outputs.component.ts
index 83aa530..10bce78 100644
---
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/outputs/outputs.component.ts
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/outputs/outputs.component.ts
@@ -18,8 +18,6 @@
*/
import { Component, OnInit, Input } from '@angular/core';
-import { ExperimentService } from '../../../../../services/experiment.service';
-import { NzMessageService } from 'ng-zorro-antd';
@Component({
selector: 'submarine-outputs',
@@ -27,33 +25,9 @@ import { NzMessageService } from 'ng-zorro-antd';
styleUrls: ['./outputs.component.scss']
})
export class OutputsComponent implements OnInit {
- @Input() experimentOutputID: string;
- podNameArr;
- podLogArr;
- logDetailArr;
- isShowing = false;
+ @Input() pod: object;
- constructor(private experimentService: ExperimentService, private
nzMessageService: NzMessageService) {}
+ constructor() {}
- ngOnInit() {
- this.getExperimentLog();
- }
-
- getExperimentLog() {
- this.experimentService.getExperimentLog(this.experimentOutputID).subscribe(
- (result) => {
- this.podNameArr = result.logContent.map((item) =>
Object.values(item)[0]);
- this.podLogArr = result.logContent.map((item) =>
Object.values(item)[1]);
- },
- (err) => {
- this.nzMessageService.error('Cannot load log of ' +
this.experimentOutputID);
- console.log(err);
- }
- );
- }
-
- show(i: number) {
- this.isShowing = true;
- this.logDetailArr = this.podLogArr[i];
- }
+ ngOnInit() {}
}
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.component.html
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.component.html
index 4096e88..1f5ddba 100644
---
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.component.html
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.component.html
@@ -69,17 +69,25 @@
New Experiment
</button>
</div>
- <nz-table id="releaseTable" nzBordered #basicTable
[nzData]="experimentList" [nzNoResult]="'No data'">
+ <nz-table
+ id="releaseTable"
+ nzBordered
+ #basicTable
+ [nzData]="experimentList"
+ [nzNoResult]="'No data'"
+ nzSize="small"
+ >
<thead>
<tr>
<th>Experiment Name</th>
<th>Experiment ID</th>
+ <th>Status</th>
+ <th>Finished Time</th>
<th>Created Time</th>
<th>Running Time</th>
- <th>Finished Time</th>
- <th>Status</th>
+ <th>Duration</th>
<th>Progress</th>
- <th nzMinWidth="40px">Action</th>
+ <th>Action</th>
</tr>
</thead>
<tbody>
@@ -90,18 +98,20 @@
{{ data.experimentId }}
</a>
</td>
- <td>{{ data.createdTime }}</td>
- <td>{{ data.runningTime }}</td>
- <td>{{ data.finishedTime }}</td>
<td>{{ data.status }}</td>
+ <td>{{ data.finishedTime | date: 'M/d/yyyy, h:mm a' }}</td>
+ <td>{{ data.createdTime | date: 'M/d/yyyy, h:mm a' }}</td>
+ <td>{{ data.runningTime | date: 'M/d/yyyy, h:mm a' }}</td>
+ <td></td>
<td *ngIf="data.status === 'Succeeded'">
<nz-progress nzStrokeLinecap="round"
[nzPercent]="100"></nz-progress>
</td>
<td *ngIf="data.status !== 'Succeeded'">
<nz-progress nzStrokeLinecap="round"
[nzPercent]="50"></nz-progress>
</td>
- <td class="td-action" nzRight="0px">
+ <td class="td-action">
<a (click)="startExperiment(data)">Start</a>
+ <nz-divider nzType="vertical"></nz-divider>
<a nz-dropdown [nzDropdownMenu]="more">
More
<i nz-icon nzType="down"></i>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
![https://user-images.githubusercontent.com/48027290/86003239-19b42400-ba44-11ea-9df4-95d6762fa731.png"](https://user-images.githubusercontent.com/48027290/86003239-19b42400-ba44-11ea-9df4-95d6762fa731.png"){kind=link}
![https://user-images.githubusercontent.com/48027290/86003253-1de04180-ba44-11ea-89bb-0344869b6fd4.png"](https://user-images.githubusercontent.com/48027290/86003253-1de04180-ba44-11ea-89bb-0344869b6fd4.png"){kind=link}
![https://user-images.githubusercontent.com/48027290/86003256-1f116e80-ba44-11ea-81f0-06271b82edba.png"](https://user-images.githubusercontent.com/48027290/86003256-1f116e80-ba44-11ea-81f0-06271b82edba.png"){kind=link}