Skip to content

GitLab

Commit f23f8a06 authored by Lijiao's avatar Lijiao Committed by liuzhe-lz
Browse files

Add intermediate count column to show trial progress (#1408) 

* Add intermeidte count column to show trial progress

* delete unuseful code

* update style

* rename yAxis metric to Metric in compare modal

* fix comments
parent 1fda8609
Hide whitespace changes
Inline Side-by-side
Showing with 188 additions and 107 deletions
src/webui/src/components/Modal/Compare.tsx
View file @ f23f8a06
import * as React from 'react'; import * as React from 'react';
import { Row, Modal } from 'antd'; import { Row, Modal } from 'antd';
import ReactEcharts from 'echarts-for-react'; import ReactEcharts from 'echarts-for-react';
import IntermediateVal from '../public-child/IntermediateVal'; import IntermediateVal from '../public-child/IntermediateVal';
import '../../static/style/compare.scss'; import '../../static/style/compare.scss';
import { TableObj, Intermedia, TooltipForIntermediate } from 'src/static/interface'; import { TableObj, Intermedia, TooltipForIntermediate } from 'src/static/interface';
...@@ -83,13 +83,13 @@ class Compare extends React.Component<CompareProps, {}> { ...@@ -83,13 +83,13 @@ class Compare extends React.Component<CompareProps, {}> {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
name: 'Step', // name: '# Intermeidate',
boundaryGap: false, boundaryGap: false,
data: xAxis data: xAxis
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
name: 'metric' name: 'Metric'
}, },
series: trialIntermediate series: trialIntermediate
}; };
...@@ -137,7 +137,7 @@ class Compare extends React.Component<CompareProps, {}> { ...@@ -137,7 +137,7 @@ class Compare extends React.Component<CompareProps, {}> {
const temp = compareRows[index]; const temp = compareRows[index];
return ( return (
<td className="value" key={index}> <td className="value" key={index}>
<IntermediateVal record={temp}/> <IntermediateVal record={temp} />
</td> </td>
); );
})} })}
...@@ -193,9 +193,11 @@ class Compare extends React.Component<CompareProps, {}> { ...@@ -193,9 +193,11 @@ class Compare extends React.Component<CompareProps, {}> {
destroyOnClose={true} destroyOnClose={true}
maskClosable={false} maskClosable={false}
width="90%" width="90%"
// centered={true}
> >
<Row>{this.intermediate()}</Row> <Row className="compare-intermeidate">
{this.intermediate()}
<Row className="compare-yAxis"># Intermeidate</Row>
</Row>
<Row>{this.initColumn()}</Row> <Row>{this.initColumn()}</Row>
</Modal> </Modal>
); );
......
src/webui/src/components/trial-detail/Intermeidate.tsx
View file @ f23f8a06
import * as React from 'react'; import * as React from 'react';
import { Row, Col, Button, Switch } from 'antd'; import { Row, Button, Switch } from 'antd';
import { TooltipForIntermediate, TableObj, Intermedia } from '../../static/interface'; import { TooltipForIntermediate, TableObj, Intermedia } from '../../static/interface';
import ReactEcharts from 'echarts-for-react'; import ReactEcharts from 'echarts-for-react';
require('echarts/lib/component/tooltip'); require('echarts/lib/component/tooltip');
...@@ -108,7 +108,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState> ...@@ -108,7 +108,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
name: 'Step', // name: '# Intermediate',
boundaryGap: false, boundaryGap: false,
data: xAxis data: xAxis
}, },
...@@ -282,58 +282,52 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState> ...@@ -282,58 +282,52 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
<div> <div>
{/* style in para.scss */} {/* style in para.scss */}
<Row className="meline intermediate"> <Row className="meline intermediate">
<Col span={8} /> {/* filter message */}
<Col span={3} className="inter-filter-btn"> <span>Filter</span>
{/* filter message */} <Switch
<span>Filter</span> defaultChecked={false}
<Switch onChange={this.switchTurn}
defaultChecked={false} />
onChange={this.switchTurn}
/>
</Col>
{ {
isFilter isFilter
? ?
<div> <span>
<Col span={3}> <span className="filter-x"># Intermeidate</span>
<span>Step</span> <input
<input // placeholder="point"
placeholder="point" ref={input => this.pointInput = input}
ref={input => this.pointInput = input} className="strange"
className="strange" />
/> <span>Metric range</span>
</Col> <input
<Col className="range" span={10}> // placeholder="range"
<span>Intermediate result</span> ref={input => this.minValInput = input}
<input />
placeholder="number" <span className="hyphen">-</span>
ref={input => this.minValInput = input} <input
/> // placeholder="range"
<span className="heng">-</span> ref={input => this.maxValInput = input}
<input />
placeholder="number" <Button
ref={input => this.maxValInput = input} type="primary"
/> className="changeBtu tableButton"
<Button onClick={this.filterLines}
type="primary" disabled={isLoadconfirmBtn}
className="changeBtu tableButton" >
onClick={this.filterLines} Confirm
disabled={isLoadconfirmBtn} </Button>
> </span>
Confirm
</Button>
</Col>
</div>
: :
<Col /> null
} }
</Row> </Row>
<Row> <Row className="intermeidate-graph">
<ReactEcharts <ReactEcharts
option={interSource} option={interSource}
style={{ width: '100%', height: 418, margin: '0 auto' }} style={{ width: '100%', height: 418, margin: '0 auto' }}
notMerge={true} // update now notMerge={true} // update now
/> />
<div className="yAxis"># Intermediate</div>
</Row> </Row>
</div> </div>
); );
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ f23f8a06
import * as React from 'react'; import * as React from 'react';
import axios from 'axios'; import axios from 'axios';
import ReactEcharts from 'echarts-for-react'; import ReactEcharts from 'echarts-for-react';
import { Row, Table, Button, Popconfirm, Modal, Checkbox, Select } from 'antd'; import { Row, Table, Button, Popconfirm, Modal, Checkbox, Select, Icon } from 'antd';
const Option = Select.Option; const Option = Select.Option;
const CheckboxGroup = Checkbox.Group; const CheckboxGroup = Checkbox.Group;
import { MANAGER_IP, trialJobStatus, COLUMN, COLUMN_INDEX } from '../../static/const'; import { MANAGER_IP, trialJobStatus, COLUMN, COLUMN_INDEX, COLUMNPro } from '../../static/const';
import { convertDuration, intermediateGraphOption, killJob } from '../../static/function'; import { convertDuration, intermediateGraphOption, killJob, filterByStatus } from '../../static/function';
import { TableObj, TrialJob } from '../../static/interface'; import { TableObj, TrialJob } from '../../static/interface';
import OpenRow from '../public-child/OpenRow'; import OpenRow from '../public-child/OpenRow';
import Compare from '../Modal/Compare'; import Compare from '../Modal/Compare';
...@@ -180,7 +180,8 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -180,7 +180,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
// checkbox for coloumn // checkbox for coloumn
selectedColumn = (checkedValues: Array<string>) => { selectedColumn = (checkedValues: Array<string>) => {
let count = 6; // 7: because have seven common column, "Intermediate count" is not shown by default
let count = 7;
const want: Array<object> = []; const want: Array<object> = [];
const finalKeys: Array<string> = []; const finalKeys: Array<string> = [];
const wantResult: Array<string> = []; const wantResult: Array<string> = [];
...@@ -192,7 +193,7 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -192,7 +193,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
case 'Status': case 'Status':
case 'Operation': case 'Operation':
case 'Default': case 'Default':
case 'Intermediate result': case 'Intermeidate count':
break; break;
default: default:
finalKeys.push(checkedValues[m]); finalKeys.push(checkedValues[m]);
...@@ -285,23 +286,27 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -285,23 +286,27 @@ class TableList extends React.Component<TableListProps, TableListState> {
this.fillSelectedRowsTostate(selected, selectedRows); this.fillSelectedRowsTostate(selected, selectedRows);
} }
}; };
let showTitle = COLUMN; let showTitle = COLUMNPro;
let bgColor = ''; let bgColor = '';
const trialJob: Array<TrialJob> = []; const trialJob: Array<TrialJob> = [];
const showColumn: Array<object> = []; const showColumn: Array<object> = [];
if (tableSource.length >= 1) { // only succeed trials have final keys
const temp = tableSource[0].acc; if (tableSource.filter(filterByStatus).length >= 1) {
const temp = tableSource.filter(filterByStatus)[0].acc;
if (temp !== undefined && typeof temp === 'object') { if (temp !== undefined && typeof temp === 'object') {
if (this._isMounted) { if (this._isMounted) {
// concat default column and finalkeys // concat default column and finalkeys
const item = Object.keys(temp); const item = Object.keys(temp);
const want: Array<string> = []; // item: ['default', 'other-keys', 'maybe loss']
Object.keys(item).map(key => { if (item.length > 1) {
if (item[key] !== 'default') { const want: Array<string> = [];
want.push(item[key]); item.forEach(value => {
} if (value !== 'default') {
}); want.push(value);
showTitle = COLUMN.concat(want); }
});
showTitle = COLUMNPro.concat(want);
}
} }
} }
} }
...@@ -345,7 +350,7 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -345,7 +350,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
title: 'Duration', title: 'Duration',
dataIndex: 'duration', dataIndex: 'duration',
key: 'duration', key: 'duration',
width: 140, width: 100,
// the sort of number // the sort of number
sorter: (a: TableObj, b: TableObj) => (a.duration as number) - (b.duration as number), sorter: (a: TableObj, b: TableObj) => (a.duration as number) - (b.duration as number),
render: (text: string, record: TableObj) => { render: (text: string, record: TableObj) => {
...@@ -387,6 +392,19 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -387,6 +392,19 @@ class TableList extends React.Component<TableListProps, TableListState> {
sorter: (a: TableObj, b: TableObj): number => a.status.localeCompare(b.status) sorter: (a: TableObj, b: TableObj): number => a.status.localeCompare(b.status)
}); });
break; break;
case 'Intermeidate count':
showColumn.push({
title: 'Intermediate count',
dataIndex: 'progress',
key: 'progress',
width: 86,
render: (text: string, record: TableObj) => {
return (
<span>{`#${record.description.intermediate.length}`}</span>
);
},
});
break;
case 'Default': case 'Default':
showColumn.push({ showColumn.push({
title: 'Default metric', title: 'Default metric',
...@@ -415,37 +433,37 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -415,37 +433,37 @@ class TableList extends React.Component<TableListProps, TableListState> {
title: 'Operation', title: 'Operation',
dataIndex: 'operation', dataIndex: 'operation',
key: 'operation', key: 'operation',
width: 90, width: 120,
render: (text: string, record: TableObj) => { render: (text: string, record: TableObj) => {
let trialStatus = record.status; let trialStatus = record.status;
let flagKill = false; const flag: boolean = (trialStatus === 'RUNNING') ? false : true;
if (trialStatus === 'RUNNING') {
flagKill = true;
} else {
flagKill = false;
}
return ( return (
flagKill <Row id="detail-button">
? {/* see intermediate result graph */}
( <Button
<Popconfirm type="primary"
title="Are you sure to cancel this trial?" className="common-style"
onConfirm={killJob. onClick={this.showIntermediateModal.bind(this, record.id)}
bind(this, record.key, record.id, record.status, updateList)} title="Intermediate"
> >
<Button type="primary" className="tableButton">Kill</Button> <Icon type="line-chart" />
</Popconfirm> </Button>
) {/* kill job */}
: <Popconfirm
( title="Are you sure to cancel this trial?"
onConfirm={killJob.
bind(this, record.key, record.id, record.status, updateList)}
>
<Button <Button
type="primary" type="default"
className="tableButton" disabled={flag}
disabled={true} className="margin-mediate special"
title="kill"
> >
Kill <Icon type="stop" />
</Button> </Button>
) </Popconfirm>
</Row>
); );
}, },
}); });
......
src/webui/src/static/const.ts
View file @ f23f8a06
...@@ -42,20 +42,23 @@ const COLUMN_INDEX = [ ...@@ -42,20 +42,23 @@ const COLUMN_INDEX = [
index: 4 index: 4
}, },
{ {
name: 'Default', name: 'Intermeidate count',
index: 5 index: 5
}, },
{ {
name: 'Operation', name: 'Default',
index: 10000 index: 6
}, },
{ {
name: 'Intermediate result', name: 'Operation',
index: 10001 index: 10000
} }
]; ];
const COLUMN = ['Trial No.', 'ID', 'Duration', 'Status', 'Default', 'Operation', 'Intermediate result']; // defatult selected column
const COLUMN = ['Trial No.', 'ID', 'Duration', 'Status', 'Default', 'Operation'];
// all choice column !dictory final
const COLUMNPro = ['Trial No.', 'ID', 'Duration', 'Status', 'Intermeidate count', 'Default', 'Operation'];
export { export {
MANAGER_IP, DOWNLOAD_IP, trialJobStatus, MANAGER_IP, DOWNLOAD_IP, trialJobStatus, COLUMNPro,
CONTROLTYPE, MONACO, COLUMN, COLUMN_INDEX, DRAWEROPTION CONTROLTYPE, MONACO, COLUMN, COLUMN_INDEX, DRAWEROPTION
}; };
src/webui/src/static/style/compare.scss
View file @ f23f8a06
...@@ -23,3 +23,13 @@ ...@@ -23,3 +23,13 @@
font-weight: 600; font-weight: 600;
} }
} }
.compare-intermeidate{
position: relative;
.compare-yAxis{
color: #333;
position: absolute;
top: 87%;
left: 45%;
}
}
src/webui/src/static/style/para.scss
View file @ f23f8a06
...@@ -27,23 +27,23 @@ ...@@ -27,23 +27,23 @@
/* Intermediate Result Style */ /* Intermediate Result Style */
.intermediate{ .intermediate{
width: 90%;
text-align: right;
/* border: 1px solid blue; */ /* border: 1px solid blue; */
input{ input{
width: 80px; width: 64px;
height: 32px; height: 32px;
padding-left: 8px; padding-left: 8px;
} }
.strange{ .strange{
margin-top: 2px; margin-top: 2px;
margin-right: 15px;
} }
.inter-filter-btn{ .hyphen{
height: 34px; margin-left: 6px;
line-height: 34px; margin-right: 6px;
} }
.range{ .filter-x{
.heng{ margin-left: 15px;
margin-left: 6px;
margin-right: 6px;
}
} }
} }
src/webui/src/static/style/progress.scss
View file @ f23f8a06
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
} }
.probar{ .probar{
width: 95%;
height: 34px; height: 34px;
margin-top: 15px; margin-top: 15px;
......
src/webui/src/static/style/table.scss
View file @ f23f8a06
...@@ -108,4 +108,46 @@ ...@@ -108,4 +108,46 @@
.ant-table-thead > tr > th .ant-table-column-sorters::before{ .ant-table-thead > tr > th .ant-table-column-sorters::before{
padding-bottom: 25px; padding-bottom: 25px;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
} }
\ No newline at end of file
.margin-mediate{
margin: 0 10px;
}
#detail-button{
.common-style, .common-style:visited, .common-style:focus{
height: 26px;
border: none;
border-radius: 0;
background-color: #0078d4;
}
.common-style:hover{
background-color: #106ebe;
}
.common-style:active{
background-color: #005a9e;
outline: 0;
}
.common-style:disabled{
background-color: #f4f4f4;
}
.special, .special:visited, .special:focus{
height: 26px;
border: none;
border-radius: 0;
outline: 0;
background-color: #f4f4f4;
color: #333;
}
.special:hover{
background-color: #eaeaea;
}
.special:active{
background-color: #c8c8c8;
outline: 0;
}
.special:disabled{
background-color: #f4f4f4;
color: #d9d9d9;
}
}
src/webui/src/static/style/trialsDetail.scss
View file @ f23f8a06
...@@ -83,3 +83,14 @@ ...@@ -83,3 +83,14 @@
} }
} }
} }
/* for # intermediate in intermeidate graph*/
.intermeidate-graph{
position: relative;
.yAxis{
color: #333;
position: absolute;
left: 45%;
top: 86%;
}
}
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