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 cc9dde5  SUBMARINE-590. [WEB] Update chart/param/metric UI
cc9dde5 is described below

commit cc9dde59564a58dcbcdc22a183e88fb2a90cdd6f
Author: Kevin Su <[email protected]>
AuthorDate: Mon Aug 10 05:13:31 2020 +0800

    SUBMARINE-590. [WEB] Update chart/param/metric UI
    
    ### What is this PR for?
    - Improve chart/param/metric UI
    - Fix the database connection error due to the update in SUBMARINE-575
    - Read the data from the `metric` table, and draw charts in workbench
    
    Following commands could reproduce the experiment
    ```bash
    curl -X POST -H "Content-Type: application/json" -d '
    {
      "meta": {
        "name": "tf-mnist2",
        "namespace": "submarine",
        "framework": "TensorFlow",
        "cmd": "python3 /var/example/tracking.py",
        "envVars": {
          "ENV_1": "ENV1"
        }
      },
      "environment": {
        "image": "pingsutw/tracking-example:0.5.0.dev"
      },
      "spec": {
        "Ps": {
          "replicas": 1,
          "resources": "cpu=1,memory=1024M"
        },
        "Worker": {
          "replicas": 1,
          "resources": "cpu=1,memory=1024M"
        }
      }
    }
    ' http://127.0.0.1:8080/api/v1/experiment
    
    ```
    
    ### What type of PR is it?
    [Improvement]
    
    ### Todos
    * [ ] - Task
    
    ### What is the Jira issue?
    https://issues.apache.org/jira/browse/SUBMARINE-590
    
    ### How should this be tested?
    https://travis-ci.org/github/pingsutw/hadoop-submarine/builds/714396434
    
    ### Screenshots (if appropriate)
    ![Screenshot from 2020-08-03 
12-42-34](https://user-images.githubusercontent.com/37936015/89163413-1f071000-d5a8-11ea-9b44-c7646ccb2868.png)
    
    ![Screenshot from 2020-08-03 
12-42-35](https://user-images.githubusercontent.com/37936015/89163445-29290e80-d5a8-11ea-943e-e59eb3c753f4.png)
    
    ![Screenshot from 2020-08-03 
12-42-38](https://user-images.githubusercontent.com/37936015/89163458-2d552c00-d5a8-11ea-9c3a-c250f06f32ef.png)
    
    ![Screenshot from 2020-08-03 
12-42-37](https://user-images.githubusercontent.com/37936015/89163454-2af2d200-d5a8-11ea-9274-52fc5ccdb7a5.png)
    
    ### Questions:
    * Does the licenses files need update? No
    * Is there breaking changes for older versions? No
    * Does this needs documentation? No
    
    Author: Kevin Su <[email protected]>
    Author: HUAN-PING SU <[email protected]>
    
    Closes #369 from pingsutw/SUBMARINE-590 and squashes the following commits:
    
    e2020bf [HUAN-PING SU] Update 
submarine-server/server-core/src/main/java/org/apache/submarine/server/experiment/ExperimentManager.java
    d8a9a58 [HUAN-PING SU] Update 
submarine-server/server-core/src/main/java/org/apache/submarine/server/experiment/ExperimentManager.java
    8449fe5 [Kevin Su] Remove unused import
    c76615e [Kevin Su] Update github action
    a211cc0 [Kevin Su] Update github action
    fbcab9e [Kevin Su] Update github action
    866f383 [Kevin Su] Update experimentManager
    4f19fc6 [Kevin Su] Update proxy.conf.js
    9ab5856 [Kevin Su] Update ExperimentManager
    b1f6e08 [Kevin Su] update python github action
    983608a [Kevin Su] update python github action
    48074bb [Kevin Su] update python github action
    bf1c637 [Kevin Su] update python github action
    ad1229a [Kevin Su] update chart
    b0312d1 [Kevin Su] update chart
    3404264 [Kevin Su] update chart
    0469b06 [Kevin Su] update chart
    97ed6e0 [Kevin Su] update python github action
    a966310 [Kevin Su] Update chart
    a2d5d4f [Kevin Su] Add angular cdk
    0a4b34d [Kevin Su] Update workbench
    9a50983 [Kevin Su] Fix show param in workbench
---
 .github/workflows/python.yml                       |  7 +-
 submarine-sdk/pysubmarine/setup.py                 |  2 +-
 .../pysubmarine/submarine/tracking/utils.py        | 11 +--
 .../server/experiment/ExperimentManager.java       | 24 +++++-
 .../submarine/server/rest/RestConstants.java       | 12 ++-
 submarine-workbench/workbench-web-ng/angular.json  | 15 ++--
 submarine-workbench/workbench-web-ng/package.json  |  4 +-
 .../experiment-info/charts/charts.component.html   | 40 +++++-----
 .../experiment-info/charts/charts.component.scss   |  9 ++-
 .../experiment-info/charts/charts.component.ts     | 65 ++++++++++++----
 .../experiment/experiment-info/charts/data.ts      | 91 ----------------------
 .../experiment-info/experiment-info.component.html |  2 +-
 .../experiment-info/experiment-info.component.scss |  6 +-
 .../hyper-params/hyper-params.component.scss       |  2 +-
 .../hyper-params/hyper-params.component.ts         |  8 +-
 .../experiment-info/metrics/metrics.component.scss |  7 +-
 .../experiment-info/metrics/metrics.component.ts   |  4 +-
 .../experiment-info/outputs/outputs.component.scss |  2 +-
 .../experiment-info/outputs/outputs.component.ts   |  4 +-
 .../workbench/experiment/experiment.component.ts   | 27 ++++---
 .../workbench/experiment/experiment.module.ts      | 13 ++--
 .../src/app/services/experiment.service.ts         |  6 +-
 submarine-workbench/workbench-web-ng/tsconfig.json |  3 +-
 23 files changed, 172 insertions(+), 192 deletions(-)

diff --git a/.github/workflows/python.yml b/.github/workflows/python.yml
index 6bdadc3..edda543 100644
--- a/.github/workflows/python.yml
+++ b/.github/workflows/python.yml
@@ -36,8 +36,9 @@ jobs:
       - name: Install dependencies
         run: |
           pip install --upgrade pip
-          pip install ./submarine-sdk/pysubmarine/.
-          pip install -q tensorflow==${{ matrix.tf-version }}
+          pip install --no-cache-dir tensorflow==${{ matrix.tf-version }}
+          pip install --no-cache-dir torch==1.5.0
+          pip install --no-cache-dir ./submarine-sdk/pysubmarine/.
           pip install -r 
./submarine-sdk/pysubmarine/github-actions/test-requirements.txt
           pip install -r 
./submarine-sdk/pysubmarine/github-actions/lint-requirements.txt
       - name: Check python sdk code style
@@ -47,5 +48,3 @@ jobs:
       - name: Test with pytest
         run: |
           pytest --cov=submarine -vs
-
-
diff --git a/submarine-sdk/pysubmarine/setup.py 
b/submarine-sdk/pysubmarine/setup.py
index 35b036e..b339533 100644
--- a/submarine-sdk/pysubmarine/setup.py
+++ b/submarine-sdk/pysubmarine/setup.py
@@ -39,7 +39,7 @@ setup(
         'certifi >= 14.05.14',
         'python-dateutil >= 2.5.3',
         'pyarrow==0.17.0',
-        'torch>=1.4.0',
+        'torch>=1.5.0',
     ],
     classifiers=[
         'Intended Audience :: Developers',
diff --git a/submarine-sdk/pysubmarine/submarine/tracking/utils.py 
b/submarine-sdk/pysubmarine/submarine/tracking/utils.py
index ce19d30..95a3a28 100644
--- a/submarine-sdk/pysubmarine/submarine/tracking/utils.py
+++ b/submarine-sdk/pysubmarine/submarine/tracking/utils.py
@@ -29,10 +29,11 @@ _JOB_ID_ENV_VAR = "JOB_ID"
 
 _TF_CONFIG = "TF_CONFIG"
 _CLUSTER_SPEC = "CLUSTER_SPEC"
-_TASK_INDEX = "TASK_INDEX"
 _JOB_NAME = "JOB_NAME"
+_TYPE = "type"
+_TASK = "task"
+_INDEX = "index"
 _RANK = "RANK"
-_TASK = "TASK"
 
 # Extra environment variables which take precedence for setting the 
basic/bearer
 # auth on http requests.
@@ -98,14 +99,14 @@ def get_worker_index():
     if env.get_env(_TF_CONFIG) is not None:
         tf_config = json.loads(os.environ.get(_TF_CONFIG))
         task_config = tf_config.get(_TASK)
-        task_type = task_config.get(_JOB_NAME)
-        task_index = task_config.get(_TASK_INDEX)
+        task_type = task_config.get(_TYPE)
+        task_index = task_config.get(_INDEX)
         worker_index = task_type + '-' + str(task_index)
     elif env.get_env(_CLUSTER_SPEC) is not None:
         cluster_spec = json.loads(os.environ.get(_CLUSTER_SPEC))
         task_config = cluster_spec.get(_TASK)
         task_type = task_config.get(_JOB_NAME)
-        task_index = task_config.get(_TASK_INDEX)
+        task_index = task_config.get(_INDEX)
         worker_index = task_type + '-' + str(task_index)
     # Get PyTorch worker index
     elif env.get_env(_RANK) is not None:
diff --git 
a/submarine-server/server-core/src/main/java/org/apache/submarine/server/experiment/ExperimentManager.java
 
b/submarine-server/server-core/src/main/java/org/apache/submarine/server/experiment/ExperimentManager.java
index 346f77c..28950ce 100644
--- 
a/submarine-server/server-core/src/main/java/org/apache/submarine/server/experiment/ExperimentManager.java
+++ 
b/submarine-server/server-core/src/main/java/org/apache/submarine/server/experiment/ExperimentManager.java
@@ -28,6 +28,7 @@ import java.util.concurrent.atomic.AtomicInteger;
 
 import javax.ws.rs.core.Response.Status;
 
+import org.apache.submarine.commons.utils.SubmarineConfiguration;
 import org.apache.submarine.commons.utils.exception.SubmarineRuntimeException;
 import org.apache.submarine.server.SubmarineServer;
 import org.apache.submarine.server.SubmitterManager;
@@ -36,6 +37,7 @@ import 
org.apache.submarine.server.api.experiment.ExperimentId;
 import org.apache.submarine.server.api.Submitter;
 import org.apache.submarine.server.api.experiment.ExperimentLog;
 import org.apache.submarine.server.api.spec.ExperimentSpec;
+import org.apache.submarine.server.rest.RestConstants;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
@@ -85,13 +87,33 @@ public class ExperimentManager {
    */
   public Experiment createExperiment(ExperimentSpec spec) throws 
SubmarineRuntimeException {
     checkSpec(spec);
+
+    // Submarine sdk will get experimentID and JDBC URL from environment 
variables in each worker,
+    // and then log experiment metrics and parameters to submarine server
+    ExperimentId id = generateExperimentId();
+    String url = getSQLAlchemyURL();
+    spec.getMeta().getEnvVars().put(RestConstants.JOB_ID, id.toString());
+    spec.getMeta().getEnvVars().put(RestConstants.SUBMARINE_TRACKING_URI, url);
+
     Experiment experiment = submitter.createExperiment(spec);
-    experiment.setExperimentId(generateExperimentId());
+    experiment.setExperimentId(id);
+
+    spec.getMeta().getEnvVars().remove(RestConstants.JOB_ID);
+    spec.getMeta().getEnvVars().remove(RestConstants.SUBMARINE_TRACKING_URI);
     experiment.setSpec(spec);
     cachedExperimentMap.putIfAbsent(experiment.getExperimentId().toString(), 
experiment);
     return experiment;
   }
 
+  private String getSQLAlchemyURL() {
+    SubmarineConfiguration conf = SubmarineConfiguration.getInstance();
+    String jdbcUrl = conf.getJdbcUrl();
+    jdbcUrl = jdbcUrl.substring(jdbcUrl.indexOf("//") + 2, 
jdbcUrl.indexOf("?"));
+    String jdbcUserName = conf.getJdbcUserName();
+    String jdbcPassword = conf.getJdbcPassword();
+    return "mysql+pymysql://" + jdbcUserName + ":" + jdbcPassword + "@" + 
jdbcUrl;
+  }
+
   private ExperimentId generateExperimentId() {
     return ExperimentId.newInstance(SubmarineServer.getServerTimeStamp(),
         experimentCounter.incrementAndGet());
diff --git 
a/submarine-server/server-core/src/main/java/org/apache/submarine/server/rest/RestConstants.java
 
b/submarine-server/server-core/src/main/java/org/apache/submarine/server/rest/RestConstants.java
index 96e67f5..699109c 100644
--- 
a/submarine-server/server-core/src/main/java/org/apache/submarine/server/rest/RestConstants.java
+++ 
b/submarine-server/server-core/src/main/java/org/apache/submarine/server/rest/RestConstants.java
@@ -21,22 +21,32 @@ package org.apache.submarine.server.rest;
 
 public class RestConstants {
   public static final String V1 = "v1";
+
   public static final String EXPERIMENT = "experiment";
+
   public static final String ID = "id";
+
+  public static final String JOB_ID = "JOB_ID";
+
+  public static final String SUBMARINE_TRACKING_URI = "SUBMARINE_TRACKING_URI";
+
   public static final String PING = "ping";
+
   public static final String MEDIA_TYPE_YAML = "application/yaml";
+
   public static final String CHARSET_UTF8 = "charset=utf-8";
 
   public static final String METASTORE = "metastore";
 
   public static final String CLUSTER = "cluster";
+
   public static final String ADDRESS = "address";
 
   public static final String NODES = "nodes";
+
   public static final String NODE = "node";
 
   public static final String LOGS = "logs";
-
   /**
    * Environment
    */
diff --git a/submarine-workbench/workbench-web-ng/angular.json 
b/submarine-workbench/workbench-web-ng/angular.json
index a1dab11..3560eb4 100644
--- a/submarine-workbench/workbench-web-ng/angular.json
+++ b/submarine-workbench/workbench-web-ng/angular.json
@@ -31,9 +31,11 @@
                 "input": 
"./node_modules/@ant-design/icons-angular/src/inline-svg/",
                 "output": "/assets/"
               },
-              { "glob": "**/*", 
-                "input": "./node_modules/ngx-monaco-editor/assets/monaco", 
-                "output": "/assets/monaco/" }
+              {
+                "glob": "**/*",
+                "input": "./node_modules/ngx-monaco-editor/assets/monaco",
+                "output": "/assets/monaco/"
+              }
             ],
             "styles": [
               "src/theme.less",
@@ -136,5 +138,8 @@
       }
     }
   },
-  "defaultProject": "workbench-web-ng"
-}
+  "defaultProject": "workbench-web-ng",
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/submarine-workbench/workbench-web-ng/package.json 
b/submarine-workbench/workbench-web-ng/package.json
index 4c23700..72b3a6b 100644
--- a/submarine-workbench/workbench-web-ng/package.json
+++ b/submarine-workbench/workbench-web-ng/package.json
@@ -17,7 +17,7 @@
     "@angular/animations": "~8.2.9",
     "@angular/common": "~8.2.9",
     "@angular/compiler": "~8.2.9",
-    "@angular/core": "~8.2.9",
+    "@angular/core": "^8.2.14",
     "@angular/forms": "~8.2.9",
     "@angular/platform-browser": "~8.2.9",
     "@angular/platform-browser-dynamic": "~8.2.9",
@@ -25,7 +25,7 @@
     "@swimlane/ngx-charts": "^13.0.1",
     "date-fns": "^2.6.0",
     "lint-staged": "^10.2.2",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.19",
     "md5": "^2.2.1",
     "ng-zorro-antd": "8.1.2",
     "ngx-monaco-editor": "^8.0.0",
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 83e25e1..3f7cac0 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,22 +17,26 @@
   ~ under the License.
   -->
 
-<div id="chartsDiv">
-  <ngx-charts-line-chart
-    [view]="view"
-    [scheme]="colorScheme"
-    [legend]="legend"
-    [showXAxisLabel]="showXAxisLabel"
-    [showYAxisLabel]="showYAxisLabel"
-    [xAxis]="xAxis"
-    [yAxis]="yAxis"
-    [xAxisLabel]="xAxisLabel"
-    [yAxisLabel]="yAxisLabel"
-    [timeline]="timeline"
-    [results]="data"
-    (select)="onSelect($event)"
-    (activate)="onActivate($event)"
-    (deactivate)="onDeactivate($event)"
-    [legendTitle]="title"
-  ></ngx-charts-line-chart>
+<div id="chartsTable">
+  <div *ngFor="let yAxisLabel of yAxisLabels; let index = index">
+    <ngx-charts-line-chart
+      [view]="view"
+      [scheme]="colorScheme[index]"
+      [legend]="legend"
+      [showXAxisLabel]="showXAxisLabel"
+      [showYAxisLabel]="showYAxisLabel"
+      [xAxis]="xAxis"
+      [yAxis]="yAxis"
+      [xAxisLabel]="xAxisLabel"
+      [yAxisLabel]="yAxisLabel"
+      [timeline]="timeline"
+      [results]="podMetrics[yAxisLabel]"
+      (select)="onSelect($event)"
+      (activate)="onActivate($event)"
+      (deactivate)="onDeactivate($event)"
+      [legendTitle]="title"
+    >
+      {{ yAxisLabel }}
+    </ngx-charts-line-chart>
+  </div>
 </div>
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 4e93882..f495058 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,7 +17,8 @@
  * under the License.
  */
 
- #chartsDiv {
-    background-color: white; 
-    height: 500px;
- }
+#chartsTable {
+  background-color: white;
+  height: 90vh;
+  overflow: auto;
+}
diff --git 
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.ts
 
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.ts
index af6ff40..6c0828b 100644
--- 
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.ts
+++ 
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.ts
@@ -17,8 +17,7 @@
  * under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
-import { test_data } from './data';
+import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'submarine-charts',
@@ -26,28 +25,24 @@ import { test_data } from './data';
   styleUrls: ['./charts.component.scss']
 })
 export class ChartsComponent implements OnInit {
-  title = 'Metrics';
+  @Input() workerIndex;
+  @Input() metricData;
 
-  data: any[];
-  view: any[] = [800, 500];
-  legend: boolean = true;
+  title = 'Metrics';
+  podMetrics = {};
+  view: any[] = [1000, 300];
+  legend: boolean = false;
   showLabels: boolean = true;
   animations: boolean = true;
   xAxis: boolean = true;
   yAxis: boolean = true;
   showYAxisLabel: boolean = true;
   showXAxisLabel: boolean = true;
-  xAxisLabel: string = 'Epoch';
-  yAxisLabel: string = 'Percent';
-  timeline: boolean = true;
-
-  colorScheme = {
-    domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5']
-  };
-
-  constructor() {
-    this.data = Object.assign([], test_data);
-  }
+  xAxisLabel: string = 'Time (s)';
+  yAxisLabels = [];
+  timeline: boolean = false;
+  colorScheme = ['cool', 'fire', 'flame', 'air', 'forest', 'neons', 'ocean'];
+  constructor() {}
 
   onSelect(data): void {
     console.log('Item clicked', JSON.parse(JSON.stringify(data)));
@@ -62,4 +57,40 @@ export class ChartsComponent implements OnInit {
   }
 
   ngOnInit() {}
+
+  ngOnChanges(chg: SimpleChanges) {
+    this.podMetrics = {};
+    this.yAxisLabels = [];
+    this.fetchMetric();
+  }
+  fetchMetric() {
+    if (this.metricData === undefined) {
+      return;
+    }
+    let key = '';
+    let metrics = [];
+    this.metricData.forEach((data) => {
+      if (data.workerIndex === undefined) {
+        return;
+      }
+      if (this.workerIndex.indexOf(data.workerIndex) >= 0) {
+        if (data.key !== key && metrics.length > 0) {
+          this.yAxisLabels.push(key);
+          this.podMetrics[key] = [];
+          this.podMetrics[key].push({ name: key, series: metrics });
+          metrics = [];
+        }
+        key = data.key;
+        const d = new Date(0);
+        d.setUTCMilliseconds(data.timestamp);
+        const metric = { name: d, value: data.value };
+        metrics.push(metric);
+      }
+    });
+    if (metrics.length > 0) {
+      this.yAxisLabels.push(key);
+      this.podMetrics[key] = [];
+      this.podMetrics[key].push({ name: key, series: metrics });
+    }
+  }
 }
diff --git 
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/data.ts
 
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/data.ts
deleted file mode 100644
index 60e4493..0000000
--- 
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/data.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export var test_data = [
-  {
-    name: 'loss',
-    series: [
-      {
-        name: 'Epoch1',
-        value: 0.204
-      },
-      {
-        name: 'Epoch2',
-        value: 0.1799
-      },
-      {
-        name: 'Epoch3',
-        value: 0.1772
-      }
-    ]
-  },
-
-  {
-    name: 'accuracy',
-    series: [
-      {
-        name: 'Epoch1',
-        value: 0.9356
-      },
-      {
-        name: 'Epoch2',
-        value: 0.9406
-      },
-      {
-        name: 'Epoch3',
-        value: 0.944
-      }
-    ]
-  },
-
-  {
-    name: 'val_loss',
-    series: [
-      {
-        name: 'Epoch1',
-        value: 0.2655
-      },
-      {
-        name: 'Epoch2',
-        value: 0.1578
-      },
-      {
-        name: 'Epoch3',
-        value: 0.1471
-      }
-    ]
-  },
-  {
-    name: 'val_accuracy',
-    series: [
-      {
-        name: 'Epoch1',
-        value: 0.907
-      },
-      {
-        name: 'Epoch2',
-        value: 0.945
-      },
-      {
-        name: 'Epoch3',
-        value: 0.959
-      }
-    ]
-  }
-];
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 3b16e6a..a076514 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
@@ -103,7 +103,7 @@
   </nz-sider>
   <nz-layout>
     <div [ngSwitch]="currentState">
-      <submarine-charts *ngSwitchCase="0"></submarine-charts>
+      <submarine-charts *ngSwitchCase="0" [workerIndex]="selectedPod" 
[metricData]="metricData"></submarine-charts>
       <submarine-hyper-params
         *ngSwitchCase="1"
         [workerIndex]="selectedPod"
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 55f665e..3743f50 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
@@ -20,11 +20,11 @@
  #nzSelect_selectPod {
     margin-right: 8px;
     width: 200px;
-    margin-top: 10px; 
+    margin-top: 10px;
     margin-bottom: 10px;
  }
 
  #experimentInfo_sider {
-   background-color: white; 
-   height: 500px;
+   background-color: white;
+   height: 90vh;
  }
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 d483b96..dfa90d8 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
@@ -19,5 +19,5 @@
 
 #paramTable {
     background-color: white;
-    height: 500px;
+    height: 90vh;
 }
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 0cd3680..bcd6fa8 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,9 +17,7 @@
  * under the License.
  */
 
-import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { BaseApiService } from '@submarine/services/base-api.service';
+import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'submarine-hyper-params',
@@ -27,7 +25,7 @@ import { BaseApiService } from 
'@submarine/services/base-api.service';
   styleUrls: ['./hyper-params.component.scss']
 })
 export class HyperParamsComponent implements OnInit {
-  @Input() workerIndex;
+  @Input() workerIndex: string;
   @Input() paramData;
   podParam = [];
 
@@ -38,7 +36,7 @@ export class HyperParamsComponent implements OnInit {
   ngOnChanges(chg: SimpleChanges) {
     this.podParam.length = 0;
     this.paramData.forEach((data) => {
-      if (data.workerIndex == this.workerIndex) {
+      if (this.workerIndex.indexOf(data.workerIndex) >= 0) {
         this.podParam.push(data);
       }
     });
diff --git 
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.scss
 
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.scss
index 6ee12d1..38aeeba 100644
--- 
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.scss
+++ 
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.scss
@@ -17,7 +17,8 @@
  * under the License.
  */
 
- #metricTable {
-    background-color: white;
-    height: 500px;
+#metricTable {
+  background-color: white;
+  height: 90vh;
+  overflow:auto;
 }
diff --git 
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.ts
 
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.ts
index 7ba3859..70720de 100644
--- 
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.ts
+++ 
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/metrics/metrics.component.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
+import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'submarine-metrics',
@@ -36,7 +36,7 @@ export class MetricsComponent implements OnInit {
   ngOnChanges(chg: SimpleChanges) {
     this.podMetric.length = 0;
     this.metricData.forEach((data) => {
-      if (data.workerIndex == this.workerIndex) {
+      if (this.workerIndex.indexOf(data.workerIndex) >= 0) {
         this.podMetric.push(data);
       }
     });
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 b1f72a4..2fa14b3 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
@@ -21,6 +21,6 @@
     background-color: whitesmoke;
     color: black;
     padding: 10px;
-    height:500px;
+    height:90vh;
     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 69465e2..2332200 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, SimpleChanges } from '@angular/core';
+import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'submarine-outputs',
@@ -36,7 +36,7 @@ export class OutputsComponent implements OnInit {
 
   ngOnChanges(chg: SimpleChanges) {
     this.podLogArr.forEach((item) => {
-      if (item.podName == this.podName) {
+      if (item.podName === this.podName) {
         this.podLog = item.podLog;
       }
     });
diff --git 
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.component.ts
 
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.component.ts
index e360cce..4e78f7f 100644
--- 
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.component.ts
+++ 
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.component.ts
@@ -21,11 +21,10 @@ import { Component, OnInit } from '@angular/core';
 import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
 import { ExperimentInfo } from '@submarine/interfaces/experiment-info';
+import { ExperimentSpec, Specs, SpecEnviroment, SpecMeta } from 
'@submarine/interfaces/experiment-spec';
 import { ExperimentService } from '@submarine/services/experiment.service';
 import { ExperimentFormService } from 
'@submarine/services/experiment.validator.service';
 import { NzMessageService } from 'ng-zorro-antd';
-import { SpecMeta, Specs, SpecEnviroment, ExperimentSpec } from 
'@submarine/interfaces/experiment-spec';
-import { stringify } from 'querystring';
 
 @Component({
   selector: 'submarine-experiment',
@@ -342,16 +341,16 @@ export class ExperimentComponent implements OnInit {
   fetchExperimentList() {
     this.experimentService.fetchExperimentList().subscribe((list) => {
       this.experimentList = list;
-      var currentTime = new Date();
+      const currentTime = new Date();
       this.experimentList.forEach((item) => {
-        if (item.status == 'Succeeded') {
-          var finTime = new Date(item.finishedTime);
-          var runTime = new Date(item.runningTime);
-          var result = (finTime.getTime() - runTime.getTime()) / 1000;
+        if (item.status === 'Succeeded') {
+          const finTime = new Date(item.finishedTime);
+          const runTime = new Date(item.runningTime);
+          const result = (finTime.getTime() - runTime.getTime()) / 1000;
           item.duration = this.experimentService.durationHandle(result);
         } else {
-          var runTime = new Date(item.runningTime);
-          var result = (currentTime.getTime() - runTime.getTime()) / 1000;
+          const runTime = new Date(item.runningTime);
+          const result = (currentTime.getTime() - runTime.getTime()) / 1000;
           item.duration = this.experimentService.durationHandle(result);
         }
       });
@@ -407,14 +406,14 @@ export class ExperimentComponent implements OnInit {
   }
 
   reloadCheck() {
-    /* 
-      When reload in info page, ths experimentId will turn into undifined, it 
will cause breadcrumb miss experimentId. 
+    /*
+      When reload in info page, ths experimentId will turn into undefined, it 
will cause breadcrumb miss experimentId.
       Location.pathname -> /workbench/experiment/info/{experimentID}
       So slice out experimentId string from location.pathname to reassign 
experimentId.
       */
-    if (location.pathname != '/workbench/experiment') {
-      var sliceString = new String('/workbench/experiment/info');
-      this.experimentID = location.pathname.slice(sliceString.length);
+    if (location.pathname !== '/workbench/experiment') {
+      const sliceString = String('/workbench/experiment/info');
+      this.experimentID = location.pathname.slice(sliceString.length + 1);
     }
   }
 
diff --git 
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.module.ts
 
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.module.ts
index 1df383e..966f647 100644
--- 
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.module.ts
+++ 
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.module.ts
@@ -1,14 +1,13 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { ChartsComponent } from './experiment-info/charts/charts.component';
 import { ExperimentInfoComponent } from 
'./experiment-info/experiment-info.component';
-import { MetricsComponent } from './experiment-info/metrics/metrics.component';
 import { HyperParamsComponent } from 
'./experiment-info/hyper-params/hyper-params.component';
-import { ChartsComponent } from './experiment-info/charts/charts.component';
+import { MetricsComponent } from './experiment-info/metrics/metrics.component';
 import { OutputsComponent } from './experiment-info/outputs/outputs.component';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 /*
  * Licensed to the Apache Software Foundation (ASF) under one
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 393eee3..30f5735 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
@@ -21,10 +21,10 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Rest } from '@submarine/interfaces';
 import { ExperimentInfo } from '@submarine/interfaces/experiment-info';
-import { BaseApiService } from '@submarine/services/base-api.service';
-import { of, Observable, throwError } from 'rxjs';
-import { switchMap, catchError, map } from 'rxjs/operators';
 import { ExperimentSpec } from '@submarine/interfaces/experiment-spec';
+import { BaseApiService } from '@submarine/services/base-api.service';
+import { of, throwError, Observable } from 'rxjs';
+import { catchError, map, switchMap } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
diff --git a/submarine-workbench/workbench-web-ng/tsconfig.json 
b/submarine-workbench/workbench-web-ng/tsconfig.json
index da63e8b..cc513fc 100644
--- a/submarine-workbench/workbench-web-ng/tsconfig.json
+++ b/submarine-workbench/workbench-web-ng/tsconfig.json
@@ -28,5 +28,6 @@
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true
-  }
+  },
+  "moduleResolution": "node"
 }


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to