Skip to content

GitLab

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

[WebUI] Fix issue#458 about final result as dict (#563) 

* [WebUI] Fix issue#458 about final result as dict

* Fix comments

* fix bug
parent 95d19478
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 462 additions and 179 deletions
src/webui/src/components/Overview.tsx
View file @ f437107d
......@@ -209,6 +209,10 @@ class Overview extends React.Component<{}, OverviewState> {
profile.failTrial += 1;
break;
case 'RUNNING':
profile.runTrial += 1;
break;
case 'USER_CANCELED':
case 'SYS_CANCELED':
profile.stopTrial += 1;
......
src/webui/src/components/TrialsDetail.tsx
View file @ f437107d
import * as React from 'react';
import axios from 'axios';
import { MANAGER_IP } from '../static/const';
import { Row, Col, Tabs, Input, Select } from 'antd';
import { Row, Col, Tabs, Input, Select, Button } from 'antd';
const Option = Select.Option;
import { TableObj, Parameters, DetailAccurPoint, TooltipForAccuracy } from '../static/interface';
import { getFinalResult } from '../static/function';
import { TableObjFianl, Parameters, DetailAccurPoint, TooltipForAccuracy } from '../static/interface';
import { getFinalResult, getFinal } from '../static/function';
import Accuracy from './overview/Accuracy';
import Duration from './trial-detail/Duration';
import Title1 from './overview/Title1';
......@@ -16,8 +16,8 @@ import '../static/style/trialsDetail.scss';
interface TrialDetailState {
accSource: object;
accNodata: string;
tableListSource: Array<TableObj>;
searchResultSource: Array<TableObj>;
tableListSource: Array<TableObjFianl>;
searchResultSource: Array<TableObjFianl>;
isHasSearch: boolean;
experimentStatus: string;
entriesTable: number;
......@@ -30,6 +30,8 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
public interTableList = 1;
public interAllTableList = 2;
public tableList: TableList | null;
constructor(props: {}) {
super(props);
......@@ -40,7 +42,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
searchResultSource: [],
experimentStatus: '',
entriesTable: 20,
isHasSearch: false
isHasSearch: false,
};
}
// trial accuracy graph
......@@ -132,7 +134,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
.then(res => {
if (res.status === 200) {
const trialJobs = res.data;
const trialTable: Array<TableObj> = [];
const trialTable: Array<TableObjFianl> = [];
Object.keys(trialJobs).map(item => {
// only succeeded trials have finalMetricData
let desc: Parameters = {
......@@ -167,7 +169,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
if (trialJobs[item].logPath !== undefined) {
desc.logPath = trialJobs[item].logPath;
}
const acc = getFinalResult(trialJobs[item].finalMetricData);
const acc = getFinal(trialJobs[item].finalMetricData);
trialTable.push({
key: trialTable.length,
sequenceId: trialJobs[item].sequenceId,
......@@ -185,7 +187,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
Object.keys(searchResultSource).map(index => {
temp.push(searchResultSource[index].id);
});
const searchResultList: Array<TableObj> = [];
const searchResultList: Array<TableObjFianl> = [];
for (let i = 0; i < temp.length; i++) {
Object.keys(trialTable).map(key => {
const item = trialTable[key];
......@@ -217,7 +219,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
.then(res => {
if (res.status === 200) {
const trialJobs = res.data;
const trialTable: Array<TableObj> = [];
const trialTable: Array<TableObjFianl> = [];
Object.keys(trialJobs).map(item => {
// only succeeded trials have finalMetricData
let desc: Parameters = {
......@@ -252,7 +254,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
if (trialJobs[item].logPath !== undefined) {
desc.logPath = trialJobs[item].logPath;
}
const acc = getFinalResult(trialJobs[item].finalMetricData);
const acc = getFinal(trialJobs[item].finalMetricData);
trialTable.push({
key: trialTable.length,
sequenceId: trialJobs[item].sequenceId,
......@@ -308,7 +310,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
} else {
window.clearInterval(this.interAllTableList);
const { tableListSource } = this.state;
const searchResultList: Array<TableObj> = [];
const searchResultList: Array<TableObjFianl> = [];
Object.keys(tableListSource).map(key => {
const item = tableListSource[key];
if (item.sequenceId.toString() === targetValue || item.id.includes(targetValue)) {
......@@ -364,6 +366,10 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
}
}
test = () => {
alert('TableList component was not properly initialized.');
}
componentDidMount() {
this._isMounted = true;
......@@ -429,13 +435,26 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
<span>entries</span>
</Col>
<Col span={12} className="right">
{/* <span>Search:</span> */}
<Input
type="text"
placeholder="search by Trial No. and id"
onChange={this.searchTrial}
style={{ width: 200, marginLeft: 6 }}
/>
<Row>
<Col span={12}>
<Button
type="primary"
className="tableButton editStyle"
onClick={this.tableList ? this.tableList.addColumn : this.test}
>
AddColumn
</Button>
</Col>
<Col span={12}>
{/* <span>Search:</span> */}
<Input
type="text"
placeholder="search by Trial No. and id"
onChange={this.searchTrial}
style={{ width: 200, marginLeft: 6 }}
/>
</Col>
</Row>
</Col>
</Row>
<TableList
......@@ -444,6 +463,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
updateList={this.drawTableList}
searchResult={searchResultSource}
isHasSearch={isHasSearch}
ref={(tabList) => this.tableList = tabList}
/>
</div>
);
......
src/webui/src/components/overview/Progress.tsx
View file @ f437107d
......@@ -242,45 +242,45 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
maxString={`MaxTrialNumber: ${trialProfile.MaxTrialNum}`}
/>
<Row className="basic colorOfbasic mess">
<p>Best Default Metric</p>
<p>best metric</p>
<div>{bestAccuracy}</div>
</Row>
<Row className="mess">
<Col span={8}>
<Row className="basic colorOfbasic">
<p>Time Spent</p>
<p>spent</p>
<div>{convertTime(trialProfile.execDuration)}</div>
</Row>
</Col>
<Col span={9}>
<Row className="basic colorOfbasic">
<p>Remaining Time</p>
<p>remaining</p>
<div>{remaining}</div>
</Row>
</Col>
<Col span={7}>
<Row className="basic colorOfbasic">
<p>MaxDuration</p>
<div>{convertTime(trialProfile.maxDuration)}</div>
<p>running</p>
<div>{trialNumber.runTrial}</div>
</Row>
</Col>
</Row>
<Row className="mess">
<Col span={8}>
<Row className="basic colorOfbasic">
<p>Succeed Trial</p>
<p>succeed</p>
<div>{trialNumber.succTrial}</div>
</Row>
</Col>
<Col span={9}>
<Row className="basic">
<p>Stopped Trial</p>
<p>stopped</p>
<div>{trialNumber.stopTrial}</div>
</Row>
</Col>
<Col span={7}>
<Row className="basic">
<p>Failed Trial</p>
<p>failed</p>
<div>{trialNumber.failTrial}</div>
</Row>
</Col>
......
src/webui/src/static/const.ts
View file @ f437107d
export const MANAGER_IP = `/api/v1/nni`;
export const DOWNLOAD_IP = `/logs`;
export const trialJobStatus = [
const MANAGER_IP = `/api/v1/nni`;
const DOWNLOAD_IP = `/logs`;
const trialJobStatus = [
'UNKNOWN',
'WAITING',
'RUNNING',
......@@ -10,12 +10,47 @@ export const trialJobStatus = [
'SYS_CANCELED',
'EARLY_STOPPED'
];
export const CONTROLTYPE = [
const CONTROLTYPE = [
'SEARCH_SPACE',
'TRIAL_CONCURRENCY',
'MAX_EXEC_DURATION'
];
export const MONACO = {
const MONACO = {
readOnly: true,
automaticLayout: true
};
const COLUMN_INDEX = [
{
name: 'Trial No',
index: 1
},
{
name: 'id',
index: 2
},
{
name: 'duration',
index: 3
},
{
name: 'status',
index: 4
},
{
name: 'Default',
index: 5
},
{
name: 'Operation',
index: 10000
},
{
name: 'Intermediate Result',
index: 10001
}
];
const COLUMN = ['Trial No', 'id', 'duration', 'status', 'Default', 'Operation', 'Intermediate Result'];
export {
MANAGER_IP, DOWNLOAD_IP, trialJobStatus,
CONTROLTYPE, MONACO, COLUMN, COLUMN_INDEX
};
src/webui/src/static/function.ts
View file @ f437107d
import { FinalResult } from './interface';
import { FinalResult, FinalType } from './interface';
const convertTime = (num: number) => {
if (num % 3600 === 0) {
......@@ -28,6 +28,7 @@ const convertDuration = (num: number) => {
};
// get final result value
// draw Accuracy point graph
const getFinalResult = (final: FinalResult) => {
let acc;
let showDefault = 0;
......@@ -46,6 +47,21 @@ const getFinalResult = (final: FinalResult) => {
}
};
// get final result value // acc obj
const getFinal = (final: FinalResult) => {
let showDefault: FinalType;
if (final) {
showDefault = JSON.parse(final[0].data);
if (typeof showDefault === 'number') {
showDefault = { default: showDefault };
}
return showDefault;
} else {
return undefined;
}
};
export {
convertTime, convertDuration, getFinalResult
convertTime, convertDuration, getFinalResult,
getFinal
};
src/webui/src/static/interface.ts
View file @ f437107d
// draw accuracy graph data interface
interface TableObj {
key: number;
sequenceId: number;
id: string;
duration: number;
status: string;
acc?: number;
acc?: number; // draw accuracy graph
description: Parameters;
color?: string;
}
interface TableObjFianl {
key: number;
sequenceId: number;
id: string;
duration: number;
status: string;
acc?: FinalType;
description: Parameters;
color?: string;
}
interface FinalType {
default: string;
}
interface ErrorParameter {
error?: string;
}
interface Parameters {
parameters: ErrorParameter;
logPath?: string;
......@@ -93,5 +111,6 @@ export {
TableObj, Parameters, Experiment,
AccurPoint, TrialNumber, TrialJob,
DetailAccurPoint, TooltipForAccuracy,
ParaObj, VisualMapValue, Dimobj, FinalResult
ParaObj, VisualMapValue, Dimobj, FinalResult,
TableObjFianl, FinalType
};
src/webui/src/static/style/search.scss
View file @ f437107d
/* some buttons about trial-detail table */
.allList{
width: 96%;
margin: 0 auto;
......@@ -17,4 +18,17 @@
}
}
.titleColumn{
.ant-checkbox-group-item{
display: block;
}
}
.applyfooter{
/* apply button style */
.apply{
text-align: right;
}
}
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