Fix bug of webui's table (#407)

* Fix bug

* fix lint

src/webui/src/components/Overview.tsx

@@ -6,6 +6,7 @@ import {
     Experiment, TableObj,
     Parameters, TrialNumber
 } from '../static/interface';
+import { getFinalResult } from '../static/function';
 import SuccessTable from './overview/SuccessTable';
 import Title1 from './overview/Title1';
 import Progressed from './overview/Progress';
@@ -215,18 +216,7 @@ class Overview extends React.Component<{}, OverviewState> {
                                     parameters: {}
                                 };
                                 const duration = (tableData[item].endTime - tableData[item].startTime) / 1000;
-                                let acc;
-                                let tableAcc = 0;
-                                if (tableData[item].finalMetricData) {
-                                    acc = JSON.parse(tableData[item].finalMetricData.data);
-                                    if (typeof (acc) === 'object') {
-                                        if (acc.default) {
-                                            tableAcc = acc.default;
-                                        }
-                                    } else {
-                                        tableAcc = acc;
-                                    }
-                                }
+                                const acc = getFinalResult(tableData[item].finalMetricData);
                                 // if hyperparameters is undefine, show error message, else, show parameters value
                                 if (tableData[item].hyperParameters) {
                                     desJobDetail.parameters = JSON.parse(tableData[item].hyperParameters).parameters;
@@ -246,7 +236,7 @@ class Overview extends React.Component<{}, OverviewState> {
                                     id: tableData[item].id,
                                     duration: duration,
                                     status: tableData[item].status,
-                                    acc: tableAcc,
+                                    acc: acc,
                                     description: desJobDetail
                                 });
                                 break;

src/webui/src/components/TrialsDetail.tsx

@@ -4,6 +4,7 @@ import { MANAGER_IP } from '../static/const';
 import { Row, Col, Button, Tabs, Input } from 'antd';
 const Search = Input.Search;
 import { TableObj, Parameters, DetailAccurPoint, TooltipForAccuracy } from '../static/interface';
+import { getFinalResult } from '../static/function';
 import Accuracy from './overview/Accuracy';
 import Duration from './trial-detail/Duration';
 import Title1 from './overview/Title1';
@@ -47,24 +48,13 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                     const accSource: Array<DetailAccurPoint> = [];
                     Object.keys(accData).map(item => {
                         if (accData[item].status === 'SUCCEEDED' && accData[item].finalMetricData) {
-                            let acc;
-                            let tableAcc;
                             let searchSpace: object = {};
-                            if (accData[item].finalMetricData) {
-                                acc = JSON.parse(accData[item].finalMetricData.data);
-                                if (typeof (acc) === 'object') {
-                                    if (acc.default) {
-                                        tableAcc = acc.default;
-                                    }
-                                } else {
-                                    tableAcc = acc;
-                                }
-                            }
+                            const acc = getFinalResult(accData[item].finalMetricData);
                             if (accData[item].hyperParameters) {
                                 searchSpace = JSON.parse(accData[item].hyperParameters).parameters;
                             }
                             accSource.push({
-                                acc: tableAcc,
+                                acc: acc,
                                 index: accData[item].sequenceId,
                                 searchSpace: JSON.stringify(searchSpace)
                             });
@@ -147,8 +137,6 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                             parameters: {},
                             intermediate: []
                         };
-                        let acc;
-                        let tableAcc = 0;
                         let duration = 0;
                         const id = trialJobs[item].id !== undefined
                             ? trialJobs[item].id
@@ -185,23 +173,14 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                             }
                         });
                         desc.intermediate = mediate;
-                        if (trialJobs[item].finalMetricData !== undefined) {
-                            acc = JSON.parse(trialJobs[item].finalMetricData.data);
-                            if (typeof (acc) === 'object') {
-                                if (acc.default) {
-                                    tableAcc = acc.default;
-                                }
-                            } else {
-                                tableAcc = acc;
-                            }
-                        }
+                        const acc = getFinalResult(trialJobs[item].finalMetricData);
                         trialTable.push({
                             key: trialTable.length,
                             sequenceId: trialJobs[item].sequenceId,
                             id: id,
                             status: status,
                             duration: duration,
-                            acc: tableAcc,
+                            acc: acc,
                             description: desc
                         });
                     });

src/webui/src/components/overview/SuccessTable.tsx

@@ -90,7 +90,7 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
                                     :
                                     record.acc
                                 :
-                                'NaN'
+                                '--'
                         }
                     </div>
                 );

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

@@ -4,6 +4,7 @@ import { MANAGER_IP } from '../../static/const';
 import ReactEcharts from 'echarts-for-react';
 import { Row, Col, Select, Button, message } from 'antd';
 import { ParaObj, VisualMapValue, Dimobj } from '../../static/interface';
+import { getFinalResult } from '../../static/function';
 const Option = Select.Option;
 require('echarts/lib/chart/parallel');
 require('echarts/lib/component/tooltip');
@@ -156,19 +157,10 @@ class Para extends React.Component<{}, ParaState> {
                         // trial-jobs interface list
                         Object.keys(accParaData).map(item => {
                             if (accParaData[item].status === 'SUCCEEDED') {
-                                if (accParaData[item].finalMetricData && accParaData[item].hyperParameters) {
-                                    // get acc array
-                                    let acc;
-                                    let accReal;
-                                    acc = JSON.parse(accParaData[item].finalMetricData.data);
-                                    if (typeof (acc) === 'object') {
-                                        if (acc.default) {
-                                            accReal = acc.default;
-                                        }
-                                    } else {
-                                        accReal = acc;
-                                    }
-                                    accPara.push(accReal);
+                                const finalData = accParaData[item].finalMetricData;
+                                if (finalData && accParaData[item].hyperParameters) {
+                                    const result = getFinalResult(finalData);
+                                    accPara.push(result);
                                     // get dim and every line specific number
                                     const temp = JSON.parse(accParaData[item].hyperParameters).parameters;
                                     eachTrialParams.push(temp);

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

@@ -237,7 +237,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                     :
                                     record.acc
                                 :
-                                'NaN'
+                                '--'
                         }
                     </div>
                 );

src/webui/src/static/function.ts

+import { FinalResult } from './interface';
+
 export const convertTime = (num: number) => {
     if (num % 3600 === 0) {
         return num / 3600 + 'h';
@@ -24,3 +26,22 @@ export const convertDuration = (num: number) => {
         return result;
     }
 };
+
+// get final result value
+export const getFinalResult = (final: FinalResult) => {
+    let acc;
+    let showDefault = 0;
+    if (final) {
+        acc = JSON.parse(final[0].data);
+        if (typeof (acc) === 'object') {
+            if (acc.default) {
+                showDefault = acc.default;
+            }
+        } else {
+            showDefault = acc;
+        }
+        return showDefault;
+    } else {
+        return 0;
+    }
+};

src/webui/src/static/interface.ts

@@ -87,9 +87,13 @@ interface VisualMapValue {
     minAccuracy: number;
 }
 
+interface FinalResult {
+    data: string;
+}
+
 export {
     TableObj, Parameters, Experiment, 
     AccurPoint, TrialNumber, TrialJob,
     DetailAccurPoint, TooltipForAccuracy,
-    ParaObj, VisualMapValue, Dimobj
+    ParaObj, VisualMapValue, Dimobj, FinalResult
 };