Skip to content

GitLab

Commit 2b300395 authored by Lijiao's avatar Lijiao Committed by chicm-ms
Browse files

update (#617)

parent 88f55fd8
Hide whitespace changes
Inline Side-by-side
Showing with 369 additions and 371 deletions
src/webui/src/components/Overview.tsx
View file @ 2b300395
...@@ -6,7 +6,7 @@ import { ...@@ -6,7 +6,7 @@ import {
Experiment, TableObj, Experiment, TableObj,
Parameters, TrialNumber Parameters, TrialNumber
} from '../static/interface'; } from '../static/interface';
import { getFinalResult } from '../static/function'; import { getFinal } from '../static/function';
import SuccessTable from './overview/SuccessTable'; import SuccessTable from './overview/SuccessTable';
import Title1 from './overview/Title1'; import Title1 from './overview/Title1';
import Progressed from './overview/Progress'; import Progressed from './overview/Progress';
...@@ -62,17 +62,7 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -62,17 +62,7 @@ class Overview extends React.Component<{}, OverviewState> {
tuner: {}, tuner: {},
trainingServicePlatform: '' trainingServicePlatform: ''
}, },
tableData: [{ tableData: [],
key: 0,
sequenceId: 0,
id: '',
duration: 0,
status: '',
acc: 0,
description: {
parameters: {}
}
}],
option: {}, option: {},
noData: '', noData: '',
// accuracy // accuracy
...@@ -224,7 +214,7 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -224,7 +214,7 @@ class Overview extends React.Component<{}, OverviewState> {
parameters: {} parameters: {}
}; };
const duration = (tableData[item].endTime - tableData[item].startTime) / 1000; const duration = (tableData[item].endTime - tableData[item].startTime) / 1000;
const acc = getFinalResult(tableData[item].finalMetricData); const acc = getFinal(tableData[item].finalMetricData);
// if hyperparameters is undefine, show error message, else, show parameters value // if hyperparameters is undefine, show error message, else, show parameters value
if (tableData[item].hyperParameters) { if (tableData[item].hyperParameters) {
const parameters = JSON.parse(tableData[item].hyperParameters[0]).parameters; const parameters = JSON.parse(tableData[item].hyperParameters[0]).parameters;
...@@ -256,16 +246,16 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -256,16 +246,16 @@ class Overview extends React.Component<{}, OverviewState> {
const { isTop10 } = this.state; const { isTop10 } = this.state;
if (isTop10 === true) { if (isTop10 === true) {
topTableData.sort((a: TableObj, b: TableObj) => { topTableData.sort((a: TableObj, b: TableObj) => {
if (a.acc && b.acc) { if (a.acc !== undefined && b.acc !== undefined) {
return b.acc - a.acc; return JSON.parse(b.acc.default) - JSON.parse(a.acc.default);
} else { } else {
return NaN; return NaN;
} }
}); });
} else { } else {
topTableData.sort((a: TableObj, b: TableObj) => { topTableData.sort((a: TableObj, b: TableObj) => {
if (a.acc && b.acc) { if (a.acc !== undefined && b.acc !== undefined) {
return a.acc - b.acc; return JSON.parse(a.acc.default) - JSON.parse(b.acc.default);
} else { } else {
return NaN; return NaN;
} }
...@@ -275,7 +265,7 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -275,7 +265,7 @@ class Overview extends React.Component<{}, OverviewState> {
let bestDefaultMetric = 0; let bestDefaultMetric = 0;
if (topTableData[0] !== undefined) { if (topTableData[0] !== undefined) {
if (topTableData[0].acc !== undefined) { if (topTableData[0].acc !== undefined) {
bestDefaultMetric = topTableData[0].acc; bestDefaultMetric = JSON.parse(topTableData[0].acc.default);
} }
} }
if (this._isMounted) { if (this._isMounted) {
...@@ -308,7 +298,7 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -308,7 +298,7 @@ class Overview extends React.Component<{}, OverviewState> {
const indexarr: Array<number> = []; const indexarr: Array<number> = [];
Object.keys(sourcePoint).map(item => { Object.keys(sourcePoint).map(item => {
const items = sourcePoint[item]; const items = sourcePoint[item];
accarr.push(items.acc); accarr.push(items.acc.default);
indexarr.push(items.sequenceId); indexarr.push(items.sequenceId);
}); });
const accOption = { const accOption = {
......
src/webui/src/components/TrialsDetail.tsx
View file @ 2b300395
...@@ -3,7 +3,7 @@ import axios from 'axios'; ...@@ -3,7 +3,7 @@ import axios from 'axios';
import { MANAGER_IP } from '../static/const'; import { MANAGER_IP } from '../static/const';
import { Row, Col, Tabs, Input, Select, Button } from 'antd'; import { Row, Col, Tabs, Input, Select, Button } from 'antd';
const Option = Select.Option; const Option = Select.Option;
import { TableObjFianl, Parameters, DetailAccurPoint, TooltipForAccuracy } from '../static/interface'; import { TableObj, Parameters, DetailAccurPoint, TooltipForAccuracy } from '../static/interface';
import { getFinalResult, getFinal } from '../static/function'; import { getFinalResult, getFinal } from '../static/function';
import Accuracy from './overview/Accuracy'; import Accuracy from './overview/Accuracy';
import Duration from './trial-detail/Duration'; import Duration from './trial-detail/Duration';
...@@ -16,8 +16,8 @@ import '../static/style/trialsDetail.scss'; ...@@ -16,8 +16,8 @@ import '../static/style/trialsDetail.scss';
interface TrialDetailState { interface TrialDetailState {
accSource: object; accSource: object;
accNodata: string; accNodata: string;
tableListSource: Array<TableObjFianl>; tableListSource: Array<TableObj>;
searchResultSource: Array<TableObjFianl>; searchResultSource: Array<TableObj>;
isHasSearch: boolean; isHasSearch: boolean;
experimentStatus: string; experimentStatus: string;
entriesTable: number; entriesTable: number;
...@@ -136,7 +136,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -136,7 +136,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
.then(res => { .then(res => {
if (res.status === 200) { if (res.status === 200) {
const trialJobs = res.data; const trialJobs = res.data;
const trialTable: Array<TableObjFianl> = []; const trialTable: Array<TableObj> = [];
Object.keys(trialJobs).map(item => { Object.keys(trialJobs).map(item => {
// only succeeded trials have finalMetricData // only succeeded trials have finalMetricData
let desc: Parameters = { let desc: Parameters = {
...@@ -189,7 +189,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -189,7 +189,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
Object.keys(searchResultSource).map(index => { Object.keys(searchResultSource).map(index => {
temp.push(searchResultSource[index].id); temp.push(searchResultSource[index].id);
}); });
const searchResultList: Array<TableObjFianl> = []; const searchResultList: Array<TableObj> = [];
for (let i = 0; i < temp.length; i++) { for (let i = 0; i < temp.length; i++) {
Object.keys(trialTable).map(key => { Object.keys(trialTable).map(key => {
const item = trialTable[key]; const item = trialTable[key];
...@@ -221,7 +221,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -221,7 +221,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
.then(res => { .then(res => {
if (res.status === 200) { if (res.status === 200) {
const trialJobs = res.data; const trialJobs = res.data;
const trialTable: Array<TableObjFianl> = []; const trialTable: Array<TableObj> = [];
Object.keys(trialJobs).map(item => { Object.keys(trialJobs).map(item => {
// only succeeded trials have finalMetricData // only succeeded trials have finalMetricData
let desc: Parameters = { let desc: Parameters = {
...@@ -312,7 +312,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -312,7 +312,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
} else { } else {
window.clearInterval(this.interAllTableList); window.clearInterval(this.interAllTableList);
const { tableListSource } = this.state; const { tableListSource } = this.state;
const searchResultList: Array<TableObjFianl> = []; const searchResultList: Array<TableObj> = [];
Object.keys(tableListSource).map(key => { Object.keys(tableListSource).map(key => {
const item = tableListSource[key]; const item = tableListSource[key];
if (item.sequenceId.toString() === targetValue || item.id.includes(targetValue)) { if (item.sequenceId.toString() === targetValue || item.id.includes(targetValue)) {
......
src/webui/src/components/overview/SuccessTable.tsx
View file @ 2b300395
import * as React from 'react'; import * as React from 'react';
import axios from 'axios'; import axios from 'axios';
import JSONTree from 'react-json-tree'; import { Modal, Input, Table } from 'antd';
import { Row, Modal, Input, Table, Tabs } from 'antd';
const TabPane = Tabs.TabPane;
const { TextArea } = Input; const { TextArea } = Input;
import OpenRow from '../public-child/OpenRow';
import DefaultMetric from '../public-child/DefaultMetrc';
import { DOWNLOAD_IP } from '../../static/const'; import { DOWNLOAD_IP } from '../../static/const';
import { TableObj } from '../../static/interface'; import { TableObj } from '../../static/interface';
import { convertDuration } from '../../static/function'; import { convertDuration } from '../../static/function';
import PaiTrialLog from '../logPath/PaiTrialLog';
import TrialLog from '../logPath/TrialLog';
import '../../static/style/tableStatus.css'; import '../../static/style/tableStatus.css';
import '../../static/style/tableList.scss'; import '../../static/style/tableList.scss';
...@@ -74,6 +72,17 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -74,6 +72,17 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
} }
} }
openRow = (record: TableObj) => {
const { trainingPlatform } = this.props;
return (
<OpenRow
showLogModalOverview={this.showLogModalOverview}
trainingPlatform={trainingPlatform}
record={record}
/>
);
}
componentDidMount() { componentDidMount() {
this._isMounted = true; this._isMounted = true;
} }
...@@ -83,7 +92,7 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -83,7 +92,7 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
} }
render() { render() {
const { tableSource, trainingPlatform } = this.props; const { tableSource } = this.props;
const { isShowLogModal, logContent } = this.state; const { isShowLogModal, logContent } = this.state;
let bgColor = ''; let bgColor = '';
...@@ -137,92 +146,24 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -137,92 +146,24 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
title: 'Default Metric', title: 'Default Metric',
dataIndex: 'acc', dataIndex: 'acc',
key: 'acc', key: 'acc',
sorter: (a: TableObj, b: TableObj) => (a.acc as number) - (b.acc as number), sorter: (a: TableObj, b: TableObj) => {
render: (text: string, record: TableObj) => { if (a.acc !== undefined && b.acc !== undefined) {
const accuracy = record.acc; return JSON.parse(a.acc.default) - JSON.parse(b.acc.default);
let wei = 0; } else {
if (accuracy) { return NaN;
if (accuracy.toString().indexOf('.') !== -1) {
wei = accuracy.toString().length - accuracy.toString().indexOf('.') - 1;
}
} }
},
render: (text: string, record: TableObj) => {
return ( return (
<div> <DefaultMetric record={record} />
{
record.acc
?
wei > 6
?
record.acc.toFixed(6)
:
record.acc
:
'--'
}
</div>
); );
} }
// width: 150
}]; }];
const openRow = (record: TableObj) => {
let isHasParameters = true;
if (record.description.parameters.error) {
isHasParameters = false;
}
const openRowDataSource = {
parameters: record.description.parameters
};
const logPathRow = record.description.logPath !== undefined
?
record.description.logPath
:
'This trial\'s logPath are not available.';
return (
<pre id="description" className="hyperpar">
<Row className="openRowContent">
<Tabs tabPosition="left" className="card">
<TabPane tab="Parameters" key="1">
{
isHasParameters
?
<JSONTree
hideRoot={true}
shouldExpandNode={() => true} // default expandNode
getItemString={() => (<span />)} // remove the {} items
data={openRowDataSource}
/>
:
<div className="logpath">
<span className="logName">Error: </span>
<span className="error">'This trial's parameters are not available.'</span>
</div>
}
</TabPane>
<TabPane tab="Log" key="2">
{
trainingPlatform === 'frameworkcontroller' || trainingPlatform === 'kubeflow' ||
trainingPlatform === 'pai'
?
<PaiTrialLog
logStr={logPathRow}
id={record.id}
showLogModal={this.showLogModalOverview}
/>
:
<TrialLog logStr={logPathRow} id={record.id} />
}
</TabPane>
</Tabs>
</Row>
</pre>
);
};
return ( return (
<div className="tabScroll"> <div className="tabScroll" >
<Table <Table
columns={columns} columns={columns}
expandedRowRender={openRow} expandedRowRender={this.openRow}
dataSource={tableSource} dataSource={tableSource}
className="commonTableStyle" className="commonTableStyle"
pagination={false} pagination={false}
...@@ -244,9 +185,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -244,9 +185,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
/> />
</div> </div>
</Modal> </Modal>
</div> </div >
); );
} }
} }
export default SuccessTable; export default SuccessTable;
\ No newline at end of file
src/webui/src/components/public-child/DefaultMetrc.tsx 0 → 100644
View file @ 2b300395
import * as React from 'react';
import { TableObj } from '../../static/interface';
interface DefaultMetricProps {
record: TableObj;
}
class DefaultMetric extends React.Component<DefaultMetricProps, {}> {
constructor(props: DefaultMetricProps) {
super(props);
}
render() {
const { record } = this.props;
let accuracy;
if (record.acc !== undefined) {
accuracy = record.acc.default;
}
let wei = 0;
if (accuracy) {
if (accuracy.toString().indexOf('.') !== -1) {
wei = accuracy.toString().length - accuracy.toString().indexOf('.') - 1;
}
}
return (
<div>
{
record.acc && record.acc.default
?
wei > 6
?
JSON.parse(record.acc.default).toFixed(6)
:
record.acc.default
:
'--'
}
</div>
);
}
}
export default DefaultMetric;
\ No newline at end of file
src/webui/src/components/public-child/OpenRow.tsx 0 → 100644
View file @ 2b300395
import * as React from 'react';
import PaiTrialLog from '../public-child/PaiTrialLog';
import TrialLog from '../public-child/TrialLog';
import JSONTree from 'react-json-tree';
import { TableObj } from '../../static/interface';
import { Row, Tabs } from 'antd';
const TabPane = Tabs.TabPane;
interface OpenRowProps {
trainingPlatform: string;
showLogModalOverview: Function;
record: TableObj;
}
class OpenRow extends React.Component<OpenRowProps, {}> {
constructor(props: OpenRowProps) {
super(props);
}
render() {
const { trainingPlatform, record, showLogModalOverview } = this.props;
let isHasParameters = true;
if (record.description.parameters.error) {
isHasParameters = false;
}
const openRowDataSource = {
parameters: record.description.parameters
};
const logPathRow = record.description.logPath !== undefined
?
record.description.logPath
:
'This trial\'s logPath are not available.';
return (
<pre id="description" className="hyperpar">
<Row className="openRowContent">
<Tabs tabPosition="left" className="card">
<TabPane tab="Parameters" key="1">
{
isHasParameters
?
<JSONTree
hideRoot={true}
shouldExpandNode={() => true} // default expandNode
getItemString={() => (<span />)} // remove the {} items
data={openRowDataSource}
/>
:
<div className="logpath">
<span className="logName">Error: </span>
<span className="error">'This trial's parameters are not available.'</span>
</div>
}
</TabPane>
<TabPane tab="Log" key="2">
{
trainingPlatform === 'pai' || trainingPlatform === 'kubeflow' ||
trainingPlatform === 'frameworkcontroller'
?
<PaiTrialLog
logStr={logPathRow}
id={record.id}
showLogModal={showLogModalOverview}
/>
:
<TrialLog logStr={logPathRow} id={record.id} />
}
</TabPane>
</Tabs>
</Row>
</pre>
);
}
}
export default OpenRow;
\ No newline at end of file
src/webui/src/components/trial-detail/Para.tsx
View file @ 2b300395
...@@ -60,81 +60,90 @@ class Para extends React.Component<{}, ParaState> { ...@@ -60,81 +60,90 @@ class Para extends React.Component<{}, ParaState> {
}; };
} }
getParallelAxis = getParallelAxis =
( dimName: Array<string>, searchRange: SearchSpace, (
parallelAxis: Array<Dimobj>, accPara: Array<number>, dimName: Array<string>, searchRange: SearchSpace,
eachTrialParams: Array<string>, paraYdata: number[][] parallelAxis: Array<Dimobj>, accPara: Array<number>,
) => { eachTrialParams: Array<string>, paraYdata: number[][]
if (this._isMounted) { ) => {
this.setState(() => ({ if (this._isMounted) {
dimName: dimName, this.setState(() => ({
visualValue: { dimName: dimName,
minAccuracy: accPara.length !== 0 ? Math.min(...accPara) : 0, visualValue: {
maxAccuracy: accPara.length !== 0 ? Math.max(...accPara) : 1 minAccuracy: accPara.length !== 0 ? Math.min(...accPara) : 0,
} maxAccuracy: accPara.length !== 0 ? Math.max(...accPara) : 1
}));
}
// search space range and specific value [only number]
for (let i = 0; i < dimName.length; i++) {
const searchKey = searchRange[dimName[i]];
switch (searchKey._type) {
case 'uniform':
case 'quniform':
parallelAxis.push({
dim: i,
name: dimName[i],
max: searchKey._value[1],
min: searchKey._value[0]
});
break;
case 'randint':
parallelAxis.push({
dim: i,
name: dimName[i],
max: searchKey._value[0],
min: 0
});
break;
case 'choice':
const data: Array<string> = [];
for (let j = 0; j < searchKey._value.length; j++) {
data.push(searchKey._value[j].toString());
} }
parallelAxis.push({ }));
dim: i,
name: dimName[i],
type: 'category',
data: data
});
break;
default:
parallelAxis.push({
dim: i,
name: dimName[i]
});
} }
} // search space range and specific value [only number]
// get data for every lines. if dim is choice type, number -> toString()
Object.keys(eachTrialParams).map(item => {
let temp: Array<number> = [];
for (let i = 0; i < dimName.length; i++) { for (let i = 0; i < dimName.length; i++) {
if ('type' in parallelAxis[i]) { const searchKey = searchRange[dimName[i]];
temp.push( switch (searchKey._type) {
eachTrialParams[item][dimName[i]].toString() case 'uniform':
); case 'quniform':
} else { parallelAxis.push({
temp.push( dim: i,
eachTrialParams[item][dimName[i]] name: dimName[i],
); max: searchKey._value[1],
min: searchKey._value[0]
});
break;
case 'randint':
parallelAxis.push({
dim: i,
name: dimName[i],
max: searchKey._value[0],
min: 0
});
break;
case 'choice':
const data: Array<string> = [];
for (let j = 0; j < searchKey._value.length; j++) {
data.push(searchKey._value[j].toString());
}
parallelAxis.push({
dim: i,
name: dimName[i],
type: 'category',
data: data
});
break;
// support log distribute
case 'loguniform':
parallelAxis.push({
dim: i,
name: dimName[i],
type: 'log',
});
break;
default:
parallelAxis.push({
dim: i,
name: dimName[i]
});
} }
} }
paraYdata.push(temp); // get data for every lines. if dim is choice type, number -> toString()
}); Object.keys(eachTrialParams).map(item => {
} let temp: Array<number> = [];
for (let i = 0; i < dimName.length; i++) {
if ('type' in parallelAxis[i]) {
temp.push(
eachTrialParams[item][dimName[i]].toString()
);
} else {
temp.push(
eachTrialParams[item][dimName[i]]
);
}
}
paraYdata.push(temp);
});
}
hyperParaPic = () => { hyperParaPic = () => {
axios axios
...@@ -253,7 +262,21 @@ class Para extends React.Component<{}, ParaState> { ...@@ -253,7 +262,21 @@ class Para extends React.Component<{}, ParaState> {
parallelAxisDefault: { parallelAxisDefault: {
tooltip: { tooltip: {
show: true show: true
} },
axisLabel: {
formatter: function (value: string) {
const length = value.length;
if (length > 16) {
const temp = value.split('');
for (let i = 16; i < temp.length; i += 17) {
temp[i] += '\n';
}
return temp.join('');
} else {
return value;
}
}
},
} }
}, },
visualMap: visualMapObj, visualMap: visualMapObj,
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ 2b300395
import * as React from 'react'; import * as React from 'react';
import axios from 'axios'; import axios from 'axios';
import JSONTree from 'react-json-tree';
import ReactEcharts from 'echarts-for-react'; import ReactEcharts from 'echarts-for-react';
import { import {
Row, Input, Table, Tabs, Button, Popconfirm, Modal, message, Checkbox Row, Input, Table, Button, Popconfirm, Modal, Checkbox
} from 'antd'; } from 'antd';
const { TextArea } = Input; const { TextArea } = Input;
const TabPane = Tabs.TabPane;
const CheckboxGroup = Checkbox.Group; const CheckboxGroup = Checkbox.Group;
import { MANAGER_IP, DOWNLOAD_IP, trialJobStatus, COLUMN, COLUMN_INDEX } from '../../static/const'; import { MANAGER_IP, DOWNLOAD_IP, trialJobStatus, COLUMN, COLUMN_INDEX } from '../../static/const';
import { convertDuration } from '../../static/function'; import { convertDuration, intermediateGraphOption, killJob } from '../../static/function';
import { TableObjFianl, TrialJob } from '../../static/interface'; import { TableObj, TrialJob } from '../../static/interface';
import PaiTrialLog from '../logPath/PaiTrialLog'; import OpenRow from '../public-child/OpenRow';
import TrialLog from '../logPath/TrialLog'; import DefaultMetric from '../public-child/DefaultMetrc';
import '../../static/style/search.scss'; import '../../static/style/search.scss';
require('../../static/style/tableStatus.css'); require('../../static/style/tableStatus.css');
require('../../static/style/logPath.scss'); require('../../static/style/logPath.scss');
...@@ -30,8 +28,8 @@ echarts.registerTheme('my_theme', { ...@@ -30,8 +28,8 @@ echarts.registerTheme('my_theme', {
interface TableListProps { interface TableListProps {
entries: number; entries: number;
tableSource: Array<TableObjFianl>; tableSource: Array<TableObj>;
searchResult: Array<TableObjFianl>; searchResult: Array<TableObj>;
updateList: Function; updateList: Function;
isHasSearch: boolean; isHasSearch: boolean;
platform: string; platform: string;
...@@ -83,7 +81,7 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -83,7 +81,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
Object.keys(res.data).map(item => { Object.keys(res.data).map(item => {
intermediateArr.push(parseFloat(res.data[item].data)); intermediateArr.push(parseFloat(res.data[item].data));
}); });
const intermediate = this.intermediateGraphOption(intermediateArr, id); const intermediate = intermediateGraphOption(intermediateArr, id);
if (this._isMounted) { if (this._isMounted) {
this.setState(() => ({ this.setState(() => ({
intermediateOption: intermediate intermediateOption: intermediate
...@@ -159,70 +157,6 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -159,70 +157,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
} }
} }
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: sequence
},
yAxis: {
name: 'Default Metric',
type: 'value',
data: intermediateArr
},
series: [{
symbolSize: 6,
type: 'scatter',
data: intermediateArr
}]
};
}
// kill job
killJob = (key: number, id: string, status: string) => {
const { updateList } = this.props;
axios(`${MANAGER_IP}/trial-jobs/${id}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
})
.then(res => {
if (res.status === 200) {
message.success('Cancel the job successfully');
// render the table
updateList();
} else {
message.error('fail to cancel the job');
}
})
.catch(error => {
if (error.response.status === 500) {
if (error.response.data.error) {
message.error(error.response.data.error);
} else {
message.error('500 error, fail to cancel the job');
}
}
});
}
// click add column btn, just show the modal of addcolumn // click add column btn, just show the modal of addcolumn
addColumn = () => { addColumn = () => {
// show user select check button // show user select check button
...@@ -284,6 +218,17 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -284,6 +218,17 @@ class TableList extends React.Component<TableListProps, TableListState> {
} }
} }
openRow = (record: TableObj) => {
const { platform } = this.props;
return (
<OpenRow
showLogModalOverview={this.showLogModal}
trainingPlatform={platform}
record={record}
/>
);
}
componentDidMount() { componentDidMount() {
this._isMounted = true; this._isMounted = true;
} }
...@@ -294,7 +239,7 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -294,7 +239,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
render() { render() {
const { entries, tableSource, searchResult, isHasSearch, platform } = this.props; const { entries, tableSource, searchResult, isHasSearch, updateList } = this.props;
const { intermediateOption, modalVisible, isShowColumn, columnSelected, const { intermediateOption, modalVisible, isShowColumn, columnSelected,
logMessage, logModal logMessage, logModal
} = this.state; } = this.state;
...@@ -335,7 +280,7 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -335,7 +280,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
width: 120, width: 120,
className: 'tableHead', className: 'tableHead',
sorter: sorter:
(a: TableObjFianl, b: TableObjFianl) => (a: TableObj, b: TableObj) =>
(a.sequenceId as number) - (b.sequenceId as number) (a.sequenceId as number) - (b.sequenceId as number)
}); });
break; break;
...@@ -347,8 +292,8 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -347,8 +292,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
width: 60, width: 60,
className: 'tableHead idtitle', className: 'tableHead idtitle',
// the sort of string // the sort of string
sorter: (a: TableObjFianl, b: TableObjFianl): number => a.id.localeCompare(b.id), sorter: (a: TableObj, b: TableObj): number => a.id.localeCompare(b.id),
render: (text: string, record: TableObjFianl) => { render: (text: string, record: TableObj) => {
return ( return (
<div>{record.id}</div> <div>{record.id}</div>
); );
...@@ -362,8 +307,8 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -362,8 +307,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
key: 'duration', key: 'duration',
width: 140, width: 140,
// the sort of number // the sort of number
sorter: (a: TableObjFianl, b: TableObjFianl) => (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: TableObjFianl) => { render: (text: string, record: TableObj) => {
let duration; let duration;
if (record.duration !== undefined && record.duration > 0) { if (record.duration !== undefined && record.duration > 0) {
duration = convertDuration(record.duration); duration = convertDuration(record.duration);
...@@ -383,15 +328,15 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -383,15 +328,15 @@ class TableList extends React.Component<TableListProps, TableListState> {
key: 'status', key: 'status',
width: 150, width: 150,
className: 'tableStatus', className: 'tableStatus',
render: (text: string, record: TableObjFianl) => { render: (text: string, record: TableObj) => {
bgColor = record.status; bgColor = record.status;
return ( return (
<span className={`${bgColor} commonStyle`}>{record.status}</span> <span className={`${bgColor} commonStyle`}>{record.status}</span>
); );
}, },
filters: trialJob, filters: trialJob,
onFilter: (value: string, record: TableObjFianl) => record.status.indexOf(value) === 0, onFilter: (value: string, record: TableObj) => record.status.indexOf(value) === 0,
sorter: (a: TableObjFianl, b: TableObjFianl): number => a.status.localeCompare(b.status) sorter: (a: TableObj, b: TableObj): number => a.status.localeCompare(b.status)
}); });
break; break;
case 'Default': case 'Default':
...@@ -400,38 +345,16 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -400,38 +345,16 @@ class TableList extends React.Component<TableListProps, TableListState> {
dataIndex: 'acc', dataIndex: 'acc',
key: 'acc', key: 'acc',
width: 200, width: 200,
sorter: (a: TableObjFianl, b: TableObjFianl) => { sorter: (a: TableObj, b: TableObj) => {
if (a.acc !== undefined && b.acc !== undefined) { if (a.acc !== undefined && b.acc !== undefined) {
return JSON.parse(a.acc.default) - JSON.parse(b.acc.default); return JSON.parse(a.acc.default) - JSON.parse(b.acc.default);
} else { } else {
return NaN; return NaN;
} }
}, },
render: (text: string, record: TableObjFianl) => { render: (text: string, record: TableObj) => {
let accuracy;
if (record.acc !== undefined) {
accuracy = record.acc.default;
}
let wei = 0;
if (accuracy) {
if (accuracy.toString().indexOf('.') !== -1) {
wei = accuracy.toString().length - accuracy.toString().indexOf('.') - 1;
}
}
return ( return (
<div> <DefaultMetric record={record}/>
{
record.acc && record.acc.default
?
wei > 6
?
JSON.parse(record.acc.default).toFixed(6)
:
record.acc.default
:
'--'
}
</div>
); );
} }
}); });
...@@ -442,7 +365,7 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -442,7 +365,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
dataIndex: 'operation', dataIndex: 'operation',
key: 'operation', key: 'operation',
width: 90, width: 90,
render: (text: string, record: TableObjFianl) => { render: (text: string, record: TableObj) => {
let trialStatus = record.status; let trialStatus = record.status;
let flagKill = false; let flagKill = false;
if (trialStatus === 'RUNNING') { if (trialStatus === 'RUNNING') {
...@@ -456,7 +379,8 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -456,7 +379,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
( (
<Popconfirm <Popconfirm
title="Are you sure to cancel this trial?" title="Are you sure to cancel this trial?"
onConfirm={this.killJob.bind(this, record.key, record.id, record.status)} onConfirm={killJob.
bind(this, record.key, record.id, record.status, updateList)}
> >
<Button type="primary" className="tableButton">Kill</Button> <Button type="primary" className="tableButton">Kill</Button>
</Popconfirm> </Popconfirm>
...@@ -482,7 +406,7 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -482,7 +406,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
dataIndex: 'intermediate', dataIndex: 'intermediate',
key: 'intermediate', key: 'intermediate',
width: '16%', width: '16%',
render: (text: string, record: TableObjFianl) => { render: (text: string, record: TableObj) => {
return ( return (
<Button <Button
type="primary" type="primary"
...@@ -501,7 +425,7 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -501,7 +425,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
dataIndex: item, dataIndex: item,
key: item, key: item,
width: 150, width: 150,
render: (text: string, record: TableObjFianl) => { render: (text: string, record: TableObj) => {
return ( return (
<div> <div>
{ {
...@@ -518,72 +442,12 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -518,72 +442,12 @@ class TableList extends React.Component<TableListProps, TableListState> {
} }
}); });
const openRow = (record: TableObjFianl) => {
let isHasParameters = true;
if (record.description.parameters.error) {
isHasParameters = false;
}
const parametersRow = {
parameters: record.description.parameters
};
const logPathRow = record.description.logPath !== undefined
?
record.description.logPath
:
'This trial\'s logPath are not available.';
const isdisLogbutton = record.status === 'WAITING'
?
true
:
false;
return (
<pre id="allList" className="hyperpar">
<Row className="openRowContent">
<Tabs tabPosition="left" className="card">
<TabPane tab="Parameters" key="1">
{
isHasParameters
?
<JSONTree
hideRoot={true}
shouldExpandNode={() => true} // default expandNode
getItemString={() => (<span />)} // remove the {} items
data={parametersRow}
/>
:
<div className="logpath">
<span className="logName">Error: </span>
<span className="error">'This trial's parameters are not available.'</span>
</div>
}
</TabPane>
<TabPane tab="Log" key="2">
{
platform === 'pai' || platform === 'kubeflow' || platform === 'frameworkcontroller'
?
<PaiTrialLog
logStr={logPathRow}
id={record.id}
showLogModal={this.showLogModal}
trialStatus={record.status}
isdisLogbutton={isdisLogbutton}
/>
:
<TrialLog logStr={logPathRow} id={record.id} />
}
</TabPane>
</Tabs>
</Row>
</pre>
);
};
return ( return (
<Row className="tableList"> <Row className="tableList">
<div id="tableList"> <div id="tableList">
<Table <Table
columns={showColumn} columns={showColumn}
expandedRowRender={openRow} expandedRowRender={this.openRow}
dataSource={isHasSearch ? searchResult : tableSource} dataSource={isHasSearch ? searchResult : tableSource}
className="commonTableStyle" className="commonTableStyle"
pagination={{ pageSize: entries }} pagination={{ pageSize: entries }}
......
src/webui/src/static/function.ts
View file @ 2b300395
import axios from 'axios';
import {
message
} from 'antd';
import { MANAGER_IP } from './const';
import { FinalResult, FinalType } from './interface'; import { FinalResult, FinalType } from './interface';
const convertTime = (num: number) => { const convertTime = (num: number) => {
...@@ -61,7 +66,71 @@ const getFinal = (final: FinalResult) => { ...@@ -61,7 +66,71 @@ const getFinal = (final: FinalResult) => {
} }
}; };
// detail page table intermediate button
const 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: sequence
},
yAxis: {
name: 'Default Metric',
type: 'value',
data: intermediateArr
},
series: [{
symbolSize: 6,
type: 'scatter',
data: intermediateArr
}]
};
};
// kill job
const killJob = (key: number, id: string, status: string, updateList: Function) => {
axios(`${MANAGER_IP}/trial-jobs/${id}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
})
.then(res => {
if (res.status === 200) {
message.success('Cancel the job successfully');
// render the table
updateList();
} else {
message.error('fail to cancel the job');
}
})
.catch(error => {
if (error.response.status === 500) {
if (error.response.data.error) {
message.error(error.response.data.error);
} else {
message.error('500 error, fail to cancel the job');
}
}
});
};
export { export {
convertTime, convertDuration, getFinalResult, convertTime, convertDuration, getFinalResult,
getFinal getFinal, intermediateGraphOption, killJob
}; };
src/webui/src/static/interface.ts
View file @ 2b300395
...@@ -5,18 +5,7 @@ interface TableObj { ...@@ -5,18 +5,7 @@ interface TableObj {
id: string; id: string;
duration: number; duration: number;
status: string; status: string;
acc?: number; // draw accuracy graph acc?: FinalType; // draw accuracy graph
description: Parameters;
color?: string;
}
interface TableObjFianl {
key: number;
sequenceId: number;
id: string;
duration: number;
status: string;
acc?: FinalType;
description: Parameters; description: Parameters;
color?: string; color?: string;
} }
...@@ -111,6 +100,5 @@ export { ...@@ -111,6 +100,5 @@ export {
TableObj, Parameters, Experiment, TableObj, Parameters, Experiment,
AccurPoint, TrialNumber, TrialJob, AccurPoint, TrialNumber, TrialJob,
DetailAccurPoint, TooltipForAccuracy, DetailAccurPoint, TooltipForAccuracy,
ParaObj, VisualMapValue, Dimobj, FinalResult, ParaObj, VisualMapValue, Dimobj, FinalResult, FinalType
TableObjFianl, FinalType
}; };
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