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 { Row, Modal } from 'antd';
import ReactEcharts from 'echarts-for-react';
import IntermediateVal from '../public-child/IntermediateVal';
import IntermediateVal from '../public-child/IntermediateVal';
import '../../static/style/compare.scss';
import { TableObj, Intermedia, TooltipForIntermediate } from 'src/static/interface';
......@@ -83,13 +83,13 @@ class Compare extends React.Component<CompareProps, {}> {
},
xAxis: {
type: 'category',
name: 'Step',
// name: '# Intermeidate',
boundaryGap: false,
data: xAxis
},
yAxis: {
type: 'value',
name: 'metric'
name: 'Metric'
},
series: trialIntermediate
};
......@@ -137,7 +137,7 @@ class Compare extends React.Component<CompareProps, {}> {
const temp = compareRows[index];
return (
<td className="value" key={index}>
<IntermediateVal record={temp}/>
<IntermediateVal record={temp} />
</td>
);
})}
......@@ -193,9 +193,11 @@ class Compare extends React.Component<CompareProps, {}> {
destroyOnClose={true}
maskClosable={false}
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>
</Modal>
);
......
src/webui/src/components/trial-detail/Intermeidate.tsx
View file @ f23f8a06
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 ReactEcharts from 'echarts-for-react';
require('echarts/lib/component/tooltip');
......@@ -108,7 +108,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
},
xAxis: {
type: 'category',
name: 'Step',
// name: '# Intermediate',
boundaryGap: false,
data: xAxis
},
......@@ -282,58 +282,52 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
<div>
{/* style in para.scss */}
<Row className="meline intermediate">
<Col span={8} />
<Col span={3} className="inter-filter-btn">
{/* filter message */}
<span>Filter</span>
<Switch
defaultChecked={false}
onChange={this.switchTurn}
/>
</Col>
{/* filter message */}
<span>Filter</span>
<Switch
defaultChecked={false}
onChange={this.switchTurn}
/>
{
isFilter
?
<div>
<Col span={3}>
<span>Step</span>
<input
placeholder="point"
ref={input => this.pointInput = input}
className="strange"
/>
</Col>
<Col className="range" span={10}>
<span>Intermediate result</span>
<input
placeholder="number"
ref={input => this.minValInput = input}
/>
<span className="heng">-</span>
<input
placeholder="number"
ref={input => this.maxValInput = input}
/>
<Button
type="primary"
className="changeBtu tableButton"
onClick={this.filterLines}
disabled={isLoadconfirmBtn}
>
Confirm
</Button>
</Col>
</div>
<span>
<span className="filter-x"># Intermeidate</span>
<input
// placeholder="point"
ref={input => this.pointInput = input}
className="strange"
/>
<span>Metric range</span>
<input
// placeholder="range"
ref={input => this.minValInput = input}
/>
<span className="hyphen">-</span>
<input
// placeholder="range"
ref={input => this.maxValInput = input}
/>
<Button
type="primary"
className="changeBtu tableButton"
onClick={this.filterLines}
disabled={isLoadconfirmBtn}
>
Confirm
</Button>
</span>
:
<Col />
null
}
</Row>
<Row>
<Row className="intermeidate-graph">
<ReactEcharts
option={interSource}
style={{ width: '100%', height: 418, margin: '0 auto' }}
notMerge={true} // update now
/>
<div className="yAxis"># Intermediate</div>
</Row>
</div>
);
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ f23f8a06
import * as React from 'react';
import axios from 'axios';
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 CheckboxGroup = Checkbox.Group;
import { MANAGER_IP, trialJobStatus, COLUMN, COLUMN_INDEX } from '../../static/const';
import { convertDuration, intermediateGraphOption, killJob } from '../../static/function';
import { MANAGER_IP, trialJobStatus, COLUMN, COLUMN_INDEX, COLUMNPro } from '../../static/const';
import { convertDuration, intermediateGraphOption, killJob, filterByStatus } from '../../static/function';
import { TableObj, TrialJob } from '../../static/interface';
import OpenRow from '../public-child/OpenRow';
import Compare from '../Modal/Compare';
......@@ -180,7 +180,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
// checkbox for coloumn
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 finalKeys: Array<string> = [];
const wantResult: Array<string> = [];
......@@ -192,7 +193,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
case 'Status':
case 'Operation':
case 'Default':
case 'Intermediate result':
case 'Intermeidate count':
break;
default:
finalKeys.push(checkedValues[m]);
......@@ -285,23 +286,27 @@ class TableList extends React.Component<TableListProps, TableListState> {
this.fillSelectedRowsTostate(selected, selectedRows);
}
};
let showTitle = COLUMN;
let showTitle = COLUMNPro;
let bgColor = '';
const trialJob: Array<TrialJob> = [];
const showColumn: Array<object> = [];
if (tableSource.length >= 1) {
const temp = tableSource[0].acc;
// only succeed trials have final keys
if (tableSource.filter(filterByStatus).length >= 1) {
const temp = tableSource.filter(filterByStatus)[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);
// item: ['default', 'other-keys', 'maybe loss']
if (item.length > 1) {
const want: Array<string> = [];
item.forEach(value => {
if (value !== 'default') {
want.push(value);
}
});
showTitle = COLUMNPro.concat(want);
}
}
}
}
......@@ -345,7 +350,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
title: 'Duration',
dataIndex: 'duration',
key: 'duration',
width: 140,
width: 100,
// the sort of number
sorter: (a: TableObj, b: TableObj) => (a.duration as number) - (b.duration as number),
render: (text: string, record: TableObj) => {
......@@ -387,6 +392,19 @@ class TableList extends React.Component<TableListProps, TableListState> {
sorter: (a: TableObj, b: TableObj): number => a.status.localeCompare(b.status)
});
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':
showColumn.push({
title: 'Default metric',
......@@ -415,37 +433,37 @@ class TableList extends React.Component<TableListProps, TableListState> {
title: 'Operation',
dataIndex: 'operation',
key: 'operation',
width: 90,
width: 120,
render: (text: string, record: TableObj) => {
let trialStatus = record.status;
let flagKill = false;
if (trialStatus === 'RUNNING') {
flagKill = true;
} else {
flagKill = false;
}
const flag: boolean = (trialStatus === 'RUNNING') ? false : true;
return (
flagKill
?
(
<Popconfirm
title="Are you sure to cancel this trial?"
onConfirm={killJob.
bind(this, record.key, record.id, record.status, updateList)}
>
<Button type="primary" className="tableButton">Kill</Button>
</Popconfirm>
)
:
(
<Row id="detail-button">
{/* see intermediate result graph */}
<Button
type="primary"
className="common-style"
onClick={this.showIntermediateModal.bind(this, record.id)}
title="Intermediate"
>
<Icon type="line-chart" />
</Button>
{/* kill job */}
<Popconfirm
title="Are you sure to cancel this trial?"
onConfirm={killJob.
bind(this, record.key, record.id, record.status, updateList)}
>
<Button
type="primary"
className="tableButton"
disabled={true}
type="default"
disabled={flag}
className="margin-mediate special"
title="kill"
>
Kill
<Icon type="stop" />
</Button>
)
</Popconfirm>
</Row>
);
},
});
......
src/webui/src/static/const.ts
View file @ f23f8a06
......@@ -42,20 +42,23 @@ const COLUMN_INDEX = [
index: 4
},
{
name: 'Default',
name: 'Intermeidate count',
index: 5
},
{
name: 'Operation',
index: 10000
name: 'Default',
index: 6
},
{
name: 'Intermediate result',
index: 10001
name: 'Operation',
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 {
MANAGER_IP, DOWNLOAD_IP, trialJobStatus,
MANAGER_IP, DOWNLOAD_IP, trialJobStatus, COLUMNPro,
CONTROLTYPE, MONACO, COLUMN, COLUMN_INDEX, DRAWEROPTION
};
src/webui/src/static/style/compare.scss
View file @ f23f8a06
......@@ -23,3 +23,13 @@
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 @@
/* Intermediate Result Style */
.intermediate{
width: 90%;
text-align: right;
/* border: 1px solid blue; */
input{
width: 80px;
width: 64px;
height: 32px;
padding-left: 8px;
}
.strange{
margin-top: 2px;
margin-right: 15px;
}
.inter-filter-btn{
height: 34px;
line-height: 34px;
.hyphen{
margin-left: 6px;
margin-right: 6px;
}
.range{
.heng{
margin-left: 6px;
margin-right: 6px;
}
.filter-x{
margin-left: 15px;
}
}
src/webui/src/static/style/progress.scss
View file @ f23f8a06
......@@ -9,6 +9,7 @@
}
.probar{
width: 95%;
height: 34px;
margin-top: 15px;
......
src/webui/src/static/style/table.scss
View file @ f23f8a06
......@@ -108,4 +108,46 @@
.ant-table-thead > tr > th .ant-table-column-sorters::before{
padding-bottom: 25px;
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 @@
}
}
}
/* 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