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

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

* delete unuseful code

* Update

* default 20

src/webui/src/components/Tensor.tsx

-import * as React from 'react';
-import axios from 'axios';
-import { message } from 'antd';
-import { MANAGER_IP } from '../static/const';
-import '../static/style/tensor.scss';
-
-interface TensorState {
-    urlTensor: string;
-    idTensor: string;
-}
-
-message.config({
-    top: 250,
-    duration: 2,
-});
-
-class Tensor extends React.Component<{}, TensorState> {
-
-    public _isMounted = false;
-
-    constructor(props: {}) {
-        super(props);
-        this.state = {
-            urlTensor: '',
-            idTensor: ''
-        };
-    }
-
-    geturl(): void {
-        Object.keys(this.props).forEach(item => {
-            if (item === 'location') {
-                let tensorId = this.props[item].state;
-                if (tensorId !== undefined && this._isMounted) {
-                    this.setState({ idTensor: tensorId }, () => {
-                        axios(`${MANAGER_IP}/tensorboard`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json;charset=utf-8'
-                            },
-                            params: {
-                                job_ids: tensorId
-                            }
-                        }).then(res => {
-                            if (res.status === 200) {
-                                setTimeout(
-                                    () => {
-                                        const url = new URL(res.data.endPoint);
-                                        if (url.hostname === 'localhost') {
-                                            url.hostname = window.location.hostname;
-                                        }
-                                        this.setState(
-                                            { urlTensor: url.href }, 
-                                            () => message.success('Successful send'));
-                                    },
-                                    1000);
-                            } else {
-                                message.error('fail to link to tensorboard');
-                            }
-                        });
-                    });
-                } else {
-                    message.warning('Please link to Trial Status page to select a trial!');
-                }
-            }
-        });
-    }
-
-    componentDidMount() {
-        this._isMounted = true;
-        this.geturl();
-    }
-
-    componentWillUnmount() {
-        this._isMounted = false;
-    }
-
-    render() {
-        const { urlTensor } = this.state;
-        return (
-            <div className="tensor">
-                <div className="title">TensorBoard</div>
-                <div className="tenhttpage">
-                    <iframe
-                        frameBorder="no"
-                        src={urlTensor}
-                        sandbox="allow-scripts allow-same-origin"
-                    />
-                </div>
-            </div>
-        );
-    }
-}
-
-export default Tensor;
\ No newline at end of file

src/webui/src/components/TrialsDetail.tsx

 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

 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

-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

+.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;
+    }
+}
+
+

src/webui/src/static/style/tensor.scss

-/* iframe include tensorborad page */
-.tensor{
-    width: 98%;
-    height: 800px;
-    margin: 25px auto;
-}
-.tensor .title{
-    color: #333;
-    font-size: 16px;
-}
-.tensor iframe{
-    width: 100%;
-    height: 840px;
-    border: none;
-    margin-top: 10px;
-}
\ No newline at end of file

src/webui/src/static/style/trialsDetail.scss

@@ -25,11 +25,6 @@
     .panelTitle{
         margin-right: 14px;
         border-right: 2px solid #e8e8e8;
-        
-        span{
-            font-size: 18px;
-            font-family: 'Segoe';
-        }
     }
 }
 

src/webui/tslint.json

@@ -40,7 +40,7 @@
           "static-before-instance",
           "variables-before-functions"
       ],
-      "no-any": false,
+      "no-any": true,
       "no-arg": true,
       "no-bitwise": true,
       "no-console": [