Skip to content

GitLab

Commit 0330333c authored by Lijiao's avatar Lijiao Committed by fishyds
Browse files

[WebUI] Default metric is latest or final result, !local, show trial log... 

[WebUI] Default metric is latest or final result, !local, show trial log hyperlink or address (#913)

* Add intermediate column

* update

* show trial log link or address

* fix some comments

* update
parent 4baa4c9e
Show whitespace changes
Inline Side-by-side
Showing with 157 additions and 188 deletions
src/webui/src/components/Overview.tsx
View file @ 0330333c
...@@ -33,6 +33,8 @@ interface OverviewState { ...@@ -33,6 +33,8 @@ interface OverviewState {
isTop10: boolean; isTop10: boolean;
titleMaxbgcolor: string; titleMaxbgcolor: string;
titleMinbgcolor?: string; titleMinbgcolor?: string;
// trial stdout is content(false) or link(true)
isLogCollection: boolean;
} }
class Overview extends React.Component<{}, OverviewState> { class Overview extends React.Component<{}, OverviewState> {
...@@ -76,7 +78,8 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -76,7 +78,8 @@ class Overview extends React.Component<{}, OverviewState> {
totalCurrentTrial: 0 totalCurrentTrial: 0
}, },
isTop10: true, isTop10: true,
titleMaxbgcolor: '#999' titleMaxbgcolor: '#999',
isLogCollection: false
}; };
} }
...@@ -95,6 +98,12 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -95,6 +98,12 @@ class Overview extends React.Component<{}, OverviewState> {
const endTimenum = sessionData.endTime; const endTimenum = sessionData.endTime;
const assessor = sessionData.params.assessor; const assessor = sessionData.params.assessor;
const advisor = sessionData.params.advisor; const advisor = sessionData.params.advisor;
// default logCollection is true
const logCollection = res.data.params.logCollection;
let expLogCollection: boolean = false;
if (logCollection !== undefined && logCollection !== 'none') {
expLogCollection = true;
}
trialPro.push({ trialPro.push({
id: sessionData.id, id: sessionData.id,
author: sessionData.params.authorName, author: sessionData.params.authorName,
...@@ -111,7 +120,8 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -111,7 +120,8 @@ class Overview extends React.Component<{}, OverviewState> {
tuner: sessionData.params.tuner, tuner: sessionData.params.tuner,
assessor: assessor ? assessor : undefined, assessor: assessor ? assessor : undefined,
advisor: advisor ? advisor : undefined, advisor: advisor ? advisor : undefined,
clusterMetaData: clusterMetaData ? clusterMetaData : undefined clusterMetaData: clusterMetaData ? clusterMetaData : undefined,
logCollection: logCollection
}); });
// search space format loguniform max and min // search space format loguniform max and min
const temp = sessionData.params.searchSpace; const temp = sessionData.params.searchSpace;
...@@ -134,7 +144,8 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -134,7 +144,8 @@ class Overview extends React.Component<{}, OverviewState> {
if (this._isMounted) { if (this._isMounted) {
this.setState({ this.setState({
trialProfile: trialPro[0], trialProfile: trialPro[0],
searchSpace: searchSpace searchSpace: searchSpace,
isLogCollection: expLogCollection
}); });
} }
} }
...@@ -379,7 +390,7 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -379,7 +390,7 @@ class Overview extends React.Component<{}, OverviewState> {
const { const {
trialProfile, searchSpace, tableData, accuracyData, trialProfile, searchSpace, tableData, accuracyData,
accNodata, status, errorStr, trialNumber, bestAccuracy, accNodata, status, errorStr, trialNumber, bestAccuracy,
titleMaxbgcolor, titleMinbgcolor titleMaxbgcolor, titleMinbgcolor, isLogCollection
} = this.state; } = this.state;
return ( return (
...@@ -410,7 +421,7 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -410,7 +421,7 @@ class Overview extends React.Component<{}, OverviewState> {
</Row> </Row>
</Col> </Col>
<Col span={8} className="overviewBoder"> <Col span={8} className="overviewBoder">
<Title1 text="Trial Profile" icon="4.png" /> <Title1 text="Profile" icon="4.png" />
<Row className="experiment"> <Row className="experiment">
{/* the scroll bar all the trial profile in the searchSpace div*/} {/* the scroll bar all the trial profile in the searchSpace div*/}
<div className="experiment searchSpace"> <div className="experiment searchSpace">
...@@ -453,6 +464,7 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -453,6 +464,7 @@ class Overview extends React.Component<{}, OverviewState> {
<Col span={16} id="succeTable"> <Col span={16} id="succeTable">
<SuccessTable <SuccessTable
tableSource={tableData} tableSource={tableData}
logCollection={isLogCollection}
trainingPlatform={trialProfile.trainingServicePlatform} trainingPlatform={trialProfile.trainingServicePlatform}
/> />
</Col> </Col>
......
src/webui/src/components/TrialsDetail.tsx
View file @ 0330333c
...@@ -21,8 +21,9 @@ interface TrialDetailState { ...@@ -21,8 +21,9 @@ interface TrialDetailState {
searchResultSource: Array<TableObj>; searchResultSource: Array<TableObj>;
isHasSearch: boolean; isHasSearch: boolean;
experimentStatus: string; experimentStatus: string;
entriesTable: number;
experimentPlatform: string; experimentPlatform: string;
experimentLogCollection: boolean;
entriesTable: number;
searchSpace: string; searchSpace: string;
defaultMetric?: Array<number>; defaultMetric?: Array<number>;
} }
...@@ -49,7 +50,6 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -49,7 +50,6 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
); );
private titleOfIntermediate = ( private titleOfIntermediate = (
// <Title1 text="Intermediate Result" icon="intermediate.png" />
<div className="panelTitle"> <div className="panelTitle">
<Icon type="line-chart" /> <Icon type="line-chart" />
<span>Intermediate Result</span> <span>Intermediate Result</span>
...@@ -65,9 +65,10 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -65,9 +65,10 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
tableListSource: [], tableListSource: [],
searchResultSource: [], searchResultSource: [],
experimentStatus: '', experimentStatus: '',
experimentPlatform: '',
experimentLogCollection: false,
entriesTable: 20, entriesTable: 20,
isHasSearch: false, isHasSearch: false,
experimentPlatform: '',
searchSpace: '', searchSpace: '',
defaultMetric: [0, 1] defaultMetric: [0, 1]
}; };
...@@ -279,6 +280,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -279,6 +280,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
alert('TableList component was not properly initialized.'); alert('TableList component was not properly initialized.');
} }
// get and set logCollection val
checkExperimentPlatform = () => { checkExperimentPlatform = () => {
axios(`${MANAGER_IP}/experiment`, { axios(`${MANAGER_IP}/experiment`, {
method: 'GET' method: 'GET'
...@@ -290,10 +292,17 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -290,10 +292,17 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
res.data.params.trainingServicePlatform res.data.params.trainingServicePlatform
: :
''; '';
// default logCollection is true
const logCollection = res.data.params.logCollection;
let expLogCollection: boolean = false;
if (logCollection !== undefined && logCollection !== 'none') {
expLogCollection = true;
}
if (this._isMounted) { if (this._isMounted) {
this.setState({ this.setState({
experimentPlatform: trainingPlatform, experimentPlatform: trainingPlatform,
searchSpace: res.data.params.searchSpace searchSpace: res.data.params.searchSpace,
experimentLogCollection: expLogCollection
}); });
} }
} }
...@@ -318,7 +327,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -318,7 +327,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
const { const {
tableListSource, searchResultSource, isHasSearch, tableListSource, searchResultSource, isHasSearch,
entriesTable, experimentPlatform, searchSpace, entriesTable, experimentPlatform, searchSpace,
defaultMetric defaultMetric, experimentLogCollection
} = this.state; } = this.state;
const source = isHasSearch ? searchResultSource : tableListSource; const source = isHasSearch ? searchResultSource : tableListSource;
return ( return (
...@@ -392,8 +401,9 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -392,8 +401,9 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
<TableList <TableList
entries={entriesTable} entries={entriesTable}
tableSource={source} tableSource={source}
updateList={this.getDetailSource}
platform={experimentPlatform} platform={experimentPlatform}
updateList={this.getDetailSource}
logCollection={experimentLogCollection}
ref={(tabList) => this.tableList = tabList} ref={(tabList) => this.tableList = tabList}
/> />
</div> </div>
......
src/webui/src/components/overview/SuccessTable.tsx
View file @ 0330333c
import * as React from 'react'; import * as React from 'react';
import axios from 'axios'; import { Table } from 'antd';
import { Modal, Input, Table } from 'antd';
const { TextArea } = Input;
import OpenRow from '../public-child/OpenRow'; import OpenRow from '../public-child/OpenRow';
import DefaultMetric from '../public-child/DefaultMetrc'; import DefaultMetric from '../public-child/DefaultMetrc';
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 '../../static/style/tableStatus.css'; import '../../static/style/tableStatus.css';
...@@ -13,72 +10,25 @@ import '../../static/style/tableList.scss'; ...@@ -13,72 +10,25 @@ import '../../static/style/tableList.scss';
interface SuccessTableProps { interface SuccessTableProps {
tableSource: Array<TableObj>; tableSource: Array<TableObj>;
trainingPlatform: string; trainingPlatform: string;
logCollection: boolean;
} }
interface SuccessTableState { class SuccessTable extends React.Component<SuccessTableProps, {}> {
isShowLogModal: boolean;
logContent: string;
}
class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> {
public _isMounted = false; public _isMounted = false;
constructor(props: SuccessTableProps) { constructor(props: SuccessTableProps) {
super(props); super(props);
this.state = {
isShowLogModal: false,
logContent: ''
};
}
showLogModalOverview = (id: string) => {
axios(`${DOWNLOAD_IP}/trial_${id}.log`, {
method: 'GET'
})
.then(res => {
if (res.status === 200) {
if (this._isMounted) {
this.setState(() => ({
logContent: res.data
}));
}
}
})
.catch(error => {
if (error.response.status === 500) {
if (this._isMounted) {
this.setState(() => ({
logContent: 'failed to get log message'
}));
}
}
});
if (this._isMounted) {
this.setState({
isShowLogModal: true
});
}
}
hideLogModalOverview = () => {
if (this._isMounted) {
this.setState({
isShowLogModal: false,
logContent: '' // close modal, delete data
});
}
} }
openRow = (record: TableObj) => { openRow = (record: TableObj) => {
const { trainingPlatform } = this.props; const { trainingPlatform, logCollection } = this.props;
return ( return (
<OpenRow <OpenRow
showLogModalOverview={this.showLogModalOverview}
trainingPlatform={trainingPlatform} trainingPlatform={trainingPlatform}
record={record} record={record}
logCollection={logCollection}
/> />
); );
} }
...@@ -93,7 +43,6 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -93,7 +43,6 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
render() { render() {
const { tableSource } = this.props; const { tableSource } = this.props;
const { isShowLogModal, logContent } = this.state;
let bgColor = ''; let bgColor = '';
const columns = [{ const columns = [{
...@@ -168,25 +117,9 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -168,25 +117,9 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
className="commonTableStyle" className="commonTableStyle"
pagination={false} pagination={false}
/> />
{/* trial log modal */}
<Modal
title="trial log"
visible={isShowLogModal}
onCancel={this.hideLogModalOverview}
footer={null}
destroyOnClose={true}
width="80%"
>
<div id="trialLogContent" style={{ height: window.innerHeight * 0.6 }}>
<TextArea
value={logContent}
disabled={true}
className="logcontent"
/>
</div>
</Modal>
</div > </div >
); );
} }
} }
export default SuccessTable; export default SuccessTable;
src/webui/src/components/overview/TrialProfile.tsx
View file @ 0330333c
...@@ -22,6 +22,7 @@ class TrialInfo extends React.Component<TrialInfoProps, {}> { ...@@ -22,6 +22,7 @@ class TrialInfo extends React.Component<TrialInfoProps, {}> {
trialConcurrency: tiralProInfo.runConcurren, trialConcurrency: tiralProInfo.runConcurren,
tuner: tiralProInfo.tuner, tuner: tiralProInfo.tuner,
assessor: tiralProInfo.assessor ? tiralProInfo.assessor : undefined, assessor: tiralProInfo.assessor ? tiralProInfo.assessor : undefined,
logCollection: tiralProInfo.logCollection ? tiralProInfo.logCollection : undefined,
advisor: tiralProInfo.advisor ? tiralProInfo.advisor : undefined, advisor: tiralProInfo.advisor ? tiralProInfo.advisor : undefined,
clusterMetaData: tiralProInfo.clusterMetaData ? tiralProInfo.clusterMetaData : undefined clusterMetaData: tiralProInfo.clusterMetaData ? tiralProInfo.clusterMetaData : undefined
}); });
......
src/webui/src/components/public-child/DefaultMetrc.tsx
View file @ 0330333c
...@@ -19,7 +19,7 @@ class DefaultMetric extends React.Component<DefaultMetricProps, {}> { ...@@ -19,7 +19,7 @@ class DefaultMetric extends React.Component<DefaultMetricProps, {}> {
accuracy = record.acc.default; accuracy = record.acc.default;
} }
let wei = 0; let wei = 0;
if (accuracy) { if (accuracy !== undefined) {
if (accuracy.toString().indexOf('.') !== -1) { if (accuracy.toString().indexOf('.') !== -1) {
wei = accuracy.toString().length - accuracy.toString().indexOf('.') - 1; wei = accuracy.toString().length - accuracy.toString().indexOf('.') - 1;
} }
...@@ -27,7 +27,7 @@ class DefaultMetric extends React.Component<DefaultMetricProps, {}> { ...@@ -27,7 +27,7 @@ class DefaultMetric extends React.Component<DefaultMetricProps, {}> {
return ( return (
<div> <div>
{ {
record.acc && record.acc.default record.acc !== undefined && record.acc.default !== undefined
? ?
wei > 6 wei > 6
? ?
......
src/webui/src/components/public-child/IntermediateVal.tsx 0 → 100644
View file @ 0330333c
import * as React from 'react';
import { TableObj } from '../../static/interface';
interface IntermediateValProps {
record: TableObj;
}
class IntermediateVal extends React.Component<IntermediateValProps, {}> {
constructor(props: IntermediateValProps) {
super(props);
}
render() {
const { record } = this.props;
const interArr = record.description.intermediate;
const status = record.status;
let lastVal;
let wei = 0;
if (interArr !== undefined) {
lastVal = interArr[interArr.length - 1];
}
let result: string = JSON.stringify(lastVal);
if (lastVal !== undefined) {
if (lastVal.toString().indexOf('.') !== -1) {
wei = lastVal.toString().length - lastVal.toString().indexOf('.') - 1;
if (wei > 6) {
result = `${lastVal.toFixed(6)}`;
}
if (status === 'SUCCEEDED') {
result = `${lastVal.toFixed(6)} (FINAL)`;
} else {
result = `${lastVal.toFixed(6)} (LATEST)`;
}
}
} else {
result = '--';
}
return (
<div>{result}</div>
);
}
}
export default IntermediateVal;
src/webui/src/components/public-child/LogPathChild.tsx
View file @ 0330333c
...@@ -17,19 +17,15 @@ class LogPathChild extends React.Component<LogpathChildProps, {}> { ...@@ -17,19 +17,15 @@ class LogPathChild extends React.Component<LogpathChildProps, {}> {
const isLink = /^http/gi.test(eachLogpath); const isLink = /^http/gi.test(eachLogpath);
return ( return (
<div> <div className="logpath">
<span className="logName">{logName}</span>
{ {
isLink isLink
? ?
<div className="logpath">
<span className="logName">{logName}</span>
<a className="logContent logHref" href={eachLogpath} target="_blank">{eachLogpath}</a> <a className="logContent logHref" href={eachLogpath} target="_blank">{eachLogpath}</a>
</div>
: :
<div className="logpath">
<span className="logName">{logName}</span>
<span className="logContent">{eachLogpath}</span> <span className="logContent">{eachLogpath}</span>
</div>
} }
</div> </div>
); );
......
src/webui/src/components/public-child/OpenRow.tsx
View file @ 0330333c
...@@ -8,8 +8,8 @@ const TabPane = Tabs.TabPane; ...@@ -8,8 +8,8 @@ const TabPane = Tabs.TabPane;
interface OpenRowProps { interface OpenRowProps {
trainingPlatform: string; trainingPlatform: string;
showLogModalOverview: Function;
record: TableObj; record: TableObj;
logCollection: boolean;
} }
class OpenRow extends React.Component<OpenRowProps, {}> { class OpenRow extends React.Component<OpenRowProps, {}> {
...@@ -20,7 +20,7 @@ class OpenRow extends React.Component<OpenRowProps, {}> { ...@@ -20,7 +20,7 @@ class OpenRow extends React.Component<OpenRowProps, {}> {
} }
render() { render() {
const { trainingPlatform, record, showLogModalOverview } = this.props; const { trainingPlatform, record, logCollection } = this.props;
let isHasParameters = true; let isHasParameters = true;
if (record.description.parameters.error) { if (record.description.parameters.error) {
...@@ -62,7 +62,7 @@ class OpenRow extends React.Component<OpenRowProps, {}> { ...@@ -62,7 +62,7 @@ class OpenRow extends React.Component<OpenRowProps, {}> {
<PaiTrialLog <PaiTrialLog
logStr={logPathRow} logStr={logPathRow}
id={record.id} id={record.id}
showLogModal={showLogModalOverview} logCollection={logCollection}
/> />
: :
<TrialLog logStr={logPathRow} id={record.id} /> <TrialLog logStr={logPathRow} id={record.id} />
......
src/webui/src/components/public-child/PaiTrialChild.tsx
View file @ 0330333c
...@@ -5,8 +5,7 @@ import { DOWNLOAD_IP } from '../../static/const'; ...@@ -5,8 +5,7 @@ import { DOWNLOAD_IP } from '../../static/const';
interface PaiTrialChildProps { interface PaiTrialChildProps {
logString: string; logString: string;
id: string; id: string;
showLogModal: Function; logCollect: boolean;
isdisLogbtn?: boolean;
} }
class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> { class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
...@@ -17,7 +16,7 @@ class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> { ...@@ -17,7 +16,7 @@ class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
} }
render() { render() {
const { logString, id } = this.props; const { logString, id, logCollect } = this.props;
return ( return (
<div> <div>
{ {
...@@ -26,7 +25,9 @@ class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> { ...@@ -26,7 +25,9 @@ class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
<div /> <div />
: :
<Row> <Row>
<Row> {
logCollect
?
<a <a
target="_blank" target="_blank"
href={`${DOWNLOAD_IP}/trial_${id}.log`} href={`${DOWNLOAD_IP}/trial_${id}.log`}
...@@ -34,7 +35,9 @@ class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> { ...@@ -34,7 +35,9 @@ class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
> >
trial stdout trial stdout
</a> </a>
</Row> :
<span>trial stdout: {logString}</span>
}
</Row> </Row>
} }
</div> </div>
......
src/webui/src/components/public-child/PaiTrialLog.tsx
View file @ 0330333c
...@@ -2,13 +2,12 @@ import * as React from 'react'; ...@@ -2,13 +2,12 @@ import * as React from 'react';
import { Row } from 'antd'; import { Row } from 'antd';
import { DOWNLOAD_IP } from '../../static/const'; import { DOWNLOAD_IP } from '../../static/const';
import PaiTrialChild from './PaiTrialChild'; import PaiTrialChild from './PaiTrialChild';
import LogPathChild from './LogPathChild';
interface PaitrialLogProps { interface PaitrialLogProps {
logStr: string; logStr: string;
id: string; id: string;
showLogModal: Function; logCollection: boolean;
trialStatus?: string;
isdisLogbutton?: boolean;
} }
class PaitrialLog extends React.Component<PaitrialLogProps, {}> { class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
...@@ -19,9 +18,7 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> { ...@@ -19,9 +18,7 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
} }
render() { render() {
const { logStr, id, showLogModal, const { logStr, id, logCollection } = this.props;
isdisLogbutton
} = this.props;
const isTwopath = logStr.indexOf(',') !== -1 const isTwopath = logStr.indexOf(',') !== -1
? ?
true true
...@@ -34,6 +31,9 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> { ...@@ -34,6 +31,9 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
isTwopath isTwopath
? ?
<Row> <Row>
{
logCollection
?
<Row> <Row>
<a <a
target="_blank" target="_blank"
...@@ -44,13 +44,24 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> { ...@@ -44,13 +44,24 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
</a> </a>
<a target="_blank" href={logStr.split(',')[1]}>hdfsLog</a> <a target="_blank" href={logStr.split(',')[1]}>hdfsLog</a>
</Row> </Row>
:
<Row>
<LogPathChild
eachLogpath={logStr.split(',')[0]}
logName="trial stdout:"
/>
<LogPathChild
eachLogpath={logStr.split(',')[1]}
logName="hdfsLog:"
/>
</Row>
}
</Row> </Row>
: :
<PaiTrialChild <PaiTrialChild
logString={logStr} logString={logStr}
id={id} id={id}
showLogModal={showLogModal} logCollect={logCollection}
isdisLogbtn={isdisLogbutton}
/> />
} }
</div> </div>
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ 0330333c
...@@ -5,11 +5,12 @@ import { ...@@ -5,11 +5,12 @@ import {
Row, Table, Button, Popconfirm, Modal, Checkbox Row, Table, Button, Popconfirm, Modal, Checkbox
} from 'antd'; } from 'antd';
const CheckboxGroup = Checkbox.Group; const CheckboxGroup = Checkbox.Group;
import { MANAGER_IP, DOWNLOAD_IP, trialJobStatus, COLUMN, COLUMN_INDEX } from '../../static/const'; import { MANAGER_IP, trialJobStatus, COLUMN, COLUMN_INDEX } from '../../static/const';
import { convertDuration, intermediateGraphOption, killJob } from '../../static/function'; import { convertDuration, intermediateGraphOption, killJob } from '../../static/function';
import { TableObj, TrialJob } from '../../static/interface'; import { TableObj, TrialJob } from '../../static/interface';
import OpenRow from '../public-child/OpenRow'; import OpenRow from '../public-child/OpenRow';
import DefaultMetric from '../public-child/DefaultMetrc'; // import DefaultMetric from '../public-child/DefaultMetrc';
import IntermediateVal from '../public-child/IntermediateVal';
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,6 +31,7 @@ interface TableListProps { ...@@ -30,6 +31,7 @@ interface TableListProps {
tableSource: Array<TableObj>; tableSource: Array<TableObj>;
updateList: Function; updateList: Function;
platform: string; platform: string;
logCollection: boolean;
} }
interface TableListState { interface TableListState {
...@@ -38,8 +40,6 @@ interface TableListState { ...@@ -38,8 +40,6 @@ interface TableListState {
isObjFinal: boolean; isObjFinal: boolean;
isShowColumn: boolean; isShowColumn: boolean;
columnSelected: Array<string>; // user select columnKeys columnSelected: Array<string>; // user select columnKeys
logModal: boolean;
logMessage: string;
} }
interface ColumnIndex { interface ColumnIndex {
...@@ -61,9 +61,7 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -61,9 +61,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
modalVisible: false, modalVisible: false,
isObjFinal: false, isObjFinal: false,
isShowColumn: false, isShowColumn: false,
logModal: false, columnSelected: COLUMN
columnSelected: COLUMN,
logMessage: ''
}; };
} }
...@@ -107,51 +105,6 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -107,51 +105,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
} }
} }
updateTrialLogMessage = (id: string) => {
this._trialId = id;
axios(`${DOWNLOAD_IP}/trial_${this._trialId}.log`, {
method: 'GET'
})
.then(res => {
if (res.status === 200) {
if (this._isMounted) {
this.setState(() => ({
logMessage: res.data
}));
}
}
})
.catch(error => {
if (error.response.status === 500) {
if (this._isMounted) {
this.setState(() => ({
logMessage: 'failed to get log message'
}));
}
}
});
}
showLogModal = (id: string) => {
this.updateTrialLogMessage(id);
this.intervalTrialLog = window.setInterval(this.updateTrialLogMessage.bind(this, this._trialId), 10000);
if (this._isMounted) {
this.setState({
logModal: true
});
}
}
hideLogModal = () => {
window.clearInterval(this.intervalTrialLog);
if (this._isMounted) {
this.setState({
logModal: false,
logMessage: ''
});
}
}
hideShowColumnModal = () => { hideShowColumnModal = () => {
if (this._isMounted) { if (this._isMounted) {
this.setState({ this.setState({
...@@ -222,12 +175,12 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -222,12 +175,12 @@ class TableList extends React.Component<TableListProps, TableListState> {
} }
openRow = (record: TableObj) => { openRow = (record: TableObj) => {
const { platform } = this.props; const { platform, logCollection } = this.props;
return ( return (
<OpenRow <OpenRow
showLogModalOverview={this.showLogModal}
trainingPlatform={platform} trainingPlatform={platform}
record={record} record={record}
logCollection={logCollection}
/> />
); );
} }
...@@ -243,7 +196,7 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -243,7 +196,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
render() { render() {
const { entries, tableSource, updateList } = this.props; const { entries, tableSource, updateList } = this.props;
const { intermediateOption, modalVisible, isShowColumn, columnSelected} = this.state; const { intermediateOption, modalVisible, isShowColumn, columnSelected } = this.state;
let showTitle = COLUMN; let showTitle = COLUMN;
let bgColor = ''; let bgColor = '';
const trialJob: Array<TrialJob> = []; const trialJob: Array<TrialJob> = [];
...@@ -348,17 +301,19 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -348,17 +301,19 @@ class TableList extends React.Component<TableListProps, TableListState> {
title: 'Default Metric', title: 'Default Metric',
dataIndex: 'acc', dataIndex: 'acc',
key: 'acc', key: 'acc',
width: 200, width: 160,
sorter: (a: TableObj, b: TableObj) => { sorter: (a: TableObj, b: TableObj) => {
if (a.acc !== undefined && b.acc !== undefined) { const aa = a.description.intermediate;
return JSON.parse(a.acc.default) - JSON.parse(b.acc.default); const bb = b.description.intermediate;
if (aa !== undefined && bb !== undefined) {
return aa[aa.length - 1] - bb[bb.length - 1];
} else { } else {
return NaN; return NaN;
} }
}, },
render: (text: string, record: TableObj) => { render: (text: string, record: TableObj) => {
return ( return (
<DefaultMetric record={record}/> <IntermediateVal record={record} />
); );
} }
}); });
......
src/webui/src/static/interface.ts
View file @ 0330333c
...@@ -46,6 +46,7 @@ interface Experiment { ...@@ -46,6 +46,7 @@ interface Experiment {
assessor?: object; assessor?: object;
advisor?: object; advisor?: object;
clusterMetaData?: object; clusterMetaData?: object;
logCollection?: string;
} }
// trial accuracy // trial accuracy
......
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