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 {
Experiment, TableObj,
Parameters, TrialNumber
} from '../static/interface';
import { getFinalResult } from '../static/function';
import { getFinal } from '../static/function';
import SuccessTable from './overview/SuccessTable';
import Title1 from './overview/Title1';
import Progressed from './overview/Progress';
......@@ -62,17 +62,7 @@ class Overview extends React.Component<{}, OverviewState> {
tuner: {},
trainingServicePlatform: ''
},
tableData: [{
key: 0,
sequenceId: 0,
id: '',
duration: 0,
status: '',
acc: 0,
description: {
parameters: {}
}
}],
tableData: [],
option: {},
noData: '',
// accuracy
......@@ -224,7 +214,7 @@ class Overview extends React.Component<{}, OverviewState> {
parameters: {}
};
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 (tableData[item].hyperParameters) {
const parameters = JSON.parse(tableData[item].hyperParameters[0]).parameters;
......@@ -256,16 +246,16 @@ class Overview extends React.Component<{}, OverviewState> {
const { isTop10 } = this.state;
if (isTop10 === true) {
topTableData.sort((a: TableObj, b: TableObj) => {
if (a.acc && b.acc) {
return b.acc - a.acc;
if (a.acc !== undefined && b.acc !== undefined) {
return JSON.parse(b.acc.default) - JSON.parse(a.acc.default);
} else {
return NaN;
}
});
} else {
topTableData.sort((a: TableObj, b: TableObj) => {
if (a.acc && b.acc) {
return a.acc - b.acc;
if (a.acc !== undefined && b.acc !== undefined) {
return JSON.parse(a.acc.default) - JSON.parse(b.acc.default);
} else {
return NaN;
}
......@@ -275,7 +265,7 @@ class Overview extends React.Component<{}, OverviewState> {
let bestDefaultMetric = 0;
if (topTableData[0] !== undefined) {
if (topTableData[0].acc !== undefined) {
bestDefaultMetric = topTableData[0].acc;
bestDefaultMetric = JSON.parse(topTableData[0].acc.default);
}
}
if (this._isMounted) {
......@@ -308,7 +298,7 @@ class Overview extends React.Component<{}, OverviewState> {
const indexarr: Array<number> = [];
Object.keys(sourcePoint).map(item => {
const items = sourcePoint[item];
accarr.push(items.acc);
accarr.push(items.acc.default);
indexarr.push(items.sequenceId);
});
const accOption = {
......
src/webui/src/components/TrialsDetail.tsx
View file @ 2b300395
......@@ -3,7 +3,7 @@ import axios from 'axios';
import { MANAGER_IP } from '../static/const';
import { Row, Col, Tabs, Input, Select, Button } from 'antd';
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 Accuracy from './overview/Accuracy';
import Duration from './trial-detail/Duration';
......@@ -16,8 +16,8 @@ import '../static/style/trialsDetail.scss';
interface TrialDetailState {
accSource: object;
accNodata: string;
tableListSource: Array<TableObjFianl>;
searchResultSource: Array<TableObjFianl>;
tableListSource: Array<TableObj>;
searchResultSource: Array<TableObj>;
isHasSearch: boolean;
experimentStatus: string;
entriesTable: number;
......@@ -136,7 +136,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
.then(res => {
if (res.status === 200) {
const trialJobs = res.data;
const trialTable: Array<TableObjFianl> = [];
const trialTable: Array<TableObj> = [];
Object.keys(trialJobs).map(item => {
// only succeeded trials have finalMetricData
let desc: Parameters = {
......@@ -189,7 +189,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
Object.keys(searchResultSource).map(index => {
temp.push(searchResultSource[index].id);
});
const searchResultList: Array<TableObjFianl> = [];
const searchResultList: Array<TableObj> = [];
for (let i = 0; i < temp.length; i++) {
Object.keys(trialTable).map(key => {
const item = trialTable[key];
......@@ -221,7 +221,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
.then(res => {
if (res.status === 200) {
const trialJobs = res.data;
const trialTable: Array<TableObjFianl> = [];
const trialTable: Array<TableObj> = [];
Object.keys(trialJobs).map(item => {
// only succeeded trials have finalMetricData
let desc: Parameters = {
......@@ -312,7 +312,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
} else {
window.clearInterval(this.interAllTableList);
const { tableListSource } = this.state;
const searchResultList: Array<TableObjFianl> = [];
const searchResultList: Array<TableObj> = [];
Object.keys(tableListSource).map(key => {
const item = tableListSource[key];
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 axios from 'axios';
import JSONTree from 'react-json-tree';
import { Row, Modal, Input, Table, Tabs } from 'antd';
const TabPane = Tabs.TabPane;
import { Modal, Input, Table } from 'antd';
const { TextArea } = Input;
import OpenRow from '../public-child/OpenRow';
import DefaultMetric from '../public-child/DefaultMetrc';
import { DOWNLOAD_IP } from '../../static/const';
import { TableObj } from '../../static/interface';
import { convertDuration } from '../../static/function';
import PaiTrialLog from '../logPath/PaiTrialLog';
import TrialLog from '../logPath/TrialLog';
import '../../static/style/tableStatus.css';
import '../../static/style/tableList.scss';
......@@ -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() {
this._isMounted = true;
}
......@@ -83,7 +92,7 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
}
render() {
const { tableSource, trainingPlatform } = this.props;
const { tableSource } = this.props;
const { isShowLogModal, logContent } = this.state;
let bgColor = '';
......@@ -137,92 +146,24 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
title: 'Default Metric',
dataIndex: 'acc',
key: 'acc',
sorter: (a: TableObj, b: TableObj) => (a.acc as number) - (b.acc as number),
render: (text: string, record: TableObj) => {
const accuracy = record.acc;
let wei = 0;
if (accuracy) {
if (accuracy.toString().indexOf('.') !== -1) {
wei = accuracy.toString().length - accuracy.toString().indexOf('.') - 1;
}
sorter: (a: TableObj, b: TableObj) => {
if (a.acc !== undefined && b.acc !== undefined) {
return JSON.parse(a.acc.default) - JSON.parse(b.acc.default);
} else {
return NaN;
}
},
render: (text: string, record: TableObj) => {
return (
<div>
{
record.acc
?
wei > 6
?
record.acc.toFixed(6)
:
record.acc
:
'--'
}
</div>
<DefaultMetric record={record} />
);
}
// 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 (
<div className="tabScroll">
<div className="tabScroll" >
<Table
columns={columns}
expandedRowRender={openRow}
expandedRowRender={this.openRow}
dataSource={tableSource}
className="commonTableStyle"
pagination={false}
......@@ -244,9 +185,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
/>
</div>
</Modal>
</div>
</div >
);
}
}
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> {
};
}
getParallelAxis =
( dimName: Array<string>, searchRange: SearchSpace,
parallelAxis: Array<Dimobj>, accPara: Array<number>,
eachTrialParams: Array<string>, paraYdata: number[][]
) => {
if (this._isMounted) {
this.setState(() => ({
dimName: dimName,
visualValue: {
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());
getParallelAxis =
(
dimName: Array<string>, searchRange: SearchSpace,
parallelAxis: Array<Dimobj>, accPara: Array<number>,
eachTrialParams: Array<string>, paraYdata: number[][]
) => {
if (this._isMounted) {
this.setState(() => ({
dimName: dimName,
visualValue: {
minAccuracy: accPara.length !== 0 ? Math.min(...accPara) : 0,
maxAccuracy: accPara.length !== 0 ? Math.max(...accPara) : 1
}
parallelAxis.push({
dim: i,
name: dimName[i],
type: 'category',
data: data
});
break;
default:
parallelAxis.push({
dim: i,
name: dimName[i]
});
}));
}
}
// get data for every lines. if dim is choice type, number -> toString()
Object.keys(eachTrialParams).map(item => {
let temp: Array<number> = [];
// search space range and specific value [only 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]]
);
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;
// 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 = () => {
axios
......@@ -253,7 +262,21 @@ class Para extends React.Component<{}, ParaState> {
parallelAxisDefault: {
tooltip: {
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,
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ 2b300395
import * as React from 'react';
import axios from 'axios';
import JSONTree from 'react-json-tree';
import ReactEcharts from 'echarts-for-react';
import {
Row, Input, Table, Tabs, Button, Popconfirm, Modal, message, Checkbox
Row, Input, Table, Button, Popconfirm, Modal, Checkbox
} from 'antd';
const { TextArea } = Input;
const TabPane = Tabs.TabPane;
const CheckboxGroup = Checkbox.Group;
import { MANAGER_IP, DOWNLOAD_IP, trialJobStatus, COLUMN, COLUMN_INDEX } from '../../static/const';
import { convertDuration } from '../../static/function';
import { TableObjFianl, TrialJob } from '../../static/interface';
import PaiTrialLog from '../logPath/PaiTrialLog';
import TrialLog from '../logPath/TrialLog';
import { convertDuration, intermediateGraphOption, killJob } from '../../static/function';
import { TableObj, TrialJob } from '../../static/interface';
import OpenRow from '../public-child/OpenRow';
import DefaultMetric from '../public-child/DefaultMetrc';
import '../../static/style/search.scss';
require('../../static/style/tableStatus.css');
require('../../static/style/logPath.scss');
......@@ -30,8 +28,8 @@ echarts.registerTheme('my_theme', {
interface TableListProps {
entries: number;
tableSource: Array<TableObjFianl>;
searchResult: Array<TableObjFianl>;
tableSource: Array<TableObj>;
searchResult: Array<TableObj>;
updateList: Function;
isHasSearch: boolean;
platform: string;
......@@ -83,7 +81,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
Object.keys(res.data).map(item => {
intermediateArr.push(parseFloat(res.data[item].data));
});
const intermediate = this.intermediateGraphOption(intermediateArr, id);
const intermediate = intermediateGraphOption(intermediateArr, id);
if (this._isMounted) {
this.setState(() => ({
intermediateOption: intermediate
......@@ -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
addColumn = () => {
// show user select check button
......@@ -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() {
this._isMounted = true;
}
......@@ -294,7 +239,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
render() {
const { entries, tableSource, searchResult, isHasSearch, platform } = this.props;
const { entries, tableSource, searchResult, isHasSearch, updateList } = this.props;
const { intermediateOption, modalVisible, isShowColumn, columnSelected,
logMessage, logModal
} = this.state;
......@@ -335,7 +280,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
width: 120,
className: 'tableHead',
sorter:
(a: TableObjFianl, b: TableObjFianl) =>
(a: TableObj, b: TableObj) =>
(a.sequenceId as number) - (b.sequenceId as number)
});
break;
......@@ -347,8 +292,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
width: 60,
className: 'tableHead idtitle',
// the sort of string
sorter: (a: TableObjFianl, b: TableObjFianl): number => a.id.localeCompare(b.id),
render: (text: string, record: TableObjFianl) => {
sorter: (a: TableObj, b: TableObj): number => a.id.localeCompare(b.id),
render: (text: string, record: TableObj) => {
return (
<div>{record.id}</div>
);
......@@ -362,8 +307,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
key: 'duration',
width: 140,
// the sort of number
sorter: (a: TableObjFianl, b: TableObjFianl) => (a.duration as number) - (b.duration as number),
render: (text: string, record: TableObjFianl) => {
sorter: (a: TableObj, b: TableObj) => (a.duration as number) - (b.duration as number),
render: (text: string, record: TableObj) => {
let duration;
if (record.duration !== undefined && record.duration > 0) {
duration = convertDuration(record.duration);
......@@ -383,15 +328,15 @@ class TableList extends React.Component<TableListProps, TableListState> {
key: 'status',
width: 150,
className: 'tableStatus',
render: (text: string, record: TableObjFianl) => {
render: (text: string, record: TableObj) => {
bgColor = record.status;
return (
<span className={`${bgColor} commonStyle`}>{record.status}</span>
);
},
filters: trialJob,
onFilter: (value: string, record: TableObjFianl) => record.status.indexOf(value) === 0,
sorter: (a: TableObjFianl, b: TableObjFianl): number => a.status.localeCompare(b.status)
onFilter: (value: string, record: TableObj) => record.status.indexOf(value) === 0,
sorter: (a: TableObj, b: TableObj): number => a.status.localeCompare(b.status)
});
break;
case 'Default':
......@@ -400,38 +345,16 @@ class TableList extends React.Component<TableListProps, TableListState> {
dataIndex: 'acc',
key: 'acc',
width: 200,
sorter: (a: TableObjFianl, b: TableObjFianl) => {
sorter: (a: TableObj, b: TableObj) => {
if (a.acc !== undefined && b.acc !== undefined) {
return JSON.parse(a.acc.default) - JSON.parse(b.acc.default);
} else {
return NaN;
}
},
render: (text: string, record: TableObjFianl) => {
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;
}
}
render: (text: string, record: TableObj) => {
return (
<div>
{
record.acc && record.acc.default
?
wei > 6
?
JSON.parse(record.acc.default).toFixed(6)
:
record.acc.default
:
'--'
}
</div>
<DefaultMetric record={record}/>
);
}
});
......@@ -442,7 +365,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
dataIndex: 'operation',
key: 'operation',
width: 90,
render: (text: string, record: TableObjFianl) => {
render: (text: string, record: TableObj) => {
let trialStatus = record.status;
let flagKill = false;
if (trialStatus === 'RUNNING') {
......@@ -456,7 +379,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
(
<Popconfirm
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>
</Popconfirm>
......@@ -482,7 +406,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
dataIndex: 'intermediate',
key: 'intermediate',
width: '16%',
render: (text: string, record: TableObjFianl) => {
render: (text: string, record: TableObj) => {
return (
<Button
type="primary"
......@@ -501,7 +425,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
dataIndex: item,
key: item,
width: 150,
render: (text: string, record: TableObjFianl) => {
render: (text: string, record: TableObj) => {
return (
<div>
{
......@@ -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 (
<Row className="tableList">
<div id="tableList">
<Table
columns={showColumn}
expandedRowRender={openRow}
expandedRowRender={this.openRow}
dataSource={isHasSearch ? searchResult : tableSource}
className="commonTableStyle"
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';
const convertTime = (num: number) => {
......@@ -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 {
convertTime, convertDuration, getFinalResult,
getFinal
getFinal, intermediateGraphOption, killJob
};
src/webui/src/static/interface.ts
View file @ 2b300395
......@@ -5,18 +5,7 @@ interface TableObj {
id: string;
duration: number;
status: string;
acc?: number; // draw accuracy graph
description: Parameters;
color?: string;
}
interface TableObjFianl {
key: number;
sequenceId: number;
id: string;
duration: number;
status: string;
acc?: FinalType;
acc?: FinalType; // draw accuracy graph
description: Parameters;
color?: string;
}
......@@ -111,6 +100,5 @@ export {
TableObj, Parameters, Experiment,
AccurPoint, TrialNumber, TrialJob,
DetailAccurPoint, TooltipForAccuracy,
ParaObj, VisualMapValue, Dimobj, FinalResult,
TableObjFianl, FinalType
ParaObj, VisualMapValue, Dimobj, FinalResult, 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