[WebUI] fix issue#1489: Enhancement to trial duration display (#2523)

src/webui/src/App.scss

@@ -20,9 +20,11 @@
   width: 90%;
   margin: 0 auto;
 }
+
 .contentBox{
   width: 100%;
 }
+
 .content{
   width: 89%;
   min-width: 1024px;

src/webui/src/components/trial-detail/Duration.tsx

 import * as React from 'react';
 import ReactEcharts from 'echarts-for-react';
 import { TableObj, EventMap } from '../../static/interface'; // eslint-disable-line no-unused-vars
-import { filterDuration } from '../../static/function';
+import { filterDuration, convertDuration } from '../../static/function';
 import 'echarts/lib/chart/bar';
 import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/title';
@@ -49,7 +49,13 @@ class Duration extends React.Component<DurationProps, DurationState> {
                 trigger: 'axis',
                 axisPointer: {
                     type: 'shadow'
-                }
+                },
+                formatter: (data: any): React.ReactNode => (
+                    '<div>' +
+                    '<div>Trial No.: ' + data[0].dataIndex + '</div>' +
+                    '<div>Duration: ' + convertDuration(data[0].data) + '</div>' +
+                    '</div>'
+                ),
             },
             grid: {
                 bottom: '3%',
@@ -93,7 +99,13 @@ class Duration extends React.Component<DurationProps, DurationState> {
                 trigger: 'axis',
                 axisPointer: {
                     type: 'shadow'
-                }
+                },
+                formatter: (data: any): React.ReactNode => (
+                    '<div>' +
+                    '<div>Trial No.: ' + data[0].dataIndex + '</div>' +
+                    '<div>Duration: ' + convertDuration(data[0].data) + '</div>' +
+                    '</div>'
+                ),
             },
             grid: {
                 bottom: '3%',

src/webui/src/static/function.ts

@@ -3,7 +3,7 @@ import axios from 'axios';
 import { MANAGER_IP } from './const';
 import { MetricDataRecord, FinalType, TableObj } from './interface';
 
-async function requestAxios(url: string) {
+async function requestAxios(url: string): Promise<any> {
     const response = await axios.get(url);
     if (response.status === 200) {
         if (response.data.error !== undefined) {

src/webui/src/static/model/experiment.ts

-import axios from 'axios';
 import { MANAGER_IP } from '../const';
 import { ExperimentProfile, NNIManagerStatus } from '../interface';
 import { requestAxios } from '../function';

src/webui/src/static/model/trialmanager.ts

-import axios from 'axios';
 import { MANAGER_IP, METRIC_GROUP_UPDATE_THRESHOLD, METRIC_GROUP_UPDATE_SIZE } from '../const';
 import { MetricDataRecord, TableRecord, TrialJobInfo } from '../interface';
 import { Trial } from './trial';