fix pagination

elastic · Sep 21, 2021 · eecc0ad · eecc0ad
1 parent cd57c3c
commit eecc0ad
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 16 deletions.
diff --git a/x-pack/plugins/monitoring/public/application/hooks/use_table.ts b/x-pack/plugins/monitoring/public/application/hooks/use_table.ts
@@ -16,6 +16,7 @@ interface Pagination {
   pageIndex: number;
   initialPageIndex: number;
   pageSizeOptions: number[];
+  totalItemCount: number;
 }
 
 interface Page {
@@ -38,22 +39,21 @@ const DEFAULT_PAGINATION = {
   pageIndex: 0,
   initialPageIndex: 0,
   pageSizeOptions: PAGE_SIZE_OPTIONS,
+  totalItemCount: 0,
 };
 
 const getPaginationInitialState = (page: Page | undefined) => {
-  if (!page) {
-    return DEFAULT_PAGINATION;
-  }
+  const pagination = DEFAULT_PAGINATION;
 
-  if (!PAGE_SIZE_OPTIONS.includes(page.size)) {
-    page.size = 20;
+  if (page) {
+    pagination.initialPageSize = page.size;
+    pagination.pageSize = page.size;
+    pagination.initialPageIndex = page.index;
+    pagination.pageIndex = page.index;
   }
 
   return {
-    initialPageSize: page.size,
-    pageSize: page.size,
-    initialPageIndex: page.index,
-    pageIndex: page.index,
+    ...pagination,
     pageSizeOptions: PAGE_SIZE_OPTIONS,
   };
 };
@@ -69,6 +69,18 @@ export function useTable(storageKey: string) {
     getPaginationInitialState(storageData.page)
   );
 
+  const updateTotalItemCount = useCallback(
+    (num) => {
+      // only update pagination state if different
+      if (num === pagination.totalItemCount) return;
+      setPagination({
+        ...pagination,
+        totalItemCount: num,
+      });
+    },
+    [setPagination, pagination]
+  );
+
   // get initial state from localStorage
   const [sorting, setSorting] = useState<Sorting>(storageData.sort || { sort: {} });
   const cleanSortingData = (sortData: Sorting) => {
@@ -122,11 +134,14 @@ export function useTable(storageKey: string) {
         query: string;
       }) => {
         setPagination({
-          initialPageSize: page.size,
-          pageSize: page.size,
-          initialPageIndex: page.index,
-          pageIndex: page.index,
-          pageSizeOptions: PAGE_SIZE_OPTIONS,
+          ...pagination,
+          ...{
+            initialPageSize: page.size,
+            pageSize: page.size,
+            initialPageIndex: page.index,
+            pageIndex: page.index,
+            pageSizeOptions: PAGE_SIZE_OPTIONS,
+          },
         });
         setSorting(cleanSortingData(sort));
         setQueryText(query);
@@ -142,5 +157,6 @@ export function useTable(storageKey: string) {
   return {
     getPaginationRouteOptions,
     getPaginationTableProps,
+    updateTotalItemCount,
   };
 }
diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/nodes_page.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/nodes_page.tsx
@@ -27,7 +27,9 @@ export const ElasticsearchNodesPage: React.FC<ComponentProps> = ({ clusters }) =
   const globalState = useContext(GlobalStateContext);
   const { showCgroupMetricsElasticsearch } = useContext(ExternalConfigContext);
   const { services } = useKibana<{ data: any }>();
-  const { getPaginationRouteOptions, getPaginationTableProps } = useTable('elasticsearch.nodes');
+  const { getPaginationRouteOptions, updateTotalItemCount, getPaginationTableProps } = useTable(
+    'elasticsearch.nodes'
+  );
   const clusterUuid = globalState.cluster_uuid;
   const ccs = globalState.ccs;
   const cluster = find(clusters, {
@@ -59,12 +61,14 @@ export const ElasticsearchNodesPage: React.FC<ComponentProps> = ({ clusters }) =
     });
 
     setData(response);
+    updateTotalItemCount(response.totalNodeCount);
   }, [
     ccs,
     clusterUuid,
     services.data?.query.timefilter.timefilter,
     services.http,
     getPaginationRouteOptions,
+    updateTotalItemCount,
   ]);
 
   return (
@@ -88,7 +92,6 @@ export const ElasticsearchNodesPage: React.FC<ComponentProps> = ({ clusters }) =
                 alerts={{}}
                 showCgroupMetricsElasticsearch={showCgroupMetricsElasticsearch}
                 {...getPaginationTableProps()}
-                totalItemCount={data.totalNodeCount}
               />
               {bottomBarComponent}
             </SetupModeContext.Provider>