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