[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,11 +248,20 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
     }
 
     select = () => {
+        const { isdisabledFresh } = this.state;
         return (
+            <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"
-                className="interval"
                 >
                     <Option value="close">Disable Auto Refresh</Option>
                     <Option value="10">Refresh every 10s</Option>
@@ -261,13 +269,20 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
                     <Option value="30">Refresh every 30s</Option>
                     <Option value="60">Refresh every 1min</Option>
                 </Select>
+            </div>
         );
     }
 
     fresh = (event: React.SyntheticEvent<EventTarget>) => {
         event.preventDefault();
+        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,6 +299,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
         const feed = `https://github.com/Microsoft/nni/issues/new?labels=${version}`;
         return (
             <Row>
+                <Col span={18}>
                     <MediaQuery query="(min-width: 1299px)">
                         <Row className="nav">
                             <ul className="link">
@@ -307,9 +323,6 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
                                     </Link>
                                 </li>
                                 <li className="feedback">
-                                <span className="fresh" onClick={this.fresh}>
-                                    <Icon type="sync" /><span>Fresh</span>
-                                </span>
                                     <Dropdown
                                         className="dropdown"
                                         overlay={this.menu()}
@@ -333,25 +346,28 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
                             </ul>
                         </Row>
                     </MediaQuery>
+                </Col>
+                <Col span={18}>
                     <MediaQuery query="(max-width: 1299px)">
                         <Row className="little">
-                        <Col span={6} className="menu">
+                            <Col span={1} className="menu">
                                 <Dropdown overlay={this.navigationBar()} trigger={['click']}>
                                     <Icon type="unordered-list" className="more" />
                                 </Dropdown>
                             </Col>
-                        <Col span={10} className="logo">
+                            <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>
                             </Col>
                         </Row>
                     </MediaQuery>
-                {this.select()}
+                </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

@@ -175,14 +175,15 @@ class Duration extends React.Component<DurationProps, DurationState> {
                 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

@@ -136,7 +136,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                 },
                 yAxis: {
                     type: 'value',
-                    name: 'Scape'
+                    name: 'metric'
                 }
             };
             if (this._isMounted) {
@@ -226,14 +226,12 @@ 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) {
@@ -251,6 +249,10 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                 if (length !== beforeLength) {
                     return true;
                 }
+                if (beforeSource.length !== source.length) {
+                    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;
@@ -263,6 +265,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                     }
                 }
             }
+        }
 
         return false;
     }
@@ -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;
 }