[WebUI] Fix issue#458 about final result as dict (#563)

* [WebUI] Fix issue#458 about final result as dict

* Fix comments

* fix bug

src/webui/src/components/Overview.tsx

@@ -209,6 +209,10 @@ class Overview extends React.Component<{}, OverviewState> {
                                 profile.failTrial += 1;
                                 break;
 
+                            case 'RUNNING':
+                                profile.runTrial += 1;
+                                break;
+
                             case 'USER_CANCELED':
                             case 'SYS_CANCELED':
                                 profile.stopTrial += 1;

src/webui/src/components/TrialsDetail.tsx

 import * as React from 'react';
 import axios from 'axios';
 import { MANAGER_IP } from '../static/const';
-import { Row, Col, Tabs, Input, Select } from 'antd';
+import { Row, Col, Tabs, Input, Select, Button } from 'antd';
 const Option = Select.Option;
-import { TableObj, Parameters, DetailAccurPoint, TooltipForAccuracy } from '../static/interface';
-import { getFinalResult } from '../static/function';
+import { TableObjFianl, Parameters, DetailAccurPoint, TooltipForAccuracy } from '../static/interface';
+import { getFinalResult, getFinal } from '../static/function';
 import Accuracy from './overview/Accuracy';
 import Duration from './trial-detail/Duration';
 import Title1 from './overview/Title1';
@@ -16,8 +16,8 @@ import '../static/style/trialsDetail.scss';
 interface TrialDetailState {
     accSource: object;
     accNodata: string;
-    tableListSource: Array<TableObj>;
-    searchResultSource: Array<TableObj>;
+    tableListSource: Array<TableObjFianl>;
+    searchResultSource: Array<TableObjFianl>;
     isHasSearch: boolean;
     experimentStatus: string;
     entriesTable: number;
@@ -30,6 +30,8 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
     public interTableList = 1;
     public interAllTableList = 2;
 
+    public tableList: TableList | null;
+
     constructor(props: {}) {
         super(props);
 
@@ -40,7 +42,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
             searchResultSource: [],
             experimentStatus: '',
             entriesTable: 20,
-            isHasSearch: false
+            isHasSearch: false,
         };
     }
     // trial accuracy graph
@@ -132,7 +134,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
             .then(res => {
                 if (res.status === 200) {
                     const trialJobs = res.data;
-                    const trialTable: Array<TableObj> = [];
+                    const trialTable: Array<TableObjFianl> = [];
                     Object.keys(trialJobs).map(item => {
                         // only succeeded trials have finalMetricData
                         let desc: Parameters = {
@@ -167,7 +169,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                         if (trialJobs[item].logPath !== undefined) {
                             desc.logPath = trialJobs[item].logPath;
                         }
-                        const acc = getFinalResult(trialJobs[item].finalMetricData);
+                        const acc = getFinal(trialJobs[item].finalMetricData);
                         trialTable.push({
                             key: trialTable.length,
                             sequenceId: trialJobs[item].sequenceId,
@@ -185,7 +187,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                         Object.keys(searchResultSource).map(index => {
                             temp.push(searchResultSource[index].id);
                         });
-                        const searchResultList: Array<TableObj> = [];
+                        const searchResultList: Array<TableObjFianl> = [];
                         for (let i = 0; i < temp.length; i++) {
                             Object.keys(trialTable).map(key => {
                                 const item = trialTable[key];
@@ -217,7 +219,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
             .then(res => {
                 if (res.status === 200) {
                     const trialJobs = res.data;
-                    const trialTable: Array<TableObj> = [];
+                    const trialTable: Array<TableObjFianl> = [];
                     Object.keys(trialJobs).map(item => {
                         // only succeeded trials have finalMetricData
                         let desc: Parameters = {
@@ -252,7 +254,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                         if (trialJobs[item].logPath !== undefined) {
                             desc.logPath = trialJobs[item].logPath;
                         }
-                        const acc = getFinalResult(trialJobs[item].finalMetricData);
+                        const acc = getFinal(trialJobs[item].finalMetricData);
                         trialTable.push({
                             key: trialTable.length,
                             sequenceId: trialJobs[item].sequenceId,
@@ -308,7 +310,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
         } else {
             window.clearInterval(this.interAllTableList);
             const { tableListSource } = this.state;
-            const searchResultList: Array<TableObj> = [];
+            const searchResultList: Array<TableObjFianl> = [];
             Object.keys(tableListSource).map(key => {
                 const item = tableListSource[key];
                 if (item.sequenceId.toString() === targetValue || item.id.includes(targetValue)) {
@@ -364,6 +366,10 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
         }
     }
 
+    test = () => {
+        alert('TableList component was not properly initialized.');
+    }
+
     componentDidMount() {
 
         this._isMounted = true;
@@ -429,13 +435,26 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                         <span>entries</span>
                     </Col>
                     <Col span={12} className="right">
-                        {/* <span>Search:</span> */}
-                        <Input
-                            type="text"
-                            placeholder="search by Trial No. and id"
-                            onChange={this.searchTrial}
-                            style={{ width: 200, marginLeft: 6 }}
-                        />
+                        <Row>
+                            <Col span={12}>
+                                <Button
+                                    type="primary"
+                                    className="tableButton editStyle"
+                                    onClick={this.tableList ? this.tableList.addColumn : this.test}
+                                >
+                                    AddColumn
+                                </Button>
+                            </Col>
+                            <Col span={12}>
+                                {/* <span>Search:</span> */}
+                                <Input
+                                    type="text"
+                                    placeholder="search by Trial No. and id"
+                                    onChange={this.searchTrial}
+                                    style={{ width: 200, marginLeft: 6 }}
+                                />
+                            </Col>
+                        </Row>
                     </Col>
                 </Row>
                 <TableList
@@ -444,6 +463,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                     updateList={this.drawTableList}
                     searchResult={searchResultSource}
                     isHasSearch={isHasSearch}
+                    ref={(tabList) => this.tableList = tabList}
                 />
             </div>
         );

src/webui/src/components/overview/Progress.tsx

@@ -242,45 +242,45 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
                     maxString={`MaxTrialNumber: ${trialProfile.MaxTrialNum}`}
                 />
                 <Row className="basic colorOfbasic mess">
-                    <p>Best Default Metric</p>
+                    <p>best metric</p>
                     <div>{bestAccuracy}</div>
                 </Row>
                 <Row className="mess">
                     <Col span={8}>
                         <Row className="basic colorOfbasic">
-                            <p>Time Spent</p>
+                            <p>spent</p>
                             <div>{convertTime(trialProfile.execDuration)}</div>
                         </Row>
                     </Col>
                     <Col span={9}>
                         <Row className="basic colorOfbasic">
-                            <p>Remaining Time</p>
+                            <p>remaining</p>
                             <div>{remaining}</div>
                         </Row>
                     </Col>
                     <Col span={7}>
                         <Row className="basic colorOfbasic">
-                            <p>MaxDuration</p>
-                            <div>{convertTime(trialProfile.maxDuration)}</div>
+                            <p>running</p>
+                            <div>{trialNumber.runTrial}</div>
                         </Row>
                     </Col>
                 </Row>
                 <Row className="mess">
                     <Col span={8}>
                         <Row className="basic colorOfbasic">
-                            <p>Succeed Trial</p>
+                            <p>succeed</p>
                             <div>{trialNumber.succTrial}</div>
                         </Row>
                     </Col>
                     <Col span={9}>
                         <Row className="basic">
-                            <p>Stopped Trial</p>
+                            <p>stopped</p>
                             <div>{trialNumber.stopTrial}</div>
                         </Row>
                     </Col>
                     <Col span={7}>
                         <Row className="basic">
-                            <p>Failed Trial</p>
+                            <p>failed</p>
                             <div>{trialNumber.failTrial}</div>
                         </Row>
                     </Col>

src/webui/src/static/const.ts

-export const MANAGER_IP = `/api/v1/nni`;
-export const DOWNLOAD_IP = `/logs`;
-export const trialJobStatus = [
+const MANAGER_IP = `/api/v1/nni`;
+const DOWNLOAD_IP = `/logs`;
+const trialJobStatus = [
     'UNKNOWN',
     'WAITING',
     'RUNNING',
@@ -10,12 +10,47 @@ export const trialJobStatus = [
     'SYS_CANCELED',
     'EARLY_STOPPED'
 ];
-export const CONTROLTYPE = [
+const CONTROLTYPE = [
     'SEARCH_SPACE',
     'TRIAL_CONCURRENCY',
     'MAX_EXEC_DURATION'
 ];
-export const MONACO = {
+const MONACO = {
     readOnly: true,
     automaticLayout: true
 };
+const COLUMN_INDEX = [
+    {
+        name: 'Trial No',
+        index: 1
+    },
+    {
+        name: 'id',
+        index: 2
+    },
+    {
+        name: 'duration',
+        index: 3
+    },
+    {
+        name: 'status',
+        index: 4
+    },
+    {
+        name: 'Default',
+        index: 5
+    },
+    {
+        name: 'Operation',
+        index: 10000
+    },
+    {
+        name: 'Intermediate Result',
+        index: 10001
+    }
+];
+const COLUMN = ['Trial No', 'id', 'duration', 'status', 'Default', 'Operation', 'Intermediate Result'];
+export {
+    MANAGER_IP, DOWNLOAD_IP, trialJobStatus,
+    CONTROLTYPE, MONACO, COLUMN, COLUMN_INDEX
+};

src/webui/src/static/function.ts

-import { FinalResult } from './interface';
+import { FinalResult, FinalType } from './interface';
 
 const convertTime = (num: number) => {
     if (num % 3600 === 0) {
@@ -28,6 +28,7 @@ const convertDuration = (num: number) => {
 };
 
 // get final result value
+// draw Accuracy point graph
 const getFinalResult = (final: FinalResult) => {
     let acc;
     let showDefault = 0;
@@ -46,6 +47,21 @@ const getFinalResult = (final: FinalResult) => {
     }
 };
 
+// get final result value // acc obj 
+const getFinal = (final: FinalResult) => {
+    let showDefault: FinalType;
+    if (final) {
+        showDefault = JSON.parse(final[0].data);
+        if (typeof showDefault === 'number') {
+            showDefault = { default: showDefault };
+        }
+        return showDefault;
+    } else {
+        return undefined;
+    }
+};
+
 export {
-    convertTime, convertDuration, getFinalResult
+    convertTime, convertDuration, getFinalResult,
+    getFinal
 };

src/webui/src/static/interface.ts

+// draw accuracy graph data interface
 interface TableObj {
     key: number;
     sequenceId: number;
     id: string;
     duration: number;
     status: string;
-    acc?: number;
+    acc?: number; // draw accuracy graph
     description: Parameters;
     color?: string;
 }
+
+interface TableObjFianl {
+    key: number;
+    sequenceId: number;
+    id: string;
+    duration: number;
+    status: string;
+    acc?: FinalType;
+    description: Parameters;
+    color?: string;
+}
+
+interface FinalType {
+    default: string;
+}
+
 interface ErrorParameter {
     error?: string;
 }
+
 interface Parameters {
     parameters: ErrorParameter;
     logPath?: string;
@@ -93,5 +111,6 @@ export {
     TableObj, Parameters, Experiment, 
     AccurPoint, TrialNumber, TrialJob,
     DetailAccurPoint, TooltipForAccuracy,
-    ParaObj, VisualMapValue, Dimobj, FinalResult
+    ParaObj, VisualMapValue, Dimobj, FinalResult,
+    TableObjFianl, FinalType
 };

src/webui/src/static/style/search.scss

+/* some buttons about trial-detail table */
 .allList{
     width: 96%;
     margin: 0 auto;
@@ -17,4 +18,17 @@
     }
 }
 
+.titleColumn{
+    .ant-checkbox-group-item{
+        display: block;
+    }
+}
+
+.applyfooter{
+    /* apply button style */
+    .apply{
+        text-align: right;
+    }
+}
+