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
Show 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');
require('echarts/lib/component/visualMap');
require('../style/para.css');
const chartMulineStyle = {
width: '100%',
height: 600,
margin: '0 auto',
padding: 15
};
interface Dimobj {
dim: number;
name: string;
......@@ -227,6 +220,22 @@ class Para extends React.Component<{}, ParaState> {
const { visualValue } = this.state;
let parallelAxis = dataObj.parallelAxis;
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 = {
parallelAxis,
tooltip: {
......@@ -252,13 +261,7 @@ class Para extends React.Component<{}, ParaState> {
}
}
},
visualMap: {
type: 'continuous',
min: visualValue.minAccuracy,
max: visualValue.maxAccuracy,
// gradient color
color: ['#fb7c7c', 'yellow', 'lightblue']
},
visualMap: visualMapObj,
highlight: {
type: 'highlight'
},
......@@ -375,6 +378,12 @@ class Para extends React.Component<{}, ParaState> {
render() {
const { option, paraNodata, dimName } = this.state;
const chartMulineStyle = {
width: '100%',
height: 600,
margin: '0 auto',
padding: 15
};
return (
<div className="para">
<div className="paraCon">
......@@ -384,7 +393,7 @@ class Para extends React.Component<{}, ParaState> {
<span>top</span>
<Select
className="parapercent"
style={{ width: '20%' }}
style={{ width: '15%' }}
placeholder="100%"
optionFilterProp="children"
onSelect={this.percentNum}
......@@ -395,7 +404,7 @@ class Para extends React.Component<{}, ParaState> {
<Option value="1">100%</Option>
</Select>
<Select
style={{ width: '60%' }}
style={{ width: '50%' }}
mode="multiple"
placeholder="Please select two items to swap"
onChange={this.getSwapArr}
......
src/webui/src/components/Sessionpro.tsx
View file @ 36b583b7
......@@ -37,11 +37,10 @@ interface Experiment {
interface SessionState {
tableData: Array<TableObj>;
searchSpace: object;
status: string;
trialProfile: Experiment;
tunerAssessor: object;
selNum: number;
selStatus: string;
trialRun: Array<number>;
option: object;
noData: string;
}
......@@ -56,6 +55,7 @@ class Sessionpro extends React.Component<{}, SessionState> {
super(props);
this.state = {
searchSpace: {},
status: '',
trialProfile: {
id: '',
author: '',
......@@ -79,96 +79,11 @@ class Sessionpro extends React.Component<{}, SessionState> {
description: {}
}],
selNum: overviewItem,
selStatus: 'Complete',
trialRun: [],
option: {},
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
showSessionPro = () => {
axios(`${MANAGER_IP}/experiment`, {
......@@ -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 = () => {
......@@ -218,8 +144,6 @@ class Sessionpro extends React.Component<{}, SessionState> {
})
.then(res => {
if (res.status === 200) {
// deal with complete trial data to draw CDF graph
let trialRunData: Array<number> = [];
const { selNum } = this.state;
const tableData = res.data;
const topTableData: Array<TableObj> = [];
......@@ -249,7 +173,6 @@ class Sessionpro extends React.Component<{}, SessionState> {
acc: acc,
description: desJobDetail
});
trialRunData.push(duration);
}
});
topTableData.sort((a: TableObj, b: TableObj) => {
......@@ -262,8 +185,7 @@ class Sessionpro extends React.Component<{}, SessionState> {
topTableData.length = Math.min(selNum, topTableData.length);
if (this._isMounted) {
this.setState({
tableData: topTableData,
trialRun: trialRunData.sort(this.sortNumber)
tableData: topTableData
});
}
}
......@@ -276,7 +198,7 @@ class Sessionpro extends React.Component<{}, SessionState> {
if (this._isMounted) {
this.setState({ selNum: num }, () => {
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> {
};
const {
trialProfile, searchSpace, tunerAssessor, tableData,
// option, noData
trialProfile, searchSpace, tunerAssessor, tableData, status
} = this.state;
let running;
if (trialProfile.endTime === 'not over') {
......@@ -415,6 +336,10 @@ class Sessionpro extends React.Component<{}, SessionState> {
Max&nbsp;Trial&nbsp;Number
<span className="messcont">{trialProfile.MaxTrialNum}</span>
</p>
<p className="experStatus">
Status
<span className="messcont">{status}</span>
</p>
</div>
<div className="logo">
<Icon className="fogreen" type="picture" />
......@@ -458,13 +383,15 @@ class Sessionpro extends React.Component<{}, SessionState> {
<span className="tabuser1">top</span>
<Select
style={{ width: 200 }}
placeholder="5"
placeholder="50"
optionFilterProp="children"
onSelect={this.handleChange}
>
<Option value="20">20</Option>
<Option value="5">5</Option>
<Option value="50">50</Option>
<Option value="100">100</Option>
<Option value="150">150</Option>
<Option value="200">200</Option>
</Select>
</Col>
</Row>
......@@ -475,7 +402,6 @@ class Sessionpro extends React.Component<{}, SessionState> {
dataSource={tableData}
className="tables"
bordered={true}
scroll={{ x: '100%', y: 540 }}
/>
</div>
</div>
......
src/webui/src/components/TrialStatus.tsx
View file @ 36b583b7
......@@ -84,22 +84,17 @@ class TrialStatus extends React.Component<{}, TabState> {
showIntermediateModal = (id: string) => {
axios(`${MANAGER_IP}/metric-data/${id}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
method: 'GET'
})
.then(res => {
if (res.status === 200) {
const intermediateArr: number[] = [];
const xinter: number[] = [];
Object.keys(res.data).map(item => {
intermediateArr.push(parseFloat(res.data[item].data));
xinter.push(res.data[item].sequence);
});
if (this._isMounted) {
this.setState({
intermediateOption: this.intermediateGraphOption(intermediateArr, id, xinter)
intermediateOption: this.intermediateGraphOption(intermediateArr, id)
});
}
}
......@@ -131,7 +126,7 @@ class TrialStatus extends React.Component<{}, TabState> {
},
title: {
left: 'center',
text: 'Running Trial',
text: 'Trial Duration',
textStyle: {
fontSize: 18,
color: '#333'
......@@ -221,6 +216,11 @@ class TrialStatus extends React.Component<{}, TabState> {
const trialTable: Array<TableObj> = [];
Object.keys(trialJobs).map(item => {
// only succeeded trials have finalMetricData
let desc: DescObj = {
parameters: {}
};
let acc = 0;
let duration = 0;
const id = trialJobs[item].id !== undefined
? trialJobs[item].id
: '';
......@@ -233,20 +233,15 @@ class TrialStatus extends React.Component<{}, TabState> {
const endTime = trialJobs[item].endTime !== undefined
? new Date(trialJobs[item].endTime).toLocaleString()
: '';
let desc: DescObj = {
parameters: {}
};
if (trialJobs[item].hyperParameters !== undefined) {
desc.parameters = JSON.parse(trialJobs[item].hyperParameters).parameters;
}
if (trialJobs[item].logPath !== undefined) {
desc.logPath = trialJobs[item].logPath;
}
let acc = 0;
if (trialJobs[item].finalMetricData !== undefined) {
acc = parseFloat(trialJobs[item].finalMetricData.data);
}
let duration = 0;
if (startTime !== '' && endTime !== '') {
duration = (trialJobs[item].endTime - trialJobs[item].startTime) / 1000;
} else if (startTime !== '' && endTime === '') {
......@@ -254,7 +249,6 @@ class TrialStatus extends React.Component<{}, TabState> {
} else {
duration = 0;
}
trialTable.push({
key: trialTable.length,
id: id,
......@@ -267,9 +261,9 @@ class TrialStatus extends React.Component<{}, TabState> {
});
});
if (this._isMounted) {
this.setState({
this.setState(() => ({
tableData: trialTable
});
}));
}
}
});
......@@ -292,6 +286,11 @@ class TrialStatus extends React.Component<{}, TabState> {
} else {
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> {
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 {
title: {
text: id,
left: 'center',
textStyle: {
fontSize: 16,
color: '#333',
}
},
tooltip: {
trigger: 'item'
},
xAxis: {
name: 'Trial',
data: xinter
data: sequence
},
yAxis: {
name: 'Accuracy',
......@@ -490,10 +502,9 @@ class TrialStatus extends React.Component<{}, TabState> {
columns={columns}
expandedRowRender={openRow}
dataSource={tableData}
pagination={{ pageSize: 20 }}
pagination={{ pageSize: 10 }}
className="tables"
bordered={true}
scroll={{ x: '100%', y: window.innerHeight * 0.78 }}
/>
<Modal
title="Intermediate Result"
......
src/webui/src/const.ts
View file @ 36b583b7
......@@ -13,4 +13,4 @@ export const CONTROLTYPE = [
'TRIAL_CONCURRENCY',
'MAX_EXEC_DURATION'
];
export const overviewItem = 5;
export const overviewItem = 50;
src/webui/src/style/sessionpro.css
View file @ 36b583b7
......@@ -68,7 +68,7 @@
padding-top: 16px;
}
.message .trialNum{
padding-top: 32px;
padding-top: 21px;
}
.session .head .headCon>div .logo{
width: 100%;
......@@ -178,21 +178,8 @@
}
.tabuser1, .tabuser2{
color: #333;
}
.tabuser1, .tabuser2{
margin-right: 8px;
}
.cdf{
width: 100%;
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)
.experStatus{
line-height: 12px;
}
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