Skip to content

GitLab

Commit dd04c73a authored by Lijiao's avatar Lijiao Committed by QuanluZhang
Browse files

Optimization of copy as python (#987) 

optimization of copy as python
parent 5ee549db
Hide whitespace changes
Inline Side-by-side
Showing with 201 additions and 564 deletions
src/webui/public/icon.png
View replaced file @ 5ee549db View file @ dd04c73a
src/webui/public/icon.png

29.9 KB | W: | H:

src/webui/public/icon.png

2.23 KB | W: | H:

src/webui/public/icon.png
src/webui/public/icon.png
src/webui/public/icon.png
src/webui/public/icon.png
  • 2-up
  • Swipe
  • Onion skin
src/webui/src/components/Control.tsx deleted 100644 → 0
View file @ 5ee549db
import * as React from 'react';
import { Input, Button, message } from 'antd';
import axios from 'axios';
import { MANAGER_IP, CONTROLTYPE } from '../static/const';
const { TextArea } = Input;
import '../static/style/control.scss';
interface ExperimentParams {
authorName: string;
experimentName: string;
trialConcurrency: number;
maxExecDuration: number;
maxTrialNum: number;
searchSpace: string;
tuner: {
tunerCommand: string;
tunerCwd: string;
tunerCheckpointDirectory: string;
tunerGpuNum?: number;
};
assessor?: {
assessorCommand: string;
assessorCwd: string;
assessorCheckpointDirectory: string;
assessorGpuNum?: number;
};
}
interface Experiments {
params: ExperimentParams;
id: string;
startTime?: Date;
endTime?: Date;
revision: number;
execDuration: number;
}
interface TrialNumber {
maxExecDuration: number;
trialConcurrency: number;
}
interface ControlState {
addisabled: boolean;
addTrial: string;
updateSearch: string;
trialNum: TrialNumber;
trialMess: string;
updisabled: boolean;
upTrialdis: boolean;
experiment: Experiments;
}
class Control extends React.Component<{}, ControlState> {
public _isMounted = false;
constructor(props: {}) {
super(props);
this.state = {
addisabled: false,
upTrialdis: false,
addTrial: '',
updateSearch: '',
updisabled: false,
trialNum: {
maxExecDuration: 0,
trialConcurrency: 0
},
trialMess: '',
// experiment origin data obj
experiment: {
params: {
authorName: '',
experimentName: '',
trialConcurrency: 0,
maxExecDuration: 0,
maxTrialNum: 0,
searchSpace: '',
tuner: {
tunerCommand: '',
tunerCwd: '',
tunerCheckpointDirectory: '',
}
},
id: '',
revision: 0,
execDuration: 0,
}
};
}
updateTrialNumLoad = () => {
if (this._isMounted) {
this.setState({
upTrialdis: true,
});
}
}
updateTrialNumNormal = () => {
if (this._isMounted) {
this.setState({
upTrialdis: false,
});
}
}
addButtonLoad = () => {
if (this._isMounted) {
this.setState({
addisabled: true
});
}
}
addButtonNormal = () => {
if (this._isMounted) {
this.setState({
addisabled: false,
});
}
}
updateSearchLoad = () => {
if (this._isMounted) {
this.setState({
updisabled: true,
});
}
}
updateSearchNormal = () => {
if (this._isMounted) {
this.setState({
updisabled: false,
});
}
}
getTrialNum = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
if (this._isMounted) {
this.setState({
trialMess: event.target.value
});
}
}
getAddTrialval = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
if (this._isMounted) {
this.setState({
addTrial: event.target.value
});
}
}
updateSearchCon = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
if (this._isMounted) {
this.setState({
updateSearch: event.target.value
});
}
}
// get add trial example
getAddExample = () => {
axios(`${MANAGER_IP}/trial-jobs`, {
method: 'GET'
}).then(res => {
if (res.status === 200 && this._isMounted) {
if (res.data.length !== 0) {
const addTrialExam = JSON.parse(res.data[0].hyperParameters).parameters;
this.setState({
addTrial: JSON.stringify(addTrialExam, null, 4)
});
}
}
});
}
// get update search_space file and experiment
getUpdateExample = () => {
axios(`${MANAGER_IP}/experiment`, {
method: 'GET'
}).then(res => {
if (res.status === 200 && this._isMounted) {
const sespaceExam = JSON.parse(res.data.params.searchSpace);
const trialnum: Array<TrialNumber> = [];
trialnum.push({
maxExecDuration: res.data.params.maxExecDuration,
trialConcurrency: res.data.params.trialConcurrency
});
this.setState(() => ({
updateSearch: JSON.stringify(sespaceExam, null, 4),
trialNum: trialnum[0],
trialMess: JSON.stringify(trialnum[0], null, 4),
experiment: res.data
}));
}
});
}
// update trial number parameters
trialParameterMess = (exper: Experiments, str: string) => {
axios(`${MANAGER_IP}/experiment`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
data: exper,
params: {
update_type: str,
}
}).then(res => {
if (res.status === 200) {
message.success(`Update ${str.toLocaleLowerCase()} successfully`);
this.getUpdateExample();
} else {
message.error(`Update ${str.toLocaleLowerCase()} failed`);
}
});
}
updateTrialMess = () => {
const { trialMess } = this.state;
if (trialMess !== '' || trialMess !== null) {
this.updateTrialNumLoad();
const { experiment } = this.state;
const newExperiment = JSON.parse(JSON.stringify(experiment));
const trialObj = JSON.parse(trialMess);
const orimaxDuration = experiment.params.maxExecDuration;
const oriconTrial = experiment.params.trialConcurrency;
const flagMax = (trialObj.maxExecDuration !== orimaxDuration);
const flagCon = (trialObj.trialConcurrency !== oriconTrial);
if (flagCon && flagMax) {
newExperiment.params.trialConcurrency = trialObj.trialConcurrency;
newExperiment.params.maxExecDuration = trialObj.maxExecDuration;
this.trialParameterMess(newExperiment, CONTROLTYPE[1]);
this.trialParameterMess(newExperiment, CONTROLTYPE[2]);
} else if (flagCon) {
newExperiment.params.trialConcurrency = trialObj.trialConcurrency;
this.trialParameterMess(newExperiment, CONTROLTYPE[1]);
} else if (flagMax) {
newExperiment.params.maxExecDuration = trialObj.maxExecDuration;
this.trialParameterMess(newExperiment, CONTROLTYPE[2]);
} else {
message.info('you have not modified this file');
}
this.updateTrialNumNormal();
} else {
message.error('The text can not be empty');
}
}
userSubmitJob = () => {
const { addTrial } = this.state;
if (addTrial === null || addTrial === '') {
message.error('The text can not be empty');
} else {
this.addButtonLoad();
// new experiment obj
axios(`${MANAGER_IP}/trial-jobs`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
data: addTrial
}).then(res => {
if (res.status === 200) {
message.success('Submit successfully');
} else {
message.error('Submit failed');
}
this.addButtonNormal();
});
}
}
userUpdateSeaspace = () => {
this.updateSearchLoad();
const { updateSearch } = this.state;
if (updateSearch !== '' || updateSearch !== null) {
const { experiment } = this.state;
const newExperiment = JSON.parse(JSON.stringify(experiment));
newExperiment.params.searchSpace = updateSearch;
this.trialParameterMess(newExperiment, CONTROLTYPE[0]);
this.updateSearchNormal();
} else {
message.error('The text can not be empty');
}
}
componentDidMount() {
this._isMounted = true;
this.getAddExample();
this.getUpdateExample();
}
componentWillUnmount() {
this._isMounted = false;
}
render() {
const { addTrial, addisabled, updateSearch, updisabled,
trialMess, upTrialdis
} = this.state;
return (
<div className="user">
<div className="userCon">
<div className="addtrial">
<div className="addtitle">
<span className="line">|</span>
Experiment parameters
</div>
<div className="userInput">
<TextArea
value={trialMess}
autosize={{ minRows: 9 }}
onChange={this.getTrialNum}
/>
</div>
<div className="addBtubox">
<Button
className="userSubmit"
type="primary"
onClick={this.updateTrialMess}
disabled={upTrialdis}
>
Update
</Button>
</div>
</div>
<div className="clear" />
<div className="addtrial">
<div className="addtitle">
<span className="line">|</span>
Add New Trail
</div>
<div className="userInput">
<TextArea
id="userInputJob"
value={addTrial}
autosize={{ minRows: 9 }}
onChange={this.getAddTrialval}
/>
</div>
<div className="addBtubox">
<Button
className="userSubmit"
type="primary"
onClick={this.userSubmitJob}
disabled={addisabled}
>
Submit
</Button>
</div>
</div>
{/* clear float */}
<div className="clear" />
<div className="searchbox">
<div className="updatesear">
<span className="line">|</span>
user update search_space file
</div>
<div className="userInput">
<TextArea
id="InputUpdate"
autosize={{ minRows: 20 }}
value={updateSearch}
onChange={this.updateSearchCon}
/>
</div>
<div className="addBtubox">
<Button
className="buttonbac"
type="primary"
onClick={this.userUpdateSeaspace}
disabled={updisabled}
>
Update
</Button>
</div>
</div>
</div>
</div>
);
}
}
export default Control;
\ No newline at end of file
src/webui/src/components/Overview.tsx
View file @ dd04c73a
......@@ -100,7 +100,7 @@ class Overview extends React.Component<{}, OverviewState> {
const endTimenum = sessionData.endTime;
const assessor = sessionData.params.assessor;
const advisor = sessionData.params.advisor;
// default logCollection is true
// default logCollection is true
const logCollection = res.data.params.logCollection;
let expLogCollection: boolean = false;
if (logCollection !== undefined && logCollection !== 'none') {
......@@ -315,6 +315,10 @@ class Overview extends React.Component<{}, OverviewState> {
indexarr.push(items.sequenceId);
});
const accOption = {
grid: {
left: 40,
right: 40
},
tooltip: {
trigger: 'item'
},
......@@ -324,7 +328,7 @@ class Overview extends React.Component<{}, OverviewState> {
data: indexarr
},
yAxis: {
name: 'Default Metric',
name: 'Default metric',
type: 'value',
scale: true,
data: accarr
......@@ -405,7 +409,7 @@ class Overview extends React.Component<{}, OverviewState> {
</Row>
<Row className="overMessage">
{/* status graph */}
<Col span={8} className="prograph overviewBoder">
<Col span={9} className="prograph overviewBoder">
<Title1 text="Status" icon="5.png" />
<Progressed
trialNumber={trialNumber}
......@@ -417,8 +421,8 @@ class Overview extends React.Component<{}, OverviewState> {
/>
</Col>
{/* experiment parameters search space tuner assessor... */}
<Col span={8} className="overviewBoder">
<Title1 text="Search Space" icon="10.png" />
<Col span={7} className="overviewBoder">
<Title1 text="Search space" icon="10.png" />
<Row className="experiment">
<SearchSpace searchSpace={searchSpace} />
</Row>
......@@ -428,7 +432,7 @@ class Overview extends React.Component<{}, OverviewState> {
<Row className="experiment">
{/* the scroll bar all the trial profile in the searchSpace div*/}
<div className="experiment searchSpace">
<TrialPro experiment={experimentAPI} />
<TrialPro experiment={experimentAPI} />
</div>
</Row>
</Col>
......@@ -436,7 +440,7 @@ class Overview extends React.Component<{}, OverviewState> {
<Row className="overGraph">
<Row className="top10bg">
<Col span={4} className="top10Title">
<Title1 text="Top10 Trials" icon="7.png" />
<Title1 text="Top10 trials" icon="7.png" />
</Col>
<Col
span={2}
......@@ -453,22 +457,24 @@ class Overview extends React.Component<{}, OverviewState> {
<Title1 text="Minimal" icon="min.png" bgcolor={titleMinbgcolor} />
</Col>
</Row>
<Col span={8} className="overviewBoder">
<Row className="accuracy">
<Accuracy
accuracyData={accuracyData}
accNodata={accNodata}
height={324}
<Row>
<Col span={8} className="overviewBoder">
<Row className="accuracy">
<Accuracy
accuracyData={accuracyData}
accNodata={accNodata}
height={324}
/>
</Row>
</Col>
<Col span={16} id="succeTable">
<SuccessTable
tableSource={tableData}
logCollection={isLogCollection}
trainingPlatform={trialProfile.trainingServicePlatform}
/>
</Row>
</Col>
<Col span={16} id="succeTable">
<SuccessTable
tableSource={tableData}
logCollection={isLogCollection}
trainingPlatform={trialProfile.trainingServicePlatform}
/>
</Col>
</Col>
</Row>
</Row>
</div>
);
......
src/webui/src/components/SlideBar.tsx
View file @ dd04c73a
......@@ -209,7 +209,7 @@ class SlideBar extends React.Component<{}, SliderState> {
</li>
<li className="tab">
<Link to={'/detail'} activeClassName="high">
Trials Detail
Trials detail
</Link>
</li>
</ul>
......
src/webui/src/components/TrialsDetail.tsx
View file @ dd04c73a
......@@ -38,21 +38,21 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
public tableList: TableList | null;
private titleOfacc = (
<Title1 text="Default Metric" icon="3.png" />
<Title1 text="Default metric" icon="3.png" />
);
private titleOfhyper = (
<Title1 text="Hyper Parameter" icon="1.png" />
<Title1 text="Hyper-parameter" icon="1.png" />
);
private titleOfDuration = (
<Title1 text="Trial Duration" icon="2.png" />
<Title1 text="Trial duration" icon="2.png" />
);
private titleOfIntermediate = (
<div className="panelTitle">
<Icon type="line-chart" />
<span>Intermediate Result</span>
<span>Intermediate result</span>
</div>
);
......@@ -360,10 +360,10 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
</Tabs>
</div>
{/* trial table list */}
<Title1 text="Trial Jobs" icon="6.png" />
<Title1 text="Trial jobs" icon="6.png" />
<Row className="allList">
<Col span={12}>
<span>show</span>
<span>Show</span>
<Select
className="entry"
onSelect={this.handleEntriesSelect}
......@@ -384,13 +384,13 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
className="tableButton editStyle"
onClick={this.tableList ? this.tableList.addColumn : this.test}
>
AddColumn
Add column
</Button>
</Col>
<Col span={12}>
<Input
type="text"
placeholder="search by Id, Trial No. or Status"
placeholder="Search by id, trial No. or status"
onChange={this.searchTrial}
style={{ width: 230, marginLeft: 6 }}
/>
......
src/webui/src/components/overview/Accuracy.tsx
View file @ dd04c73a
......@@ -28,7 +28,7 @@ class Accuracy extends React.Component<AccuracyProps, {}> {
<ReactEcharts
option={accuracyData}
style={{
width: '100%',
width: '90%',
height: height,
margin: '0 auto',
}}
......
src/webui/src/components/overview/BasicInfo.tsx
View file @ dd04c73a
......@@ -27,11 +27,11 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
<div>{trialProfile.id}</div>
</Col>
<Col span={8} className="padItem basic">
<p>Start Time</p>
<p>Start time</p>
<div className="nowrap">
{new Date(trialProfile.startTime).toLocaleString('en-US')}
</div>
<p>End Time</p>
<p>End time</p>
<div className="nowrap">
{
trialProfile.endTime
......@@ -43,13 +43,13 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
</div>
</Col>
<Col span={8} className="padItem basic">
<p>Log Directory</p>
<p>Log directory</p>
<div className="nowrap">
<Tooltip placement="top" title={trialProfile.logDir}>
{trialProfile.logDir}
</Tooltip>
</div>
<p>TrainingPlatform</p>
<p>Training platform</p>
<div className="nowrap">
{
trialProfile.trainingServicePlatform
......
src/webui/src/components/overview/Progress.tsx
View file @ dd04c73a
......@@ -60,6 +60,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
const trialConcurrency = experimentFile.params.trialConcurrency;
if (userInputVal !== undefined) {
if (userInputVal === trialConcurrency.toString() || userInputVal === '0') {
message.destroy();
message.info(
`trialConcurrency's value is ${trialConcurrency}, you did not modify it`, 2);
} else {
......@@ -76,6 +77,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
}
}).then(res => {
if (res.status === 200) {
message.destroy();
message.success(`Update ${CONTROLTYPE[1].toLocaleLowerCase()}
successfully`);
// rerender trial profile message
......@@ -83,16 +85,16 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
updateFile();
}
})
.catch(error => {
if (error.response.status === 500) {
if (error.response.data.error) {
message.error(error.response.data.error);
} else {
message.error(
`Update ${CONTROLTYPE[1].toLocaleLowerCase()} failed`);
.catch(error => {
if (error.response.status === 500) {
if (error.response.data.error) {
message.error(error.response.data.error);
} else {
message.error(
`Update ${CONTROLTYPE[1].toLocaleLowerCase()} failed`);
}
}
}
});
});
// btn -> edit
this.setState(() => ({
btnName: 'Edit',
......@@ -200,87 +202,85 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
percent={percent}
description={runDuration}
bgclass={status}
maxString={`MaxDuration: ${convertTime(trialProfile.maxDuration)}`}
maxString={`Max duration: ${convertTime(trialProfile.maxDuration)}`}
/>
<ProgressBar
who="TrialNum"
who="Trial numbers"
percent={bar2Percent}
description={bar2.toString()}
bgclass={status}
maxString={`MaxTrialNumber: ${trialProfile.MaxTrialNum}`}
maxString={`Max trial number: ${trialProfile.MaxTrialNum}`}
/>
<Row className="basic colorOfbasic mess">
<Col span={10}>
<p>best metric</p>
<div>{bestAccuracy.toFixed(6)}</div>
</Col>
<Col span={14}>
{/* modify concurrency */}
<p>concurrency</p>
<Row className="inputBox">
<input
type="number"
disabled={isEnable}
onChange={this.getUserTrialConcurrency}
className="concurrencyInput"
ref={(input) => this.conInput = input}
/>
<Button
type="primary"
className="tableButton editStyle"
onClick={this.editTrialConcurrency}
>{btnName}
</Button>
<Button
type="primary"
onClick={this.cancelFunction}
style={{ display: cancelSty, marginLeft: 1 }}
className="tableButton editStyle"
>
Cancel
</Button>
</Row>
</Col>
<p>Best metric</p>
<div>{bestAccuracy.toFixed(6)}</div>
</Row>
<Row className="mess">
<Col span={8}>
<Col span={6}>
<Row className="basic colorOfbasic">
<p>spent</p>
<p>Spent</p>
<div>{convertTime(trialProfile.execDuration)}</div>
</Row>
</Col>
<Col span={9}>
<Col span={6}>
<Row className="basic colorOfbasic">
<p>remaining</p>
<p>Remaining</p>
<div>{remaining}</div>
</Row>
</Col>
<Col span={7}>
<Col span={6}>
<Row className="basic colorOfbasic">
<p>running</p>
<p>Running</p>
<div>{trialNumber.runTrial}</div>
</Row>
</Col>
</Row>
<Row className="mess">
<Col span={8}>
<Col span={6}>
<Row className="basic colorOfbasic">
<p>succeed</p>
<p>Succeeded</p>
<div>{trialNumber.succTrial}</div>
</Row>
</Col>
<Col span={9}>
</Row>
<Row className="mess">
<Col span={6}>
<Row className="basic">
<p>stopped</p>
<p>Stopped</p>
<div>{trialNumber.stopTrial}</div>
</Row>
</Col>
<Col span={7}>
<Col span={6}>
<Row className="basic">
<p>failed</p>
<p>Failed</p>
<div>{trialNumber.failTrial}</div>
</Row>
</Col>
<Col span={12}>
{/* modify concurrency */}
<p>Concurrency</p>
<Row className="inputBox">
<input
type="number"
disabled={isEnable}
onChange={this.getUserTrialConcurrency}
className="concurrencyInput"
ref={(input) => this.conInput = input}
/>
<Button
type="primary"
className="tableButton editStyle"
onClick={this.editTrialConcurrency}
>{btnName}
</Button>
<Button
type="primary"
onClick={this.cancelFunction}
style={{ display: cancelSty, marginLeft: 1 }}
className="tableButton editStyle"
>
Cancel
</Button>
</Row>
</Col>
</Row>
</Row>
);
......
src/webui/src/components/overview/ProgressItem.tsx
View file @ dd04c73a
......@@ -22,10 +22,10 @@ class ProgressBar extends React.Component<ProItemProps, {}> {
return (
<div>
<Row className={`probar ${bgclass}`}>
<Col span={6}>
<Col span={8}>
<div className="name">{who}</div>
</Col>
<Col span={17} className="bar">
<Col span={16} className="bar">
<div className="showProgress">
<Progress
percent={percent}
......
src/webui/src/components/overview/SearchSpace.tsx
View file @ dd04c73a
......@@ -19,7 +19,7 @@ class SearchSpace extends React.Component<SearchspaceProps, {}> {
<div className="searchSpace">
<MonacoEditor
width="100%"
height="380"
height="361"
language="json"
theme="vs-light"
value={JSON.stringify(searchSpace, null, 2)}
......
src/webui/src/components/overview/SuccessTable.tsx
View file @ dd04c73a
......@@ -5,7 +5,7 @@ import DefaultMetric from '../public-child/DefaultMetrc';
import { TableObj } from '../../static/interface';
import { convertDuration } from '../../static/function';
import '../../static/style/tableStatus.css';
import '../../static/style/tableList.scss';
import '../../static/style/openRow.scss';
interface SuccessTableProps {
tableSource: Array<TableObj>;
......@@ -52,11 +52,11 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
width: 140,
className: 'tableHead'
}, {
title: 'Id',
title: 'ID',
dataIndex: 'id',
key: 'id',
width: 60,
className: 'tableHead idtitle',
className: 'tableHead leftTitle',
render: (text: string, record: TableObj) => {
return (
<div>{record.id}</div>
......@@ -92,7 +92,7 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
);
}
}, {
title: 'Default Metric',
title: 'Default metric',
dataIndex: 'acc',
key: 'acc',
sorter: (a: TableObj, b: TableObj) => {
......
src/webui/src/components/overview/TrialProfile.tsx
View file @ dd04c73a
......@@ -42,7 +42,7 @@ class TrialInfo extends React.Component<TrialInfoProps, {}> {
<div className="profile">
<MonacoEditor
width="100%"
height="380"
height="361"
language="json"
theme="vs-light"
value={JSON.stringify(experiment, null, 2)}
......
src/webui/src/components/public-child/LogPath.tsx
View file @ dd04c73a
......@@ -31,13 +31,13 @@ class LogPath extends React.Component<LogpathProps, {}> {
/>
<LogPathChild
eachLogpath={logStr.split(',')[1]}
logName="hdfsLogPath:"
logName="Log on HDFS:"
/>
</div>
:
<LogPathChild
eachLogpath={logStr}
logName="LogPath:"
logName="Log path:"
/>
}
</div>
......
src/webui/src/components/public-child/OpenRow.tsx
View file @ dd04c73a
......@@ -13,26 +13,44 @@ interface OpenRowProps {
logCollection: boolean;
}
class OpenRow extends React.Component<OpenRowProps, {}> {
interface OpenRowState {
idList: Array<string>;
}
class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
constructor(props: OpenRowProps) {
super(props);
this.state = {
idList: ['']
};
}
copyParams = (record: TableObj) => {
let params = JSON.stringify(record.description.parameters);
// json format
const params = JSON.stringify(record.description.parameters, null, 4);
if (copy(params)) {
message.destroy();
message.success('Success copy parameters to clipboard in form of python dict !', 3);
const { idList } = this.state;
const copyIdList: Array<string> = idList;
copyIdList[copyIdList.length - 1] = record.id;
this.setState(() => ({
idList: copyIdList
}));
} else {
message.destroy();
message.error('Failed !', 2);
}
}
render() {
const { trainingPlatform, record, logCollection } = this.props;
const { idList } = this.state;
let isClick = false;
let isHasParameters = true;
if (idList.indexOf(record.id) !== -1) { isClick = true; }
if (record.description.parameters.error) {
isHasParameters = false;
}
......@@ -43,53 +61,61 @@ class OpenRow extends React.Component<OpenRowProps, {}> {
?
record.description.logPath
:
'This trial\'s logPath are not available.';
'This trial\'s log path are not available.';
return (
<pre id="description" className="hyperpar">
<Row className="openRowContent">
<Tabs tabPosition="left" className="card">
<TabPane tab="Parameters" key="1">
{
isHasParameters
?
<div>
<JSONTree
hideRoot={true}
shouldExpandNode={() => true} // default expandNode
getItemString={() => (<span />)} // remove the {} items
data={openRowDataSource.parameters}
/>
<Row className="openRowContent hyperpar">
<Tabs tabPosition="left" className="card">
<TabPane tab="Parameters" key="1">
{
isHasParameters
?
<Row id="description">
<Row className="bgHyper">
{
isClick
?
<pre>{JSON.stringify(openRowDataSource.parameters, null, 4)}</pre>
:
<JSONTree
hideRoot={true}
shouldExpandNode={() => true} // default expandNode
getItemString={() => (<span />)} // remove the {} items
data={openRowDataSource.parameters}
/>
}
</Row>
<Row className="copy">
<Button
onClick={this.copyParams.bind(this, record)}
>
Copy as Python
Copy as python
</Button>
</div>
:
<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 !== 'local'
?
<PaiTrialLog
logStr={logPathRow}
id={record.id}
logCollection={logCollection}
/>
:
<TrialLog logStr={logPathRow} id={record.id} />
}
</TabPane>
</Tabs>
</Row>
</pre>
</Row>
</Row>
:
<Row className="logpath">
<span className="logName">Error: </span>
<span className="error">'This trial's parameters are not available.'</span>
</Row>
}
</TabPane>
<TabPane tab="Log" key="2">
{
trainingPlatform !== 'local'
?
<PaiTrialLog
logStr={logPathRow}
id={record.id}
logCollection={logCollection}
/>
:
<TrialLog logStr={logPathRow} id={record.id} />
}
</TabPane>
</Tabs>
</Row >
);
}
}
export default OpenRow;
\ No newline at end of file
export default OpenRow;
src/webui/src/components/public-child/PaiTrialLog.tsx
View file @ dd04c73a
......@@ -40,7 +40,7 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
href={`${DOWNLOAD_IP}/trial_${id}.log`}
style={{ marginRight: 10 }}
>
trial stdout
Trial stdout
</a>
<a target="_blank" href={logStr.split(',')[1]}>hdfsLog</a>
</Row>
......@@ -48,11 +48,11 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
<Row>
<LogPathChild
eachLogpath={logStr.split(',')[0]}
logName="trial stdout:"
logName="Trial stdout:"
/>
<LogPathChild
eachLogpath={logStr.split(',')[1]}
logName="hdfsLog:"
logName="Log on HDFS:"
/>
</Row>
}
......
src/webui/src/components/public-child/TrialLog.tsx
View file @ dd04c73a
......@@ -20,7 +20,7 @@ class TrialLog extends React.Component<TrialLogProps, {}> {
<div>
<LogPathChild
eachLogpath={logStr}
logName="LogPath:"
logName="Log path:"
/>
</div>
);
......
src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
View file @ dd04c73a
......@@ -63,8 +63,8 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
},
formatter: function (data: TooltipForAccuracy) {
const result = '<div class="tooldetailAccuracy">' +
'<div>Trial No: ' + data.data[0] + '</div>' +
'<div>Default Metric: ' + data.data[1] + '</div>' +
'<div>Trial No.: ' + data.data[0] + '</div>' +
'<div>Default metric: ' + data.data[1] + '</div>' +
'<div>Parameters: ' +
'<pre>' + JSON.stringify(data.data[2], null, 4) + '</pre>' +
'</div>' +
......@@ -77,7 +77,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
type: 'category',
},
yAxis: {
name: 'Default Metric',
name: 'Default metric',
type: 'value',
},
series: [{
......
src/webui/src/components/trial-detail/Intermeidate.tsx
View file @ dd04c73a
......@@ -109,7 +109,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
obj = temp.hyperPara;
}
return '<div class="tooldetailAccuracy">' +
'<div>Trial Id: ' + trialId + '</div>' +
'<div>Trial ID: ' + trialId + '</div>' +
'<div>Intermediate: ' + data.data + '</div>' +
'<div>Parameters: ' +
'<pre>' + JSON.stringify(obj, null, 4) + '</pre>' +
......@@ -252,7 +252,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
/>
</Col>
<Col className="range" span={10}>
<span>Intermediate Result</span>
<span>Intermediate result</span>
<input
placeholder="number"
ref={input => this.minValInput = input}
......
src/webui/src/components/trial-detail/Para.tsx
View file @ dd04c73a
......@@ -401,7 +401,7 @@ class Para extends React.Component<ParaProps, ParaState> {
<Col span={6} />
<Col span={18}>
<Row className="meline">
<span>top</span>
<span>Top</span>
<Select
style={{ width: '20%', marginRight: 10 }}
placeholder="100%"
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ dd04c73a
......@@ -17,7 +17,7 @@ require('../../static/style/logPath.scss');
require('../../static/style/search.scss');
require('../../static/style/table.scss');
require('../../static/style/button.scss');
require('../../static/style/tableList.scss');
require('../../static/style/openRow.scss');
const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line');
require('echarts/lib/component/tooltip');
......@@ -132,12 +132,12 @@ class TableList extends React.Component<TableListProps, TableListState> {
Object.keys(checkedValues).map(m => {
switch (checkedValues[m]) {
case 'Trial No.':
case 'Id':
case 'ID':
case 'Duration':
case 'Status':
case 'Operation':
case 'Default':
case 'Intermediate Result':
case 'Intermediate result':
break;
default:
finalKeys.push(checkedValues[m]);
......@@ -238,13 +238,13 @@ class TableList extends React.Component<TableListProps, TableListState> {
(a.sequenceId as number) - (b.sequenceId as number)
});
break;
case 'Id':
case 'ID':
showColumn.push({
title: 'Id',
title: 'ID',
dataIndex: 'id',
key: 'id',
width: 60,
className: 'tableHead idtitle',
className: 'tableHead leftTitle',
// the sort of string
sorter: (a: TableObj, b: TableObj): number => a.id.localeCompare(b.id),
render: (text: string, record: TableObj) => {
......@@ -298,10 +298,11 @@ class TableList extends React.Component<TableListProps, TableListState> {
break;
case 'Default':
showColumn.push({
title: 'Default Metric',
title: 'Default metric',
className: 'leftTitle',
dataIndex: 'acc',
key: 'acc',
width: 160,
width: 120,
sorter: (a: TableObj, b: TableObj) => {
const aa = a.description.intermediate;
const bb = b.description.intermediate;
......@@ -359,9 +360,9 @@ class TableList extends React.Component<TableListProps, TableListState> {
});
break;
case 'Intermediate Result':
case 'Intermediate result':
showColumn.push({
title: 'Intermediate Result',
title: 'Intermediate result',
dataIndex: 'intermediate',
key: 'intermediate',
width: '16%',
......@@ -413,7 +414,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
/>
{/* Intermediate Result Modal */}
<Modal
title="Intermediate Result"
title="Intermediate result"
visible={modalVisible}
onCancel={this.hideIntermediateModal}
footer={null}
......@@ -446,7 +447,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
className="titleColumn"
/>
</Modal>
</Row>
);
}
......
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