Skip to content

GitLab

Commit 61fec446 authored by Lijiao's avatar Lijiao Committed by Yan Ni
Browse files

Enhancement: ability to adjust rendering interval (#1181) 

* Add interval

* update

* change back react version

* change to alpha version
parent e12df2b1
Show whitespace changes
Inline Side-by-side
Showing with 567 additions and 282 deletions
src/webui/package.json
View file @ 61fec446
...@@ -9,11 +9,12 @@ ...@@ -9,11 +9,12 @@
"copy-to-clipboard": "^3.0.8", "copy-to-clipboard": "^3.0.8",
"echarts": "^4.1.0", "echarts": "^4.1.0",
"echarts-for-react": "^2.0.14", "echarts-for-react": "^2.0.14",
"react": "^16.4.2", "react": "^16.7.0-alpha.2",
"react-dom": "^16.4.2", "react-dom": "^16.7.0-alpha.2",
"react-json-tree": "^0.11.0", "react-json-tree": "^0.11.0",
"react-monaco-editor": "^0.22.0", "react-monaco-editor": "^0.22.0",
"react-router": "3.2.1", "react-router": "3.2.1",
"react-responsive": "^7.0.0",
"react-scripts-ts-antd": "2.17.0" "react-scripts-ts-antd": "2.17.0"
}, },
"scripts": { "scripts": {
...@@ -28,6 +29,7 @@ ...@@ -28,6 +29,7 @@
"@types/react": "^16.4.17", "@types/react": "^16.4.17",
"@types/react-dom": "^16.0.7", "@types/react-dom": "^16.0.7",
"@types/react-json-tree": "^0.6.8", "@types/react-json-tree": "^0.6.8",
"@types/react-responsive": "^3.0.3",
"@types/react-router": "3.0.15", "@types/react-router": "3.0.15",
"typescript": "^3.0.1" "typescript": "^3.0.1"
} }
......
src/webui/src/App.css
View file @ 61fec446
...@@ -15,9 +15,7 @@ ...@@ -15,9 +15,7 @@
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 @ 61fec446
...@@ -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 @ 61fec446
...@@ -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,6 +382,7 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -377,6 +382,7 @@ class Overview extends React.Component<{}, OverviewState> {
data: accarr data: accarr
}] }]
}; };
if (this._isMounted) {
this.setState({ accuracyData: accOption }, () => { this.setState({ accuracyData: accOption }, () => {
if (accarr.length === 0) { if (accarr.length === 0) {
this.setState({ this.setState({
...@@ -389,6 +395,7 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -389,6 +395,7 @@ class Overview extends React.Component<{}, OverviewState> {
} }
}); });
} }
}
clickMaxTop = (event: React.SyntheticEvent<EventTarget>) => { clickMaxTop = (event: React.SyntheticEvent<EventTarget>) => {
event.stopPropagation(); event.stopPropagation();
...@@ -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 @ 61fec446
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;
public countOfMenu: number = 0;
public selectHTML: Select | null;
constructor(props: {}) { constructor(props: SliderProps) {
super(props); super(props);
this.state = { this.state = {
version: '', version: '',
menuVisible: false menuVisible: false,
navBarVisible: false,
}; };
} }
...@@ -92,7 +105,7 @@ class SlideBar extends React.Component<{}, SliderState> { ...@@ -92,7 +105,7 @@ class SlideBar extends React.Component<{}, SliderState> {
const aTag = document.createElement('a'); const aTag = document.createElement('a');
const isEdge = navigator.userAgent.indexOf('Edge') !== -1 ? true : false; const isEdge = navigator.userAgent.indexOf('Edge') !== -1 ? true : false;
const file = new Blob([nniLogfile], { type: 'application/json' }); const file = new Blob([nniLogfile], { type: 'application/json' });
aTag.download = 'nnimanager.log'; aTag.download = 'nnimanagerLog.log';
aTag.href = URL.createObjectURL(file); aTag.href = URL.createObjectURL(file);
aTag.click(); aTag.click();
if (!isEdge) { if (!isEdge) {
...@@ -101,7 +114,7 @@ class SlideBar extends React.Component<{}, SliderState> { ...@@ -101,7 +114,7 @@ class SlideBar extends React.Component<{}, SliderState> {
if (navigator.userAgent.indexOf('Firefox') > -1) { if (navigator.userAgent.indexOf('Firefox') > -1) {
const downTag = document.createElement('a'); const downTag = document.createElement('a');
downTag.addEventListener('click', function () { downTag.addEventListener('click', function () {
downTag.download = 'nnimanager.log'; downTag.download = 'nnimanagerLog.log';
downTag.href = URL.createObjectURL(file); downTag.href = URL.createObjectURL(file);
}); });
let eventMouse = document.createEvent('MouseEvents'); let eventMouse = document.createEvent('MouseEvents');
...@@ -122,7 +135,7 @@ class SlideBar extends React.Component<{}, SliderState> { ...@@ -122,7 +135,7 @@ class SlideBar extends React.Component<{}, SliderState> {
const aTag = document.createElement('a'); const aTag = document.createElement('a');
const isEdge = navigator.userAgent.indexOf('Edge') !== -1 ? true : false; const isEdge = navigator.userAgent.indexOf('Edge') !== -1 ? true : false;
const file = new Blob([dispatchLogfile], { type: 'application/json' }); const file = new Blob([dispatchLogfile], { type: 'application/json' });
aTag.download = 'dispatcher.log'; aTag.download = 'dispatcherLog.log';
aTag.href = URL.createObjectURL(file); aTag.href = URL.createObjectURL(file);
aTag.click(); aTag.click();
if (!isEdge) { if (!isEdge) {
...@@ -131,7 +144,7 @@ class SlideBar extends React.Component<{}, SliderState> { ...@@ -131,7 +144,7 @@ class SlideBar extends React.Component<{}, SliderState> {
if (navigator.userAgent.indexOf('Firefox') > -1) { if (navigator.userAgent.indexOf('Firefox') > -1) {
const downTag = document.createElement('a'); const downTag = document.createElement('a');
downTag.addEventListener('click', function () { downTag.addEventListener('click', function () {
downTag.download = 'dispatcher.log'; downTag.download = 'dispatcherLog.log';
downTag.href = URL.createObjectURL(file); downTag.href = URL.createObjectURL(file);
}); });
let eventMouse = document.createEvent('MouseEvents'); let eventMouse = document.createEvent('MouseEvents');
...@@ -155,24 +168,121 @@ class SlideBar extends React.Component<{}, SliderState> { ...@@ -155,24 +168,121 @@ class SlideBar extends React.Component<{}, SliderState> {
handleMenuClick = (e: EventPer) => { handleMenuClick = (e: EventPer) => {
if (this._isMounted) { this.setState({ menuVisible: false }); } if (this._isMounted) { this.setState({ menuVisible: false }); }
// download experiment related content
switch (e.key) { switch (e.key) {
// download experiment related content
case '1': case '1':
this.downExperimentContent(); this.downExperimentContent();
break; break;
// download nnimanager log file
case '2': case '2':
this.downnnimanagerLog(); this.downnnimanagerLog();
break; break;
// download dispatcher log file
case '3': case '3':
this.downDispatcherlog(); this.downDispatcherlog();
break; break;
case 'close':
case '10':
case '20':
case '30':
case '60':
this.getInterval(e.key);
break;
default: default:
} }
} }
handleVisibleChange = (flag: boolean) => { handleVisibleChange = (flag: boolean) => {
if (this._isMounted === true) {
this.setState({ menuVisible: flag }); this.setState({ menuVisible: flag });
} }
}
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');
}
}
}
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() { componentDidMount() {
this._isMounted = true; this._isMounted = true;
...@@ -186,20 +296,18 @@ class SlideBar extends React.Component<{}, SliderState> { ...@@ -186,20 +296,18 @@ class SlideBar extends React.Component<{}, SliderState> {
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 = (
<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 ( return (
<Row>
<MediaQuery query="(min-width: 1299px)">
<Row className="nav"> <Row className="nav">
<Col span={8}>
<ul className="link"> <ul className="link">
<li className="logo"> <li className="logo">
<Link to={'/oview'}> <Link to={'/oview'}>
<img src={require('../static/img/logo2.png')} style={{ width: 88 }} alt="NNI logo" /> <img
src={require('../static/img/logo2.png')}
style={{ width: 88 }}
alt="NNI logo"
/>
</Link> </Link>
</li> </li>
<li className="tab firstTab"> <li className="tab firstTab">
...@@ -212,14 +320,16 @@ class SlideBar extends React.Component<{}, SliderState> { ...@@ -212,14 +320,16 @@ class SlideBar extends React.Component<{}, SliderState> {
Trials detail Trials detail
</Link> </Link>
</li> </li>
</ul> <li className="feedback">
</Col> <span className="fresh" onClick={this.fresh}>
<Col span={16} className="feedback"> <Icon type="sync"/><span>Fresh</span>
</span>
<Dropdown <Dropdown
className="dropdown" className="dropdown"
overlay={menu} overlay={this.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" />
...@@ -233,7 +343,28 @@ class SlideBar extends React.Component<{}, SliderState> { ...@@ -233,7 +343,28 @@ class SlideBar extends React.Component<{}, SliderState> {
Feedback Feedback
</a> </a>
<span className="version">Version: {version}</span> <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>
<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> </Row>
); );
} }
......
src/webui/src/components/TrialsDetail.tsx
View file @ 61fec446
...@@ -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 = {
...@@ -227,22 +232,25 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> { ...@@ -227,22 +232,25 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
// close timer // close timer
isOffIntervals = () => { isOffIntervals = () => {
const { interval } = this.props;
if (interval === 0) {
window.clearInterval(this.interTableList);
return;
} else {
axios(`${MANAGER_IP}/check-status`, { axios(`${MANAGER_IP}/check-status`, {
method: 'GET' method: 'GET'
}) })
.then(res => { .then(res => {
if (res.status === 200 && this._isMounted) { if (res.status === 200 && this._isMounted) {
switch (res.data.status) { const expStatus = res.data.status;
case 'DONE': if (expStatus === 'DONE' || expStatus === 'ERROR' || expStatus === 'STOPPED') {
case 'ERROR':
case 'STOPPED':
window.clearInterval(this.interTableList); window.clearInterval(this.interTableList);
break; return;
default:
} }
} }
}); });
} }
}
handleEntriesSelect = (value: string) => { handleEntriesSelect = (value: string) => {
// user select isn't 'all' // user select isn't 'all'
...@@ -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/static/style/slideBar.scss
View file @ 61fec446
$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 */
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;
}
} }
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