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 f8ae898 SUBMARINE-555. [WEB] Connect workbench with database for param
f8ae898 is described below
commit f8ae898fdc3adbb5a5f03c2737119c1ea0f8f2a8
Author: kobe860219 <[email protected]>
AuthorDate: Sun Jul 12 13:06:32 2020 +0800
SUBMARINE-555. [WEB] Connect workbench with database for param
### What is this PR for?
- Connect workbench with database for param.
- Fix div style of charts , parameter , metric and output page.
- Improve output page.
### What type of PR is it?
[Feature]
### Todos
### What is the Jira issue?
https://issues.apache.org/jira/browse/SUBMARINE-555
### How should this be tested?
https://travis-ci.org/github/kobe860219/submarine/builds/707306832
### Screenshots (if appropriate)
<img width="1440" alt="截圖 2020-07-12 下午1 04 12"
src="https://user-images.githubusercontent.com/48027290/87239379-199f2580-c441-11ea-8410-f5edd68ce9b3.png";>
<img width="1411" alt="截圖 2020-07-12 下午1 04 28"
src="https://user-images.githubusercontent.com/48027290/87239381-1dcb4300-c441-11ea-96da-cca6ecafc268.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 #344 from kobe860219/SUBMARINE-555 and squashes the following
commits:
bbe23e7 [kobe860219] SUBMARINE-555. [WEB] Connect workbench with database
for param
29ab549 [kobe860219] Done without real test.
d5e229d [kobe860219] Improve output page done.
---
.../experiment-info/charts/charts.component.html | 2 +-
.../experiment-info/charts/charts.component.scss | 5 ++-
.../experiment-info/experiment-info.component.html | 19 ++++++---
.../experiment-info/experiment-info.component.scss | 11 ++++-
.../experiment-info/experiment-info.component.ts | 26 +++++++++---
.../hyper-params/hyper-params.component.html | 30 ++++++-------
.../hyper-params/hyper-params.component.scss | 5 ++-
.../hyper-params/hyper-params.component.ts | 49 +++++++---------------
.../experiment-info/outputs/outputs.component.html | 3 +-
.../experiment-info/outputs/outputs.component.scss | 5 +--
.../experiment-info/outputs/outputs.component.ts | 15 ++++++-
.../src/app/services/experiment.service.ts | 13 ++++++
12 files changed, 112 insertions(+), 71 deletions(-)
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.html
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.html
index 77df504..83e25e1 100644
---
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.html
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.html
@@ -17,7 +17,7 @@
~ under the License.
-->
-<div style="background-color: white; height: 900px; padding: 50px;">
+<div id="chartsDiv">
<ngx-charts-line-chart
[view]="view"
[scheme]="colorScheme"
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.scss
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.scss
index 6c98c1e..4e93882 100644
---
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.scss
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.scss
@@ -17,4 +17,7 @@
* under the License.
*/
-
+ #chartsDiv {
+ background-color: white;
+ height: 500px;
+ }
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 b1fe40b..3d521ea 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
@@ -83,12 +83,12 @@
</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 id="nzSelect_selectPod" [(ngModel)]="selectedPod">
+ <nz-option *ngFor="let pod of podNameArr" [nzValue]="pod"
[nzLabel]="pod"></nz-option>
</nz-select>
</div>
<nz-layout>
- <nz-sider style="background-color: white;">
+ <nz-sider id="experimentInfo_sider">
<ul nz-menu>
<li nz-menu-item nzSelected (click)="currentState = 0">
<i nz-icon nzType="bar-chart" nzTheme="outline"></i>
@@ -111,9 +111,18 @@
<nz-layout>
<div [ngSwitch]="currentState">
<submarine-charts *ngSwitchCase="0"></submarine-charts>
- <submarine-hyper-params *ngSwitchCase="1"></submarine-hyper-params>
+ <submarine-hyper-params
+ *ngSwitchCase="1"
+ [workerIndex]="selectedPod"
+ [paramData]="paramData"
+ ></submarine-hyper-params>
<submarine-metrics *ngSwitchCase="2"></submarine-metrics>
- <submarine-outputs *ngSwitchCase="3"
[pod]="selectedPod"></submarine-outputs>
+ <submarine-outputs
+ *ngSwitchCase="3"
+ [podName]="selectedPod"
+ [experimentID]="experimentID"
+ [podLogArr]="podLogArr"
+ ></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 cc57ef2..55f665e 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,7 +17,14 @@
* under the License.
*/
- nz-select {
+ #nzSelect_selectPod {
margin-right: 8px;
- width: 250px;
+ width: 200px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ }
+
+ #experimentInfo_sider {
+ background-color: white;
+ height: 500px;
}
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 6bc1b4f..16e0366 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,9 +22,6 @@ 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',
@@ -36,8 +33,10 @@ export class ExperimentInfoComponent implements OnInit {
experimentID;
experimentInfo: ExperimentInfo;
currentState = 0;
- logContent;
selectedPod;
+ podNameArr;
+ podLogArr;
+ paramData;
constructor(
private router: Router,
@@ -65,14 +64,29 @@ export class ExperimentInfoComponent implements OnInit {
getExperimentPod() {
this.experimentService.getExperimentLog(this.experimentID).subscribe(
(result) => {
- this.logContent = result.logContent;
- this.selectedPod = this.logContent[0];
+ this.podNameArr = result.logContent.map((item) =>
Object.values(item)[0]);
+ this.selectedPod = this.podNameArr[0];
+ this.podLogArr = result.logContent;
},
(err) => {
this.nzMessageService.error('Cannot load pod of ' + this.experimentID);
console.log(err);
}
);
+
+ this.experimentService
+ .getExperimentParam({
+ jobName: null
+ })
+ .subscribe(
+ (result) => {
+ this.paramData = result;
+ },
+ (err) => {
+ this.nzMessageService.error('Cannot load param of ' +
this.experimentID);
+ console.log(err);
+ }
+ );
}
onDeleteExperiment() {
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/hyper-params/hyper-params.component.html
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/hyper-params/hyper-params.component.html
index 083eaec..e4fbae1 100644
---
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/hyper-params/hyper-params.component.html
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/hyper-params/hyper-params.component.html
@@ -17,17 +17,19 @@
~ under the License.
-->
-<nz-table #basicTable [nzFrontPagination]="false" [nzData]="paramsList">
- <thead>
- <tr>
- <th>Key</th>
- <th>Value</th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let data of basicTable.data">
- <td>{{ data.key }}</td>
- <td>{{ data.value }}</td>
- </tr>
- </tbody>
-</nz-table>
+<div id="paramTable">
+ <nz-table #paramTable nzSize="middle" [nzBordered]="true"
[nzFrontPagination]="false" [nzData]="podParam">
+ <thead>
+ <tr>
+ <th>Key</th>
+ <th>Value</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let param of paramTable.data">
+ <td>{{ param.key }}</td>
+ <td>{{ param.value }}</td>
+ </tr>
+ </tbody>
+ </nz-table>
+</div>
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/hyper-params/hyper-params.component.scss
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/hyper-params/hyper-params.component.scss
index 6c98c1e..d483b96 100644
---
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/hyper-params/hyper-params.component.scss
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/hyper-params/hyper-params.component.scss
@@ -17,4 +17,7 @@
* under the License.
*/
-
+#paramTable {
+ background-color: white;
+ height: 500px;
+}
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/hyper-params/hyper-params.component.ts
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/hyper-params/hyper-params.component.ts
index 4f99656..584d429 100644
---
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/hyper-params/hyper-params.component.ts
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/hyper-params/hyper-params.component.ts
@@ -17,12 +17,9 @@
* under the License.
*/
-import { Component, OnInit } from '@angular/core';
-
-interface HyperParams {
- key: string;
- value: string;
-}
+import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { BaseApiService } from '@submarine/services/base-api.service';
@Component({
selector: 'submarine-hyper-params',
@@ -30,37 +27,19 @@ interface HyperParams {
styleUrls: ['./hyper-params.component.scss']
})
export class HyperParamsComponent implements OnInit {
- paramsList: HyperParams[] = [];
+ @Input() workerIndex;
+ @Input() paramData;
+ podParam = [];
+
+ constructor(private baseApi: BaseApiService, private httpClient: HttpClient)
{}
- constructor() {}
+ ngOnInit() {}
- ngOnInit() {
- // TODO(chiajoukuo): get data from server
- this.paramsList = [
- {
- key: 'conf',
- value: '/var/tf_deepfm/deepfm.json'
- },
- {
- key: 'train_beta1',
- value: '0.9'
- },
- {
- key: 'train_beta2',
- value: '0.999'
- },
- {
- key: 'train_epsilon',
- value: '1.0E-8'
- },
- {
- key: 'train_lr',
- value: '5.0E-4'
- },
- {
- key: 'train_Optimizer',
- value: 'AdamOptimizer'
+ ngOnChanges(chg: SimpleChanges) {
+ this.paramData.forEach((data) => {
+ if (data.workerIndex == this.workerIndex) {
+ this.podParam.push(data);
}
- ];
+ });
}
}
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 b574ada..4ee4d33 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,6 +16,7 @@
~ specific language governing permissions and limitations
~ under the License.
-->
+
<div id="showLogDiv">
- <p style="white-space: nowrap;" *ngFor="let log of pod.podLog; let j =
index">[{{ j }}] {{ log }}</p>
+ <p style="white-space: nowrap;" *ngFor="let log of 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 2c5c42f..80ee29a 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
@@ -20,8 +20,7 @@
#showLogDiv{
background-color: gainsboro;
color: red;
- margin: 5px;
- padding: 5px;
- height:280px;
+ padding: 10px;
+ height:500px;
overflow:auto;
}
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 10bce78..69465e2 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
@@ -17,7 +17,7 @@
* under the License.
*/
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
@Component({
selector: 'submarine-outputs',
@@ -25,9 +25,20 @@ import { Component, OnInit, Input } from '@angular/core';
styleUrls: ['./outputs.component.scss']
})
export class OutputsComponent implements OnInit {
- @Input() pod: object;
+ @Input() podName;
+ @Input() podLogArr;
+ @Input() experimentID;
+ podLog;
constructor() {}
ngOnInit() {}
+
+ ngOnChanges(chg: SimpleChanges) {
+ this.podLogArr.forEach((item) => {
+ if (item.podName == this.podName) {
+ this.podLog = item.podLog;
+ }
+ });
+ }
}
diff --git
a/submarine-workbench/workbench-web-ng/src/app/services/experiment.service.ts
b/submarine-workbench/workbench-web-ng/src/app/services/experiment.service.ts
index cb8b267..2382253 100644
---
a/submarine-workbench/workbench-web-ng/src/app/services/experiment.service.ts
+++
b/submarine-workbench/workbench-web-ng/src/app/services/experiment.service.ts
@@ -109,4 +109,17 @@ export class ExperimentService {
})
);
}
+
+ getExperimentParam(param: object): Observable<any> {
+ const apiUrl = this.baseApi.getRestApi('/param/selective');
+ return this.httpClient.post<any>(apiUrl, param).pipe(
+ switchMap((res) => {
+ if (res.success) {
+ return of(res.result);
+ } else {
+ throw this.baseApi.createRequestError(res.message, res.code, apiUrl,
'post', param);
+ }
+ })
+ );
+ }
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
![https://user-images.githubusercontent.com/48027290/87239379-199f2580-c441-11ea-8410-f5edd68ce9b3.png"](https://user-images.githubusercontent.com/48027290/87239379-199f2580-c441-11ea-8410-f5edd68ce9b3.png"){kind=link}
![https://user-images.githubusercontent.com/48027290/87239381-1dcb4300-c441-11ea-96da-cca6ecafc268.png"](https://user-images.githubusercontent.com/48027290/87239381-1dcb4300-c441-11ea-96da-cca6ecafc268.png"){kind=link}