[webui] UX refine based on v0.9 bug bash feedbacks (#1221)

* fix some comments

* update picture in webui document

src/webui/src/components/Modal/Compare.tsx

@@ -127,7 +127,7 @@ class Compare extends React.Component<CompareProps, {}> {
                         <td />
                         {Object.keys(idList).map(key => {
                             return (
-                                <td className="value" key={key}>{idList[key]}</td>
+                                <td className="value idList" key={key}>{idList[key]}</td>
                             );
                         })}
                     </tr>
@@ -193,6 +193,7 @@ class Compare extends React.Component<CompareProps, {}> {
                 destroyOnClose={true}
                 maskClosable={false}
                 width="90%"
+                // centered={true}
             >
                 <Row>{this.intermediate()}</Row>
                 <Row>{this.initColumn()}</Row>

src/webui/src/components/SlideBar.tsx

@@ -4,7 +4,7 @@ import axios from 'axios';
 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';
+import { Row, Col, Menu, Dropdown, Icon, Select, Button } from 'antd';
 const { SubMenu } = Menu;
 const { Option } = Select;
 import '../static/style/slideBar.scss';
@@ -14,6 +14,7 @@ interface SliderState {
     version: string;
     menuVisible: boolean;
     navBarVisible: boolean;
+    isdisabledFresh: boolean;
 }
 
 interface SliderProps {
@@ -37,6 +38,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
             version: '',
             menuVisible: false,
             navBarVisible: false,
+            isdisabledFresh: false
         };
     }
 
@@ -224,9 +226,6 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
             <Menu onClick={this.handleMenuClick} className="menuModal">
                 <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>
@@ -249,25 +248,41 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
     }
 
     select = () => {
+        const { isdisabledFresh } = this.state;
         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>
+            <div className="interval">
+                <Button
+                    className="fresh"
+                    onClick={this.fresh}
+                    type="ghost"
+                    disabled={isdisabledFresh}
+                >
+                    <Icon type="sync" /><span>Refresh</span>
+                </Button>
+                <Select
+                    onSelect={this.getInterval}
+                    defaultValue="Refresh every 10s"
+                >
+                    <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>
+            </div>
         );
     }
 
     fresh = (event: React.SyntheticEvent<EventTarget>) => {
         event.preventDefault();
-        const whichPage = window.location.pathname;
-        this.props.changeFresh(whichPage);
+        event.stopPropagation();
+        if (this._isMounted) {
+            this.setState({ isdisabledFresh: true }, () => {
+                const whichPage = window.location.pathname;
+                this.props.changeFresh(whichPage);
+                setTimeout(() => { this.setState(() => ({ isdisabledFresh: false })); }, 1000);
+            });
+        }
     }
 
     componentDidMount() {
@@ -284,74 +299,75 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
         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">
+                <Col span={18}>
+                    <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">
+                                    <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>
+                </Col>
+                <Col span={18}>
+                    <MediaQuery query="(max-width: 1299px)">
+                        <Row className="little">
+                            <Col span={1} className="menu">
+                                <Dropdown overlay={this.navigationBar()} trigger={['click']}>
+                                    <Icon type="unordered-list" className="more" />
+                                </Dropdown>
+                            </Col>
+                            <Col span={14} className="logo">
                                 <Link to={'/oview'}>
                                     <img
                                         src={require('../static/img/logo2.png')}
-                                        style={{ width: 88 }}
+                                        style={{ width: 80 }}
                                         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">
-                            <Dropdown overlay={this.navigationBar()} trigger={['click']}>
-                                <Icon type="unordered-list" className="more" />
-                            </Dropdown>
-                        </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()}
+                            </Col>
+                        </Row>
+                    </MediaQuery>
+                </Col>
+                <Col span={3}> {this.select()} </Col>
             </Row>
         );
     }

src/webui/src/components/TrialsDetail.tsx

@@ -394,15 +394,13 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                     </Col>
                     <Col span={14} className="right">
                         <Button
-                            type="primary"
-                            className="tableButton editStyle"
+                            className="common"
                             onClick={this.tableList ? this.tableList.addColumn : this.test}
                         >
                             Add column
                         </Button>
                         <Button
-                            type="primary"
-                            className="tableButton editStyle mediateBtn"
+                            className="mediateBtn common"
                             // use child-component tableList's function, the function is in child-component.
                             onClick={this.tableList ? this.tableList.compareBtn : this.test}
                         >

src/webui/src/components/trial-detail/Duration.tsx

@@ -163,9 +163,9 @@ class Duration extends React.Component<DurationProps, DurationState> {
     }
 
     shouldComponentUpdate(nextProps: DurationProps, nextState: DurationState) {
-    
+
         const { whichGraph, source } = nextProps;
-        if (whichGraph === '3') { 
+        if (whichGraph === '3') {
             const beforeSource = this.props.source;
             if (whichGraph !== this.props.whichGraph) {
                 return true;
@@ -174,13 +174,14 @@ class Duration extends React.Component<DurationProps, DurationState> {
             if (source.length !== beforeSource.length) {
                 return true;
             }
-            
-            if (source[source.length - 1].duration !== beforeSource[beforeSource.length - 1].duration) {
-                return true;
-            }
 
-            if (source[source.length - 1].status !== beforeSource[beforeSource.length - 1].status) {
-                return true;
+            if (beforeSource[beforeSource.length - 1] !== undefined) {
+                if (source[source.length - 1].duration !== beforeSource[beforeSource.length - 1].duration) {
+                    return true;
+                }
+                if (source[source.length - 1].status !== beforeSource[beforeSource.length - 1].status) {
+                    return true;
+                }
             }
         }
         return false;

src/webui/src/components/trial-detail/Intermeidate.tsx

@@ -12,7 +12,7 @@ interface IntermediateState {
     eachIntermediateNum: number; // trial's intermediate number count
     isLoadconfirmBtn: boolean;
     isFilter: boolean;
-    length: number; 
+    length: number;
     clickCounts: number; // user filter intermediate click confirm btn's counts
 }
 
@@ -136,7 +136,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                 },
                 yAxis: {
                     type: 'value',
-                    name: 'Scape'
+                    name: 'metric'
                 }
             };
             if (this._isMounted) {
@@ -209,7 +209,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
     componentWillReceiveProps(nextProps: IntermediateProps, nextState: IntermediateState) {
         const { isFilter, filterSource } = nextState;
         const { whichGraph, source } = nextProps;
-        
+
         if (whichGraph === '4') {
             if (isFilter === true) {
                 const pointVal = this.pointInput !== null ? this.pointInput.value : '';
@@ -226,16 +226,14 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
     }
 
     shouldComponentUpdate(nextProps: IntermediateProps, nextState: IntermediateState) {
-        const { whichGraph } = nextProps;
+        const { whichGraph, source } = nextProps;
         const beforeGraph = this.props.whichGraph;
         if (whichGraph === '4') {
-            
-            const { source } = nextProps;
             const { isFilter, length, clickCounts } = nextState;
             const beforeLength = this.state.length;
-            const beforeSource = this.state.detailSource;
+            const beforeSource = this.props.source;
             const beforeClickCounts = this.state.clickCounts;
-    
+
             if (isFilter !== this.state.isFilter) {
                 return true;
             }
@@ -243,7 +241,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
             if (clickCounts !== beforeClickCounts) {
                 return true;
             }
-            
+
             if (isFilter === false) {
                 if (whichGraph !== beforeGraph) {
                     return true;
@@ -251,15 +249,20 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                 if (length !== beforeLength) {
                     return true;
                 }
-                if (source[source.length - 1].description.intermediate.length !==
-                    beforeSource[beforeSource.length - 1].description.intermediate.length) {
+                if (beforeSource.length !== source.length) {
                     return true;
                 }
-                if (source[source.length - 1].duration !== beforeSource[beforeSource.length - 1].duration) {
-                    return true;
-                }
-                if (source[source.length - 1].status !== beforeSource[beforeSource.length - 1].status) {
-                    return true;
+                if (beforeSource[beforeSource.length - 1] !== undefined) {
+                    if (source[source.length - 1].description.intermediate.length !==
+                        beforeSource[beforeSource.length - 1].description.intermediate.length) {
+                        return true;
+                    }
+                    if (source[source.length - 1].duration !== beforeSource[beforeSource.length - 1].duration) {
+                        return true;
+                    }
+                    if (source[source.length - 1].status !== beforeSource[beforeSource.length - 1].status) {
+                        return true;
+                    }
                 }
             }
         }
@@ -291,7 +294,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                             ?
                             <div>
                                 <Col span={3}>
-                                    <span>Scape</span>
+                                    <span>Step</span>
                                     <input
                                         placeholder="point"
                                         ref={input => this.pointInput = input}

src/webui/src/static/style/compare.scss

 .compare{
     width: 92%;
+    table-layout: fixed;
     margin: 0 auto;
     color: #333;
     tr{
         line-height: 30px;
-        border-bottom: 1px solid #ccc;
+    }
+    tr:nth-of-type(even){
+        background-color: gainsboro;
     }
     .column{
-        width: 124px;
+        max-width: 124px;
         padding-left: 18px;
         font-weight: 700;
     }
     .value{
-        width: 152px;
+        max-width: 152px;
         padding-right: 18px;
-        text-align: right;
+        text-align: left;
+    }
+    .idList{
+        font-weight: 700;
     }
 }

src/webui/src/static/style/search.scss

@@ -4,6 +4,13 @@
     margin: 0 auto;
     .right{
         text-align: right;
+        .common{
+            border-radius: 0;
+        }
+        .common:hover{
+            color: #0071BC;
+            border-radius: 0;
+        }
     }
     .entry{
         width: 120px;
@@ -31,8 +38,9 @@
     }
 }
 
+/* compare button style */
 Button.mediateBtn{
-    margin: 0 32px;
+    margin: 0 2px 0 8px;
 }
 
 /* each row's Intermediate btn -> Modal*/

src/webui/src/static/style/slideBar.scss

@@ -34,18 +34,10 @@ $drowHoverBgColor: #e2e2e2;
 
 .feedback{
     position: fixed;
-    right: 19%;
+    right: 26%;
     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;
@@ -60,6 +52,17 @@ $drowHoverBgColor: #e2e2e2;
     }
 }
 
+/* refresh button */
+.fresh{
+    border: none;
+    color: #fff;
+    font-size: 16px;
+    padding: 0;
+}
+.fresh:hover{
+    color: #fff;
+}
+
 .link li{
     float: left;
 }
@@ -70,8 +73,10 @@ $drowHoverBgColor: #e2e2e2;
 }
 .interval{
     position: fixed;
-    right: 7%;
+    right: 6%;
     top: 12px;
+    font-size: 16px;
+    color: #fff;
     .ant-select-selection{
         background-color: transparent;
         border: none;
@@ -82,6 +87,10 @@ $drowHoverBgColor: #e2e2e2;
     .ant-select-arrow{
         color: #fff;
     }
+    .ant-btn-ghost[disabled]{
+        background-color: transparent;
+        color: #fff;
+    }
 }
 /* set select bgcolor */
 .ant-select-dropdown-menu{
@@ -120,8 +129,9 @@ $drowHoverBgColor: #e2e2e2;
 
 /* nav style*/
 .little{
-    width: 100%;
+    width: 90%;
     .menu{
+        margin-left: 33px;
         .more{
             color: #fff;
             font-size: 24px;
@@ -132,10 +142,10 @@ $drowHoverBgColor: #e2e2e2;
         }
     }
     .logo{
-        text-align: center;
+        text-align: right;
     }
 }
 
 .menuModal{
-    width: 180px;
+    width: 198px;
 }