Skip to content

GitLab

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

[WebUI] Fix issue#517 & issue#459 (#524) 

* [WebUI] Fix issue#517 & issue#459

* update
parent cb83ac0f
Show whitespace changes
Inline Side-by-side
Showing with 181 additions and 60 deletions
src/webui/src/components/TrialsDetail.tsx
View file @ ce1bc481
import * as React from 'react';
import axios from 'axios';
import { MANAGER_IP } from '../static/const';
import { Row, Col, Button, Tabs, Input } from 'antd';
const Search = Input.Search;
import { Row, Col, Tabs, Input, Select } from 'antd';
const Option = Select.Option;
import { TableObj, Parameters, DetailAccurPoint, TooltipForAccuracy } from '../static/interface';
import { getFinalResult } from '../static/function';
import Accuracy from './overview/Accuracy';
......@@ -17,8 +17,10 @@ interface TrialDetailState {
accSource: object;
accNodata: string;
tableListSource: Array<TableObj>;
tableBaseSource: Array<TableObj>;
searchResultSource: Array<TableObj>;
isHasSearch: boolean;
experimentStatus: string;
entriesTable: number;
}
class TrialsDetail extends React.Component<{}, TrialDetailState> {
......@@ -26,6 +28,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
public _isMounted = false;
public interAccuracy = 0;
public interTableList = 1;
public interAllTableList = 2;
constructor(props: {}) {
super(props);
......@@ -34,8 +37,10 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
accSource: {},
accNodata: '',
tableListSource: [],
tableBaseSource: [],
experimentStatus: ''
searchResultSource: [],
experimentStatus: '',
entriesTable: 20,
isHasSearch: false
};
}
// trial accuracy graph
......@@ -122,6 +127,91 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
}
drawTableList = () => {
this.isOffIntervals();
axios.get(`${MANAGER_IP}/trial-jobs`)
.then(res => {
if (res.status === 200) {
const trialJobs = res.data;
const trialTable: Array<TableObj> = [];
Object.keys(trialJobs).map(item => {
// only succeeded trials have finalMetricData
let desc: Parameters = {
parameters: {}
};
let duration = 0;
const id = trialJobs[item].id !== undefined
? trialJobs[item].id
: '';
const status = trialJobs[item].status !== undefined
? trialJobs[item].status
: '';
const begin = trialJobs[item].startTime;
const end = trialJobs[item].endTime;
if (begin) {
if (end) {
duration = (end - begin) / 1000;
} else {
duration = (new Date().getTime() - begin) / 1000;
}
}
if (trialJobs[item].hyperParameters !== undefined) {
const getPara = JSON.parse(trialJobs[item].hyperParameters[0]).parameters;
if (typeof getPara === 'string') {
desc.parameters = JSON.parse(getPara);
} else {
desc.parameters = getPara;
}
} else {
desc.parameters = { error: 'This trial\'s parameters are not available.' };
}
if (trialJobs[item].logPath !== undefined) {
desc.logPath = trialJobs[item].logPath;
}
const acc = getFinalResult(trialJobs[item].finalMetricData);
trialTable.push({
key: trialTable.length,
sequenceId: trialJobs[item].sequenceId,
id: id,
status: status,
duration: duration,
acc: acc,
description: desc
});
});
// search part data
const { searchResultSource } = this.state;
if (searchResultSource.length !== 0) {
const temp: Array<number> = [];
Object.keys(searchResultSource).map(index => {
temp.push(searchResultSource[index].id);
});
const searchResultList: Array<TableObj> = [];
for (let i = 0; i < temp.length; i++) {
Object.keys(trialTable).map(key => {
const item = trialTable[key];
if (item.id === temp[i]) {
searchResultList.push(item);
}
});
}
if (this._isMounted) {
this.setState(() => ({
searchResultSource: searchResultList
}));
}
}
if (this._isMounted) {
this.setState(() => ({
tableListSource: trialTable
}));
}
}
});
}
// update all data in table
drawAllTableList = () => {
this.isOffIntervals();
axios.get(`${MANAGER_IP}/trial-jobs`)
.then(res => {
......@@ -176,7 +266,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
if (this._isMounted) {
this.setState(() => ({
tableListSource: trialTable,
tableBaseSource: trialTable
searchResultSource: trialTable
}));
}
}
......@@ -209,31 +299,29 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
}
}
// search a specific trial by trial No.
searchTrial = (value: string) => {
window.clearInterval(this.interTableList);
const { tableBaseSource } = this.state;
// search a trial by trial No. & trial id
searchTrial = (event: React.ChangeEvent<HTMLInputElement>) => {
const targetValue = event.target.value;
if (targetValue === '' || targetValue === ' ') {
this.drawAllTableList();
this.interAllTableList = window.setInterval(this.drawAllTableList, 10000);
} else {
window.clearInterval(this.interAllTableList);
const { tableListSource } = this.state;
const searchResultList: Array<TableObj> = [];
Object.keys(tableBaseSource).map(key => {
const item = tableBaseSource[key];
if (item.sequenceId.toString() === value || item.id.includes(value)) {
Object.keys(tableListSource).map(key => {
const item = tableListSource[key];
if (item.sequenceId.toString() === targetValue || item.id.includes(targetValue)) {
searchResultList.push(item);
}
});
if (this._isMounted) {
this.setState(() => ({
tableListSource: searchResultList
searchResultSource: searchResultList,
isHasSearch: true
}));
}
// reset btn click: rerender table
resetRenderTable = () => {
const searchInput = document.getElementById('searchTrial') as HTMLInputElement;
if (searchInput !== null) {
searchInput.value = '';
}
this.drawTableList();
this.interTableList = window.setInterval(this.drawTableList, 10000);
}
isOffIntervals = () => {
......@@ -250,6 +338,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
window.clearInterval(this.interTableList);
window.clearInterval(Duration.intervalDuration);
window.clearInterval(Para.intervalIDPara);
window.clearInterval(this.interAllTableList);
break;
default:
}
......@@ -257,13 +346,31 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
});
}
handleEntriesSelect = (value: string) => {
switch (value) {
case '20':
this.setState(() => ({ entriesTable: 20 }));
break;
case '50':
this.setState(() => ({ entriesTable: 50 }));
break;
case '100':
this.setState(() => ({ entriesTable: 100 }));
break;
case 'all':
this.setState(() => ({ entriesTable: 100000 }));
break;
default:
}
}
componentDidMount() {
this._isMounted = true;
this.drawTableList();
this.drawPointGraph();
this.interAccuracy = window.setInterval(this.drawPointGraph, 10000);
this.interTableList = window.setInterval(this.drawTableList, 10000);
this.interAccuracy = window.setInterval(this.drawPointGraph, 10000);
}
componentWillUnmount() {
......@@ -273,11 +380,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
}
render() {
const {
accSource, accNodata,
tableListSource
} = this.state;
const { accSource, accNodata, tableListSource, entriesTable, searchResultSource, isHasSearch } = this.state;
const titleOfacc = (
<Title1 text="Default Metric" icon="3.png" />
);
......@@ -309,29 +412,38 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
</Tabs>
</div>
{/* trial table list */}
<Title1 text="All Trials" icon="6.png" />
<Row className="allList">
<Col span={12}>
<Title1 text="All Trials" icon="6.png" />
<span>show</span>
<Select
className="entry"
onSelect={this.handleEntriesSelect}
defaultValue="20"
>
<Option value="20">20</Option>
<Option value="50">50</Option>
<Option value="100">100</Option>
<Option value="all">All</Option>
</Select>
<span>entries</span>
</Col>
<Col span={12} className="btns">
<Search
<Col span={12} className="right">
{/* <span>Search:</span> */}
<Input
type="text"
placeholder="search by Trial No. and id"
onSearch={value => this.searchTrial(value)}
style={{ width: 200 }}
id="searchTrial"
onChange={this.searchTrial}
style={{ width: 200, marginLeft: 6 }}
/>
<Button
type="primary"
className="tableButton resetBtn"
onClick={this.resetRenderTable}
>
Reset
</Button>
</Col>
</Row>
<TableList
entries={entriesTable}
tableSource={tableListSource}
updateList={this.drawTableList}
searchResult={searchResultSource}
isHasSearch={isHasSearch}
/>
</div>
);
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ ce1bc481
......@@ -21,8 +21,11 @@ echarts.registerTheme('my_theme', {
});
interface TableListProps {
entries: number;
tableSource: Array<TableObj>;
searchResult: Array<TableObj>;
updateList: Function;
isHasSearch: boolean;
}
interface TableListState {
......@@ -150,7 +153,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
render() {
const { tableSource } = this.props;
const { entries, tableSource, searchResult, isHasSearch } = this.props;
const { intermediateOption, modalVisible } = this.state;
let bgColor = '';
const trialJob: Array<TrialJob> = [];
......@@ -160,6 +163,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
value: item
});
});
const columns = [{
title: 'Trial No.',
dataIndex: 'sequenceId',
......@@ -328,7 +332,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
<span className="error">'This trial's parameters are not available.'</span>
</div>
}
<LogPath logStr={logPathRow}/>
<LogPath logStr={logPathRow} />
</pre>
);
};
......@@ -339,9 +343,9 @@ class TableList extends React.Component<TableListProps, TableListState> {
<Table
columns={columns}
expandedRowRender={openRow}
dataSource={tableSource}
dataSource={isHasSearch ? searchResult : tableSource}
className="commonTableStyle"
pagination={{ pageSize: 20 }}
pagination={{ pageSize: entries }}
/>
<Modal
title="Intermediate Result"
......
src/webui/src/static/style/search.scss
View file @ ce1bc481
.allList{
background-color: #b3b3b3;
padding-right: 14px;
width: 96%;
margin: 0 auto;
.right{
text-align: right;
}
.entry{
width: 120px;
margin: 0 6px;
}
.btns{
height: 32px;
text-align: right;
......@@ -8,12 +15,6 @@
height: 32px;
}
}
Button.resetBtn{
height: 32px;
font-size: 15px;
position: relative;
top: 1px;
}
}
src/webui/src/static/style/trialsDetail.scss
View file @ ce1bc481
......@@ -66,3 +66,7 @@
margin-bottom: 10px;
}
}
.allList{
margin-top: 15px;
}
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