add pagination & hotfix intermediate graph

src/webui/package.json

@@ -40,6 +40,8 @@
     "react-dom": "^16.8.6",
     "react-json-tree": "^0.11.2",
     "react-monaco-editor": "^0.32.1",
+    "react-paginate": "^6.3.2",
+    "react-pagination": "^1.0.0",
     "react-router": "^3.2.3",
     "react-table": "^7.0.0-rc.15",
     "resolve": "1.10.0",
@@ -74,7 +76,7 @@
     "eslint-plugin-react": "7.12.4",
     "eslint-plugin-react-hooks": "^1.5.0",
     "npx": "^10.2.0",
-    "typescript": "3.4.5"
+    "typescript": "^3.8.0"
   },
   "scripts": {
     "start": "node --max-old-space-size=3072 scripts/start.js",

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

@@ -128,7 +128,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                         id: 'dataZoomY',
                         type: 'inside',
                         yAxisIndex: [0],
-                        filterMode: 'empty',
+                        filterMode: 'none',
                         start: startMediaY,
                         end: endMediaY
                     }

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

@@ -3,8 +3,9 @@ import axios from 'axios';
 import ReactEcharts from 'echarts-for-react';
 import {
     Stack, Dropdown, DetailsList, IDetailsListProps, DetailsListLayoutMode,
-    PrimaryButton, Modal, IDropdownOption, IColumn, Selection, SelectionMode, IconButton, TooltipHost
+    PrimaryButton, Modal, IDropdownOption, IColumn, Selection, SelectionMode, IconButton, TooltipHost, IStackTokens
 } from 'office-ui-fabric-react';
+import ReactPaginate from 'react-paginate';
 import { LineChart, blocked, copy } from '../Buttons/Icon';
 import { MANAGER_IP, COLUMNPro } from '../../static/const';
 import { convertDuration, formatTimestamp, intermediateGraphOption, parseMetrics } from '../../static/function';
@@ -19,10 +20,12 @@ import { contentStyles, iconButtonStyles } from '../Buttons/ModalTheme';
 import '../../static/style/search.scss';
 import '../../static/style/tableStatus.css';
 import '../../static/style/logPath.scss';
-import '../../static/style/search.scss';
 import '../../static/style/table.scss';
 import '../../static/style/button.scss';
 import '../../static/style/openRow.scss';
+import '../../static/style/pagination.scss';
+
+
 const echarts = require('echarts/lib/echarts');
 require('echarts/lib/chart/line');
 require('echarts/lib/component/tooltip');
@@ -31,6 +34,11 @@ echarts.registerTheme('my_theme', {
     color: '#3c8dbc'
 });
 
+const horizontalGapStackTokens: IStackTokens = {
+    childrenGap: 20,
+    padding: 10,
+};
+
 interface TableListProps {
     pageSize: number;
     tableSource: Array<TableRecord>;
@@ -66,6 +74,11 @@ interface TableListState {
     allColumnList: string[];
     tableSourceForSort: Array<TableRecord>;
     sortMessage: SortInfo;
+    offset: number;
+    data: Array<TableRecord>;
+    perPage: number;
+    currentPage: number;
+    pageCount: number;
 }
 
 class TableList extends React.Component<TableListProps, TableListState> {
@@ -96,15 +109,19 @@ class TableList extends React.Component<TableListProps, TableListState> {
             modalIntermediateHeight: window.innerHeight,
             tableColumns: this.initTableColumnList(this.props.columnList),
             allColumnList: this.getAllColumnKeys(),
-            tableSourceForSort: this.props.tableSource,
-            sortMessage: { field: '', isDescend: false }
+            sortMessage: { field: '', isDescend: false },
+            offset: 0,
+            data: [],
+            perPage: 20,
+            currentPage: 0,
+            pageCount: 0,
+            tableSourceForSort: this.props.tableSource
         };
     }
 
     // sort for table column
     onColumnClick = (ev: React.MouseEvent<HTMLElement>, getColumn: IColumn): void => {
-        const { tableColumns } = this.state;
-        const { tableSource } = this.props;
+        const { tableColumns, tableSourceForSort } = this.state;
         const newColumns: IColumn[] = tableColumns.slice();
         const currColumn: IColumn = newColumns.filter(item => getColumn.key === item.key)[0];
         newColumns.forEach((newCol: IColumn) => {
@@ -113,11 +130,11 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 currColumn.isSorted = true;
             } else {
                 newCol.isSorted = false;
-                newCol.isSortedDescending = true;
+                newCol.isSortedDescending =  true;
             }
         });
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const newItems = this.copyAndSort(tableSource, currColumn.fieldName!, currColumn.isSortedDescending);
+        const newItems = this.copyAndSort(tableSourceForSort, currColumn.fieldName!, currColumn.isSortedDescending);
         this.setState({
             tableColumns: newColumns,
             tableSourceForSort: newItems,
@@ -554,27 +571,69 @@ class TableList extends React.Component<TableListProps, TableListState> {
 
     componentDidMount(): void {
         window.addEventListener('resize', this.onWindowResize);
+        this.updateData()
     }
 
     componentDidUpdate(prevProps: TableListProps): void {
         if (this.props.columnList !== prevProps.columnList || this.props.tableSource !== prevProps.tableSource) {
-            const { columnList, tableSource } = this.props;
+            const { columnList } = this.props;
             this.setState({
-                tableSourceForSort: tableSource,
                 tableColumns: this.initTableColumnList(columnList),
                 allColumnList: this.getAllColumnKeys()
+                }, () => {this.updateData();
             });
         }
     }
 
+    updateData(): void {
+        const tableSource: Array<TableRecord> = JSON.parse(JSON.stringify(this.props.tableSource));
+
+        const tableSlice = tableSource.slice(this.state.offset, this.state.offset + this.state.perPage)
+
+        this.setState({
+            tableSourceForSort: tableSlice,
+            pageCount: Math.ceil(tableSource.length / this.state.perPage),
+        });
+    }
+
+    handlePageClick = (evt: any): void => {
+        const selectedPage = evt.selected;
+        const offset = selectedPage * this.state.perPage;
+
+        this.setState({ 
+            currentPage: selectedPage, 
+            offset: offset }, 
+            () => { this.updateData();
+        });
+    }
+
+    updateperPage = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
+        // clear input value and re-render table
+        if (item !== undefined) {
+            this.setState({ 
+                perPage: item.key === 'all' ? this.props.tableSource.length: Number(item.key) },
+                () => {this.updateData();
+            });
+        }
+    }
+
+
     render(): React.ReactNode {
         const { intermediateKey, modalIntermediateWidth, modalIntermediateHeight,
             tableColumns, allColumnList, isShowColumn, modalVisible,
             selectRows, isShowCompareModal, intermediateOtherKeys,
             isShowCustomizedModal, copyTrialId, intermediateOption, sortMessage
         } = this.state;
         const { columnList } = this.props;
-        const tableSource: Array<TableRecord> = JSON.parse(JSON.stringify(this.state.tableSourceForSort));
+        const tableSource = this.state.tableSourceForSort
+        const perPageOptions = [
+            { key: '10', text: '10 items per page'},
+            { key: '20', text: '20 items per page'},
+            { key: '50', text: '50 items per page'},
+            { key: 'all', text: 'All items'},
+        ];
+
+
         if (sortMessage.field !== '') {
             tableSource.sort(function (a, b): any {
                 if (a[sortMessage.field] === undefined) {
@@ -586,6 +645,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 return (sortMessage.isDescend ? a[sortMessage.field] < b[sortMessage.field] : a[sortMessage.field] > b[sortMessage.field]) ? 1 : -1;
             });
         }
+
         return (
             <Stack>
                 <div id="tableList">
@@ -599,7 +659,32 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         selectionMode={SelectionMode.multiple}
                         selection={this.getSelectedRows}
                     />
-
+
+                    <Stack horizontal horizontalAlign="end" verticalAlign="baseline" styles={{root:{padding:10}}} tokens={horizontalGapStackTokens}>
+                        <Dropdown
+                        selectedKey={this.state.perPage === this.props.tableSource.length ? 'all':String(this.state.perPage)}
+                        options={perPageOptions}
+                        onChange={this.updateperPage}
+                        styles={{dropdown: { width: 150}}}/>
+
+                        {/* this.props.tableSource.length > this.state.perPage &&  */}
+                        <ReactPaginate
+                        previousLabel={"<"}
+                        nextLabel={">"}
+                        breakLabel={"..."}
+                        breakClassName={"break"}
+                        pageCount={this.state.pageCount}
+                        marginPagesDisplayed={2}
+                        pageRangeDisplayed={2}
+                        onPageChange={this.handlePageClick}
+                        containerClassName={(this.props.tableSource.length == 0 ? "pagination hidden" : "pagination" )}
+                        subContainerClassName={"pages pagination"}
+                        disableInitialCallback={false}
+                        activeClassName={"active"}/>
+
+                    </Stack>
+
+                {/* /> */}
                 </div>
                 {/* Intermediate Result Modal */}
                 <Modal

src/webui/src/static/style/pagination.scss

@@ -0,0 +1,36 @@
+.pagination {
+    margin: 0 10px;
+    display: flex;
+    list-style: none;
+    outline: none;
+    .hidden {
+        display: none;
+    }
+    .disabled {
+        display: none
+    }
+    .active {
+        a, .span, a:hover,  a:focus, span:hover, span:focus {
+            background-color: #0071bc ;
+            border-color: #0071bc ;
+            color: #fff;
+            outline: none;
+        }
+    }
+    li:first-child {
+        a, span {
+            border-radius: unset
+        }
+    }
+    li {
+        a{
+            padding: 5px 10px;
+            outline: none;
+            cursor: pointer;
+            color: #0071bc
+        }
+        span {
+            color: #0071bc
+        }
+    }
+}