Fix the issue#211: WebUI does not support search for a specific Trial (

microsoft#355)

* Fix the issue#211: WebUI does not support search for a specific Trial

* delete unuseful code

* Update

* default 20

src/webui/src/components/TrialsDetail.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import axios from 'axios';
 import { MANAGER_IP } from '../static/const';
-import { Row, Tabs } from 'antd';
+import { Row, Col, Button, Tabs, Input } from 'antd';
+const Search = Input.Search;
 import { TableObj, Parameters, AccurPoint } from '../static/interface';
 import Accuracy from './overview/Accuracy';
 import Duration from './trial-detail/Duration';
@@ -22,6 +23,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
     public _isMounted = false;
     public interAccuracy = 0;
     public interTableList = 1;
+
     constructor(props: {}) {
         super(props);
 
@@ -30,7 +32,6 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
             accNodata: '',
             tableListSource: []
         };
-
     }
     // trial accuracy graph
     drawPointGraph = () => {
@@ -202,11 +203,38 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
         }
     }
 
+    // search a specific trial by trial No.
+    searchTrialNo = (value: string) => {
+
+        window.clearInterval(this.interTableList);
+        const { tableListSource } = this.state;
+        const searchResultList: Array<TableObj> = [];
+        Object.keys(tableListSource).map(key => {
+            const item = tableListSource[key];
+            if (item.sequenceId.toString() === value) {
+                searchResultList.push(item);
+            }
+        });
+        this.setState(() => ({
+            tableListSource: searchResultList
+        }));
+    }
+
+    // reset btn click: rerender table
+    resetRenderTable = () => {
+
+        const searchInput = document.getElementById('searchTrial') as HTMLInputElement;
+        if (searchInput !== null) {
+            searchInput.value = '';
+        }
+        this.drawTableList();
+        this.interTableList = window.setInterval(this.drawTableList, 10000);
+    }
     componentDidMount() {
 
         this._isMounted = true;
-        this.drawPointGraph();
         this.drawTableList();
+        this.drawPointGraph();
         this.interAccuracy = window.setInterval(this.drawPointGraph, 10000);
         this.interTableList = window.setInterval(this.drawTableList, 10000);
     }
@@ -253,6 +281,26 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                     </Tabs>
                 </div>
                 {/* trial table list */}
+                <Row className="allList">
+                    <Col span={12}>
+                        <Title1 text="All Trials" icon="6.png" />
+                    </Col>
+                    <Col span={12} className="btns">
+                        <Search
+                            placeholder="input search Trial No."
+                            onSearch={value => this.searchTrialNo(value)}
+                            style={{ width: 200 }}
+                            id="searchTrial"
+                        />
+                        <Button
+                            type="primary"
+                            className="tableButton resetBtn"
+                            onClick={this.resetRenderTable}
+                        >
+                            Reset
+                        </Button>
+                    </Col>
+                </Row>
                 <TableList
                     tableSource={tableListSource}
                     updateList={this.drawTableList}

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

@@ -429,7 +429,7 @@ class Para extends React.Component<{}, ParaState> {
                             </Select>
                             <Button
                                 type="primary"
-                                className="changeBtu"
+                                className="changeBtu tableButton"
                                 onClick={this.swapBtn}
                             >
                                 Confirm

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

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import axios from 'axios';
 import JSONTree from 'react-json-tree';
-import { browserHistory } from 'react-router';
 import ReactEcharts from 'echarts-for-react';
 import { Row, Table, Button, Popconfirm, Modal, message } from 'antd';
 import { MANAGER_IP, trialJobStatus } from '../../static/const';
 import { convertDuration } from '../../static/function';
 import { TableObj, TrialJob } from '../../static/interface';
-import Title1 from '../overview/Title1';
 require('../../static/style/tableStatus.css');
 require('../../static/style/logPath.scss');
+require('../../static/style/search.scss');
 require('../../static/style/table.scss');
 require('../../static/style/button.scss');
 const echarts = require('echarts/lib/echarts');
@@ -136,17 +135,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
             });
     }
 
-    // get tensorflow address
-    getTensorpage = (id: string) => {
-
-        let path = {
-            pathname: '/tensor',
-            state: id
-        };
-
-        browserHistory.push(path);
-    }
-
     componentDidMount() {
         this._isMounted = true;
     }
@@ -156,6 +144,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
     }
 
     render() {
+
         const { tableSource } = this.props;
         const { intermediateOption, modalVisible } = this.state;
         let bgColor = '';
@@ -172,7 +161,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
             key: 'sequenceId',
             width: 120,
             className: 'tableHead',
-            sorter: (a: TableObj, b: TableObj) => (a.sequenceId as number) - (b.sequenceId as number)
+            sorter: (a: TableObj, b: TableObj) => (a.sequenceId as number) - (b.sequenceId as number),
         }, {
             title: 'Id',
             dataIndex: 'id',
@@ -286,18 +275,18 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 );
             },
         }, {
-            title: 'Tensor',
-            dataIndex: 'tensor',
-            key: 'tensor',
+            title: 'Intermediate Result',
+            dataIndex: 'intermediate',
+            key: 'intermediate',
             width: '16%',
             render: (text: string, record: TableObj) => {
                 return (
                     <Button
                         type="primary"
                         className="tableButton"
-                        onClick={this.getTensorpage.bind(this, record.id)}
+                        onClick={this.showIntermediateModal.bind(this, record.id)}
                     >
-                        TensorBoard
+                        Intermediate
                     </Button>
                 );
             },
@@ -347,27 +336,19 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                 <span className="logContent">{logPathRow}</span>
                             </div>
                     }
-                    <Button
-                        type="primary"
-                        className="tableButton"
-                        onClick={this.showIntermediateModal.bind(this, record.id)}
-                    >
-                        Intermediate Result
-                    </Button>
                 </pre>
             );
         };
 
         return (
             <Row className="tableList">
-                <Row><Title1 text="All Trials" icon="6.png" /></Row>
                 <div id="tableList">
                     <Table
                         columns={columns}
                         expandedRowRender={openRow}
                         dataSource={tableSource}
                         className="commonTableStyle"
-                        pagination={{ pageSize: 10 }}
+                        pagination={{ pageSize: 20 }}
                     />
                     <Modal
                         title="Intermediate Result"

src/webui/src/index.tsx

@@ -4,11 +4,9 @@ import * as ReactDOM from 'react-dom';
 import App from './App';
 import { Router, Route, browserHistory, IndexRedirect } from 'react-router';
 import registerServiceWorker from './registerServiceWorker';
-import Tensor from './components/Tensor';
 import Control from './components/Control';
 import Overview from './components/Overview';
 import TrialsDetail from './components/TrialsDetail';
-// import TrialsDetail from './components/TrialsDetail';
 import './index.css';
 
 ReactDOM.render(
@@ -17,7 +15,6 @@ ReactDOM.render(
             <IndexRedirect to="/oview" />
             <Route path="/oview" component={Overview} />
             <Route path="/detail" component={TrialsDetail} />
-            <Route path="/tensor" component={Tensor} />
             <Route path="/control" component={Control} />
         </Route>
     </Router>,

src/webui/src/static/style/button.scss

@@ -1,20 +1,26 @@
-Button.changeBtu, Button.changeBtu:hover, Button.changeBtu:focus{
-    background-color: #3c8dbc;
-    border-color: #3c8dbc;
-    line-height: 30px;
-}
+$btnBgcolor: #3c8dbc;
 
 Button.tableButton{
-    background:	#3c8dbc;
-    border-color: #3c8dbc;
+    background:	$btnBgcolor;
+    border-color: $btnBgcolor;
     height: 26px;
-    line-height: 26px;
+    font-size: 14px;
     margin-top: 2px;
+    border-radius: 0;
 }
 
 /* kill btn style: delete its own hover style */
 /* after button click the color not change */
 Button.tableButton:hover, Button.tableButton:focus{
-    background-color: #3c8dbc;
-    border-color: #3c8dbc;
-}
+    background-color: $btnBgcolor;
+    border-color: $btnBgcolor;
+}
+
+Button.changeBtu{
+    height: 32px;
+}
+
+.ant-input, .ant-select-selection{
+    border-radius: 0 !important;
+}
+

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

@@ -0,0 +1,19 @@
+.allList{
+    background-color: #b3b3b3;
+    padding-right: 14px;
+    .btns{
+        height: 32px;
+        text-align: right;
+        .ant-input-search{
+            height: 32px;
+        }
+    }
+    Button.resetBtn{
+        height: 32px;
+        font-size: 15px;
+        position: relative;
+        top: 1px;
+    }
+}
+
+