[WebUI] Fix issue#517 & issue#459

src/webui/src/components/TrialsDetail.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import axios from 'axios';
 import { MANAGER_IP } from '../static/const';
-import { Row, Col, Button, Tabs, Input } from 'antd';
-const Search = Input.Search;
+import { Row, Col, Tabs, Input, Select } from 'antd';
+const Option = Select.Option;
 import { TableObj, Parameters, DetailAccurPoint, TooltipForAccuracy } from '../static/interface';
 import { getFinalResult } from '../static/function';
 import Accuracy from './overview/Accuracy';
@@ -17,15 +17,18 @@ interface TrialDetailState {
     accSource: object;
     accNodata: string;
     tableListSource: Array<TableObj>;
-    tableBaseSource: Array<TableObj>;
+    searchResultSource: Array<TableObj>;
+    isHasSearch: boolean;
     experimentStatus: string;
+    entriesTable: number;
 }
 
 class TrialsDetail extends React.Component<{}, TrialDetailState> {
 
     public _isMounted = false;
     public interAccuracy = 0;
     public interTableList = 1;
+    public interAllTableList = 2;
 
     constructor(props: {}) {
         super(props);
@@ -34,8 +37,10 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
             accSource: {},
             accNodata: '',
             tableListSource: [],
-            tableBaseSource: [],
-            experimentStatus: ''
+            searchResultSource: [],
+            experimentStatus: '',
+            entriesTable: 20,
+            isHasSearch: false
         };
     }
     // trial accuracy graph
@@ -122,6 +127,91 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
     }
 
     drawTableList = () => {
+        this.isOffIntervals();
+        axios.get(`${MANAGER_IP}/trial-jobs`)
+            .then(res => {
+                if (res.status === 200) {
+                    const trialJobs = res.data;
+                    const trialTable: Array<TableObj> = [];
+                    Object.keys(trialJobs).map(item => {
+                        // only succeeded trials have finalMetricData
+                        let desc: Parameters = {
+                            parameters: {}
+                        };
+                        let duration = 0;
+                        const id = trialJobs[item].id !== undefined
+                            ? trialJobs[item].id
+                            : '';
+                        const status = trialJobs[item].status !== undefined
+                            ? trialJobs[item].status
+                            : '';
+                        const begin = trialJobs[item].startTime;
+                        const end = trialJobs[item].endTime;
+                        if (begin) {
+                            if (end) {
+                                duration = (end - begin) / 1000;
+                            } else {
+                                duration = (new Date().getTime() - begin) / 1000;
+                            }
+                        }
+                        if (trialJobs[item].hyperParameters !== undefined) {
+                            const getPara = JSON.parse(trialJobs[item].hyperParameters[0]).parameters;
+                            if (typeof getPara === 'string') {
+                                desc.parameters = JSON.parse(getPara);
+                            } else {
+                                desc.parameters = getPara;
+                            }
+                        } else {
+                            desc.parameters = { error: 'This trial\'s parameters are not available.' };
+                        }
+                        if (trialJobs[item].logPath !== undefined) {
+                            desc.logPath = trialJobs[item].logPath;
+                        }
+                        const acc = getFinalResult(trialJobs[item].finalMetricData);
+                        trialTable.push({
+                            key: trialTable.length,
+                            sequenceId: trialJobs[item].sequenceId,
+                            id: id,
+                            status: status,
+                            duration: duration,
+                            acc: acc,
+                            description: desc
+                        });
+                    });
+                    // search part data
+                    const { searchResultSource } = this.state;
+                    if (searchResultSource.length !== 0) {
+                        const temp: Array<number> = [];
+                        Object.keys(searchResultSource).map(index => {
+                            temp.push(searchResultSource[index].id);
+                        });
+                        const searchResultList: Array<TableObj> = [];
+                        for (let i = 0; i < temp.length; i++) {
+                            Object.keys(trialTable).map(key => {
+                                const item = trialTable[key];
+                                if (item.id === temp[i]) {
+                                    searchResultList.push(item);
+                                }
+                            });
+                        }
+
+                        if (this._isMounted) {
+                            this.setState(() => ({
+                                searchResultSource: searchResultList
+                            }));
+                        }
+                    }
+                    if (this._isMounted) {
+                        this.setState(() => ({
+                            tableListSource: trialTable
+                        }));
+                    }
+                }
+            });
+    }
+
+    // update all data in table
+    drawAllTableList = () => {
         this.isOffIntervals();
         axios.get(`${MANAGER_IP}/trial-jobs`)
             .then(res => {
@@ -176,7 +266,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                     if (this._isMounted) {
                         this.setState(() => ({
                             tableListSource: trialTable,
-                            tableBaseSource: trialTable
+                            searchResultSource: trialTable
                         }));
                     }
                 }
@@ -209,31 +299,29 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
         }
     }
 
-    // search a specific trial by trial No.
-    searchTrial = (value: string) => {
-        window.clearInterval(this.interTableList);
-        const { tableBaseSource } = this.state;
-        const searchResultList: Array<TableObj> = [];
-        Object.keys(tableBaseSource).map(key => {
-            const item = tableBaseSource[key];
-            if (item.sequenceId.toString() === value || item.id.includes(value)) {
-                searchResultList.push(item);
+    // search a trial by trial No. & trial id
+    searchTrial = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const targetValue = event.target.value;
+        if (targetValue === '' || targetValue === ' ') {
+            this.drawAllTableList();
+            this.interAllTableList = window.setInterval(this.drawAllTableList, 10000);
+        } else {
+            window.clearInterval(this.interAllTableList);
+            const { tableListSource } = this.state;
+            const searchResultList: Array<TableObj> = [];
+            Object.keys(tableListSource).map(key => {
+                const item = tableListSource[key];
+                if (item.sequenceId.toString() === targetValue || item.id.includes(targetValue)) {
+                    searchResultList.push(item);
+                }
+            });
+            if (this._isMounted) {
+                this.setState(() => ({
+                    searchResultSource: searchResultList,
+                    isHasSearch: true
+                }));
             }
-        });
-        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);
     }
 
     isOffIntervals = () => {
@@ -250,20 +338,39 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                             window.clearInterval(this.interTableList);
                             window.clearInterval(Duration.intervalDuration);
                             window.clearInterval(Para.intervalIDPara);
+                            window.clearInterval(this.interAllTableList);
                             break;
                         default:
                     }
                 }
             });
     }
 
+    handleEntriesSelect = (value: string) => {
+        switch (value) {
+            case '20':
+                this.setState(() => ({ entriesTable: 20 }));
+                break;
+            case '50':
+                this.setState(() => ({ entriesTable: 50 }));
+                break;
+            case '100':
+                this.setState(() => ({ entriesTable: 100 }));
+                break;
+            case 'all':
+                this.setState(() => ({ entriesTable: 100000 }));
+                break;
+            default:
+        }
+    }
+
     componentDidMount() {
 
         this._isMounted = true;
         this.drawTableList();
         this.drawPointGraph();
-        this.interAccuracy = window.setInterval(this.drawPointGraph, 10000);
         this.interTableList = window.setInterval(this.drawTableList, 10000);
+        this.interAccuracy = window.setInterval(this.drawPointGraph, 10000);
     }
 
     componentWillUnmount() {
@@ -273,11 +380,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
     }
 
     render() {
-        const {
-            accSource, accNodata,
-            tableListSource
-        } = this.state;
-
+        const { accSource, accNodata, tableListSource, entriesTable, searchResultSource, isHasSearch } = this.state;
         const titleOfacc = (
             <Title1 text="Default Metric" icon="3.png" />
         );
@@ -309,29 +412,38 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                     </Tabs>
                 </div>
                 {/* trial table list */}
+                <Title1 text="All Trials" icon="6.png" />
                 <Row className="allList">
                     <Col span={12}>
-                        <Title1 text="All Trials" icon="6.png" />
+                        <span>show</span>
+                        <Select
+                            className="entry"
+                            onSelect={this.handleEntriesSelect}
+                            defaultValue="20"
+                        >
+                            <Option value="20">20</Option>
+                            <Option value="50">50</Option>
+                            <Option value="100">100</Option>
+                            <Option value="all">All</Option>
+                        </Select>
+                        <span>entries</span>
                     </Col>
-                    <Col span={12} className="btns">
-                        <Search
+                    <Col span={12} className="right">
+                        {/* <span>Search:</span> */}
+                        <Input
+                            type="text"
                             placeholder="search by Trial No. and id"
-                            onSearch={value => this.searchTrial(value)}
-                            style={{ width: 200 }}
-                            id="searchTrial"
+                            onChange={this.searchTrial}
+                            style={{ width: 200, marginLeft: 6 }}
                         />
-                        <Button
-                            type="primary"
-                            className="tableButton resetBtn"
-                            onClick={this.resetRenderTable}
-                        >
-                            Reset
-                        </Button>
                     </Col>
                 </Row>
                 <TableList
+                    entries={entriesTable}
                     tableSource={tableListSource}
                     updateList={this.drawTableList}
+                    searchResult={searchResultSource}
+                    isHasSearch={isHasSearch}
                 />
             </div>
         );

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

@@ -21,8 +21,11 @@ echarts.registerTheme('my_theme', {
 });
 
 interface TableListProps {
+    entries: number;
     tableSource: Array<TableObj>;
+    searchResult: Array<TableObj>;
     updateList: Function;
+    isHasSearch: boolean;
 }
 
 interface TableListState {
@@ -150,7 +153,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
 
     render() {
 
-        const { tableSource } = this.props;
+        const { entries, tableSource, searchResult, isHasSearch } = this.props;
         const { intermediateOption, modalVisible } = this.state;
         let bgColor = '';
         const trialJob: Array<TrialJob> = [];
@@ -160,6 +163,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 value: item
             });
         });
+
         const columns = [{
             title: 'Trial No.',
             dataIndex: 'sequenceId',
@@ -328,7 +332,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                 <span className="error">'This trial's parameters are not available.'</span>
                             </div>
                     }
-                    <LogPath logStr={logPathRow}/>
+                    <LogPath logStr={logPathRow} />
                 </pre>
             );
         };
@@ -339,9 +343,9 @@ class TableList extends React.Component<TableListProps, TableListState> {
                     <Table
                         columns={columns}
                         expandedRowRender={openRow}
-                        dataSource={tableSource}
+                        dataSource={isHasSearch ? searchResult : tableSource}
                         className="commonTableStyle"
-                        pagination={{ pageSize: 20 }}
+                        pagination={{ pageSize: entries }}
                     />
                     <Modal
                         title="Intermediate Result"

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

@@ -1,19 +1,20 @@
 .allList{
-    background-color: #b3b3b3;
-    padding-right: 14px;
+    width: 96%;
+    margin: 0 auto;
+    .right{
+        text-align: right;
+    }
+    .entry{
+        width: 120px;
+        margin: 0 6px;
+    }
     .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/trialsDetail.scss

@@ -66,3 +66,7 @@
         margin-bottom: 10px;
     }
 }
+
+.allList{
+    margin-top: 15px;
+}