Fix page size url params in Index management

elastic · Aug 20, 2024 · 2aeb917 · 2aeb917
1 parent 7754207
commit 2aeb917
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 23 deletions.
diff --git a/...s/index_management/public/application/sections/home/index_list/index_table/index_table.js b/...s/index_management/public/application/sections/home/index_list/index_table/index_table.js
@@ -48,7 +48,7 @@ import { renderBadges } from '../../../../lib/render_badges';
 import { NoMatch, DataHealth } from '../../../../components';
 import { IndexActionsContextMenu } from '../index_actions_context_menu';
 import { CreateIndexButton } from '../create_index/create_index_button';
-import { IndexTablePagination } from './index_table_pagination';
+import { IndexTablePagination, PAGE_SIZE_OPTIONS } from './index_table_pagination';
 
 const getColumnConfigs = ({
   showIndexStats,
@@ -188,8 +188,9 @@ export class IndexTable extends Component {
   componentDidMount() {
     this.props.loadIndices();
 
-    const { filterChanged, toggleNameToVisibleMap, toggleChanged } = this.props;
-    const { filter, ...rest } = this.readURLParams();
+    const { filterChanged, pageSizeChanged, pageChanged, toggleNameToVisibleMap, toggleChanged } =
+      this.props;
+    const { filter, pageSize, pageIndex, ...rest } = this.readURLParams();
 
     if (filter) {
       try {
@@ -199,6 +200,12 @@ export class IndexTable extends Component {
         this.setState({ filterError: e });
       }
     }
+    if (pageSize && PAGE_SIZE_OPTIONS.includes(pageSize)) {
+      pageSizeChanged(pageSize);
+    }
+    if (pageIndex && pageIndex > -1) {
+      pageChanged(pageIndex);
+    }
     const toggleParams = Object.keys(rest);
     const toggles = Object.keys(toggleNameToVisibleMap);
     for (const toggleParam of toggleParams) {
@@ -706,7 +713,7 @@ export class IndexTable extends Component {
                   pageChanged={pageChanged}
                   pageSizeChanged={pageSizeChanged}
                   readURLParams={() => this.readURLParams()}
-                  setURLParam={() => this.setURLParam()}
+                  setURLParam={(paramName, value) => this.setURLParam(paramName, value)}
                 />
               ) : null}
             </EuiPageSection>

diff --git a/...gement/public/application/sections/home/index_list/index_table/index_table_pagination.tsx b/...gement/public/application/sections/home/index_list/index_table/index_table_pagination.tsx
@@ -18,7 +18,7 @@ interface IndexTablePaginationProps {
   setURLParam: any;
 }
 
-const PAGE_SIZE_OPTIONS = [10, 50, 100];
+export const PAGE_SIZE_OPTIONS = [10, 50, 100];
 
 export const IndexTablePagination = ({
   pager,
@@ -29,37 +29,32 @@ export const IndexTablePagination = ({
 }: IndexTablePaginationProps) => {
   const { pageSize, onTableChange } = useEuiTablePersist<IndexModule>({
     tableId: 'indices',
-    customOnTableChange: ({ page }) => {
-      setURLParam('pageSize', page?.size);
-      pageSizeChanged(page?.size);
-    },
     initialPageSize: pager.itemsPerPage,
+    pageSizeOptions: PAGE_SIZE_OPTIONS,
   });
 
-  if (pager.itemsPerPage !== pageSize) {
-    pageSizeChanged(pageSize);
-  }
-
   const { pageSize: urlParamPageSize } = readURLParams();
 
-  if (
-    urlParamPageSize !== undefined &&
-    urlParamPageSize !== pageSize &&
-    PAGE_SIZE_OPTIONS.includes(urlParamPageSize)
-  ) {
-    pageSizeChanged(urlParamPageSize);
+  // Update local storage if there is a url param for page size
+  if (PAGE_SIZE_OPTIONS.includes(urlParamPageSize) && urlParamPageSize !== pageSize) {
     onTableChange({ page: { size: urlParamPageSize, index: pager.getCurrentPageIndex() } });
   }
 
+  if (pageSize !== pager.itemsPerPage) {
+    pageSizeChanged(pageSize);
+  }
+
   return (
     <EuiTablePagination
       activePage={pager.getCurrentPageIndex()}
-      itemsPerPage={pageSize}
+      itemsPerPage={pager.itemsPerPage}
       itemsPerPageOptions={PAGE_SIZE_OPTIONS}
       pageCount={pager.getTotalPages()}
-      onChangeItemsPerPage={(size) =>
-        onTableChange({ page: { size, index: pager.getCurrentPageIndex() } })
-      }
+      onChangeItemsPerPage={(size) => {
+        setURLParam('pageSize', size);
+        pageSizeChanged(size);
+        onTableChange({ page: { size, index: pager.getCurrentPageIndex() } });
+      }}
       onChangePage={(pageIndex) => {
         setURLParam('pageIndex', pageIndex);
         pageChanged(pageIndex);