SUBMARINE-556. [WEB] Connect workbench with database for metric

submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.html

@@ -116,7 +116,7 @@
         [workerIndex]="selectedPod"
         [paramData]="paramData"
       ></submarine-hyper-params>
-      <submarine-metrics *ngSwitchCase="2"></submarine-metrics>
+      <submarine-metrics *ngSwitchCase="2" [workerIndex]="selectedPod" [metricData]="metricData"></submarine-metrics>
       <submarine-outputs
         *ngSwitchCase="3"
         [podName]="selectedPod"

submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.ts

@@ -37,6 +37,7 @@ export class ExperimentInfoComponent implements OnInit {
   podNameArr;
   podLogArr;
   paramData;
+  metricData;
 
   constructor(
     private router: Router,
@@ -76,7 +77,7 @@ export class ExperimentInfoComponent implements OnInit {
 
     this.experimentService
       .getExperimentParam({
-        jobName: null
+        jobName: this.experimentID
       })
       .subscribe(
         (result) => {
@@ -87,12 +88,26 @@ export class ExperimentInfoComponent implements OnInit {
           console.log(err);
         }
       );
+
+    this.experimentService
+      .getExperimentMetric({
+        jobName: this.experimentID
+      })
+      .subscribe(
+        (result) => {
+          this.metricData = result;
+        },
+        (err) => {
+          this.nzMessageService.error('Cannot load metric of ' + this.experimentID);
+          console.log(err);
+        }
+      );
   }
 
   onDeleteExperiment() {
     this.experimentService.deleteExperiment(this.experimentID).subscribe(
       () => {
-        this.nzMessageService.success('Delete user success!');
+        this.nzMessageService.success('Delete experiment success!');
         this.router.navigate(['/workbench/experiment']);
       },
       (err) => {

submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/hyper-params/hyper-params.component.ts

@@ -31,11 +31,12 @@ export class HyperParamsComponent implements OnInit {
   @Input() paramData;
   podParam = [];
 
-  constructor(private baseApi: BaseApiService, private httpClient: HttpClient) {}
+  constructor() {}
 
   ngOnInit() {}
 
   ngOnChanges(chg: SimpleChanges) {
+    this.podParam.length = 0;
     this.paramData.forEach((data) => {
       if (data.workerIndex == this.workerIndex) {
         this.podParam.push(data);

submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.html

@@ -17,4 +17,25 @@
   ~ under the License.
   -->
 
-<p>metrics works!</p>
+<div id="metricTable">
+  <nz-table #metricTable nzSize="middle" [nzBordered]="true" [nzFrontPagination]="false" [nzData]="podMetric">
+    <thead>
+      <tr>
+        <th>Key</th>
+        <th>Value</th>
+        <th>Time</th>
+        <th>Step</th>
+        <th>Is_NaN</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let metric of metricTable.data">
+        <td>{{ metric.key }}</td>
+        <td>{{ metric.value }}</td>
+        <td>{{ metric.timestamp }}</td>
+        <td>{{ metric.step }}</td>
+        <td>{{ metric.is_nan }}</td>
+      </tr>
+    </tbody>
+  </nz-table>
+</div>

submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.scss

@@ -17,4 +17,7 @@
  * under the License.
  */
 
-
+ #metricTable {
+    background-color: white;
+    height: 500px;
+}

submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.ts

@@ -17,15 +17,28 @@
  * under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'submarine-metrics',
   templateUrl: './metrics.component.html',
   styleUrls: ['./metrics.component.scss']
 })
 export class MetricsComponent implements OnInit {
+  @Input() workerIndex;
+  @Input() metricData;
+  podMetric = [];
+
   constructor() {}
 
   ngOnInit() {}
+
+  ngOnChanges(chg: SimpleChanges) {
+    this.podMetric.length = 0;
+    this.metricData.forEach((data) => {
+      if (data.workerIndex == this.workerIndex) {
+        this.podMetric.push(data);
+      }
+    });
+  }
 }

submarine-workbench/workbench-web-ng/src/app/services/experiment.service.ts

@@ -122,4 +122,17 @@ export class ExperimentService {
       })
     );
   }
+
+  getExperimentMetric(param: object): Observable<any> {
+    const apiUrl = this.baseApi.getRestApi('/metric/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);
+        }
+      })
+    );
+  }
 }