Enhancement: ability to adjust rendering interval (#1181)

* Add interval

* update

* change back react version

* change to alpha version

src/webui/package.json

@@ -9,11 +9,12 @@
     "copy-to-clipboard": "^3.0.8",
     "echarts": "^4.1.0",
     "echarts-for-react": "^2.0.14",
-    "react": "^16.4.2",
-    "react-dom": "^16.4.2",
+    "react": "^16.7.0-alpha.2",
+    "react-dom": "^16.7.0-alpha.2",
     "react-json-tree": "^0.11.0",
     "react-monaco-editor": "^0.22.0",
     "react-router": "3.2.1",
+    "react-responsive": "^7.0.0",
     "react-scripts-ts-antd": "2.17.0"
   },
   "scripts": {
@@ -28,6 +29,7 @@
     "@types/react": "^16.4.17",
     "@types/react-dom": "^16.0.7",
     "@types/react-json-tree": "^0.6.8",
+    "@types/react-responsive": "^3.0.3",
     "@types/react-router": "3.0.15",
     "typescript": "^3.0.1"
   }

src/webui/src/App.css

@@ -15,9 +15,7 @@
   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

@@ -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

@@ -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,6 +382,7 @@ class Overview extends React.Component<{}, OverviewState> {
                 data: accarr
             }]
         };
+        if (this._isMounted) {
             this.setState({ accuracyData: accOption }, () => {
                 if (accarr.length === 0) {
                     this.setState({
@@ -389,6 +395,7 @@ class Overview extends React.Component<{}, OverviewState> {
                 }
             });
         }
+    }
 
     clickMaxTop = (event: React.SyntheticEvent<EventTarget>) => {
         event.stopPropagation();
@@ -405,23 +412,39 @@ class Overview extends React.Component<{}, OverviewState> {
 
     isOffInterval = () => {
         const { status } = this.state;
-        switch (status) {
-            case 'DONE':
-            case 'ERROR':
-            case 'STOPPED':
+        const { interval } = this.props;
+        if (status === 'DONE' || status === 'ERROR' || status === 'STOPPED' ||
+            interval === 0
+        ) {
             window.clearInterval(this.intervalID);
             window.clearInterval(this.intervalProfile);
-                break;
-            default:
+            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

 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;
+    navBarVisible: boolean;
+}
+
+interface SliderProps {
+    changeInterval: (value: number) => void;
+    changeFresh: (value: string) => void;
 }
 
 interface EventPer {
     key: string;
 }
 
-class SlideBar extends React.Component<{}, SliderState> {
+class SlideBar extends React.Component<SliderProps, SliderState> {
 
     public _isMounted = false;
+    public divMenu: HTMLDivElement | null;
+    public countOfMenu: number = 0;
+    public selectHTML: Select | null;
 
-  constructor(props: {}) {
+    constructor(props: SliderProps) {
         super(props);
         this.state = {
             version: '',
-      menuVisible: false
+            menuVisible: false,
+            navBarVisible: false,
         };
     }
 
@@ -92,7 +105,7 @@ class SlideBar extends React.Component<{}, SliderState> {
                     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.download = 'nnimanagerLog.log';
                     aTag.href = URL.createObjectURL(file);
                     aTag.click();
                     if (!isEdge) {
@@ -101,7 +114,7 @@ class SlideBar extends React.Component<{}, SliderState> {
                     if (navigator.userAgent.indexOf('Firefox') > -1) {
                         const downTag = document.createElement('a');
                         downTag.addEventListener('click', function () {
-              downTag.download = 'nnimanager.log';
+                            downTag.download = 'nnimanagerLog.log';
                             downTag.href = URL.createObjectURL(file);
                         });
                         let eventMouse = document.createEvent('MouseEvents');
@@ -122,7 +135,7 @@ class SlideBar extends React.Component<{}, SliderState> {
                     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.download = 'dispatcherLog.log';
                     aTag.href = URL.createObjectURL(file);
                     aTag.click();
                     if (!isEdge) {
@@ -131,7 +144,7 @@ class SlideBar extends React.Component<{}, SliderState> {
                     if (navigator.userAgent.indexOf('Firefox') > -1) {
                         const downTag = document.createElement('a');
                         downTag.addEventListener('click', function () {
-              downTag.download = 'dispatcher.log';
+                            downTag.download = 'dispatcherLog.log';
                             downTag.href = URL.createObjectURL(file);
                         });
                         let eventMouse = document.createEvent('MouseEvents');
@@ -155,24 +168,121 @@ class SlideBar extends React.Component<{}, SliderState> {
 
     handleMenuClick = (e: EventPer) => {
         if (this._isMounted) { this.setState({ menuVisible: false }); }
-    // download experiment related content
         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) => {
+        if (this._isMounted === true) {
             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() {
         this._isMounted = true;
@@ -186,20 +296,18 @@ class SlideBar extends React.Component<{}, SliderState> {
     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>
+                <MediaQuery query="(min-width: 1299px)">
                     <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" />
+                                    <img
+                                        src={require('../static/img/logo2.png')}
+                                        style={{ width: 88 }}
+                                        alt="NNI logo"
+                                    />
                                 </Link>
                             </li>
                             <li className="tab firstTab">
@@ -212,14 +320,16 @@ class SlideBar extends React.Component<{}, SliderState> {
                                     Trials detail
                                     </Link>
                             </li>
-          </ul>
-        </Col>
-        <Col span={16} className="feedback">
+                            <li className="feedback">
+                                <span className="fresh" onClick={this.fresh}>
+                                    <Icon type="sync"/><span>Fresh</span>
+                                </span>
                                 <Dropdown
                                     className="dropdown"
-            overlay={menu}
+                                    overlay={this.menu()}
                                     onVisibleChange={this.handleVisibleChange}
                                     visible={menuVisible}
+                                    trigger={['click']}
                                 >
                                     <a className="ant-dropdown-link" href="#">
                                         Download <Icon type="down" />
@@ -233,7 +343,28 @@ class SlideBar extends React.Component<{}, SliderState> {
                                     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>
         );
     }

src/webui/src/components/TrialsDetail.tsx

@@ -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 = {
@@ -227,22 +232,25 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
 
     // close timer
     isOffIntervals = () => {
+        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) {
-                    switch (res.data.status) {
-                        case 'DONE':
-                        case 'ERROR':
-                        case 'STOPPED':
+                        const expStatus = res.data.status;
+                        if (expStatus === 'DONE' || expStatus === 'ERROR' || expStatus === 'STOPPED') {
                             window.clearInterval(this.interTableList);
-                            break;
-                        default:
+                            return;
                         }
                     }
                 });
         }
+    }
 
     handleEntriesSelect = (value: string) => {
         // user select isn't 'all'
@@ -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/static/style/slideBar.scss

 $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;
+    /* 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;
+    }
 }