update (#617)

src/webui/src/components/Overview.tsx

@@ -6,7 +6,7 @@ import {
     Experiment, TableObj,
     Parameters, TrialNumber
 } from '../static/interface';
-import { getFinalResult } from '../static/function';
+import { getFinal } from '../static/function';
 import SuccessTable from './overview/SuccessTable';
 import Title1 from './overview/Title1';
 import Progressed from './overview/Progress';
@@ -62,17 +62,7 @@ class Overview extends React.Component<{}, OverviewState> {
                 tuner: {},
                 trainingServicePlatform: ''
             },
-            tableData: [{
-                key: 0,
-                sequenceId: 0,
-                id: '',
-                duration: 0,
-                status: '',
-                acc: 0,
-                description: {
-                    parameters: {}
-                }
-            }],
+            tableData: [],
             option: {},
             noData: '',
             // accuracy
@@ -224,7 +214,7 @@ class Overview extends React.Component<{}, OverviewState> {
                                     parameters: {}
                                 };
                                 const duration = (tableData[item].endTime - tableData[item].startTime) / 1000;
-                                const acc = getFinalResult(tableData[item].finalMetricData);
+                                const acc = getFinal(tableData[item].finalMetricData);
                                 // if hyperparameters is undefine, show error message, else, show parameters value
                                 if (tableData[item].hyperParameters) {
                                     const parameters = JSON.parse(tableData[item].hyperParameters[0]).parameters;
@@ -256,16 +246,16 @@ class Overview extends React.Component<{}, OverviewState> {
                     const { isTop10 } = this.state;
                     if (isTop10 === true) {
                         topTableData.sort((a: TableObj, b: TableObj) => {
-                            if (a.acc && b.acc) {
-                                return b.acc - a.acc;
+                            if (a.acc !== undefined && b.acc !== undefined) {
+                                return JSON.parse(b.acc.default) - JSON.parse(a.acc.default);
                             } else {
                                 return NaN;
                             }
                         });
                     } else {
                         topTableData.sort((a: TableObj, b: TableObj) => {
-                            if (a.acc && b.acc) {
-                                return a.acc - b.acc;
+                            if (a.acc !== undefined && b.acc !== undefined) {
+                                return JSON.parse(a.acc.default) - JSON.parse(b.acc.default);
                             } else {
                                 return NaN;
                             }
@@ -275,7 +265,7 @@ class Overview extends React.Component<{}, OverviewState> {
                     let bestDefaultMetric = 0;
                     if (topTableData[0] !== undefined) {
                         if (topTableData[0].acc !== undefined) {
-                            bestDefaultMetric = topTableData[0].acc;
+                            bestDefaultMetric = JSON.parse(topTableData[0].acc.default);
                         }
                     }
                     if (this._isMounted) {
@@ -308,7 +298,7 @@ class Overview extends React.Component<{}, OverviewState> {
         const indexarr: Array<number> = [];
         Object.keys(sourcePoint).map(item => {
             const items = sourcePoint[item];
-            accarr.push(items.acc);
+            accarr.push(items.acc.default);
             indexarr.push(items.sequenceId);
         });
         const accOption = {

src/webui/src/components/TrialsDetail.tsx

@@ -3,7 +3,7 @@ import axios from 'axios';
 import { MANAGER_IP } from '../static/const';
 import { Row, Col, Tabs, Input, Select, Button } from 'antd';
 const Option = Select.Option;
-import { TableObjFianl, Parameters, DetailAccurPoint, TooltipForAccuracy } from '../static/interface';
+import { TableObj, Parameters, DetailAccurPoint, TooltipForAccuracy } from '../static/interface';
 import { getFinalResult, getFinal } from '../static/function';
 import Accuracy from './overview/Accuracy';
 import Duration from './trial-detail/Duration';
@@ -16,8 +16,8 @@ import '../static/style/trialsDetail.scss';
 interface TrialDetailState {
     accSource: object;
     accNodata: string;
-    tableListSource: Array<TableObjFianl>;
-    searchResultSource: Array<TableObjFianl>;
+    tableListSource: Array<TableObj>;
+    searchResultSource: Array<TableObj>;
     isHasSearch: boolean;
     experimentStatus: string;
     entriesTable: number;
@@ -136,7 +136,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
             .then(res => {
                 if (res.status === 200) {
                     const trialJobs = res.data;
-                    const trialTable: Array<TableObjFianl> = [];
+                    const trialTable: Array<TableObj> = [];
                     Object.keys(trialJobs).map(item => {
                         // only succeeded trials have finalMetricData
                         let desc: Parameters = {
@@ -189,7 +189,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                         Object.keys(searchResultSource).map(index => {
                             temp.push(searchResultSource[index].id);
                         });
-                        const searchResultList: Array<TableObjFianl> = [];
+                        const searchResultList: Array<TableObj> = [];
                         for (let i = 0; i < temp.length; i++) {
                             Object.keys(trialTable).map(key => {
                                 const item = trialTable[key];
@@ -221,7 +221,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
             .then(res => {
                 if (res.status === 200) {
                     const trialJobs = res.data;
-                    const trialTable: Array<TableObjFianl> = [];
+                    const trialTable: Array<TableObj> = [];
                     Object.keys(trialJobs).map(item => {
                         // only succeeded trials have finalMetricData
                         let desc: Parameters = {
@@ -312,7 +312,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
         } else {
             window.clearInterval(this.interAllTableList);
             const { tableListSource } = this.state;
-            const searchResultList: Array<TableObjFianl> = [];
+            const searchResultList: Array<TableObj> = [];
             Object.keys(tableListSource).map(key => {
                 const item = tableListSource[key];
                 if (item.sequenceId.toString() === targetValue || item.id.includes(targetValue)) {

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

 import * as React from 'react';
 import axios from 'axios';
-import JSONTree from 'react-json-tree';
-import { Row, Modal, Input, Table, Tabs } from 'antd';
-const TabPane = Tabs.TabPane;
+import { Modal, Input, Table } from 'antd';
 const { TextArea } = Input;
+import OpenRow from '../public-child/OpenRow';
+import DefaultMetric from '../public-child/DefaultMetrc';
 import { DOWNLOAD_IP } from '../../static/const';
 import { TableObj } from '../../static/interface';
 import { convertDuration } from '../../static/function';
-import PaiTrialLog from '../logPath/PaiTrialLog';
-import TrialLog from '../logPath/TrialLog';
 import '../../static/style/tableStatus.css';
 import '../../static/style/tableList.scss';
 
@@ -74,6 +72,17 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
         }
     }
 
+    openRow = (record: TableObj) => {
+        const { trainingPlatform } = this.props;
+        return (
+            <OpenRow
+                showLogModalOverview={this.showLogModalOverview}
+                trainingPlatform={trainingPlatform}
+                record={record}
+            />
+        );
+    }
+
     componentDidMount() {
         this._isMounted = true;
     }
@@ -83,7 +92,7 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
     }
 
     render() {
-        const { tableSource, trainingPlatform } = this.props;
+        const { tableSource } = this.props;
         const { isShowLogModal, logContent } = this.state;
 
         let bgColor = '';
@@ -137,92 +146,24 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
             title: 'Default Metric',
             dataIndex: 'acc',
             key: 'acc',
-            sorter: (a: TableObj, b: TableObj) => (a.acc as number) - (b.acc as number),
-            render: (text: string, record: TableObj) => {
-                const accuracy = record.acc;
-                let wei = 0;
-                if (accuracy) {
-                    if (accuracy.toString().indexOf('.') !== -1) {
-                        wei = accuracy.toString().length - accuracy.toString().indexOf('.') - 1;
-                    }
+            sorter: (a: TableObj, b: TableObj) => {
+                if (a.acc !== undefined && b.acc !== undefined) {
+                    return JSON.parse(a.acc.default) - JSON.parse(b.acc.default);
+                } else {
+                    return NaN;
                 }
+            },
+            render: (text: string, record: TableObj) => {
                 return (
-                    <div>
-                        {
-                            record.acc
-                                ?
-                                wei > 6
-                                    ?
-                                    record.acc.toFixed(6)
-                                    :
-                                    record.acc
-                                :
-                                '--'
-                        }
-                    </div>
+                    <DefaultMetric record={record} />
                 );
             }
-            // width: 150
         }];
-
-        const openRow = (record: TableObj) => {
-            let isHasParameters = true;
-            if (record.description.parameters.error) {
-                isHasParameters = false;
-            }
-            const openRowDataSource = {
-                parameters: record.description.parameters
-            };
-            const logPathRow = record.description.logPath !== undefined
-                ?
-                record.description.logPath
-                :
-                'This trial\'s logPath are not available.';
-            return (
-                <pre id="description" className="hyperpar">
-                    <Row className="openRowContent">
-                        <Tabs tabPosition="left" className="card">
-                            <TabPane tab="Parameters" key="1">
-                                {
-                                    isHasParameters
-                                        ?
-                                        <JSONTree
-                                            hideRoot={true}
-                                            shouldExpandNode={() => true}  // default expandNode
-                                            getItemString={() => (<span />)}  // remove the {} items
-                                            data={openRowDataSource}
-                                        />
-                                        :
-                                        <div className="logpath">
-                                            <span className="logName">Error: </span>
-                                            <span className="error">'This trial's parameters are not available.'</span>
-                                        </div>
-                                }
-                            </TabPane>
-                            <TabPane tab="Log" key="2">
-                                {
-                                    trainingPlatform === 'frameworkcontroller' || trainingPlatform === 'kubeflow' || 
-                                    trainingPlatform === 'pai'
-                                        ?
-                                        <PaiTrialLog
-                                            logStr={logPathRow}
-                                            id={record.id}
-                                            showLogModal={this.showLogModalOverview}
-                                        />
-                                        :
-                                        <TrialLog logStr={logPathRow} id={record.id} />
-                                }
-                            </TabPane>
-                        </Tabs>
-                    </Row>
-                </pre>
-            );
-        };
         return (
-            <div className="tabScroll">
+            <div className="tabScroll" >
                 <Table
                     columns={columns}
-                    expandedRowRender={openRow}
+                    expandedRowRender={this.openRow}
                     dataSource={tableSource}
                     className="commonTableStyle"
                     pagination={false}
@@ -244,9 +185,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
                         />
                     </div>
                 </Modal>
-            </div>
+            </div >
         );
     }
 }
-
 export default SuccessTable;
\ No newline at end of file

src/webui/src/components/public-child/DefaultMetrc.tsx

+import * as React from 'react';
+import { TableObj } from '../../static/interface';
+
+interface DefaultMetricProps {
+    record: TableObj;
+}
+
+class DefaultMetric extends React.Component<DefaultMetricProps, {}> {
+
+    constructor(props: DefaultMetricProps) {
+        super(props);
+
+    }
+
+    render() {
+        const { record } = this.props;
+        let accuracy;
+        if (record.acc !== undefined) {
+            accuracy = record.acc.default;
+        }
+        let wei = 0;
+        if (accuracy) {
+            if (accuracy.toString().indexOf('.') !== -1) {
+                wei = accuracy.toString().length - accuracy.toString().indexOf('.') - 1;
+            }
+        }
+        return (
+            <div>
+                {
+                    record.acc && record.acc.default
+                        ?
+                        wei > 6
+                            ?
+                            JSON.parse(record.acc.default).toFixed(6)
+                            :
+                            record.acc.default
+                        :
+                        '--'
+                }
+            </div>
+        );
+    }
+}
+
+export default DefaultMetric;
\ No newline at end of file

src/webui/src/components/public-child/OpenRow.tsx

+import * as React from 'react';
+import PaiTrialLog from '../public-child/PaiTrialLog';
+import TrialLog from '../public-child/TrialLog';
+import JSONTree from 'react-json-tree';
+import { TableObj } from '../../static/interface';
+import { Row, Tabs } from 'antd';
+const TabPane = Tabs.TabPane;
+
+interface OpenRowProps {
+    trainingPlatform: string;
+    showLogModalOverview: Function;
+    record: TableObj;
+}
+
+class OpenRow extends React.Component<OpenRowProps, {}> {
+
+    constructor(props: OpenRowProps) {
+        super(props);
+
+    }
+
+    render() {
+        const { trainingPlatform, record, showLogModalOverview } = this.props;
+
+        let isHasParameters = true;
+        if (record.description.parameters.error) {
+            isHasParameters = false;
+        }
+        const openRowDataSource = {
+            parameters: record.description.parameters
+        };
+        const logPathRow = record.description.logPath !== undefined
+            ?
+            record.description.logPath
+            :
+            'This trial\'s logPath are not available.';
+        return (
+            <pre id="description" className="hyperpar">
+                <Row className="openRowContent">
+                    <Tabs tabPosition="left" className="card">
+                        <TabPane tab="Parameters" key="1">
+                            {
+                                isHasParameters
+                                    ?
+                                    <JSONTree
+                                        hideRoot={true}
+                                        shouldExpandNode={() => true}  // default expandNode
+                                        getItemString={() => (<span />)}  // remove the {} items
+                                        data={openRowDataSource}
+                                    />
+                                    :
+                                    <div className="logpath">
+                                        <span className="logName">Error: </span>
+                                        <span className="error">'This trial's parameters are not available.'</span>
+                                    </div>
+                            }
+                        </TabPane>
+                        <TabPane tab="Log" key="2">
+                            {
+                                trainingPlatform === 'pai' || trainingPlatform === 'kubeflow' ||
+                                trainingPlatform === 'frameworkcontroller'
+                                    ?
+                                    <PaiTrialLog
+                                        logStr={logPathRow}
+                                        id={record.id}
+                                        showLogModal={showLogModalOverview}
+                                    />
+                                    :
+                                    <TrialLog logStr={logPathRow} id={record.id} />
+                            }
+                        </TabPane>
+                    </Tabs>
+                </Row>
+            </pre>
+        );
+    }
+}
+
+export default OpenRow;
\ No newline at end of file

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

@@ -60,81 +60,90 @@ class Para extends React.Component<{}, ParaState> {
         };
     }
 
-    getParallelAxis = 
-    (   dimName: Array<string>, searchRange: SearchSpace, 
-        parallelAxis: Array<Dimobj>, accPara: Array<number>,
-        eachTrialParams: Array<string>, paraYdata: number[][]
-    ) => {
-        if (this._isMounted) {
-            this.setState(() => ({
-                dimName: dimName,
-                visualValue: {
-                    minAccuracy: accPara.length !== 0 ? Math.min(...accPara) : 0,
-                    maxAccuracy: accPara.length !== 0 ? Math.max(...accPara) : 1
-                }
-            }));
-        }
-        // search space range and specific value [only number]
-        for (let i = 0; i < dimName.length; i++) {
-            const searchKey = searchRange[dimName[i]];
-            switch (searchKey._type) {
-                case 'uniform':
-                case 'quniform':
-                    parallelAxis.push({
-                        dim: i,
-                        name: dimName[i],
-                        max: searchKey._value[1],
-                        min: searchKey._value[0]
-                    });
-                    break;
-
-                case 'randint':
-                    parallelAxis.push({
-                        dim: i,
-                        name: dimName[i],
-                        max: searchKey._value[0],
-                        min: 0
-                    });
-                    break;
-
-                case 'choice':
-                    const data: Array<string> = [];
-                    for (let j = 0; j < searchKey._value.length; j++) {
-                        data.push(searchKey._value[j].toString());
+    getParallelAxis =
+        (
+            dimName: Array<string>, searchRange: SearchSpace,
+            parallelAxis: Array<Dimobj>, accPara: Array<number>,
+            eachTrialParams: Array<string>, paraYdata: number[][]
+        ) => {
+            if (this._isMounted) {
+                this.setState(() => ({
+                    dimName: dimName,
+                    visualValue: {
+                        minAccuracy: accPara.length !== 0 ? Math.min(...accPara) : 0,
+                        maxAccuracy: accPara.length !== 0 ? Math.max(...accPara) : 1
                     }
-                    parallelAxis.push({
-                        dim: i,
-                        name: dimName[i],
-                        type: 'category',
-                        data: data
-                    });
-                    break;
-
-                default:
-                    parallelAxis.push({
-                        dim: i,
-                        name: dimName[i]
-                    });
-
+                }));
             }
-        }
-        // get data for every lines. if dim is choice type, number -> toString()
-        Object.keys(eachTrialParams).map(item => {
-            let temp: Array<number> = [];
+            // search space range and specific value [only number]
             for (let i = 0; i < dimName.length; i++) {
-                if ('type' in parallelAxis[i]) {
-                    temp.push(
-                        eachTrialParams[item][dimName[i]].toString()
-                    );
-                } else {
-                    temp.push(
-                        eachTrialParams[item][dimName[i]]
-                    );
+                const searchKey = searchRange[dimName[i]];
+                switch (searchKey._type) {
+                    case 'uniform':
+                    case 'quniform':
+                        parallelAxis.push({
+                            dim: i,
+                            name: dimName[i],
+                            max: searchKey._value[1],
+                            min: searchKey._value[0]
+                        });
+                        break;
+
+                    case 'randint':
+                        parallelAxis.push({
+                            dim: i,
+                            name: dimName[i],
+                            max: searchKey._value[0],
+                            min: 0
+                        });
+                        break;
+
+                    case 'choice':
+                        const data: Array<string> = [];
+                        for (let j = 0; j < searchKey._value.length; j++) {
+                            data.push(searchKey._value[j].toString());
+                        }
+                        parallelAxis.push({
+                            dim: i,
+                            name: dimName[i],
+                            type: 'category',
+                            data: data
+                        });
+                        break;
+                    // support log distribute
+                    case 'loguniform':
+                        parallelAxis.push({
+                            dim: i,
+                            name: dimName[i],
+                            type: 'log',
+                        });
+                        break;
+
+                    default:
+                        parallelAxis.push({
+                            dim: i,
+                            name: dimName[i]
+                        });
+
                 }
             }
-            paraYdata.push(temp);
-        });
-    }
+            // get data for every lines. if dim is choice type, number -> toString()
+            Object.keys(eachTrialParams).map(item => {
+                let temp: Array<number> = [];
+                for (let i = 0; i < dimName.length; i++) {
+                    if ('type' in parallelAxis[i]) {
+                        temp.push(
+                            eachTrialParams[item][dimName[i]].toString()
+                        );
+                    } else {
+                        temp.push(
+                            eachTrialParams[item][dimName[i]]
+                        );
+                    }
+                }
+                paraYdata.push(temp);
+            });
+        }
 
     hyperParaPic = () => {
         axios
@@ -253,7 +262,21 @@ class Para extends React.Component<{}, ParaState> {
                 parallelAxisDefault: {
                     tooltip: {
                         show: true
-                    }
+                    },
+                    axisLabel: {
+                        formatter: function (value: string) {
+                            const length = value.length;
+                            if (length > 16) {
+                                const temp = value.split('');
+                                for (let i = 16; i < temp.length; i += 17) {
+                                    temp[i] += '\n';
+                                }
+                                return temp.join('');
+                            } else {
+                                return value;
+                            }
+                        }
+                    },
                 }
             },
             visualMap: visualMapObj,

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

 import * as React from 'react';
 import axios from 'axios';
-import JSONTree from 'react-json-tree';
 import ReactEcharts from 'echarts-for-react';
 import {
-    Row, Input, Table, Tabs, Button, Popconfirm, Modal, message, Checkbox
+    Row, Input, Table, Button, Popconfirm, Modal, Checkbox
 } from 'antd';
 const { TextArea } = Input;
-const TabPane = Tabs.TabPane;
 const CheckboxGroup = Checkbox.Group;
 import { MANAGER_IP, DOWNLOAD_IP, trialJobStatus, COLUMN, COLUMN_INDEX } from '../../static/const';
-import { convertDuration } from '../../static/function';
-import { TableObjFianl, TrialJob } from '../../static/interface';
-import PaiTrialLog from '../logPath/PaiTrialLog';
-import TrialLog from '../logPath/TrialLog';
+import { convertDuration, intermediateGraphOption, killJob } from '../../static/function';
+import { TableObj, TrialJob } from '../../static/interface';
+import OpenRow from '../public-child/OpenRow';
+import DefaultMetric from '../public-child/DefaultMetrc';
 import '../../static/style/search.scss';
 require('../../static/style/tableStatus.css');
 require('../../static/style/logPath.scss');
@@ -30,8 +28,8 @@ echarts.registerTheme('my_theme', {
 
 interface TableListProps {
     entries: number;
-    tableSource: Array<TableObjFianl>;
-    searchResult: Array<TableObjFianl>;
+    tableSource: Array<TableObj>;
+    searchResult: Array<TableObj>;
     updateList: Function;
     isHasSearch: boolean;
     platform: string;
@@ -83,7 +81,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                     Object.keys(res.data).map(item => {
                         intermediateArr.push(parseFloat(res.data[item].data));
                     });
-                    const intermediate = this.intermediateGraphOption(intermediateArr, id);
+                    const intermediate = intermediateGraphOption(intermediateArr, id);
                     if (this._isMounted) {
                         this.setState(() => ({
                             intermediateOption: intermediate
@@ -159,70 +157,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
         }
     }
 
-    intermediateGraphOption = (intermediateArr: number[], id: string) => {
-        const sequence: number[] = [];
-        const lengthInter = intermediateArr.length;
-        for (let i = 1; i <= lengthInter; i++) {
-            sequence.push(i);
-        }
-        return {
-            title: {
-                text: id,
-                left: 'center',
-                textStyle: {
-                    fontSize: 16,
-                    color: '#333',
-                }
-            },
-            tooltip: {
-                trigger: 'item'
-            },
-            xAxis: {
-                name: 'Trial',
-                data: sequence
-            },
-            yAxis: {
-                name: 'Default Metric',
-                type: 'value',
-                data: intermediateArr
-            },
-            series: [{
-                symbolSize: 6,
-                type: 'scatter',
-                data: intermediateArr
-            }]
-        };
-    }
-
-    // kill job
-    killJob = (key: number, id: string, status: string) => {
-        const { updateList } = this.props;
-        axios(`${MANAGER_IP}/trial-jobs/${id}`, {
-            method: 'DELETE',
-            headers: {
-                'Content-Type': 'application/json;charset=utf-8'
-            }
-        })
-            .then(res => {
-                if (res.status === 200) {
-                    message.success('Cancel the job successfully');
-                    // render the table
-                    updateList();
-                } else {
-                    message.error('fail to cancel the job');
-                }
-            })
-            .catch(error => {
-                if (error.response.status === 500) {
-                    if (error.response.data.error) {
-                        message.error(error.response.data.error);
-                    } else {
-                        message.error('500 error, fail to cancel the job');
-                    }
-                }
-            });
-    }
-
     // click add column btn, just show the modal of addcolumn
     addColumn = () => {
         // show user select check button
@@ -284,6 +218,17 @@ class TableList extends React.Component<TableListProps, TableListState> {
         }
     }
 
+    openRow = (record: TableObj) => {
+        const { platform } = this.props;
+        return (
+            <OpenRow
+                showLogModalOverview={this.showLogModal}
+                trainingPlatform={platform}
+                record={record}
+            />
+        );
+    }
+
     componentDidMount() {
         this._isMounted = true;
     }
@@ -294,7 +239,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
 
     render() {
 
-        const { entries, tableSource, searchResult, isHasSearch, platform } = this.props;
+        const { entries, tableSource, searchResult, isHasSearch, updateList } = this.props;
         const { intermediateOption, modalVisible, isShowColumn, columnSelected,
             logMessage, logModal
         } = this.state;
@@ -335,7 +280,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         width: 120,
                         className: 'tableHead',
                         sorter:
-                            (a: TableObjFianl, b: TableObjFianl) =>
+                            (a: TableObj, b: TableObj) =>
                                 (a.sequenceId as number) - (b.sequenceId as number)
                     });
                     break;
@@ -347,8 +292,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         width: 60,
                         className: 'tableHead idtitle',
                         // the sort of string
-                        sorter: (a: TableObjFianl, b: TableObjFianl): number => a.id.localeCompare(b.id),
-                        render: (text: string, record: TableObjFianl) => {
+                        sorter: (a: TableObj, b: TableObj): number => a.id.localeCompare(b.id),
+                        render: (text: string, record: TableObj) => {
                             return (
                                 <div>{record.id}</div>
                             );
@@ -362,8 +307,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         key: 'duration',
                         width: 140,
                         // the sort of number
-                        sorter: (a: TableObjFianl, b: TableObjFianl) => (a.duration as number) - (b.duration as number),
-                        render: (text: string, record: TableObjFianl) => {
+                        sorter: (a: TableObj, b: TableObj) => (a.duration as number) - (b.duration as number),
+                        render: (text: string, record: TableObj) => {
                             let duration;
                             if (record.duration !== undefined && record.duration > 0) {
                                 duration = convertDuration(record.duration);
@@ -383,15 +328,15 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         key: 'status',
                         width: 150,
                         className: 'tableStatus',
-                        render: (text: string, record: TableObjFianl) => {
+                        render: (text: string, record: TableObj) => {
                             bgColor = record.status;
                             return (
                                 <span className={`${bgColor} commonStyle`}>{record.status}</span>
                             );
                         },
                         filters: trialJob,
-                        onFilter: (value: string, record: TableObjFianl) => record.status.indexOf(value) === 0,
-                        sorter: (a: TableObjFianl, b: TableObjFianl): number => a.status.localeCompare(b.status)
+                        onFilter: (value: string, record: TableObj) => record.status.indexOf(value) === 0,
+                        sorter: (a: TableObj, b: TableObj): number => a.status.localeCompare(b.status)
                     });
                     break;
                 case 'Default':
@@ -400,38 +345,16 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         dataIndex: 'acc',
                         key: 'acc',
                         width: 200,
-                        sorter: (a: TableObjFianl, b: TableObjFianl) => {
+                        sorter: (a: TableObj, b: TableObj) => {
                             if (a.acc !== undefined && b.acc !== undefined) {
                                 return JSON.parse(a.acc.default) - JSON.parse(b.acc.default);
                             } else {
                                 return NaN;
                             }
                         },
-                        render: (text: string, record: TableObjFianl) => {
-                            let accuracy;
-                            if (record.acc !== undefined) {
-                                accuracy = record.acc.default;
-                            }
-                            let wei = 0;
-                            if (accuracy) {
-                                if (accuracy.toString().indexOf('.') !== -1) {
-                                    wei = accuracy.toString().length - accuracy.toString().indexOf('.') - 1;
-                                }
-                            }
+                        render: (text: string, record: TableObj) => {
                             return (
-                                <div>
-                                    {
-                                        record.acc && record.acc.default
-                                            ?
-                                            wei > 6
-                                                ?
-                                                JSON.parse(record.acc.default).toFixed(6)
-                                                :
-                                                record.acc.default
-                                            :
-                                            '--'
-                                    }
-                                </div>
+                                <DefaultMetric record={record}/>
                             );
                         }
                     });
@@ -442,7 +365,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         dataIndex: 'operation',
                         key: 'operation',
                         width: 90,
-                        render: (text: string, record: TableObjFianl) => {
+                        render: (text: string, record: TableObj) => {
                             let trialStatus = record.status;
                             let flagKill = false;
                             if (trialStatus === 'RUNNING') {
@@ -456,7 +379,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                     (
                                         <Popconfirm
                                             title="Are you sure to cancel this trial?"
-                                            onConfirm={this.killJob.bind(this, record.key, record.id, record.status)}
+                                            onConfirm={killJob.
+                                                bind(this, record.key, record.id, record.status, updateList)}
                                         >
                                             <Button type="primary" className="tableButton">Kill</Button>
                                         </Popconfirm>
@@ -482,7 +406,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         dataIndex: 'intermediate',
                         key: 'intermediate',
                         width: '16%',
-                        render: (text: string, record: TableObjFianl) => {
+                        render: (text: string, record: TableObj) => {
                             return (
                                 <Button
                                     type="primary"
@@ -501,7 +425,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         dataIndex: item,
                         key: item,
                         width: 150,
-                        render: (text: string, record: TableObjFianl) => {
+                        render: (text: string, record: TableObj) => {
                             return (
                                 <div>
                                     {
@@ -518,72 +442,12 @@ class TableList extends React.Component<TableListProps, TableListState> {
             }
         });
 
-        const openRow = (record: TableObjFianl) => {
-            let isHasParameters = true;
-            if (record.description.parameters.error) {
-                isHasParameters = false;
-            }
-            const parametersRow = {
-                parameters: record.description.parameters
-            };
-            const logPathRow = record.description.logPath !== undefined
-                ?
-                record.description.logPath
-                :
-                'This trial\'s logPath are not available.';
-            const isdisLogbutton = record.status === 'WAITING'
-                ?
-                true
-                :
-                false;
-            return (
-                <pre id="allList" className="hyperpar">
-                    <Row className="openRowContent">
-                        <Tabs tabPosition="left" className="card">
-                            <TabPane tab="Parameters" key="1">
-                                {
-                                    isHasParameters
-                                        ?
-                                        <JSONTree
-                                            hideRoot={true}
-                                            shouldExpandNode={() => true}  // default expandNode
-                                            getItemString={() => (<span />)}  // remove the {} items
-                                            data={parametersRow}
-                                        />
-                                        :
-                                        <div className="logpath">
-                                            <span className="logName">Error: </span>
-                                            <span className="error">'This trial's parameters are not available.'</span>
-                                        </div>
-                                }
-                            </TabPane>
-                            <TabPane tab="Log" key="2">
-                                {
-                                    platform === 'pai' || platform === 'kubeflow' || platform === 'frameworkcontroller'
-                                        ?
-                                        <PaiTrialLog
-                                            logStr={logPathRow}
-                                            id={record.id}
-                                            showLogModal={this.showLogModal}
-                                            trialStatus={record.status}
-                                            isdisLogbutton={isdisLogbutton}
-                                        />
-                                        :
-                                        <TrialLog logStr={logPathRow} id={record.id} />
-                                }
-                            </TabPane>
-                        </Tabs>
-                    </Row>
-                </pre>
-            );
-        };
-
         return (
             <Row className="tableList">
                 <div id="tableList">
                     <Table
                         columns={showColumn}
-                        expandedRowRender={openRow}
+                        expandedRowRender={this.openRow}
                         dataSource={isHasSearch ? searchResult : tableSource}
                         className="commonTableStyle"
                         pagination={{ pageSize: entries }}

src/webui/src/static/function.ts

+import axios from 'axios';
+import {
+    message
+} from 'antd';
+import { MANAGER_IP } from './const';
 import { FinalResult, FinalType } from './interface';
 
 const convertTime = (num: number) => {
@@ -61,7 +66,71 @@ const getFinal = (final: FinalResult) => {
     }
 };
 
+// detail page table intermediate button
+const intermediateGraphOption = (intermediateArr: number[], id: string) => {
+    const sequence: number[] = [];
+    const lengthInter = intermediateArr.length;
+    for (let i = 1; i <= lengthInter; i++) {
+        sequence.push(i);
+    }
+    return {
+        title: {
+            text: id,
+            left: 'center',
+            textStyle: {
+                fontSize: 16,
+                color: '#333',
+            }
+        },
+        tooltip: {
+            trigger: 'item'
+        },
+        xAxis: {
+            name: 'Trial',
+            data: sequence
+        },
+        yAxis: {
+            name: 'Default Metric',
+            type: 'value',
+            data: intermediateArr
+        },
+        series: [{
+            symbolSize: 6,
+            type: 'scatter',
+            data: intermediateArr
+        }]
+    };
+};
+
+// kill job
+const killJob = (key: number, id: string, status: string, updateList: Function) => {
+    axios(`${MANAGER_IP}/trial-jobs/${id}`, {
+        method: 'DELETE',
+        headers: {
+            'Content-Type': 'application/json;charset=utf-8'
+        }
+    })
+        .then(res => {
+            if (res.status === 200) {
+                message.success('Cancel the job successfully');
+                // render the table
+                updateList();
+            } else {
+                message.error('fail to cancel the job');
+            }
+        })
+        .catch(error => {
+            if (error.response.status === 500) {
+                if (error.response.data.error) {
+                    message.error(error.response.data.error);
+                } else {
+                    message.error('500 error, fail to cancel the job');
+                }
+            }
+        });
+};
+
 export {
     convertTime, convertDuration, getFinalResult,
-    getFinal
+    getFinal, intermediateGraphOption, killJob
 };

src/webui/src/static/interface.ts

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