From 93fb19ba7e65196baf6120c38c1c1657ec80426c Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Wed, 25 Nov 2020 11:56:16 +0100
Subject: [PATCH] [ML] Persisted URL state for Anomalies table

---
 .../anomalies_table/anomalies_table.js        | 66 +++++++++++++++----
 .../ml/public/application/util/url_state.tsx  |  2 +-
 2 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table.js b/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table.js
index 0a2c67a3b0dcb..ebc782fe4625b 100644
--- a/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table.js
+++ b/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table.js
@@ -25,8 +25,9 @@ import { mlTableService } from '../../services/table_service';
 import { RuleEditorFlyout } from '../rule_editor';
 import { ml } from '../../services/ml_api_service';
 import { INFLUENCERS_LIMIT, ANOMALIES_TABLE_TABS, MAX_CHARS } from './anomalies_table_constants';
+import { usePageUrlState } from '../../util/url_state';
 
-class AnomaliesTable extends Component {
+export class AnomaliesTableInternal extends Component {
   constructor(props) {
     super(props);
 
@@ -145,8 +146,20 @@ class AnomaliesTable extends Component {
     });
   };
 
+  onTableChange = ({ page, sort }) => {
+    const { tableState, updateTableState } = this.props;
+    const result = {
+      pageIndex: page && page.index !== undefined ? page.index : tableState.pageIndex,
+      pageSize: page && page.size !== undefined ? page.size : tableState.pageSize,
+      sortField: sort && sort.field !== undefined ? sort.field : tableState.sortField,
+      sortDirection:
+        sort && sort.direction !== undefined ? sort.direction : tableState.sortDirection,
+    };
+    updateTableState(result);
+  };
+
   render() {
-    const { bounds, tableData, filter, influencerFilter } = this.props;
+    const { bounds, tableData, filter, influencerFilter, tableState } = this.props;
 
     if (
       tableData === undefined ||
@@ -186,8 +199,8 @@ class AnomaliesTable extends Component {
 
     const sorting = {
       sort: {
-        field: 'severity',
-        direction: 'desc',
+        field: tableState.sortField,
+        direction: tableState.sortDirection,
       },
     };
 
@@ -199,8 +212,15 @@ class AnomaliesTable extends Component {
       };
     };
 
+    const pagination = {
+      pageIndex: tableState.pageIndex,
+      pageSize: tableState.pageSize,
+      totalItemCount: tableData.anomalies.length,
+      pageSizeOptions: [10, 25, 100],
+    };
+
     return (
-      <React.Fragment>
+      <>
         <RuleEditorFlyout
           setShowFunction={this.setShowRuleEditorFlyoutFunction}
           unsetShowFunction={this.unsetShowRuleEditorFlyoutFunction}
@@ -209,26 +229,46 @@ class AnomaliesTable extends Component {
           className="ml-anomalies-table eui-textOverflowWrap"
           items={tableData.anomalies}
           columns={columns}
-          pagination={{
-            pageSizeOptions: [10, 25, 100],
-            initialPageSize: 25,
-          }}
+          pagination={pagination}
           sorting={sorting}
           itemId="rowId"
           itemIdToExpandedRowMap={this.state.itemIdToExpandedRowMap}
           compressed={true}
           rowProps={getRowProps}
           data-test-subj="mlAnomaliesTable"
+          onTableChange={this.onTableChange}
         />
-      </React.Fragment>
+      </>
     );
   }
 }
-AnomaliesTable.propTypes = {
+
+export const getDefaultAnomaliesTableState = () => ({
+  pageIndex: 0,
+  pageSize: 25,
+  sortField: 'severity',
+  sortDirection: 'desc',
+});
+
+export const AnomaliesTable = (props) => {
+  const [tableState, updateTableState] = usePageUrlState(
+    'mlAnomaliesTable',
+    getDefaultAnomaliesTableState()
+  );
+  return (
+    <AnomaliesTableInternal
+      {...props}
+      tableState={tableState}
+      updateTableState={updateTableState}
+    />
+  );
+};
+
+AnomaliesTableInternal.propTypes = {
   bounds: PropTypes.object.isRequired,
   tableData: PropTypes.object,
   filter: PropTypes.func,
   influencerFilter: PropTypes.func,
+  tableState: PropTypes.object.isRequired,
+  updateTableState: PropTypes.func.isRequired,
 };
-
-export { AnomaliesTable };
diff --git a/x-pack/plugins/ml/public/application/util/url_state.tsx b/x-pack/plugins/ml/public/application/util/url_state.tsx
index fdc6dd135cd69..6cdc069096dcc 100644
--- a/x-pack/plugins/ml/public/application/util/url_state.tsx
+++ b/x-pack/plugins/ml/public/application/util/url_state.tsx
@@ -162,7 +162,7 @@ export const useUrlState = (accessor: Accessor) => {
   return [urlState, setUrlState];
 };
 
-type AppStateKey = 'mlSelectSeverity' | 'mlSelectInterval' | MlPages;
+type AppStateKey = 'mlSelectSeverity' | 'mlSelectInterval' | 'mlAnomaliesTable' | MlPages;
 
 /**
  * Hook for managing the URL state of the page.