[Fix issue#1208] Support search parameters (#1382)

* support search parameters

* update font size

* update placeholder

src/webui/src/components/TrialsDetail.tsx

 import * as React from 'react';
 import axios from 'axios';
 import { MANAGER_IP } from '../static/const';
-import { Row, Col, Tabs, Input, Select, Button, Icon } from 'antd';
+import { Row, Col, Tabs, Select, Button, Icon } from 'antd';
 const Option = Select.Option;
 import { TableObj, Parameters } from '../static/interface';
 import { getFinal } from '../static/function';
@@ -13,6 +13,7 @@ import Intermediate from './trial-detail/Intermeidate';
 import TableList from './trial-detail/TableList';
 const TabPane = Tabs.TabPane;
 import '../static/style/trialsDetail.scss';
+import '../static/style/search.scss';
 
 interface TrialDetailState {
     accSource: object;
@@ -31,6 +32,8 @@ interface TrialDetailState {
     hyperCounts: number; // user click the hyper-parameter counts
     durationCounts: number;
     intermediateCounts: number;
+    searchFilter: string;
+    searchPlaceHolder: string;
 }
 
 interface TrialsDetailProps {
@@ -46,6 +49,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
     public interAllTableList = 2;
 
     public tableList: TableList | null;
+    public searchInput: HTMLInputElement | null;
 
     private titleOfacc = (
         <Title1 text="Default metric" icon="3.png" />
@@ -85,7 +89,9 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
             isMultiPhase: false,
             hyperCounts: 0,
             durationCounts: 0,
-            intermediateCounts: 0
+            intermediateCounts: 0,
+            searchFilter: 'id',
+            searchPlaceHolder: 'Search by id'
         };
     }
 
@@ -212,16 +218,34 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                 }));
             }
         } else {
-            const { tableListSource } = this.state;
+            const { tableListSource, searchFilter } = this.state;
             const searchResultList: Array<TableObj> = [];
             Object.keys(tableListSource).map(key => {
                 const item = tableListSource[key];
-                if (item.sequenceId.toString() === targetValue
-                    || item.id.includes(targetValue)
-                    || item.status.toUpperCase().includes(targetValue.toUpperCase())
-                ) {
+                switch (searchFilter) {
+                    case 'id':
+                        if (item.id.toUpperCase().includes(targetValue.toUpperCase())) {
+                            searchResultList.push(item);
+                        }
+                        break;
+                    case 'Trial No.':
+                        if (item.sequenceId.toString() === targetValue) {
+                            searchResultList.push(item);
+                        }
+                        break;
+                    case 'status':
+                        if (item.status.toUpperCase().includes(targetValue.toUpperCase())) {
+                            searchResultList.push(item);
+                        }
+                        break;
+                    case 'parameters':
+                        const strParameters = JSON.stringify(item.description.parameters, null, 4);
+                        if (strParameters.includes(targetValue)) {
                             searchResultList.push(item);
                         }
+                        break;
+                    default:
+                }
             });
             if (this._isMounted) {
                 this.setState(() => ({
@@ -282,6 +306,19 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
         alert('TableList component was not properly initialized.');
     }
 
+    getSearchFilter = (value: string) => {
+        // clear input value and re-render table
+        if (this.searchInput !== null) {
+            this.searchInput.value = '';
+            if (this._isMounted === true) {
+                this.setState(() => ({ isHasSearch: false }));
+            }
+        }
+        if (this._isMounted === true) {
+            this.setState(() => ({ searchFilter: value, searchPlaceHolder: `Search by ${value}` }));
+        }
+    }
+
     // get and set logCollection val
     checkExperimentPlatform = () => {
         axios(`${MANAGER_IP}/experiment`, {
@@ -344,7 +381,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
         const {
             tableListSource, searchResultSource, isHasSearch, isMultiPhase,
             entriesTable, experimentPlatform, searchSpace, experimentLogCollection,
-            whichGraph
+            whichGraph, searchPlaceHolder
         } = this.state;
         const source = isHasSearch ? searchResultSource : tableListSource;
         return (
@@ -408,11 +445,19 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                         >
                             Compare
                         </Button>
-                        <Input
+                        <Select defaultValue="id" className="filter" onSelect={this.getSearchFilter}>
+                            <Option value="id">Id</Option>
+                            <Option value="Trial No.">Trial No.</Option>
+                            <Option value="status">Status</Option>
+                            <Option value="parameters">Parameters</Option>
+                        </Select>
+                        <input
                             type="text"
-                            placeholder="Search by id, trial No. or status"
+                            className="search-input"
+                            placeholder={searchPlaceHolder}
                             onChange={this.searchTrial}
-                            style={{ width: 230, marginLeft: 6 }}
+                            style={{ width: 230 }}
+                            ref={text => (this.searchInput) = text}
                         />
                     </Col>
                 </Row>

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

@@ -321,9 +321,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)
                     });
                     break;
                 case 'ID':

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

@@ -11,6 +11,24 @@
             color: #0071BC;
             border-radius: 0;
         }
+        .filter{
+            width: 100px;
+            margin-left: 8px;
+            .ant-select-selection-selected-value{
+                font-size: 14px;
+            }
+        }
+        .search-input{
+            height: 32px;
+            outline: none;
+            border: 1px solid #d9d9d9;
+            border-left: none;
+            padding-left: 8px;
+            color: #333;
+        }
+        .search-input::placeholder{
+            color: DarkGray;
+        }
     }
     .entry{
         width: 120px;