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