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> { ...@@ -100,7 +100,7 @@ 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 // default logCollection is true
const logCollection = res.data.params.logCollection; const logCollection = res.data.params.logCollection;
let expLogCollection: boolean = false; let expLogCollection: boolean = false;
if (logCollection !== undefined && logCollection !== 'none') { if (logCollection !== undefined && logCollection !== 'none') {
...@@ -315,6 +315,10 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -315,6 +315,10 @@ class Overview extends React.Component<{}, OverviewState> {
indexarr.push(items.sequenceId); indexarr.push(items.sequenceId);
}); });
const accOption = { const accOption = {
grid: {
left: 40,
right: 40
},
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
...@@ -324,7 +328,7 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -324,7 +328,7 @@ class Overview extends React.Component<{}, OverviewState> {
data: indexarr data: indexarr
}, },
yAxis: { yAxis: {
name: 'Default Metric', name: 'Default metric',
type: 'value', type: 'value',
scale: true, scale: true,
data: accarr data: accarr
...@@ -405,7 +409,7 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -405,7 +409,7 @@ class Overview extends React.Component<{}, OverviewState> {
</Row> </Row>
<Row className="overMessage"> <Row className="overMessage">
{/* status graph */} {/* status graph */}
<Col span={8} className="prograph overviewBoder"> <Col span={9} className="prograph overviewBoder">
<Title1 text="Status" icon="5.png" /> <Title1 text="Status" icon="5.png" />
<Progressed <Progressed
trialNumber={trialNumber} trialNumber={trialNumber}
...@@ -417,8 +421,8 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -417,8 +421,8 @@ class Overview extends React.Component<{}, OverviewState> {
/> />
</Col> </Col>
{/* experiment parameters search space tuner assessor... */} {/* experiment parameters search space tuner assessor... */}
<Col span={8} className="overviewBoder"> <Col span={7} className="overviewBoder">
<Title1 text="Search Space" icon="10.png" /> <Title1 text="Search space" icon="10.png" />
<Row className="experiment"> <Row className="experiment">
<SearchSpace searchSpace={searchSpace} /> <SearchSpace searchSpace={searchSpace} />
</Row> </Row>
...@@ -428,7 +432,7 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -428,7 +432,7 @@ class Overview extends React.Component<{}, OverviewState> {
<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">
<TrialPro experiment={experimentAPI} /> <TrialPro experiment={experimentAPI} />
</div> </div>
</Row> </Row>
</Col> </Col>
...@@ -436,7 +440,7 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -436,7 +440,7 @@ class Overview extends React.Component<{}, OverviewState> {
<Row className="overGraph"> <Row className="overGraph">
<Row className="top10bg"> <Row className="top10bg">
<Col span={4} className="top10Title"> <Col span={4} className="top10Title">
<Title1 text="Top10 Trials" icon="7.png" /> <Title1 text="Top10 trials" icon="7.png" />
</Col> </Col>
<Col <Col
span={2} span={2}
...@@ -453,22 +457,24 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -453,22 +457,24 @@ class Overview extends React.Component<{}, OverviewState> {
<Title1 text="Minimal" icon="min.png" bgcolor={titleMinbgcolor} /> <Title1 text="Minimal" icon="min.png" bgcolor={titleMinbgcolor} />
</Col> </Col>
</Row> </Row>
<Col span={8} className="overviewBoder"> <Row>
<Row className="accuracy"> <Col span={8} className="overviewBoder">
<Accuracy <Row className="accuracy">
accuracyData={accuracyData} <Accuracy
accNodata={accNodata} accuracyData={accuracyData}
height={324} accNodata={accNodata}
height={324}
/>
</Row>
</Col>
<Col span={16} id="succeTable">
<SuccessTable
tableSource={tableData}
logCollection={isLogCollection}
trainingPlatform={trialProfile.trainingServicePlatform}
/> />
</Row> </Col>
</Col> </Row>
<Col span={16} id="succeTable">
<SuccessTable
tableSource={tableData}
logCollection={isLogCollection}
trainingPlatform={trialProfile.trainingServicePlatform}
/>
</Col>
</Row> </Row>
</div> </div>
); );
......
src/webui/src/components/SlideBar.tsx
View file @ dd04c73a
...@@ -209,7 +209,7 @@ class SlideBar extends React.Component<{}, SliderState> { ...@@ -209,7 +209,7 @@ class SlideBar extends React.Component<{}, SliderState> {
</li> </li>
<li className="tab"> <li className="tab">
<Link to={'/detail'} activeClassName="high"> <Link to={'/detail'} activeClassName="high">
Trials Detail Trials detail
</Link> </Link>
</li> </li>
</ul> </ul>
......
src/webui/src/components/TrialsDetail.tsx
View file @ dd04c73a
...@@ -38,21 +38,21 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -38,21 +38,21 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
public tableList: TableList | null; public tableList: TableList | null;
private titleOfacc = ( private titleOfacc = (
<Title1 text="Default Metric" icon="3.png" /> <Title1 text="Default metric" icon="3.png" />
); );
private titleOfhyper = ( private titleOfhyper = (
<Title1 text="Hyper Parameter" icon="1.png" /> <Title1 text="Hyper-parameter" icon="1.png" />
); );
private titleOfDuration = ( private titleOfDuration = (
<Title1 text="Trial Duration" icon="2.png" /> <Title1 text="Trial duration" icon="2.png" />
); );
private titleOfIntermediate = ( private titleOfIntermediate = (
<div className="panelTitle"> <div className="panelTitle">
<Icon type="line-chart" /> <Icon type="line-chart" />
<span>Intermediate Result</span> <span>Intermediate result</span>
</div> </div>
); );
...@@ -360,10 +360,10 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -360,10 +360,10 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
</Tabs> </Tabs>
</div> </div>
{/* trial table list */} {/* trial table list */}
<Title1 text="Trial Jobs" icon="6.png" /> <Title1 text="Trial jobs" icon="6.png" />
<Row className="allList"> <Row className="allList">
<Col span={12}> <Col span={12}>
<span>show</span> <span>Show</span>
<Select <Select
className="entry" className="entry"
onSelect={this.handleEntriesSelect} onSelect={this.handleEntriesSelect}
...@@ -384,13 +384,13 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -384,13 +384,13 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
className="tableButton editStyle" className="tableButton editStyle"
onClick={this.tableList ? this.tableList.addColumn : this.test} onClick={this.tableList ? this.tableList.addColumn : this.test}
> >
AddColumn Add column
</Button> </Button>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Input <Input
type="text" type="text"
placeholder="search by Id, Trial No. or Status" placeholder="Search by id, trial No. or status"
onChange={this.searchTrial} onChange={this.searchTrial}
style={{ width: 230, marginLeft: 6 }} 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, {}> { ...@@ -28,7 +28,7 @@ class Accuracy extends React.Component<AccuracyProps, {}> {
<ReactEcharts <ReactEcharts
option={accuracyData} option={accuracyData}
style={{ style={{
width: '100%', width: '90%',
height: height, height: height,
margin: '0 auto', margin: '0 auto',
}} }}
......
src/webui/src/components/overview/BasicInfo.tsx
View file @ dd04c73a
...@@ -27,11 +27,11 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> { ...@@ -27,11 +27,11 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
<div>{trialProfile.id}</div> <div>{trialProfile.id}</div>
</Col> </Col>
<Col span={8} className="padItem basic"> <Col span={8} className="padItem basic">
<p>Start Time</p> <p>Start time</p>
<div className="nowrap"> <div className="nowrap">
{new Date(trialProfile.startTime).toLocaleString('en-US')} {new Date(trialProfile.startTime).toLocaleString('en-US')}
</div> </div>
<p>End Time</p> <p>End time</p>
<div className="nowrap"> <div className="nowrap">
{ {
trialProfile.endTime trialProfile.endTime
...@@ -43,13 +43,13 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> { ...@@ -43,13 +43,13 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
</div> </div>
</Col> </Col>
<Col span={8} className="padItem basic"> <Col span={8} className="padItem basic">
<p>Log Directory</p> <p>Log directory</p>
<div className="nowrap"> <div className="nowrap">
<Tooltip placement="top" title={trialProfile.logDir}> <Tooltip placement="top" title={trialProfile.logDir}>
{trialProfile.logDir} {trialProfile.logDir}
</Tooltip> </Tooltip>
</div> </div>
<p>TrainingPlatform</p> <p>Training platform</p>
<div className="nowrap"> <div className="nowrap">
{ {
trialProfile.trainingServicePlatform trialProfile.trainingServicePlatform
......
src/webui/src/components/overview/Progress.tsx
View file @ dd04c73a
...@@ -60,6 +60,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> { ...@@ -60,6 +60,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
const trialConcurrency = experimentFile.params.trialConcurrency; const trialConcurrency = experimentFile.params.trialConcurrency;
if (userInputVal !== undefined) { if (userInputVal !== undefined) {
if (userInputVal === trialConcurrency.toString() || userInputVal === '0') { if (userInputVal === trialConcurrency.toString() || userInputVal === '0') {
message.destroy();
message.info( message.info(
`trialConcurrency's value is ${trialConcurrency}, you did not modify it`, 2); `trialConcurrency's value is ${trialConcurrency}, you did not modify it`, 2);
} else { } else {
...@@ -76,6 +77,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> { ...@@ -76,6 +77,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
} }
}).then(res => { }).then(res => {
if (res.status === 200) { if (res.status === 200) {
message.destroy();
message.success(`Update ${CONTROLTYPE[1].toLocaleLowerCase()} message.success(`Update ${CONTROLTYPE[1].toLocaleLowerCase()}
successfully`); successfully`);
// rerender trial profile message // rerender trial profile message
...@@ -83,16 +85,16 @@ class Progressed extends React.Component<ProgressProps, ProgressState> { ...@@ -83,16 +85,16 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
updateFile(); updateFile();
} }
}) })
.catch(error => { .catch(error => {
if (error.response.status === 500) { if (error.response.status === 500) {
if (error.response.data.error) { if (error.response.data.error) {
message.error(error.response.data.error); message.error(error.response.data.error);
} else { } else {
message.error( message.error(
`Update ${CONTROLTYPE[1].toLocaleLowerCase()} failed`); `Update ${CONTROLTYPE[1].toLocaleLowerCase()} failed`);
}
} }
} });
});
// btn -> edit // btn -> edit
this.setState(() => ({ this.setState(() => ({
btnName: 'Edit', btnName: 'Edit',
...@@ -200,87 +202,85 @@ class Progressed extends React.Component<ProgressProps, ProgressState> { ...@@ -200,87 +202,85 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
percent={percent} percent={percent}
description={runDuration} description={runDuration}
bgclass={status} bgclass={status}
maxString={`MaxDuration: ${convertTime(trialProfile.maxDuration)}`} maxString={`Max duration: ${convertTime(trialProfile.maxDuration)}`}
/> />
<ProgressBar <ProgressBar
who="TrialNum" who="Trial numbers"
percent={bar2Percent} percent={bar2Percent}
description={bar2.toString()} description={bar2.toString()}
bgclass={status} bgclass={status}
maxString={`MaxTrialNumber: ${trialProfile.MaxTrialNum}`} maxString={`Max trial number: ${trialProfile.MaxTrialNum}`}
/> />
<Row className="basic colorOfbasic mess"> <Row className="basic colorOfbasic mess">
<Col span={10}> <p>Best metric</p>
<p>best metric</p> <div>{bestAccuracy.toFixed(6)}</div>
<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>
</Row> </Row>
<Row className="mess"> <Row className="mess">
<Col span={8}> <Col span={6}>
<Row className="basic colorOfbasic"> <Row className="basic colorOfbasic">
<p>spent</p> <p>Spent</p>
<div>{convertTime(trialProfile.execDuration)}</div> <div>{convertTime(trialProfile.execDuration)}</div>
</Row> </Row>
</Col> </Col>
<Col span={9}> <Col span={6}>
<Row className="basic colorOfbasic"> <Row className="basic colorOfbasic">
<p>remaining</p> <p>Remaining</p>
<div>{remaining}</div> <div>{remaining}</div>
</Row> </Row>
</Col> </Col>
<Col span={7}> <Col span={6}>
<Row className="basic colorOfbasic"> <Row className="basic colorOfbasic">
<p>running</p> <p>Running</p>
<div>{trialNumber.runTrial}</div> <div>{trialNumber.runTrial}</div>
</Row> </Row>
</Col> </Col>
</Row> <Col span={6}>
<Row className="mess">
<Col span={8}>
<Row className="basic colorOfbasic"> <Row className="basic colorOfbasic">
<p>succeed</p> <p>Succeeded</p>
<div>{trialNumber.succTrial}</div> <div>{trialNumber.succTrial}</div>
</Row> </Row>
</Col> </Col>
<Col span={9}> </Row>
<Row className="mess">
<Col span={6}>
<Row className="basic"> <Row className="basic">
<p>stopped</p> <p>Stopped</p>
<div>{trialNumber.stopTrial}</div> <div>{trialNumber.stopTrial}</div>
</Row> </Row>
</Col> </Col>
<Col span={7}> <Col span={6}>
<Row className="basic"> <Row className="basic">
<p>failed</p> <p>Failed</p>
<div>{trialNumber.failTrial}</div> <div>{trialNumber.failTrial}</div>
</Row> </Row>
</Col> </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>
</Row> </Row>
); );
......
src/webui/src/components/overview/ProgressItem.tsx
View file @ dd04c73a
...@@ -22,10 +22,10 @@ class ProgressBar extends React.Component<ProItemProps, {}> { ...@@ -22,10 +22,10 @@ class ProgressBar extends React.Component<ProItemProps, {}> {
return ( return (
<div> <div>
<Row className={`probar ${bgclass}`}> <Row className={`probar ${bgclass}`}>
<Col span={6}> <Col span={8}>
<div className="name">{who}</div> <div className="name">{who}</div>
</Col> </Col>
<Col span={17} className="bar"> <Col span={16} className="bar">
<div className="showProgress"> <div className="showProgress">
<Progress <Progress
percent={percent} percent={percent}
......
src/webui/src/components/overview/SearchSpace.tsx
View file @ dd04c73a
...@@ -19,7 +19,7 @@ class SearchSpace extends React.Component<SearchspaceProps, {}> { ...@@ -19,7 +19,7 @@ class SearchSpace extends React.Component<SearchspaceProps, {}> {
<div className="searchSpace"> <div className="searchSpace">
<MonacoEditor <MonacoEditor
width="100%" width="100%"
height="380" height="361"
language="json" language="json"
theme="vs-light" theme="vs-light"
value={JSON.stringify(searchSpace, null, 2)} 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'; ...@@ -5,7 +5,7 @@ import DefaultMetric from '../public-child/DefaultMetrc';
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';
import '../../static/style/tableList.scss'; import '../../static/style/openRow.scss';
interface SuccessTableProps { interface SuccessTableProps {
tableSource: Array<TableObj>; tableSource: Array<TableObj>;
...@@ -52,11 +52,11 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> { ...@@ -52,11 +52,11 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
width: 140, width: 140,
className: 'tableHead' className: 'tableHead'
}, { }, {
title: 'Id', title: 'ID',
dataIndex: 'id', dataIndex: 'id',
key: 'id', key: 'id',
width: 60, width: 60,
className: 'tableHead idtitle', className: 'tableHead leftTitle',
render: (text: string, record: TableObj) => { render: (text: string, record: TableObj) => {
return ( return (
<div>{record.id}</div> <div>{record.id}</div>
...@@ -92,7 +92,7 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> { ...@@ -92,7 +92,7 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
); );
} }
}, { }, {
title: 'Default Metric', title: 'Default metric',
dataIndex: 'acc', dataIndex: 'acc',
key: 'acc', key: 'acc',
sorter: (a: TableObj, b: TableObj) => { 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, {}> { ...@@ -42,7 +42,7 @@ class TrialInfo extends React.Component<TrialInfoProps, {}> {
<div className="profile"> <div className="profile">
<MonacoEditor <MonacoEditor
width="100%" width="100%"
height="380" height="361"
language="json" language="json"
theme="vs-light" theme="vs-light"
value={JSON.stringify(experiment, null, 2)} 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, {}> { ...@@ -31,13 +31,13 @@ class LogPath extends React.Component<LogpathProps, {}> {
/> />
<LogPathChild <LogPathChild
eachLogpath={logStr.split(',')[1]} eachLogpath={logStr.split(',')[1]}
logName="hdfsLogPath:" logName="Log on HDFS:"
/> />
</div> </div>
: :
<LogPathChild <LogPathChild
eachLogpath={logStr} eachLogpath={logStr}
logName="LogPath:" logName="Log path:"
/> />
} }
</div> </div>
......
src/webui/src/components/public-child/OpenRow.tsx
View file @ dd04c73a
...@@ -13,26 +13,44 @@ interface OpenRowProps { ...@@ -13,26 +13,44 @@ interface OpenRowProps {
logCollection: boolean; logCollection: boolean;
} }
class OpenRow extends React.Component<OpenRowProps, {}> { interface OpenRowState {
idList: Array<string>;
}
class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
constructor(props: OpenRowProps) { constructor(props: OpenRowProps) {
super(props); super(props);
this.state = {
idList: ['']
};
} }
copyParams = (record: TableObj) => { copyParams = (record: TableObj) => {
let params = JSON.stringify(record.description.parameters); // json format
const params = JSON.stringify(record.description.parameters, null, 4);
if (copy(params)) { if (copy(params)) {
message.destroy();
message.success('Success copy parameters to clipboard in form of python dict !', 3); 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 { } else {
message.destroy();
message.error('Failed !', 2); message.error('Failed !', 2);
} }
} }
render() { render() {
const { trainingPlatform, record, logCollection } = this.props; const { trainingPlatform, record, logCollection } = this.props;
const { idList } = this.state;
let isClick = false;
let isHasParameters = true; let isHasParameters = true;
if (idList.indexOf(record.id) !== -1) { isClick = true; }
if (record.description.parameters.error) { if (record.description.parameters.error) {
isHasParameters = false; isHasParameters = false;
} }
...@@ -43,53 +61,61 @@ class OpenRow extends React.Component<OpenRowProps, {}> { ...@@ -43,53 +61,61 @@ class OpenRow extends React.Component<OpenRowProps, {}> {
? ?
record.description.logPath record.description.logPath
: :
'This trial\'s logPath are not available.'; 'This trial\'s log path are not available.';
return ( return (
<pre id="description" className="hyperpar"> <Row className="openRowContent hyperpar">
<Row className="openRowContent"> <Tabs tabPosition="left" className="card">
<Tabs tabPosition="left" className="card"> <TabPane tab="Parameters" key="1">
<TabPane tab="Parameters" key="1"> {
{ isHasParameters
isHasParameters ?
? <Row id="description">
<div> <Row className="bgHyper">
<JSONTree {
hideRoot={true} isClick
shouldExpandNode={() => true} // default expandNode ?
getItemString={() => (<span />)} // remove the {} items <pre>{JSON.stringify(openRowDataSource.parameters, null, 4)}</pre>
data={openRowDataSource.parameters} :
/> <JSONTree
hideRoot={true}
shouldExpandNode={() => true} // default expandNode
getItemString={() => (<span />)} // remove the {} items
data={openRowDataSource.parameters}
/>
}
</Row>
<Row className="copy">
<Button <Button
onClick={this.copyParams.bind(this, record)} onClick={this.copyParams.bind(this, record)}
> >
Copy as Python Copy as python
</Button> </Button>
</div> </Row>
: </Row>
<div className="logpath"> :
<span className="logName">Error: </span> <Row className="logpath">
<span className="error">'This trial's parameters are not available.'</span> <span className="logName">Error: </span>
</div> <span className="error">'This trial's parameters are not available.'</span>
} </Row>
</TabPane> }
<TabPane tab="Log" key="2"> </TabPane>
{ <TabPane tab="Log" key="2">
trainingPlatform !== 'local' {
? trainingPlatform !== 'local'
<PaiTrialLog ?
logStr={logPathRow} <PaiTrialLog
id={record.id} logStr={logPathRow}
logCollection={logCollection} id={record.id}
/> logCollection={logCollection}
: />
<TrialLog logStr={logPathRow} id={record.id} /> :
} <TrialLog logStr={logPathRow} id={record.id} />
</TabPane> }
</Tabs> </TabPane>
</Row> </Tabs>
</pre> </Row >
); );
} }
} }
export default OpenRow; export default OpenRow;
\ No newline at end of file
src/webui/src/components/public-child/PaiTrialLog.tsx
View file @ dd04c73a
...@@ -40,7 +40,7 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> { ...@@ -40,7 +40,7 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
href={`${DOWNLOAD_IP}/trial_${id}.log`} href={`${DOWNLOAD_IP}/trial_${id}.log`}
style={{ marginRight: 10 }} style={{ marginRight: 10 }}
> >
trial stdout Trial stdout
</a> </a>
<a target="_blank" href={logStr.split(',')[1]}>hdfsLog</a> <a target="_blank" href={logStr.split(',')[1]}>hdfsLog</a>
</Row> </Row>
...@@ -48,11 +48,11 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> { ...@@ -48,11 +48,11 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
<Row> <Row>
<LogPathChild <LogPathChild
eachLogpath={logStr.split(',')[0]} eachLogpath={logStr.split(',')[0]}
logName="trial stdout:" logName="Trial stdout:"
/> />
<LogPathChild <LogPathChild
eachLogpath={logStr.split(',')[1]} eachLogpath={logStr.split(',')[1]}
logName="hdfsLog:" logName="Log on HDFS:"
/> />
</Row> </Row>
} }
......
src/webui/src/components/public-child/TrialLog.tsx
View file @ dd04c73a
...@@ -20,7 +20,7 @@ class TrialLog extends React.Component<TrialLogProps, {}> { ...@@ -20,7 +20,7 @@ class TrialLog extends React.Component<TrialLogProps, {}> {
<div> <div>
<LogPathChild <LogPathChild
eachLogpath={logStr} eachLogpath={logStr}
logName="LogPath:" logName="Log path:"
/> />
</div> </div>
); );
......
src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
View file @ dd04c73a
...@@ -63,8 +63,8 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState> ...@@ -63,8 +63,8 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
}, },
formatter: function (data: TooltipForAccuracy) { formatter: function (data: TooltipForAccuracy) {
const result = '<div class="tooldetailAccuracy">' + const result = '<div class="tooldetailAccuracy">' +
'<div>Trial No: ' + data.data[0] + '</div>' + '<div>Trial No.: ' + data.data[0] + '</div>' +
'<div>Default Metric: ' + data.data[1] + '</div>' + '<div>Default metric: ' + data.data[1] + '</div>' +
'<div>Parameters: ' + '<div>Parameters: ' +
'<pre>' + JSON.stringify(data.data[2], null, 4) + '</pre>' + '<pre>' + JSON.stringify(data.data[2], null, 4) + '</pre>' +
'</div>' + '</div>' +
...@@ -77,7 +77,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState> ...@@ -77,7 +77,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
type: 'category', type: 'category',
}, },
yAxis: { yAxis: {
name: 'Default Metric', name: 'Default metric',
type: 'value', type: 'value',
}, },
series: [{ series: [{
......
src/webui/src/components/trial-detail/Intermeidate.tsx
View file @ dd04c73a
...@@ -109,7 +109,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState> ...@@ -109,7 +109,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
obj = temp.hyperPara; obj = temp.hyperPara;
} }
return '<div class="tooldetailAccuracy">' + return '<div class="tooldetailAccuracy">' +
'<div>Trial Id: ' + trialId + '</div>' + '<div>Trial ID: ' + trialId + '</div>' +
'<div>Intermediate: ' + data.data + '</div>' + '<div>Intermediate: ' + data.data + '</div>' +
'<div>Parameters: ' + '<div>Parameters: ' +
'<pre>' + JSON.stringify(obj, null, 4) + '</pre>' + '<pre>' + JSON.stringify(obj, null, 4) + '</pre>' +
...@@ -252,7 +252,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState> ...@@ -252,7 +252,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
/> />
</Col> </Col>
<Col className="range" span={10}> <Col className="range" span={10}>
<span>Intermediate Result</span> <span>Intermediate result</span>
<input <input
placeholder="number" placeholder="number"
ref={input => this.minValInput = input} 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> { ...@@ -401,7 +401,7 @@ class Para extends React.Component<ParaProps, ParaState> {
<Col span={6} /> <Col span={6} />
<Col span={18}> <Col span={18}>
<Row className="meline"> <Row className="meline">
<span>top</span> <span>Top</span>
<Select <Select
style={{ width: '20%', marginRight: 10 }} style={{ width: '20%', marginRight: 10 }}
placeholder="100%" placeholder="100%"
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ dd04c73a
...@@ -17,7 +17,7 @@ require('../../static/style/logPath.scss'); ...@@ -17,7 +17,7 @@ require('../../static/style/logPath.scss');
require('../../static/style/search.scss'); require('../../static/style/search.scss');
require('../../static/style/table.scss'); require('../../static/style/table.scss');
require('../../static/style/button.scss'); require('../../static/style/button.scss');
require('../../static/style/tableList.scss'); require('../../static/style/openRow.scss');
const echarts = require('echarts/lib/echarts'); const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line'); require('echarts/lib/chart/line');
require('echarts/lib/component/tooltip'); require('echarts/lib/component/tooltip');
...@@ -132,12 +132,12 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -132,12 +132,12 @@ class TableList extends React.Component<TableListProps, TableListState> {
Object.keys(checkedValues).map(m => { Object.keys(checkedValues).map(m => {
switch (checkedValues[m]) { switch (checkedValues[m]) {
case 'Trial No.': case 'Trial No.':
case 'Id': case 'ID':
case 'Duration': case 'Duration':
case 'Status': case 'Status':
case 'Operation': case 'Operation':
case 'Default': case 'Default':
case 'Intermediate Result': case 'Intermediate result':
break; break;
default: default:
finalKeys.push(checkedValues[m]); finalKeys.push(checkedValues[m]);
...@@ -238,13 +238,13 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -238,13 +238,13 @@ class TableList extends React.Component<TableListProps, TableListState> {
(a.sequenceId as number) - (b.sequenceId as number) (a.sequenceId as number) - (b.sequenceId as number)
}); });
break; break;
case 'Id': case 'ID':
showColumn.push({ showColumn.push({
title: 'Id', title: 'ID',
dataIndex: 'id', dataIndex: 'id',
key: 'id', key: 'id',
width: 60, width: 60,
className: 'tableHead idtitle', className: 'tableHead leftTitle',
// the sort of string // the sort of string
sorter: (a: TableObj, b: TableObj): number => a.id.localeCompare(b.id), sorter: (a: TableObj, b: TableObj): number => a.id.localeCompare(b.id),
render: (text: string, record: TableObj) => { render: (text: string, record: TableObj) => {
...@@ -298,10 +298,11 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -298,10 +298,11 @@ class TableList extends React.Component<TableListProps, TableListState> {
break; break;
case 'Default': case 'Default':
showColumn.push({ showColumn.push({
title: 'Default Metric', title: 'Default metric',
className: 'leftTitle',
dataIndex: 'acc', dataIndex: 'acc',
key: 'acc', key: 'acc',
width: 160, width: 120,
sorter: (a: TableObj, b: TableObj) => { sorter: (a: TableObj, b: TableObj) => {
const aa = a.description.intermediate; const aa = a.description.intermediate;
const bb = b.description.intermediate; const bb = b.description.intermediate;
...@@ -359,9 +360,9 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -359,9 +360,9 @@ class TableList extends React.Component<TableListProps, TableListState> {
}); });
break; break;
case 'Intermediate Result': case 'Intermediate result':
showColumn.push({ showColumn.push({
title: 'Intermediate Result', title: 'Intermediate result',
dataIndex: 'intermediate', dataIndex: 'intermediate',
key: 'intermediate', key: 'intermediate',
width: '16%', width: '16%',
...@@ -413,7 +414,7 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -413,7 +414,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
/> />
{/* Intermediate Result Modal */} {/* Intermediate Result Modal */}
<Modal <Modal
title="Intermediate Result" title="Intermediate result"
visible={modalVisible} visible={modalVisible}
onCancel={this.hideIntermediateModal} onCancel={this.hideIntermediateModal}
footer={null} footer={null}
...@@ -446,7 +447,6 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -446,7 +447,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
className="titleColumn" className="titleColumn"
/> />
</Modal> </Modal>
</Row> </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