Skip to content

GitLab

Commit 36b583b7 authored by Lijiao's avatar Lijiao Committed by fishyds
Browse files

Fix bugs about webui (#131) 

* Fix webui bugs

* Fix tslint
parent d750246c
Hide whitespace changes
Inline Side-by-side
Showing with 84 additions and 151 deletions
src/webui/src/components/Para.tsx
View file @ 36b583b7
...@@ -10,13 +10,6 @@ require('echarts/lib/component/title'); ...@@ -10,13 +10,6 @@ require('echarts/lib/component/title');
require('echarts/lib/component/visualMap'); require('echarts/lib/component/visualMap');
require('../style/para.css'); require('../style/para.css');
const chartMulineStyle = {
width: '100%',
height: 600,
margin: '0 auto',
padding: 15
};
interface Dimobj { interface Dimobj {
dim: number; dim: number;
name: string; name: string;
...@@ -227,6 +220,22 @@ class Para extends React.Component<{}, ParaState> { ...@@ -227,6 +220,22 @@ class Para extends React.Component<{}, ParaState> {
const { visualValue } = this.state; const { visualValue } = this.state;
let parallelAxis = dataObj.parallelAxis; let parallelAxis = dataObj.parallelAxis;
let paralleData = dataObj.data; let paralleData = dataObj.data;
const maxAccuracy = visualValue.maxAccuracy;
const minAccuracy = visualValue.minAccuracy;
let visualMapObj = {};
if (maxAccuracy === minAccuracy) {
visualMapObj = {
type: 'continuous',
color: ['#fb7c7c', 'yellow', 'lightblue']
};
} else {
visualMapObj = {
type: 'continuous',
min: visualValue.minAccuracy,
max: visualValue.maxAccuracy,
color: ['#fb7c7c', 'yellow', 'lightblue']
};
}
let optionown = { let optionown = {
parallelAxis, parallelAxis,
tooltip: { tooltip: {
...@@ -252,13 +261,7 @@ class Para extends React.Component<{}, ParaState> { ...@@ -252,13 +261,7 @@ class Para extends React.Component<{}, ParaState> {
} }
} }
}, },
visualMap: { visualMap: visualMapObj,
type: 'continuous',
min: visualValue.minAccuracy,
max: visualValue.maxAccuracy,
// gradient color
color: ['#fb7c7c', 'yellow', 'lightblue']
},
highlight: { highlight: {
type: 'highlight' type: 'highlight'
}, },
...@@ -375,6 +378,12 @@ class Para extends React.Component<{}, ParaState> { ...@@ -375,6 +378,12 @@ class Para extends React.Component<{}, ParaState> {
render() { render() {
const { option, paraNodata, dimName } = this.state; const { option, paraNodata, dimName } = this.state;
const chartMulineStyle = {
width: '100%',
height: 600,
margin: '0 auto',
padding: 15
};
return ( return (
<div className="para"> <div className="para">
<div className="paraCon"> <div className="paraCon">
...@@ -384,7 +393,7 @@ class Para extends React.Component<{}, ParaState> { ...@@ -384,7 +393,7 @@ class Para extends React.Component<{}, ParaState> {
<span>top</span> <span>top</span>
<Select <Select
className="parapercent" className="parapercent"
style={{ width: '20%' }} style={{ width: '15%' }}
placeholder="100%" placeholder="100%"
optionFilterProp="children" optionFilterProp="children"
onSelect={this.percentNum} onSelect={this.percentNum}
...@@ -395,7 +404,7 @@ class Para extends React.Component<{}, ParaState> { ...@@ -395,7 +404,7 @@ class Para extends React.Component<{}, ParaState> {
<Option value="1">100%</Option> <Option value="1">100%</Option>
</Select> </Select>
<Select <Select
style={{ width: '60%' }} style={{ width: '50%' }}
mode="multiple" mode="multiple"
placeholder="Please select two items to swap" placeholder="Please select two items to swap"
onChange={this.getSwapArr} onChange={this.getSwapArr}
......
src/webui/src/components/Sessionpro.tsx
View file @ 36b583b7
...@@ -37,11 +37,10 @@ interface Experiment { ...@@ -37,11 +37,10 @@ interface Experiment {
interface SessionState { interface SessionState {
tableData: Array<TableObj>; tableData: Array<TableObj>;
searchSpace: object; searchSpace: object;
status: string;
trialProfile: Experiment; trialProfile: Experiment;
tunerAssessor: object; tunerAssessor: object;
selNum: number; selNum: number;
selStatus: string;
trialRun: Array<number>;
option: object; option: object;
noData: string; noData: string;
} }
...@@ -56,6 +55,7 @@ class Sessionpro extends React.Component<{}, SessionState> { ...@@ -56,6 +55,7 @@ class Sessionpro extends React.Component<{}, SessionState> {
super(props); super(props);
this.state = { this.state = {
searchSpace: {}, searchSpace: {},
status: '',
trialProfile: { trialProfile: {
id: '', id: '',
author: '', author: '',
...@@ -79,96 +79,11 @@ class Sessionpro extends React.Component<{}, SessionState> { ...@@ -79,96 +79,11 @@ class Sessionpro extends React.Component<{}, SessionState> {
description: {} description: {}
}], }],
selNum: overviewItem, selNum: overviewItem,
selStatus: 'Complete',
trialRun: [],
option: {}, option: {},
noData: '' noData: ''
}; };
} }
sortNumber = (a: number, b: number) => {
return a - b;
}
// draw cdf data
getOption = (data: Array<number>) => {
let len = data.length;
// let min = Math.floor(Math.min.apply(null, data));
let min = Math.floor(data[0]);
let max = Math.ceil(data[len - 1]);
let gap = (max - min) / 10;
let a = 0;
let b = 0;
let c = 0;
let d = 0;
let e = 0;
let f = 0;
let g = 0;
let h = 0;
let i = 0;
let j = 0;
let xAxis: number[] = [];
for (let m = 0; m < 10; m++) {
xAxis.push(min + gap * m);
}
data.map(item => {
switch (Math.floor((item - min) / gap)) {
case 0: a++; b++; c++; d++; e++; f++; g++; h++; i++; j++; break;
case 1: b++; c++; d++; e++; f++; g++; h++; i++; j++; break;
case 2: c++; d++; e++; f++; g++; h++; i++; j++; break;
case 3: d++; e++; f++; g++; h++; i++; j++; break;
case 4: e++; f++; g++; h++; i++; j++; break;
case 5: f++; g++; h++; i++; j++; break;
case 6: g++; h++; i++; j++; break;
case 7: h++; i++; j++; break;
case 8: i++; j++; break;
case 9: j++; break;
default: j++; break;
}
});
let prob = [a / len, b / len, c / len, d / len, e / len, f / len, g / len, h / len, i / len, j / len];
return {
tooltip: {
trigger: 'item'
},
title: {
left: 'center',
text: 'Succeeded Trials CDF',
top: 16
},
grid: {
left: '5%'
},
xAxis: {
name: 'trial running time/s',
type: 'category',
data: xAxis
},
yAxis: {
name: 'percent',
type: 'value',
min: 0,
max: 1
},
series: [
{
type: 'line',
smooth: true,
itemStyle: {
normal: {
color: 'skyblue'
}
},
data: prob
}
]
};
}
// show session // show session
showSessionPro = () => { showSessionPro = () => {
axios(`${MANAGER_IP}/experiment`, { axios(`${MANAGER_IP}/experiment`, {
...@@ -210,6 +125,17 @@ class Sessionpro extends React.Component<{}, SessionState> { ...@@ -210,6 +125,17 @@ class Sessionpro extends React.Component<{}, SessionState> {
} }
} }
}); });
axios(`${MANAGER_IP}/check-status`, {
method: 'GET'
})
.then(res => {
if (res.status === 200 && this._isMounted) {
this.setState({
status: res.data.status
});
}
});
} }
showTrials = () => { showTrials = () => {
...@@ -218,8 +144,6 @@ class Sessionpro extends React.Component<{}, SessionState> { ...@@ -218,8 +144,6 @@ class Sessionpro extends React.Component<{}, SessionState> {
}) })
.then(res => { .then(res => {
if (res.status === 200) { if (res.status === 200) {
// deal with complete trial data to draw CDF graph
let trialRunData: Array<number> = [];
const { selNum } = this.state; const { selNum } = this.state;
const tableData = res.data; const tableData = res.data;
const topTableData: Array<TableObj> = []; const topTableData: Array<TableObj> = [];
...@@ -249,7 +173,6 @@ class Sessionpro extends React.Component<{}, SessionState> { ...@@ -249,7 +173,6 @@ class Sessionpro extends React.Component<{}, SessionState> {
acc: acc, acc: acc,
description: desJobDetail description: desJobDetail
}); });
trialRunData.push(duration);
} }
}); });
topTableData.sort((a: TableObj, b: TableObj) => { topTableData.sort((a: TableObj, b: TableObj) => {
...@@ -262,8 +185,7 @@ class Sessionpro extends React.Component<{}, SessionState> { ...@@ -262,8 +185,7 @@ class Sessionpro extends React.Component<{}, SessionState> {
topTableData.length = Math.min(selNum, topTableData.length); topTableData.length = Math.min(selNum, topTableData.length);
if (this._isMounted) { if (this._isMounted) {
this.setState({ this.setState({
tableData: topTableData, tableData: topTableData
trialRun: trialRunData.sort(this.sortNumber)
}); });
} }
} }
...@@ -276,7 +198,7 @@ class Sessionpro extends React.Component<{}, SessionState> { ...@@ -276,7 +198,7 @@ class Sessionpro extends React.Component<{}, SessionState> {
if (this._isMounted) { if (this._isMounted) {
this.setState({ selNum: num }, () => { this.setState({ selNum: num }, () => {
this.showTrials(); this.showTrials();
this.intervalID = window.setInterval(this.showTrials, 60000); this.intervalID = window.setInterval(this.showTrials, 10000);
}); });
} }
} }
...@@ -352,8 +274,7 @@ class Sessionpro extends React.Component<{}, SessionState> { ...@@ -352,8 +274,7 @@ class Sessionpro extends React.Component<{}, SessionState> {
}; };
const { const {
trialProfile, searchSpace, tunerAssessor, tableData, trialProfile, searchSpace, tunerAssessor, tableData, status
// option, noData
} = this.state; } = this.state;
let running; let running;
if (trialProfile.endTime === 'not over') { if (trialProfile.endTime === 'not over') {
...@@ -415,6 +336,10 @@ class Sessionpro extends React.Component<{}, SessionState> { ...@@ -415,6 +336,10 @@ class Sessionpro extends React.Component<{}, SessionState> {
Max&nbsp;Trial&nbsp;Number Max&nbsp;Trial&nbsp;Number
<span className="messcont">{trialProfile.MaxTrialNum}</span> <span className="messcont">{trialProfile.MaxTrialNum}</span>
</p> </p>
<p className="experStatus">
Status
<span className="messcont">{status}</span>
</p>
</div> </div>
<div className="logo"> <div className="logo">
<Icon className="fogreen" type="picture" /> <Icon className="fogreen" type="picture" />
...@@ -458,13 +383,15 @@ class Sessionpro extends React.Component<{}, SessionState> { ...@@ -458,13 +383,15 @@ class Sessionpro extends React.Component<{}, SessionState> {
<span className="tabuser1">top</span> <span className="tabuser1">top</span>
<Select <Select
style={{ width: 200 }} style={{ width: 200 }}
placeholder="5" placeholder="50"
optionFilterProp="children" optionFilterProp="children"
onSelect={this.handleChange} onSelect={this.handleChange}
> >
<Option value="20">20</Option> <Option value="5">5</Option>
<Option value="50">50</Option> <Option value="50">50</Option>
<Option value="100">100</Option> <Option value="100">100</Option>
<Option value="150">150</Option>
<Option value="200">200</Option>
</Select> </Select>
</Col> </Col>
</Row> </Row>
...@@ -475,7 +402,6 @@ class Sessionpro extends React.Component<{}, SessionState> { ...@@ -475,7 +402,6 @@ class Sessionpro extends React.Component<{}, SessionState> {
dataSource={tableData} dataSource={tableData}
className="tables" className="tables"
bordered={true} bordered={true}
scroll={{ x: '100%', y: 540 }}
/> />
</div> </div>
</div> </div>
......
src/webui/src/components/TrialStatus.tsx
View file @ 36b583b7
...@@ -84,22 +84,17 @@ class TrialStatus extends React.Component<{}, TabState> { ...@@ -84,22 +84,17 @@ class TrialStatus extends React.Component<{}, TabState> {
showIntermediateModal = (id: string) => { showIntermediateModal = (id: string) => {
axios(`${MANAGER_IP}/metric-data/${id}`, { axios(`${MANAGER_IP}/metric-data/${id}`, {
method: 'GET', method: 'GET'
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
}) })
.then(res => { .then(res => {
if (res.status === 200) { if (res.status === 200) {
const intermediateArr: number[] = []; const intermediateArr: number[] = [];
const xinter: number[] = [];
Object.keys(res.data).map(item => { Object.keys(res.data).map(item => {
intermediateArr.push(parseFloat(res.data[item].data)); intermediateArr.push(parseFloat(res.data[item].data));
xinter.push(res.data[item].sequence);
}); });
if (this._isMounted) { if (this._isMounted) {
this.setState({ this.setState({
intermediateOption: this.intermediateGraphOption(intermediateArr, id, xinter) intermediateOption: this.intermediateGraphOption(intermediateArr, id)
}); });
} }
} }
...@@ -131,7 +126,7 @@ class TrialStatus extends React.Component<{}, TabState> { ...@@ -131,7 +126,7 @@ class TrialStatus extends React.Component<{}, TabState> {
}, },
title: { title: {
left: 'center', left: 'center',
text: 'Running Trial', text: 'Trial Duration',
textStyle: { textStyle: {
fontSize: 18, fontSize: 18,
color: '#333' color: '#333'
...@@ -221,6 +216,11 @@ class TrialStatus extends React.Component<{}, TabState> { ...@@ -221,6 +216,11 @@ class TrialStatus extends React.Component<{}, TabState> {
const trialTable: Array<TableObj> = []; const trialTable: Array<TableObj> = [];
Object.keys(trialJobs).map(item => { Object.keys(trialJobs).map(item => {
// only succeeded trials have finalMetricData // only succeeded trials have finalMetricData
let desc: DescObj = {
parameters: {}
};
let acc = 0;
let duration = 0;
const id = trialJobs[item].id !== undefined const id = trialJobs[item].id !== undefined
? trialJobs[item].id ? trialJobs[item].id
: ''; : '';
...@@ -233,20 +233,15 @@ class TrialStatus extends React.Component<{}, TabState> { ...@@ -233,20 +233,15 @@ class TrialStatus extends React.Component<{}, TabState> {
const endTime = trialJobs[item].endTime !== undefined const endTime = trialJobs[item].endTime !== undefined
? new Date(trialJobs[item].endTime).toLocaleString() ? new Date(trialJobs[item].endTime).toLocaleString()
: ''; : '';
let desc: DescObj = {
parameters: {}
};
if (trialJobs[item].hyperParameters !== undefined) { if (trialJobs[item].hyperParameters !== undefined) {
desc.parameters = JSON.parse(trialJobs[item].hyperParameters).parameters; desc.parameters = JSON.parse(trialJobs[item].hyperParameters).parameters;
} }
if (trialJobs[item].logPath !== undefined) { if (trialJobs[item].logPath !== undefined) {
desc.logPath = trialJobs[item].logPath; desc.logPath = trialJobs[item].logPath;
} }
let acc = 0;
if (trialJobs[item].finalMetricData !== undefined) { if (trialJobs[item].finalMetricData !== undefined) {
acc = parseFloat(trialJobs[item].finalMetricData.data); acc = parseFloat(trialJobs[item].finalMetricData.data);
} }
let duration = 0;
if (startTime !== '' && endTime !== '') { if (startTime !== '' && endTime !== '') {
duration = (trialJobs[item].endTime - trialJobs[item].startTime) / 1000; duration = (trialJobs[item].endTime - trialJobs[item].startTime) / 1000;
} else if (startTime !== '' && endTime === '') { } else if (startTime !== '' && endTime === '') {
...@@ -254,7 +249,6 @@ class TrialStatus extends React.Component<{}, TabState> { ...@@ -254,7 +249,6 @@ class TrialStatus extends React.Component<{}, TabState> {
} else { } else {
duration = 0; duration = 0;
} }
trialTable.push({ trialTable.push({
key: trialTable.length, key: trialTable.length,
id: id, id: id,
...@@ -267,9 +261,9 @@ class TrialStatus extends React.Component<{}, TabState> { ...@@ -267,9 +261,9 @@ class TrialStatus extends React.Component<{}, TabState> {
}); });
}); });
if (this._isMounted) { if (this._isMounted) {
this.setState({ this.setState(() => ({
tableData: trialTable tableData: trialTable
}); }));
} }
} }
}); });
...@@ -292,6 +286,11 @@ class TrialStatus extends React.Component<{}, TabState> { ...@@ -292,6 +286,11 @@ class TrialStatus extends React.Component<{}, TabState> {
} else { } else {
message.error('fail to cancel the job'); message.error('fail to cancel the job');
} }
})
.catch(error => {
if (error.response.status === 500) {
message.error('500 error, fail to cancel the job');
}
}); });
} }
...@@ -306,14 +305,27 @@ class TrialStatus extends React.Component<{}, TabState> { ...@@ -306,14 +305,27 @@ class TrialStatus extends React.Component<{}, TabState> {
browserHistory.push(path); browserHistory.push(path);
} }
intermediateGraphOption = (intermediateArr: number[], id: string, xinter: number[]) => { intermediateGraphOption = (intermediateArr: number[], id: string) => {
const sequence: number[] = [];
const lengthInter = intermediateArr.length;
for (let i = 1; i <= lengthInter; i++) {
sequence.push(i);
}
return { return {
title: {
text: id,
left: 'center',
textStyle: {
fontSize: 16,
color: '#333',
}
},
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
xAxis: { xAxis: {
name: 'Trial', name: 'Trial',
data: xinter data: sequence
}, },
yAxis: { yAxis: {
name: 'Accuracy', name: 'Accuracy',
...@@ -490,10 +502,9 @@ class TrialStatus extends React.Component<{}, TabState> { ...@@ -490,10 +502,9 @@ class TrialStatus extends React.Component<{}, TabState> {
columns={columns} columns={columns}
expandedRowRender={openRow} expandedRowRender={openRow}
dataSource={tableData} dataSource={tableData}
pagination={{ pageSize: 20 }} pagination={{ pageSize: 10 }}
className="tables" className="tables"
bordered={true} bordered={true}
scroll={{ x: '100%', y: window.innerHeight * 0.78 }}
/> />
<Modal <Modal
title="Intermediate Result" title="Intermediate Result"
......
src/webui/src/const.ts
View file @ 36b583b7
...@@ -13,4 +13,4 @@ export const CONTROLTYPE = [ ...@@ -13,4 +13,4 @@ export const CONTROLTYPE = [
'TRIAL_CONCURRENCY', 'TRIAL_CONCURRENCY',
'MAX_EXEC_DURATION' 'MAX_EXEC_DURATION'
]; ];
export const overviewItem = 5; export const overviewItem = 50;
src/webui/src/style/sessionpro.css
View file @ 36b583b7
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
padding-top: 16px; padding-top: 16px;
} }
.message .trialNum{ .message .trialNum{
padding-top: 32px; padding-top: 21px;
} }
.session .head .headCon>div .logo{ .session .head .headCon>div .logo{
width: 100%; width: 100%;
...@@ -178,21 +178,8 @@ ...@@ -178,21 +178,8 @@
} }
.tabuser1, .tabuser2{ .tabuser1, .tabuser2{
color: #333; color: #333;
}
.tabuser1, .tabuser2{
margin-right: 8px; margin-right: 8px;
} }
.cdf{ .experStatus{
width: 100%; line-height: 12px;
border: 1px solid #ccc;
}
.cdf>div:first-child{
position: relative;
} }
.cdf .addNodata{
position: absolute;
left: 48.5%;
top: 75%;
font-size: 13px;
color: rgba(0, 0, 0, 0.45)
}
\ No newline at end of file
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