Skip to content

GitLab

Commit ba8dccd6 authored by suiguoxin's avatar suiguoxin
Browse files

Merge branch 'master' of https://github.com/microsoft/nni

parents 56a1575b 150ee83a
Hide whitespace changes
Inline Side-by-side
Showing with 594 additions and 303 deletions
src/webui/src/App.css
View file @ ba8dccd6
...@@ -10,14 +10,12 @@ ...@@ -10,14 +10,12 @@
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 56px; height: 56px;
background: #0071BC; background: #0071BC;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
z-index: 1000; z-index: 1000;
} }
.headerCon{
min-width: 1024px;
}
.contentBox{ .contentBox{
width: 100%; width: 100%;
} }
...@@ -29,5 +27,3 @@ ...@@ -29,5 +27,3 @@
margin-bottom: 30px; margin-bottom: 30px;
background: #fff; background: #fff;
} }
src/webui/src/App.tsx
View file @ ba8dccd6
...@@ -3,20 +3,59 @@ import { Row, Col } from 'antd'; ...@@ -3,20 +3,59 @@ import { Row, Col } from 'antd';
import './App.css'; import './App.css';
import SlideBar from './components/SlideBar'; import SlideBar from './components/SlideBar';
class App extends React.Component<{}, {}> { interface AppState {
interval: number;
whichPageToFresh: string;
}
class App extends React.Component<{}, AppState> {
public _isMounted: boolean;
constructor(props: {}) {
super(props);
this.state = {
interval: 10, // sendons
whichPageToFresh: ''
};
}
changeInterval = (interval: number) => {
if (this._isMounted === true) {
this.setState(() => ({ interval: interval }));
}
}
changeFresh = (fresh: string) => {
// interval * 1000
if (this._isMounted === true) {
this.setState(() => ({ whichPageToFresh: fresh }));
}
}
componentDidMount() {
this._isMounted = true;
}
componentWillUnmount() {
this._isMounted = false;
}
render() { render() {
const { interval, whichPageToFresh } = this.state;
const reactPropsChildren = React.Children.map(this.props.children, child =>
// tslint:disable-next-line:no-any
React.cloneElement(child as React.ReactElement<any>, { interval, whichPageToFresh })
);
return ( return (
<Row className="nni" style={{minHeight: window.innerHeight}}> <Row className="nni" style={{ minHeight: window.innerHeight }}>
<Row className="header"> <Row className="header">
<Col span={1} /> <Col span={1} />
<Col className="headerCon" span={22}> <Col className="headerCon" span={22}>
<SlideBar /> <SlideBar changeInterval={this.changeInterval} changeFresh={this.changeFresh}/>
</Col> </Col>
<Col span={1} /> <Col span={1} />
</Row> </Row>
<Row className="contentBox"> <Row className="contentBox">
<Row className="content"> <Row className="content">
{this.props.children} {reactPropsChildren}
</Row> </Row>
</Row> </Row>
</Row> </Row>
......
src/webui/src/components/Overview.tsx
View file @ ba8dccd6
...@@ -39,13 +39,18 @@ interface OverviewState { ...@@ -39,13 +39,18 @@ interface OverviewState {
isMultiPhase: boolean; isMultiPhase: boolean;
} }
class Overview extends React.Component<{}, OverviewState> { interface OverviewProps {
interval: number; // user select
whichPageToFresh: string;
}
class Overview extends React.Component<OverviewProps, OverviewState> {
public _isMounted = false; public _isMounted = false;
public intervalID = 0; public intervalID = 0;
public intervalProfile = 1; public intervalProfile = 1;
constructor(props: {}) { constructor(props: OverviewProps) {
super(props); super(props);
this.state = { this.state = {
searchSpace: {}, searchSpace: {},
...@@ -377,17 +382,19 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -377,17 +382,19 @@ class Overview extends React.Component<{}, OverviewState> {
data: accarr data: accarr
}] }]
}; };
this.setState({ accuracyData: accOption }, () => { if (this._isMounted) {
if (accarr.length === 0) { this.setState({ accuracyData: accOption }, () => {
this.setState({ if (accarr.length === 0) {
accNodata: 'No data' this.setState({
}); accNodata: 'No data'
} else { });
this.setState({ } else {
accNodata: '' this.setState({
}); accNodata: ''
} });
}); }
});
}
} }
clickMaxTop = (event: React.SyntheticEvent<EventTarget>) => { clickMaxTop = (event: React.SyntheticEvent<EventTarget>) => {
...@@ -405,23 +412,39 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -405,23 +412,39 @@ class Overview extends React.Component<{}, OverviewState> {
isOffInterval = () => { isOffInterval = () => {
const { status } = this.state; const { status } = this.state;
switch (status) { const { interval } = this.props;
case 'DONE': if (status === 'DONE' || status === 'ERROR' || status === 'STOPPED' ||
case 'ERROR': interval === 0
case 'STOPPED': ) {
window.clearInterval(this.intervalID); window.clearInterval(this.intervalID);
window.clearInterval(this.intervalProfile); window.clearInterval(this.intervalProfile);
break; return;
default: }
}
componentWillReceiveProps(nextProps: OverviewProps) {
const { interval, whichPageToFresh } = nextProps;
window.clearInterval(this.intervalID);
window.clearInterval(this.intervalProfile);
if (whichPageToFresh.includes('/oview')) {
this.showTrials();
this.showSessionPro();
}
if (interval !== 0) {
this.intervalID = window.setInterval(this.showTrials, interval * 1000);
this.intervalProfile = window.setInterval(this.showSessionPro, interval * 1000);
} }
} }
componentDidMount() { componentDidMount() {
this._isMounted = true; this._isMounted = true;
this.showSessionPro(); const { interval } = this.props;
this.showTrials(); this.showTrials();
this.intervalID = window.setInterval(this.showTrials, 10000); this.showSessionPro();
this.intervalProfile = window.setInterval(this.showSessionPro, 60000); if (interval !== 0) {
this.intervalID = window.setInterval(this.showTrials, interval * 1000);
this.intervalProfile = window.setInterval(this.showSessionPro, interval * 1000);
}
} }
componentWillUnmount() { componentWillUnmount() {
...@@ -447,7 +470,7 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -447,7 +470,7 @@ class Overview extends React.Component<{}, OverviewState> {
</Row> </Row>
<Row className="overMessage"> <Row className="overMessage">
{/* status graph */} {/* status graph */}
<Col span={9} className="prograph overviewBoder"> <Col span={9} className="prograph overviewBoder cc">
<Title1 text="Status" icon="5.png" /> <Title1 text="Status" icon="5.png" />
<Progressed <Progressed
trialNumber={trialNumber} trialNumber={trialNumber}
...@@ -459,13 +482,13 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -459,13 +482,13 @@ class Overview extends React.Component<{}, OverviewState> {
/> />
</Col> </Col>
{/* experiment parameters search space tuner assessor... */} {/* experiment parameters search space tuner assessor... */}
<Col span={7} className="overviewBoder"> <Col span={7} className="overviewBoder cc">
<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>
</Col> </Col>
<Col span={8} className="overviewBoder"> <Col span={8} className="overviewBoder cc">
<Title1 text="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*/}
......
src/webui/src/components/SlideBar.tsx
View file @ ba8dccd6
import * as React from 'react'; import * as React from 'react';
import { Link } from 'react-router'; import { Link } from 'react-router';
import axios from 'axios'; import axios from 'axios';
import { DOWNLOAD_IP } from '../static/const';
import { Row, Col, Menu, Dropdown, Icon } from 'antd';
import { MANAGER_IP } from '../static/const'; import { MANAGER_IP } from '../static/const';
import MediaQuery from 'react-responsive';
import { DOWNLOAD_IP } from '../static/const';
import { Row, Col, Menu, Dropdown, Icon, Select } from 'antd';
const { SubMenu } = Menu;
const { Option } = Select;
import '../static/style/slideBar.scss'; import '../static/style/slideBar.scss';
import '../static/style/button.scss'; import '../static/style/button.scss';
interface SliderState { interface SliderState {
version: string; version: string;
menuVisible: boolean; menuVisible: boolean;
navBarVisible: boolean;
}
interface SliderProps {
changeInterval: (value: number) => void;
changeFresh: (value: string) => void;
} }
interface EventPer { interface EventPer {
key: string; key: string;
} }
class SlideBar extends React.Component<{}, SliderState> { class SlideBar extends React.Component<SliderProps, SliderState> {
public _isMounted = false; public _isMounted = false;
public divMenu: HTMLDivElement | null;
constructor(props: {}) { public countOfMenu: number = 0;
super(props); public selectHTML: Select | null;
this.state = {
version: '', constructor(props: SliderProps) {
menuVisible: false super(props);
}; this.state = {
} version: '',
menuVisible: false,
downExperimentContent = () => { navBarVisible: false,
axios };
.all([ }
axios.get(`${MANAGER_IP}/experiment`),
axios.get(`${MANAGER_IP}/trial-jobs`), downExperimentContent = () => {
axios.get(`${MANAGER_IP}/metric-data`) axios
]) .all([
.then(axios.spread((res, res1, res2) => { axios.get(`${MANAGER_IP}/experiment`),
if (res.status === 200 && res1.status === 200 && res2.status === 200) { axios.get(`${MANAGER_IP}/trial-jobs`),
if (res.data.params.searchSpace) { axios.get(`${MANAGER_IP}/metric-data`)
res.data.params.searchSpace = JSON.parse(res.data.params.searchSpace); ])
} .then(axios.spread((res, res1, res2) => {
const isEdge = navigator.userAgent.indexOf('Edge') !== -1 ? true : false; if (res.status === 200 && res1.status === 200 && res2.status === 200) {
let trialMessagesArr = res1.data; if (res.data.params.searchSpace) {
const interResultList = res2.data; res.data.params.searchSpace = JSON.parse(res.data.params.searchSpace);
Object.keys(trialMessagesArr).map(item => { }
// transform hyperparameters as object to show elegantly const isEdge = navigator.userAgent.indexOf('Edge') !== -1 ? true : false;
trialMessagesArr[item].hyperParameters = JSON.parse(trialMessagesArr[item].hyperParameters); let trialMessagesArr = res1.data;
const trialId = trialMessagesArr[item].id; const interResultList = res2.data;
// add intermediate result message Object.keys(trialMessagesArr).map(item => {
trialMessagesArr[item].intermediate = []; // transform hyperparameters as object to show elegantly
Object.keys(interResultList).map(key => { trialMessagesArr[item].hyperParameters = JSON.parse(trialMessagesArr[item].hyperParameters);
const interId = interResultList[key].trialJobId; const trialId = trialMessagesArr[item].id;
if (trialId === interId) { // add intermediate result message
trialMessagesArr[item].intermediate.push(interResultList[key]); trialMessagesArr[item].intermediate = [];
} Object.keys(interResultList).map(key => {
const interId = interResultList[key].trialJobId;
if (trialId === interId) {
trialMessagesArr[item].intermediate.push(interResultList[key]);
}
});
});
const result = {
experimentParameters: res.data,
trialMessage: trialMessagesArr
};
const aTag = document.createElement('a');
const file = new Blob([JSON.stringify(result, null, 4)], { type: 'application/json' });
aTag.download = 'experiment.json';
aTag.href = URL.createObjectURL(file);
aTag.click();
if (!isEdge) {
URL.revokeObjectURL(aTag.href);
}
if (navigator.userAgent.indexOf('Firefox') > -1) {
const downTag = document.createElement('a');
downTag.addEventListener('click', function () {
downTag.download = 'experiment.json';
downTag.href = URL.createObjectURL(file);
});
let eventMouse = document.createEvent('MouseEvents');
eventMouse.initEvent('click', false, false);
downTag.dispatchEvent(eventMouse);
}
}
}));
}
downnnimanagerLog = () => {
axios(`${DOWNLOAD_IP}/nnimanager.log`, {
method: 'GET'
})
.then(res => {
if (res.status === 200) {
const nniLogfile = res.data;
const aTag = document.createElement('a');
const isEdge = navigator.userAgent.indexOf('Edge') !== -1 ? true : false;
const file = new Blob([nniLogfile], { type: 'application/json' });
aTag.download = 'nnimanagerLog.log';
aTag.href = URL.createObjectURL(file);
aTag.click();
if (!isEdge) {
URL.revokeObjectURL(aTag.href);
}
if (navigator.userAgent.indexOf('Firefox') > -1) {
const downTag = document.createElement('a');
downTag.addEventListener('click', function () {
downTag.download = 'nnimanagerLog.log';
downTag.href = URL.createObjectURL(file);
});
let eventMouse = document.createEvent('MouseEvents');
eventMouse.initEvent('click', false, false);
downTag.dispatchEvent(eventMouse);
}
}
}); });
}); }
const result = {
experimentParameters: res.data, downDispatcherlog = () => {
trialMessage: trialMessagesArr axios(`${DOWNLOAD_IP}/dispatcher.log`, {
}; method: 'GET'
const aTag = document.createElement('a'); })
const file = new Blob([JSON.stringify(result, null, 4)], { type: 'application/json' }); .then(res => {
aTag.download = 'experiment.json'; if (res.status === 200) {
aTag.href = URL.createObjectURL(file); const dispatchLogfile = res.data;
aTag.click(); const aTag = document.createElement('a');
if (!isEdge) { const isEdge = navigator.userAgent.indexOf('Edge') !== -1 ? true : false;
URL.revokeObjectURL(aTag.href); const file = new Blob([dispatchLogfile], { type: 'application/json' });
} aTag.download = 'dispatcherLog.log';
if (navigator.userAgent.indexOf('Firefox') > -1) { aTag.href = URL.createObjectURL(file);
const downTag = document.createElement('a'); aTag.click();
downTag.addEventListener('click', function () { if (!isEdge) {
downTag.download = 'experiment.json'; URL.revokeObjectURL(aTag.href);
downTag.href = URL.createObjectURL(file); }
if (navigator.userAgent.indexOf('Firefox') > -1) {
const downTag = document.createElement('a');
downTag.addEventListener('click', function () {
downTag.download = 'dispatcherLog.log';
downTag.href = URL.createObjectURL(file);
});
let eventMouse = document.createEvent('MouseEvents');
eventMouse.initEvent('click', false, false);
downTag.dispatchEvent(eventMouse);
}
}
}); });
let eventMouse = document.createEvent('MouseEvents'); }
eventMouse.initEvent('click', false, false);
downTag.dispatchEvent(eventMouse); getNNIversion = () => {
} axios(`${MANAGER_IP}/version`, {
} method: 'GET'
})); })
} .then(res => {
if (res.status === 200 && this._isMounted) {
downnnimanagerLog = () => { this.setState({ version: res.data });
axios(`${DOWNLOAD_IP}/nnimanager.log`, { }
method: 'GET'
})
.then(res => {
if (res.status === 200) {
const nniLogfile = res.data;
const aTag = document.createElement('a');
const isEdge = navigator.userAgent.indexOf('Edge') !== -1 ? true : false;
const file = new Blob([nniLogfile], { type: 'application/json' });
aTag.download = 'nnimanager.log';
aTag.href = URL.createObjectURL(file);
aTag.click();
if (!isEdge) {
URL.revokeObjectURL(aTag.href);
}
if (navigator.userAgent.indexOf('Firefox') > -1) {
const downTag = document.createElement('a');
downTag.addEventListener('click', function () {
downTag.download = 'nnimanager.log';
downTag.href = URL.createObjectURL(file);
}); });
let eventMouse = document.createEvent('MouseEvents'); }
eventMouse.initEvent('click', false, false);
downTag.dispatchEvent(eventMouse); handleMenuClick = (e: EventPer) => {
} if (this._isMounted) { this.setState({ menuVisible: false }); }
switch (e.key) {
// download experiment related content
case '1':
this.downExperimentContent();
break;
// download nnimanager log file
case '2':
this.downnnimanagerLog();
break;
// download dispatcher log file
case '3':
this.downDispatcherlog();
break;
case 'close':
case '10':
case '20':
case '30':
case '60':
this.getInterval(e.key);
break;
default:
} }
}); }
}
handleVisibleChange = (flag: boolean) => {
downDispatcherlog = () => { if (this._isMounted === true) {
axios(`${DOWNLOAD_IP}/dispatcher.log`, { this.setState({ menuVisible: flag });
method: 'GET'
})
.then(res => {
if (res.status === 200) {
const dispatchLogfile = res.data;
const aTag = document.createElement('a');
const isEdge = navigator.userAgent.indexOf('Edge') !== -1 ? true : false;
const file = new Blob([dispatchLogfile], { type: 'application/json' });
aTag.download = 'dispatcher.log';
aTag.href = URL.createObjectURL(file);
aTag.click();
if (!isEdge) {
URL.revokeObjectURL(aTag.href);
}
if (navigator.userAgent.indexOf('Firefox') > -1) {
const downTag = document.createElement('a');
downTag.addEventListener('click', function () {
downTag.download = 'dispatcher.log';
downTag.href = URL.createObjectURL(file);
});
let eventMouse = document.createEvent('MouseEvents');
eventMouse.initEvent('click', false, false);
downTag.dispatchEvent(eventMouse);
}
} }
}); }
}
getInterval = (value: string) => {
getNNIversion = () => {
axios(`${MANAGER_IP}/version`, { if (value === 'close') {
method: 'GET' this.props.changeInterval(0);
}) } else {
.then(res => { this.props.changeInterval(parseInt(value, 10));
if (res.status === 200 && this._isMounted) { }
this.setState({ version: res.data }); }
menu = () => {
this.countOfMenu = 0;
return (
<Menu onClick={this.handleMenuClick}>
<Menu.Item key="1">Experiment Parameters</Menu.Item>
<Menu.Item key="2">NNImanager Logfile</Menu.Item>
<Menu.Item key="3">Dispatcher Logfile</Menu.Item>
</Menu>
);
}
// nav bar
navigationBar = () => {
const { version } = this.state;
const feedBackLink = `https://github.com/Microsoft/nni/issues/new?labels=${version}`;
return (
<Menu onClick={this.handleMenuClick} mode="inline">
<Menu.Item key="overview"><Link to={'/oview'}>Overview</Link></Menu.Item>
<Menu.Item key="detail"><Link to={'/detail'}>Trials detail</Link></Menu.Item>
<Menu.Item key="fresh">
<span className="fresh" onClick={this.fresh}><span>Fresh</span></span>
</Menu.Item>
<Menu.Item key="feedback">
<a href={feedBackLink} target="_blank">Feedback</a>
</Menu.Item>
<Menu.Item key="version">Version: {version}</Menu.Item>
<SubMenu
key="download"
onChange={this.handleVisibleChange}
title={
<span>
<span>Download</span>
</span>
}
>
<Menu.Item key="1">Experiment Parameters</Menu.Item>
<Menu.Item key="2">NNImanager Logfile</Menu.Item>
<Menu.Item key="3">Dispatcher Logfile</Menu.Item>
</SubMenu>
</Menu>
);
}
// nav bar <1299
showMenu = () => {
if (this.divMenu !== null) {
this.countOfMenu = this.countOfMenu + 1;
if (this.countOfMenu % 2 === 0) {
this.divMenu.setAttribute('class', 'hide');
} else {
this.divMenu.setAttribute('class', 'show');
}
} }
}); }
}
select = () => {
handleMenuClick = (e: EventPer) => { return (
if (this._isMounted) { this.setState({ menuVisible: false }); } <Select
// download experiment related content onSelect={this.getInterval}
switch (e.key) { defaultValue="Refresh every 10s"
case '1': className="interval"
this.downExperimentContent(); >
break; <Option value="close">Disable Auto Refresh</Option>
case '2': <Option value="10">Refresh every 10s</Option>
this.downnnimanagerLog(); <Option value="20">Refresh every 20s</Option>
break; <Option value="30">Refresh every 30s</Option>
case '3': <Option value="60">Refresh every 1min</Option>
this.downDispatcherlog(); </Select>
break; );
default: }
}
} fresh = (event: React.SyntheticEvent<EventTarget>) => {
event.preventDefault();
handleVisibleChange = (flag: boolean) => { const whichPage = window.location.pathname;
this.setState({ menuVisible: flag }); this.props.changeFresh(whichPage);
} }
componentDidMount() { componentDidMount() {
this._isMounted = true; this._isMounted = true;
this.getNNIversion(); this.getNNIversion();
} }
componentWillUnmount() { componentWillUnmount() {
this._isMounted = false; this._isMounted = false;
} }
render() { render() {
const { version, menuVisible } = this.state; const { version, menuVisible } = this.state;
const feed = `https://github.com/Microsoft/nni/issues/new?labels=${version}`; const feed = `https://github.com/Microsoft/nni/issues/new?labels=${version}`;
const menu = ( return (
<Menu onClick={this.handleMenuClick}> <Row>
<Menu.Item key="1">Experiment Parameters</Menu.Item> <MediaQuery query="(min-width: 1299px)">
<Menu.Item key="2">NNImanager Logfile</Menu.Item> <Row className="nav">
<Menu.Item key="3">Dispatcher Logfile</Menu.Item> <ul className="link">
</Menu> <li className="logo">
); <Link to={'/oview'}>
return ( <img
<Row className="nav"> src={require('../static/img/logo2.png')}
<Col span={8}> style={{ width: 88 }}
<ul className="link"> alt="NNI logo"
<li className="logo"> />
<Link to={'/oview'}> </Link>
<img src={require('../static/img/logo2.png')} style={{ width: 88 }} alt="NNI logo" /> </li>
</Link> <li className="tab firstTab">
</li> <Link to={'/oview'} activeClassName="high">
<li className="tab firstTab"> Overview
<Link to={'/oview'} activeClassName="high"> </Link>
Overview </li>
</Link> <li className="tab">
</li> <Link to={'/detail'} activeClassName="high">
<li className="tab"> Trials detail
<Link to={'/detail'} activeClassName="high"> </Link>
Trials detail </li>
</Link> <li className="feedback">
</li> <span className="fresh" onClick={this.fresh}>
</ul> <Icon type="sync"/><span>Fresh</span>
</Col> </span>
<Col span={16} className="feedback"> <Dropdown
<Dropdown className="dropdown"
className="dropdown" overlay={this.menu()}
overlay={menu} onVisibleChange={this.handleVisibleChange}
onVisibleChange={this.handleVisibleChange} visible={menuVisible}
visible={menuVisible} trigger={['click']}
> >
<a className="ant-dropdown-link" href="#"> <a className="ant-dropdown-link" href="#">
Download <Icon type="down" /> Download <Icon type="down" />
</a> </a>
</Dropdown> </Dropdown>
<a href={feed} target="_blank"> <a href={feed} target="_blank">
<img <img
src={require('../static/img/icon/issue.png')} src={require('../static/img/icon/issue.png')}
alt="NNI github issue" alt="NNI github issue"
/> />
Feedback Feedback
</a> </a>
<span className="version">Version: {version}</span> <span className="version">Version: {version}</span>
</Col> </li>
</Row> </ul>
); </Row>
} </MediaQuery>
<MediaQuery query="(max-width: 1299px)">
<Row className="little">
<Col span={6} className="menu">
<Icon type="unordered-list" className="more" onClick={this.showMenu} />
<div ref={div => this.divMenu = div} className="hide">{this.navigationBar()}</div>
</Col>
<Col span={10} className="logo">
<Link to={'/oview'}>
<img
src={require('../static/img/logo2.png')}
style={{ width: 88 }}
alt="NNI logo"
/>
</Link>
</Col>
</Row>
</MediaQuery>
{this.select()}
</Row>
);
}
} }
export default SlideBar; export default SlideBar;
\ No newline at end of file
src/webui/src/components/TrialsDetail.tsx
View file @ ba8dccd6
...@@ -33,7 +33,12 @@ interface TrialDetailState { ...@@ -33,7 +33,12 @@ interface TrialDetailState {
intermediateCounts: number; intermediateCounts: number;
} }
class TrialsDetail extends React.Component<{}, TrialDetailState> { interface TrialsDetailProps {
interval: number;
whichPageToFresh: string;
}
class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState> {
public _isMounted = false; public _isMounted = false;
public interAccuracy = 0; public interAccuracy = 0;
...@@ -61,7 +66,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -61,7 +66,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
</div> </div>
); );
constructor(props: {}) { constructor(props: TrialsDetailProps) {
super(props); super(props);
this.state = { this.state = {
...@@ -139,7 +144,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -139,7 +144,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
const items = metricSource[key]; const items = metricSource[key];
if (items.trialJobId === id) { if (items.trialJobId === id) {
// succeed trial, last intermediate result is final result // succeed trial, last intermediate result is final result
// final result format may be object // final result format may be object
if (typeof JSON.parse(items.data) === 'object') { if (typeof JSON.parse(items.data) === 'object') {
mediate.push(JSON.parse(items.data).default); mediate.push(JSON.parse(items.data).default);
} else { } else {
...@@ -227,21 +232,24 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -227,21 +232,24 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
// close timer // close timer
isOffIntervals = () => { isOffIntervals = () => {
axios(`${MANAGER_IP}/check-status`, { const { interval } = this.props;
method: 'GET' if (interval === 0) {
}) window.clearInterval(this.interTableList);
.then(res => { return;
if (res.status === 200 && this._isMounted) { } else {
switch (res.data.status) { axios(`${MANAGER_IP}/check-status`, {
case 'DONE': method: 'GET'
case 'ERROR': })
case 'STOPPED': .then(res => {
if (res.status === 200 && this._isMounted) {
const expStatus = res.data.status;
if (expStatus === 'DONE' || expStatus === 'ERROR' || expStatus === 'STOPPED') {
window.clearInterval(this.interTableList); window.clearInterval(this.interTableList);
break; return;
default: }
} }
} });
}); }
} }
handleEntriesSelect = (value: string) => { handleEntriesSelect = (value: string) => {
...@@ -304,11 +312,23 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -304,11 +312,23 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
}); });
} }
componentWillReceiveProps(nextProps: TrialsDetailProps) {
const { interval, whichPageToFresh } = nextProps;
window.clearInterval(this.interTableList);
if (interval !== 0) {
this.interTableList = window.setInterval(this.getDetailSource, interval * 1000);
}
if (whichPageToFresh.includes('/detail')) {
this.getDetailSource();
}
}
componentDidMount() { componentDidMount() {
this._isMounted = true; this._isMounted = true;
const { interval } = this.props;
this.getDetailSource(); this.getDetailSource();
this.interTableList = window.setInterval(this.getDetailSource, 10000); this.interTableList = window.setInterval(this.getDetailSource, interval * 1000);
this.checkExperimentPlatform(); this.checkExperimentPlatform();
} }
...@@ -329,7 +349,6 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -329,7 +349,6 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
<div> <div>
<div className="trial" id="tabsty"> <div className="trial" id="tabsty">
<Tabs type="card" onChange={this.handleWhichTabs}> <Tabs type="card" onChange={this.handleWhichTabs}>
{/* <TabPane tab={this.titleOfacc} key="1" destroyInactiveTabPane={true}> */}
<TabPane tab={this.titleOfacc} key="1"> <TabPane tab={this.titleOfacc} key="1">
<Row className="graph"> <Row className="graph">
<DefaultPoint <DefaultPoint
...@@ -350,7 +369,6 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -350,7 +369,6 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
</TabPane> </TabPane>
<TabPane tab={this.titleOfDuration} key="3"> <TabPane tab={this.titleOfDuration} key="3">
<Duration source={source} whichGraph={whichGraph} /> <Duration source={source} whichGraph={whichGraph} />
{/* <Duration source={source} whichGraph={whichGraph} clickCounts={durationCounts} /> */}
</TabPane> </TabPane>
<TabPane tab={this.titleOfIntermediate} key="4"> <TabPane tab={this.titleOfIntermediate} key="4">
<Intermediate source={source} whichGraph={whichGraph} /> <Intermediate source={source} whichGraph={whichGraph} />
......
src/webui/src/components/overview/Progress.tsx
View file @ ba8dccd6
...@@ -78,7 +78,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> { ...@@ -78,7 +78,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
}).then(res => { }).then(res => {
if (res.status === 200) { if (res.status === 200) {
message.destroy(); message.destroy();
message.success(`Update ${CONTROLTYPE[1].toLocaleLowerCase()} message.success(`Update ${CONTROLTYPE[1].toLocaleLowerCase()}
successfully`); successfully`);
// rerender trial profile message // rerender trial profile message
const { updateFile } = this.props; const { updateFile } = this.props;
......
src/webui/src/components/overview/SuccessTable.tsx
View file @ ba8dccd6
...@@ -72,8 +72,15 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> { ...@@ -72,8 +72,15 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
sorter: (a: TableObj, b: TableObj) => (a.duration as number) - (b.duration as number), sorter: (a: TableObj, b: TableObj) => (a.duration as number) - (b.duration as number),
render: (text: string, record: TableObj) => { render: (text: string, record: TableObj) => {
let duration; let duration;
if (record.duration) { if (record.duration !== undefined) {
duration = convertDuration(record.duration); // duration is nagative number(-1) & 0-1
if (record.duration > 0 && record.duration < 1 || record.duration < 0) {
duration = `${record.duration}s`;
} else {
duration = convertDuration(record.duration);
}
} else {
duration = 0;
} }
return ( return (
<div className="durationsty"><div>{duration}</div></div> <div className="durationsty"><div>{duration}</div></div>
......
src/webui/src/components/public-child/TrialLog.tsx
View file @ ba8dccd6
...@@ -15,7 +15,7 @@ class TrialLog extends React.Component<TrialLogProps, {}> { ...@@ -15,7 +15,7 @@ class TrialLog extends React.Component<TrialLogProps, {}> {
render() { render() {
const { logStr } = this.props; const { logStr } = this.props;
return ( return (
<div> <div>
<LogPathChild <LogPathChild
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ ba8dccd6
...@@ -264,7 +264,8 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -264,7 +264,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
render: (text: string, record: TableObj) => { render: (text: string, record: TableObj) => {
let duration; let duration;
if (record.duration !== undefined) { if (record.duration !== undefined) {
if (record.duration > 0 && record.duration < 1) { // duration is nagative number(-1) & 0-1
if (record.duration > 0 && record.duration < 1 || record.duration < 0) {
duration = `${record.duration}s`; duration = `${record.duration}s`;
} else { } else {
duration = convertDuration(record.duration); duration = convertDuration(record.duration);
......
src/webui/src/index.css
View file @ ba8dccd6
...@@ -49,8 +49,8 @@ table { ...@@ -49,8 +49,8 @@ table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
} }
@font-face { @font-face {
font-family: 'Segoe'; font-family: 'Segoe';
src: url('./static/font/SegoePro-Regular.ttf'); src: url('./static/font/SegoePro-Regular.ttf');
} }
src/webui/src/static/function.ts
View file @ ba8dccd6
...@@ -50,7 +50,7 @@ const getFinalResult = (final: Array<FinalResult>) => { ...@@ -50,7 +50,7 @@ const getFinalResult = (final: Array<FinalResult>) => {
} }
}; };
// get final result value // acc obj // get final result value // acc obj
const getFinal = (final: Array<FinalResult>) => { const getFinal = (final: Array<FinalResult>) => {
let showDefault: FinalType; let showDefault: FinalType;
if (final) { if (final) {
......
src/webui/src/static/interface.ts
View file @ ba8dccd6
...@@ -109,7 +109,7 @@ interface FinalResult { ...@@ -109,7 +109,7 @@ interface FinalResult {
} }
export { export {
TableObj, Parameters, Experiment, TableObj, Parameters, Experiment,
AccurPoint, TrialNumber, TrialJob, AccurPoint, TrialNumber, TrialJob,
DetailAccurPoint, TooltipForAccuracy, DetailAccurPoint, TooltipForAccuracy,
ParaObj, Dimobj, FinalResult, FinalType, ParaObj, Dimobj, FinalResult, FinalType,
......
src/webui/src/static/style/openRow.scss
View file @ ba8dccd6
...@@ -41,7 +41,7 @@ $bgColor: #f2f2f2; ...@@ -41,7 +41,7 @@ $bgColor: #f2f2f2;
color: #212121; color: #212121;
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
border: none; border: none;
} }
.logcontent{ .logcontent{
height: 100%; height: 100%;
......
src/webui/src/static/style/overview.scss
View file @ ba8dccd6
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
} }
.overGraph{ .overGraph{
height: 362px; height: 362px;
.accuracy{ .accuracy{
width: 100%; width: 100%;
height: 324px; height: 324px;
......
src/webui/src/static/style/overviewTitle.scss
View file @ ba8dccd6
...@@ -53,7 +53,7 @@ $titleBgcolor: #b3b3b3; ...@@ -53,7 +53,7 @@ $titleBgcolor: #b3b3b3;
.minTitle{ .minTitle{
border-right: 2px solid #fff; border-right: 2px solid #fff;
} }
.title:hover{ .title:hover{
cursor: pointer; cursor: pointer;
} }
......
src/webui/src/static/style/para.scss
View file @ ba8dccd6
.parameter{ .parameter{
height: 100%; height: 100%;
} }
.meline{ .meline{
...@@ -15,14 +15,14 @@ ...@@ -15,14 +15,14 @@
.searcHyper{ .searcHyper{
position: relative; position: relative;
margin: 0 19px; margin: 0 19px;
.noneData{ .noneData{
position: absolute; position: absolute;
left: 49%; left: 49%;
top: 2.5%; top: 2.5%;
font-size: 13px; font-size: 13px;
color: #999; color: #999;
} }
} }
/* Intermediate Result Style */ /* Intermediate Result Style */
......
src/webui/src/static/style/progress.scss
View file @ ba8dccd6
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
border-top-left-radius: 12px; border-top-left-radius: 12px;
border-bottom-left-radius: 12px; border-bottom-left-radius: 12px;
} }
.showProgress{ .showProgress{
height: 30px; height: 30px;
} }
......
src/webui/src/static/style/slideBar.scss
View file @ ba8dccd6
$barHeight: 56px; $barHeight: 56px;
/* drowdown and select default bgcolor */
$drowBgColor: #f2f2f2;
/* drowdown and select hover bgcolor */
$drowHoverBgColor: #e2e2e2;
.nav{ .nav{
list-style: none; list-style: none;
width: 94%; width: 95%;
height: $barHeight; height: $barHeight;
margin: 0 auto; margin: 0 auto;
position: relative;
.tab{ .tab{
font-family: 'Segoe'; font-family: 'Segoe';
line-height: $barHeight; line-height: $barHeight;
...@@ -14,7 +19,7 @@ $barHeight: 56px; ...@@ -14,7 +19,7 @@ $barHeight: 56px;
} }
} }
.firstTab{ .firstTab{
margin: 0 32px; margin: 0 20px;
} }
.logo{ .logo{
margin-top: 2px; margin-top: 2px;
...@@ -28,17 +33,26 @@ $barHeight: 56px; ...@@ -28,17 +33,26 @@ $barHeight: 56px;
} }
.feedback{ .feedback{
text-align: right; position: fixed;
right: 19%;
line-height: $barHeight; line-height: $barHeight;
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
.fresh{
span{
margin: 0 10px 0 3px;
}
}
.fresh:hover{
cursor: pointer;
}
a{ a{
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
margin-left: 10px; margin-left: 10px;
} }
img{ img{
width: 24px; width: 20px;
margin-right: 8px; margin-right: 8px;
} }
.version{ .version{
...@@ -51,4 +65,66 @@ $barHeight: 56px; ...@@ -51,4 +65,66 @@ $barHeight: 56px;
} }
.dropdown{ .dropdown{
margin-right: 10px; margin-right: 10px;
} /* make dropdown content box position in blue bar bottom */
\ No newline at end of file padding-bottom: 14px;
}
.interval{
position: fixed;
right: 7%;
top: 12px;
.ant-select-selection{
background-color: transparent;
border: none;
color: #fff;
outline: none;
font-size: 16px;
}
.ant-select-arrow{
color: #fff;
}
}
/* set select bgcolor */
.ant-select-dropdown-menu{
background-color: $drowBgColor;
}
.ant-select-dropdown-menu-item:hover{
background-color: $drowHoverBgColor;
}
.ant-select-dropdown-menu-item-active{
background-color: transparent;
}
/* set dropdown bgcolor */
.ant-dropdown{
.ant-dropdown-menu{
padding: 0;
background-color: $drowBgColor;
border-radius: 0;
.ant-dropdown-menu-item:hover{
background-color: $drowHoverBgColor;
}
}
}
/* nav style*/
.little{
width: 100%;
.menu{
.show{
display: block;
}
.hide{
display: none;
}
.more{
color: #fff;
font-size: 24px;
margin-top: 16px;
}
.more:hover{
cursor: pointer;
}
}
.logo{
text-align: center;
}
}
src/webui/src/static/style/table.scss
View file @ ba8dccd6
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
/* add the brother selector to increase the priority */ /* add the brother selector to increase the priority */
#succeTable .commonTableStyle, #tableList .commonTableStyle { #succeTable .commonTableStyle, #tableList .commonTableStyle {
tr{ tr{
text-align: center; text-align: center;
color:#212121; color:#212121;
font-family: 'Segoe'; font-family: 'Segoe';
...@@ -43,14 +43,14 @@ ...@@ -43,14 +43,14 @@
border-bottom: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0;
text-align: center; text-align: center;
} }
.ant-table-expanded-row{ .ant-table-expanded-row{
/* background-color: #f2f2f2 */ /* background-color: #f2f2f2 */
background-color: transparent; background-color: transparent;
} }
tr:hover{ tr:hover{
/* cancel antd table default hover style */ /* cancel antd table default hover style */
td{ td{
background-color: transparent; background-color: transparent;
......
test/async_sharing_test/config.yml
View file @ ba8dccd6
...@@ -4,7 +4,7 @@ trialConcurrency: 3 ...@@ -4,7 +4,7 @@ trialConcurrency: 3
maxExecDuration: 1h maxExecDuration: 1h
maxTrialNum: 10 maxTrialNum: 10
#choice: local, remote, pai #choice: local, remote, pai
trainingServicePlatform: remote trainingServicePlatform: remote
#choice: true, false #choice: true, false
useAnnotation: false useAnnotation: false
multiThread: true multiThread: true
......
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