Skip to content

GitLab

Commit f437107d authored by Lijiao's avatar Lijiao Committed by fishyds
Browse files

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

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

* Fix comments

* fix bug
parent 95d19478
Show whitespace changes
Inline Side-by-side
Showing with 462 additions and 179 deletions
src/webui/src/components/Overview.tsx
View file @ f437107d
...@@ -209,6 +209,10 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -209,6 +209,10 @@ class Overview extends React.Component<{}, OverviewState> {
profile.failTrial += 1; profile.failTrial += 1;
break; break;
case 'RUNNING':
profile.runTrial += 1;
break;
case 'USER_CANCELED': case 'USER_CANCELED':
case 'SYS_CANCELED': case 'SYS_CANCELED':
profile.stopTrial += 1; profile.stopTrial += 1;
......
src/webui/src/components/TrialsDetail.tsx
View file @ f437107d
import * as React from 'react'; import * as React from 'react';
import axios from 'axios'; import axios from 'axios';
import { MANAGER_IP } from '../static/const'; 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; const Option = Select.Option;
import { TableObj, Parameters, DetailAccurPoint, TooltipForAccuracy } from '../static/interface'; import { TableObjFianl, Parameters, DetailAccurPoint, TooltipForAccuracy } from '../static/interface';
import { getFinalResult } from '../static/function'; import { getFinalResult, getFinal } from '../static/function';
import Accuracy from './overview/Accuracy'; import Accuracy from './overview/Accuracy';
import Duration from './trial-detail/Duration'; import Duration from './trial-detail/Duration';
import Title1 from './overview/Title1'; import Title1 from './overview/Title1';
...@@ -16,8 +16,8 @@ import '../static/style/trialsDetail.scss'; ...@@ -16,8 +16,8 @@ import '../static/style/trialsDetail.scss';
interface TrialDetailState { interface TrialDetailState {
accSource: object; accSource: object;
accNodata: string; accNodata: string;
tableListSource: Array<TableObj>; tableListSource: Array<TableObjFianl>;
searchResultSource: Array<TableObj>; searchResultSource: Array<TableObjFianl>;
isHasSearch: boolean; isHasSearch: boolean;
experimentStatus: string; experimentStatus: string;
entriesTable: number; entriesTable: number;
...@@ -30,6 +30,8 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -30,6 +30,8 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
public interTableList = 1; public interTableList = 1;
public interAllTableList = 2; public interAllTableList = 2;
public tableList: TableList | null;
constructor(props: {}) { constructor(props: {}) {
super(props); super(props);
...@@ -40,7 +42,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -40,7 +42,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
searchResultSource: [], searchResultSource: [],
experimentStatus: '', experimentStatus: '',
entriesTable: 20, entriesTable: 20,
isHasSearch: false isHasSearch: false,
}; };
} }
// trial accuracy graph // trial accuracy graph
...@@ -132,7 +134,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -132,7 +134,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
.then(res => { .then(res => {
if (res.status === 200) { if (res.status === 200) {
const trialJobs = res.data; const trialJobs = res.data;
const trialTable: Array<TableObj> = []; const trialTable: Array<TableObjFianl> = [];
Object.keys(trialJobs).map(item => { Object.keys(trialJobs).map(item => {
// only succeeded trials have finalMetricData // only succeeded trials have finalMetricData
let desc: Parameters = { let desc: Parameters = {
...@@ -167,7 +169,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -167,7 +169,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
if (trialJobs[item].logPath !== undefined) { if (trialJobs[item].logPath !== undefined) {
desc.logPath = trialJobs[item].logPath; desc.logPath = trialJobs[item].logPath;
} }
const acc = getFinalResult(trialJobs[item].finalMetricData); const acc = getFinal(trialJobs[item].finalMetricData);
trialTable.push({ trialTable.push({
key: trialTable.length, key: trialTable.length,
sequenceId: trialJobs[item].sequenceId, sequenceId: trialJobs[item].sequenceId,
...@@ -185,7 +187,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -185,7 +187,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
Object.keys(searchResultSource).map(index => { Object.keys(searchResultSource).map(index => {
temp.push(searchResultSource[index].id); temp.push(searchResultSource[index].id);
}); });
const searchResultList: Array<TableObj> = []; const searchResultList: Array<TableObjFianl> = [];
for (let i = 0; i < temp.length; i++) { for (let i = 0; i < temp.length; i++) {
Object.keys(trialTable).map(key => { Object.keys(trialTable).map(key => {
const item = trialTable[key]; const item = trialTable[key];
...@@ -217,7 +219,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -217,7 +219,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
.then(res => { .then(res => {
if (res.status === 200) { if (res.status === 200) {
const trialJobs = res.data; const trialJobs = res.data;
const trialTable: Array<TableObj> = []; const trialTable: Array<TableObjFianl> = [];
Object.keys(trialJobs).map(item => { Object.keys(trialJobs).map(item => {
// only succeeded trials have finalMetricData // only succeeded trials have finalMetricData
let desc: Parameters = { let desc: Parameters = {
...@@ -252,7 +254,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -252,7 +254,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
if (trialJobs[item].logPath !== undefined) { if (trialJobs[item].logPath !== undefined) {
desc.logPath = trialJobs[item].logPath; desc.logPath = trialJobs[item].logPath;
} }
const acc = getFinalResult(trialJobs[item].finalMetricData); const acc = getFinal(trialJobs[item].finalMetricData);
trialTable.push({ trialTable.push({
key: trialTable.length, key: trialTable.length,
sequenceId: trialJobs[item].sequenceId, sequenceId: trialJobs[item].sequenceId,
...@@ -308,7 +310,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -308,7 +310,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
} else { } else {
window.clearInterval(this.interAllTableList); window.clearInterval(this.interAllTableList);
const { tableListSource } = this.state; const { tableListSource } = this.state;
const searchResultList: Array<TableObj> = []; const searchResultList: Array<TableObjFianl> = [];
Object.keys(tableListSource).map(key => { Object.keys(tableListSource).map(key => {
const item = tableListSource[key]; const item = tableListSource[key];
if (item.sequenceId.toString() === targetValue || item.id.includes(targetValue)) { if (item.sequenceId.toString() === targetValue || item.id.includes(targetValue)) {
...@@ -364,6 +366,10 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -364,6 +366,10 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
} }
} }
test = () => {
alert('TableList component was not properly initialized.');
}
componentDidMount() { componentDidMount() {
this._isMounted = true; this._isMounted = true;
...@@ -429,6 +435,17 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -429,6 +435,17 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
<span>entries</span> <span>entries</span>
</Col> </Col>
<Col span={12} className="right"> <Col span={12} className="right">
<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> */} {/* <span>Search:</span> */}
<Input <Input
type="text" type="text"
...@@ -438,12 +455,15 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -438,12 +455,15 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
/> />
</Col> </Col>
</Row> </Row>
</Col>
</Row>
<TableList <TableList
entries={entriesTable} entries={entriesTable}
tableSource={tableListSource} tableSource={tableListSource}
updateList={this.drawTableList} updateList={this.drawTableList}
searchResult={searchResultSource} searchResult={searchResultSource}
isHasSearch={isHasSearch} isHasSearch={isHasSearch}
ref={(tabList) => this.tableList = tabList}
/> />
</div> </div>
); );
......
src/webui/src/components/overview/Progress.tsx
View file @ f437107d
...@@ -242,45 +242,45 @@ class Progressed extends React.Component<ProgressProps, ProgressState> { ...@@ -242,45 +242,45 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
maxString={`MaxTrialNumber: ${trialProfile.MaxTrialNum}`} maxString={`MaxTrialNumber: ${trialProfile.MaxTrialNum}`}
/> />
<Row className="basic colorOfbasic mess"> <Row className="basic colorOfbasic mess">
<p>Best Default Metric</p> <p>best metric</p>
<div>{bestAccuracy}</div> <div>{bestAccuracy}</div>
</Row> </Row>
<Row className="mess"> <Row className="mess">
<Col span={8}> <Col span={8}>
<Row className="basic colorOfbasic"> <Row className="basic colorOfbasic">
<p>Time Spent</p> <p>spent</p>
<div>{convertTime(trialProfile.execDuration)}</div> <div>{convertTime(trialProfile.execDuration)}</div>
</Row> </Row>
</Col> </Col>
<Col span={9}> <Col span={9}>
<Row className="basic colorOfbasic"> <Row className="basic colorOfbasic">
<p>Remaining Time</p> <p>remaining</p>
<div>{remaining}</div> <div>{remaining}</div>
</Row> </Row>
</Col> </Col>
<Col span={7}> <Col span={7}>
<Row className="basic colorOfbasic"> <Row className="basic colorOfbasic">
<p>MaxDuration</p> <p>running</p>
<div>{convertTime(trialProfile.maxDuration)}</div> <div>{trialNumber.runTrial}</div>
</Row> </Row>
</Col> </Col>
</Row> </Row>
<Row className="mess"> <Row className="mess">
<Col span={8}> <Col span={8}>
<Row className="basic colorOfbasic"> <Row className="basic colorOfbasic">
<p>Succeed Trial</p> <p>succeed</p>
<div>{trialNumber.succTrial}</div> <div>{trialNumber.succTrial}</div>
</Row> </Row>
</Col> </Col>
<Col span={9}> <Col span={9}>
<Row className="basic"> <Row className="basic">
<p>Stopped Trial</p> <p>stopped</p>
<div>{trialNumber.stopTrial}</div> <div>{trialNumber.stopTrial}</div>
</Row> </Row>
</Col> </Col>
<Col span={7}> <Col span={7}>
<Row className="basic"> <Row className="basic">
<p>Failed Trial</p> <p>failed</p>
<div>{trialNumber.failTrial}</div> <div>{trialNumber.failTrial}</div>
</Row> </Row>
</Col> </Col>
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ f437107d
...@@ -2,11 +2,13 @@ import * as React from 'react'; ...@@ -2,11 +2,13 @@ import * as React from 'react';
import axios from 'axios'; import axios from 'axios';
import JSONTree from 'react-json-tree'; import JSONTree from 'react-json-tree';
import ReactEcharts from 'echarts-for-react'; import ReactEcharts from 'echarts-for-react';
import { Row, Table, Button, Popconfirm, Modal, message } from 'antd'; import { Row, Table, Button, Popconfirm, Modal, message, Checkbox } from 'antd';
import { MANAGER_IP, trialJobStatus } from '../../static/const'; const CheckboxGroup = Checkbox.Group;
import { MANAGER_IP, trialJobStatus, COLUMN, COLUMN_INDEX } from '../../static/const';
import { convertDuration } from '../../static/function'; import { convertDuration } from '../../static/function';
import { TableObj, TrialJob } from '../../static/interface'; import { TableObjFianl, TrialJob } from '../../static/interface';
import LogPath from '../logPath/LogPath'; import LogPath from '../logPath/LogPath';
import '../../static/style/search.scss';
require('../../static/style/tableStatus.css'); require('../../static/style/tableStatus.css');
require('../../static/style/logPath.scss'); require('../../static/style/logPath.scss');
require('../../static/style/search.scss'); require('../../static/style/search.scss');
...@@ -22,8 +24,8 @@ echarts.registerTheme('my_theme', { ...@@ -22,8 +24,8 @@ echarts.registerTheme('my_theme', {
interface TableListProps { interface TableListProps {
entries: number; entries: number;
tableSource: Array<TableObj>; tableSource: Array<TableObjFianl>;
searchResult: Array<TableObj>; searchResult: Array<TableObjFianl>;
updateList: Function; updateList: Function;
isHasSearch: boolean; isHasSearch: boolean;
} }
...@@ -31,6 +33,14 @@ interface TableListProps { ...@@ -31,6 +33,14 @@ interface TableListProps {
interface TableListState { interface TableListState {
intermediateOption: object; intermediateOption: object;
modalVisible: boolean; modalVisible: boolean;
isObjFinal: boolean;
isShowColumn: boolean;
columnSelected: Array<string>; // user select columnKeys
}
interface ColumnIndex {
name: string;
index: number;
} }
class TableList extends React.Component<TableListProps, TableListState> { class TableList extends React.Component<TableListProps, TableListState> {
...@@ -41,7 +51,10 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -41,7 +51,10 @@ class TableList extends React.Component<TableListProps, TableListState> {
this.state = { this.state = {
intermediateOption: {}, intermediateOption: {},
modalVisible: false modalVisible: false,
isObjFinal: false,
isShowColumn: false,
columnSelected: COLUMN,
}; };
} }
...@@ -79,6 +92,14 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -79,6 +92,14 @@ class TableList extends React.Component<TableListProps, TableListState> {
} }
} }
hideShowColumnModal = () => {
if (this._isMounted) {
this.setState({
isShowColumn: false
});
}
}
intermediateGraphOption = (intermediateArr: number[], id: string) => { intermediateGraphOption = (intermediateArr: number[], id: string) => {
const sequence: number[] = []; const sequence: number[] = [];
const lengthInter = intermediateArr.length; const lengthInter = intermediateArr.length;
...@@ -143,6 +164,67 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -143,6 +164,67 @@ class TableList extends React.Component<TableListProps, TableListState> {
}); });
} }
// click add column btn, just show the modal of addcolumn
addColumn = () => {
// show user select check button
if (this._isMounted) {
this.setState({
isShowColumn: true
});
}
}
// checkbox for coloumn
selectedColumn = (checkedValues: Array<string>) => {
let count = 6;
const want: Array<object> = [];
const finalKeys: Array<string> = [];
const wantResult: Array<string> = [];
Object.keys(checkedValues).map(m => {
switch (checkedValues[m]) {
case 'Trial No':
case 'id':
case 'duration':
case 'status':
case 'Operation':
case 'Default':
case 'Intermediate Result':
break;
default:
finalKeys.push(checkedValues[m]);
}
});
Object.keys(finalKeys).map(n => {
want.push({
name: finalKeys[n],
index: count++
});
});
Object.keys(checkedValues).map(item => {
const temp = checkedValues[item];
Object.keys(COLUMN_INDEX).map(key => {
const index = COLUMN_INDEX[key];
if (index.name === temp) {
want.push(index);
}
});
});
want.sort((a: ColumnIndex, b: ColumnIndex) => {
return a.index - b.index;
});
Object.keys(want).map(i => {
wantResult.push(want[i].name);
});
if (this._isMounted) {
this.setState(() => ({ columnSelected: wantResult }));
}
}
componentDidMount() { componentDidMount() {
this._isMounted = true; this._isMounted = true;
} }
...@@ -154,7 +236,27 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -154,7 +236,27 @@ class TableList extends React.Component<TableListProps, TableListState> {
render() { render() {
const { entries, tableSource, searchResult, isHasSearch } = this.props; const { entries, tableSource, searchResult, isHasSearch } = this.props;
const { intermediateOption, modalVisible } = this.state; const { intermediateOption, modalVisible, isShowColumn, columnSelected,
} = this.state;
let showTitle = COLUMN;
if (tableSource.length >= 1) {
const temp = tableSource[0].acc;
if (temp !== undefined && typeof temp === 'object') {
if (this._isMounted) {
// concat default column and finalkeys
const item = Object.keys(temp);
const want: Array<string> = [];
Object.keys(item).map(key => {
if (item[key] !== 'default') {
want.push(item[key]);
}
});
showTitle = COLUMN.concat(want);
}
}
}
let bgColor = ''; let bgColor = '';
const trialJob: Array<TrialJob> = []; const trialJob: Array<TrialJob> = [];
trialJobStatus.map(item => { trialJobStatus.map(item => {
...@@ -163,35 +265,47 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -163,35 +265,47 @@ class TableList extends React.Component<TableListProps, TableListState> {
value: item value: item
}); });
}); });
const showColumn: Array<object> = [];
const columns = [{ Object.keys(columnSelected).map(key => {
const item = columnSelected[key];
switch (item) {
case 'Trial No':
showColumn.push({
title: 'Trial No.', title: 'Trial No.',
dataIndex: 'sequenceId', dataIndex: 'sequenceId',
key: 'sequenceId', key: 'sequenceId',
width: 120, width: 120,
className: 'tableHead', className: 'tableHead',
sorter: (a: TableObj, b: TableObj) => (a.sequenceId as number) - (b.sequenceId as number) sorter:
}, { (a: TableObjFianl, b: TableObjFianl) =>
(a.sequenceId as number) - (b.sequenceId as number)
});
break;
case 'id':
showColumn.push({
title: 'Id', title: 'Id',
dataIndex: 'id', dataIndex: 'id',
key: 'id', key: 'id',
width: 60, width: 60,
className: 'tableHead idtitle', className: 'tableHead idtitle',
// the sort of string // the sort of string
sorter: (a: TableObj, b: TableObj): number => a.id.localeCompare(b.id), sorter: (a: TableObjFianl, b: TableObjFianl): number => a.id.localeCompare(b.id),
render: (text: string, record: TableObj) => { render: (text: string, record: TableObjFianl) => {
return ( return (
<div>{record.id}</div> <div>{record.id}</div>
); );
} }
}, { });
break;
case 'duration':
showColumn.push({
title: 'Duration', title: 'Duration',
dataIndex: 'duration', dataIndex: 'duration',
key: 'duration', key: 'duration',
width: 140, width: 140,
// the sort of number // the sort of number
sorter: (a: TableObj, b: TableObj) => (a.duration as number) - (b.duration as number), sorter: (a: TableObjFianl, b: TableObjFianl) => (a.duration as number) - (b.duration as number),
render: (text: string, record: TableObj) => { render: (text: string, record: TableObjFianl) => {
let duration; let duration;
if (record.duration !== undefined && record.duration > 0) { if (record.duration !== undefined && record.duration > 0) {
duration = convertDuration(record.duration); duration = convertDuration(record.duration);
...@@ -202,29 +316,44 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -202,29 +316,44 @@ class TableList extends React.Component<TableListProps, TableListState> {
<div className="durationsty"><div>{duration}</div></div> <div className="durationsty"><div>{duration}</div></div>
); );
}, },
}, { });
break;
case 'status':
showColumn.push({
title: 'Status', title: 'Status',
dataIndex: 'status', dataIndex: 'status',
key: 'status', key: 'status',
width: 150, width: 150,
className: 'tableStatus', className: 'tableStatus',
render: (text: string, record: TableObj) => { render: (text: string, record: TableObjFianl) => {
bgColor = record.status; bgColor = record.status;
return ( return (
<span className={`${bgColor} commonStyle`}>{record.status}</span> <span className={`${bgColor} commonStyle`}>{record.status}</span>
); );
}, },
filters: trialJob, filters: trialJob,
onFilter: (value: string, record: TableObj) => record.status.indexOf(value) === 0, onFilter: (value: string, record: TableObjFianl) => record.status.indexOf(value) === 0,
sorter: (a: TableObj, b: TableObj): number => a.status.localeCompare(b.status) sorter: (a: TableObjFianl, b: TableObjFianl): number => a.status.localeCompare(b.status)
}, { });
break;
case 'Default':
showColumn.push({
title: 'Default Metric', title: 'Default Metric',
dataIndex: 'acc', dataIndex: 'acc',
key: 'acc', key: 'acc',
width: 200, width: 200,
sorter: (a: TableObj, b: TableObj) => (a.acc as number) - (b.acc as number), sorter: (a: TableObjFianl, b: TableObjFianl) => {
render: (text: string, record: TableObj) => { if (a.acc !== undefined && b.acc !== undefined) {
const accuracy = record.acc; 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; let wei = 0;
if (accuracy) { if (accuracy) {
if (accuracy.toString().indexOf('.') !== -1) { if (accuracy.toString().indexOf('.') !== -1) {
...@@ -234,25 +363,28 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -234,25 +363,28 @@ class TableList extends React.Component<TableListProps, TableListState> {
return ( return (
<div> <div>
{ {
record.acc record.acc && record.acc.default
? ?
wei > 6 wei > 6
? ?
record.acc.toFixed(6) JSON.parse(record.acc.default).toFixed(6)
: :
record.acc record.acc.default
: :
'--' '--'
} }
</div> </div>
); );
} }
}, { });
break;
case 'Operation':
showColumn.push({
title: 'Operation', title: 'Operation',
dataIndex: 'operation', dataIndex: 'operation',
key: 'operation', key: 'operation',
width: 90, width: 90,
render: (text: string, record: TableObj) => { render: (text: string, record: TableObjFianl) => {
let trialStatus = record.status; let trialStatus = record.status;
let flagKill = false; let flagKill = false;
if (trialStatus === 'RUNNING') { if (trialStatus === 'RUNNING') {
...@@ -283,12 +415,16 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -283,12 +415,16 @@ class TableList extends React.Component<TableListProps, TableListState> {
) )
); );
}, },
}, { });
break;
case 'Intermediate Result':
showColumn.push({
title: 'Intermediate Result', title: 'Intermediate Result',
dataIndex: 'intermediate', dataIndex: 'intermediate',
key: 'intermediate', key: 'intermediate',
width: '16%', width: '16%',
render: (text: string, record: TableObj) => { render: (text: string, record: TableObjFianl) => {
return ( return (
<Button <Button
type="primary" type="primary"
...@@ -299,10 +435,32 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -299,10 +435,32 @@ class TableList extends React.Component<TableListProps, TableListState> {
</Button> </Button>
); );
}, },
});
break;
default:
showColumn.push({
title: item,
dataIndex: item,
key: item,
width: 150,
render: (text: string, record: TableObjFianl) => {
return (
<div>
{
record.acc
?
record.acc[item]
:
'--'
}
</div>
);
} }
]; });
}
});
const openRow = (record: TableObj) => { const openRow = (record: TableObjFianl) => {
let isHasParameters = true; let isHasParameters = true;
if (record.description.parameters.error) { if (record.description.parameters.error) {
isHasParameters = false; isHasParameters = false;
...@@ -341,12 +499,13 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -341,12 +499,13 @@ class TableList extends React.Component<TableListProps, TableListState> {
<Row className="tableList"> <Row className="tableList">
<div id="tableList"> <div id="tableList">
<Table <Table
columns={columns} columns={showColumn}
expandedRowRender={openRow} expandedRowRender={openRow}
dataSource={isHasSearch ? searchResult : tableSource} dataSource={isHasSearch ? searchResult : tableSource}
className="commonTableStyle" className="commonTableStyle"
pagination={{ pageSize: entries }} pagination={{ pageSize: entries }}
/> />
{/* Intermediate Result Modal */}
<Modal <Modal
title="Intermediate Result" title="Intermediate Result"
visible={modalVisible} visible={modalVisible}
...@@ -365,6 +524,22 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -365,6 +524,22 @@ class TableList extends React.Component<TableListProps, TableListState> {
/> />
</Modal> </Modal>
</div> </div>
{/* Add Column Modal */}
<Modal
title="Table Title"
visible={isShowColumn}
onCancel={this.hideShowColumnModal}
footer={null}
destroyOnClose={true}
width="40%"
>
<CheckboxGroup
options={showTitle}
defaultValue={columnSelected}
onChange={this.selectedColumn}
className="titleColumn"
/>
</Modal>
</Row> </Row>
); );
} }
......
src/webui/src/static/const.ts
View file @ f437107d
export const MANAGER_IP = `/api/v1/nni`; const MANAGER_IP = `/api/v1/nni`;
export const DOWNLOAD_IP = `/logs`; const DOWNLOAD_IP = `/logs`;
export const trialJobStatus = [ const trialJobStatus = [
'UNKNOWN', 'UNKNOWN',
'WAITING', 'WAITING',
'RUNNING', 'RUNNING',
...@@ -10,12 +10,47 @@ export const trialJobStatus = [ ...@@ -10,12 +10,47 @@ export const trialJobStatus = [
'SYS_CANCELED', 'SYS_CANCELED',
'EARLY_STOPPED' 'EARLY_STOPPED'
]; ];
export const CONTROLTYPE = [ const CONTROLTYPE = [
'SEARCH_SPACE', 'SEARCH_SPACE',
'TRIAL_CONCURRENCY', 'TRIAL_CONCURRENCY',
'MAX_EXEC_DURATION' 'MAX_EXEC_DURATION'
]; ];
export const MONACO = { const MONACO = {
readOnly: true, readOnly: true,
automaticLayout: 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
View file @ f437107d
import { FinalResult } from './interface'; import { FinalResult, FinalType } from './interface';
const convertTime = (num: number) => { const convertTime = (num: number) => {
if (num % 3600 === 0) { if (num % 3600 === 0) {
...@@ -28,6 +28,7 @@ const convertDuration = (num: number) => { ...@@ -28,6 +28,7 @@ const convertDuration = (num: number) => {
}; };
// get final result value // get final result value
// draw Accuracy point graph
const getFinalResult = (final: FinalResult) => { const getFinalResult = (final: FinalResult) => {
let acc; let acc;
let showDefault = 0; let showDefault = 0;
...@@ -46,6 +47,21 @@ const getFinalResult = (final: FinalResult) => { ...@@ -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 { export {
convertTime, convertDuration, getFinalResult convertTime, convertDuration, getFinalResult,
getFinal
}; };
src/webui/src/static/interface.ts
View file @ f437107d
// draw accuracy graph data interface
interface TableObj { interface TableObj {
key: number; key: number;
sequenceId: number; sequenceId: number;
id: string; id: string;
duration: number; duration: number;
status: string; status: string;
acc?: number; acc?: number; // draw accuracy graph
description: Parameters; description: Parameters;
color?: string; 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 { interface ErrorParameter {
error?: string; error?: string;
} }
interface Parameters { interface Parameters {
parameters: ErrorParameter; parameters: ErrorParameter;
logPath?: string; logPath?: string;
...@@ -93,5 +111,6 @@ export { ...@@ -93,5 +111,6 @@ export {
TableObj, Parameters, Experiment, TableObj, Parameters, Experiment,
AccurPoint, TrialNumber, TrialJob, AccurPoint, TrialNumber, TrialJob,
DetailAccurPoint, TooltipForAccuracy, DetailAccurPoint, TooltipForAccuracy,
ParaObj, VisualMapValue, Dimobj, FinalResult ParaObj, VisualMapValue, Dimobj, FinalResult,
TableObjFianl, FinalType
}; };
src/webui/src/static/style/search.scss
View file @ f437107d
/* some buttons about trial-detail table */
.allList{ .allList{
width: 96%; width: 96%;
margin: 0 auto; margin: 0 auto;
...@@ -17,4 +18,17 @@ ...@@ -17,4 +18,17 @@
} }
} }
.titleColumn{
.ant-checkbox-group-item{
display: block;
}
}
.applyfooter{
/* apply button style */
.apply{
text-align: right;
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment