perf: replace sequential pagination with single bulk request

vbelouso · vbelouso · commit 8936a2697245 · 2026-01-18T21:23:15.000+02:00
Signed-off-by: Vladimir Belousov &lt;vbelouso@redhat.com&gt;
diff --git a/src/app/Accounts/components/AccountsTable.tsx b/src/app/Accounts/components/AccountsTable.tsx
@@ -5,7 +5,6 @@ import { api, AccountResponseApi, ProviderApi } from '@api';
 import { LoadingSpinner } from '@app/components/common/LoadingSpinner';
 import { TablePagination } from '@app/components/common/TablesPagination';
 import { searchItems, filterByProvider, sortItems, paginateItems } from '@app/utils/tableFilters';
-import { fetchAllPages } from '@app/utils/fetchAllPages';
 
 export const AccountsTable: React.FunctionComponent<{
   searchValue: string;
@@ -20,21 +19,28 @@ export const AccountsTable: React.FunctionComponent<{
   const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc'>('asc');
 
   useEffect(() => {
+    const controller = new AbortController();
+
     const fetchData = async () => {
-      setLoading(true);
       try {
-        const allItems = await fetchAllPages(async (page, pageSize) => {
-          const { data } = await api.accounts.accountsList({ page, page_size: pageSize });
-          return { items: data.items || [], count: data.count || 0 };
-        });
-        setAllAccounts(allItems);
+        setLoading(true);
+        const { data } = await api.accounts.accountsList({ page: 1, page_size: 10000 }, { signal: controller.signal });
+        if (!controller.signal.aborted) {
+          setAllAccounts(data.items || []);
+        }
       } catch (error) {
-        console.error('Error fetching accounts:', error);
+        if (!controller.signal.aborted) {
+          console.error('Error fetching accounts:', error);
+        }
       } finally {
-        setLoading(false);
+        if (!controller.signal.aborted) {
+          setLoading(false);
+        }
       }
     };
+
     fetchData();
+    return () => controller.abort();
   }, []);
 
   let filtered = allAccounts;
diff --git a/src/app/Actions/Scheduler/components/ActionsTable.tsx b/src/app/Actions/Scheduler/components/ActionsTable.tsx
@@ -1,14 +1,13 @@
 import { renderActionTypeLabel, renderOperationLabel, renderActionStatusLabel } from '@app/utils/renderUtils';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { Label } from '@patternfly/react-core';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { ActionStatus, ActionOperations, ActionTypes } from '@app/types/types';
 import { Link } from 'react-router-dom';
 import { api, ActionResponseApi } from '@api';
 import { LoadingSpinner } from '@app/components/common/LoadingSpinner';
 import { TablePagination } from '@app/components/common/TablesPagination';
 import { paginateItems } from '@app/utils/tableFilters';
-import { fetchAllPages } from '@app/utils/fetchAllPages';
 import { ActionsColumn } from '@patternfly/react-table';
 import { rowActions } from './ActionsKebabMenu';
 
@@ -26,29 +25,38 @@ export const ScheduleActionsTable: React.FunctionComponent<{
   const [filteredActions, setFilteredActions] = useState<ActionResponseApi[]>([]);
   const [filteredCount, setFilteredCount] = useState(0);
   const [loading, setLoading] = useState(true);
+  const controllerRef = useRef<AbortController | null>(null);
+
+  const reloadActions = useCallback(async () => {
+    if (controllerRef.current) {
+      controllerRef.current.abort();
+    }
+    controllerRef.current = new AbortController();
 
-  // useEffect logic abstracted in this function to be reused in the kebab menu
-  const reloadActions = async () => {
     setLoading(true);
     try {
-      const allItems = await fetchAllPages(async (page, pageSize) => {
-        const { data } = await api.schedule.scheduleList({
-          page,
-          page_size: pageSize,
-        });
-        return { items: data.items || [], count: data.count || 0 };
-      });
-      setAllActions(allItems);
+      const { data } = await api.schedule.scheduleList(
+        { page: 1, page_size: 10000 },
+        { signal: controllerRef.current.signal }
+      );
+      if (!controllerRef.current.signal.aborted) {
+        setAllActions(data.items || []);
+      }
     } catch (error) {
-      console.error('Error fetching ScheduleActions:', error);
+      if (!controllerRef.current?.signal.aborted) {
+        console.error('Error fetching ScheduleActions:', error);
+      }
     } finally {
-      setLoading(false);
+      if (!controllerRef.current?.signal.aborted) {
+        setLoading(false);
+      }
     }
-  };
+  }, []);
 
   useEffect(() => {
     reloadActions();
-  }, [reloadFlag]);
+    return () => controllerRef.current?.abort();
+  }, [reloadFlag, reloadActions]);
 
   // Apply filters when data or filter props change
   useEffect(() => {
diff --git a/src/app/Actions/Scheduler/components/ModalPowerManagement.tsx b/src/app/Actions/Scheduler/components/ModalPowerManagement.tsx
@@ -20,7 +20,6 @@ import { ActionStatus } from '@app/types/types';
 import { useUser } from '@app/Contexts/UserContext.tsx';
 import { debug } from '@app/utils/debugLogs';
 import { api, startCluster, stopCluster, AccountResponseApi, ClusterResponseApi, ActionRequestApi } from '@api';
-import { fetchAllPages } from '@app/utils/fetchAllPages';
 import cronValidate from 'cron-validate';
 
 interface ModalPowerManagementProps {
@@ -85,53 +84,53 @@ export const ModalPowerManagement: React.FunctionComponent<ModalPowerManagementP
   React.useEffect(() => {
     if (!isOpen) return;
 
+    const controller = new AbortController();
+
     const fetchAccounts = async () => {
-      //setLoading(true);
       try {
-        const accountFullList = await fetchAllPages(async (page, pageSize) => {
-          const { data } = await api.accounts.accountsList({ page, page_size: pageSize });
-          return { items: data.items || [], count: data.count || 0 };
-        });
-        setAllAccounts(accountFullList);
+        const { data } = await api.accounts.accountsList({ page: 1, page_size: 10000 }, { signal: controller.signal });
+        if (!controller.signal.aborted) {
+          setAllAccounts(data.items || []);
+        }
       } catch (error) {
-        console.error('Error fetching accounts:', error);
-        setAllAccounts([]);
-      } finally {
-        //setLoading(false);
+        if (!controller.signal.aborted) {
+          console.error('Error fetching accounts:', error);
+          setAllAccounts([]);
+        }
       }
     };
 
     fetchAccounts();
+    return () => controller.abort();
   }, [isOpen]);
 
-  // Reload clusters every time the selected account changes.
   React.useEffect(() => {
     if (!isOpen) return;
 
-    // Reset dependent state when account changes / clears
     setSelectedCluster(null);
     setAllClusters([]);
 
     const accountId = selectedAccount?.accountId;
     if (!accountId) return;
 
+    const controller = new AbortController();
+
     const fetchClusters = async () => {
-      //setLoading(true);
       try {
-        const clusterFullList = await fetchAllPages(async (page, pageSize) => {
-          const { data } = await api.accounts.clustersList(accountId, { page, page_size: pageSize });
-          return { items: data.items || [], count: data.count || 0 };
-        });
-        setAllClusters(clusterFullList);
+        const { data } = await api.accounts.clustersList(accountId, { signal: controller.signal });
+        if (!controller.signal.aborted) {
+          setAllClusters(data.items || []);
+        }
       } catch (error) {
-        console.error('Error fetching clusters:', error);
-        setAllClusters([]);
-      } finally {
-        //setLoading(false);
+        if (!controller.signal.aborted) {
+          console.error('Error fetching clusters:', error);
+          setAllClusters([]);
+        }
       }
     };
 
     fetchClusters();
+    return () => controller.abort();
   }, [isOpen, selectedAccount?.accountId]);
 
   // Reset modal state when closing to avoid leaking previous selections.
diff --git a/src/app/Clusters/components/ClustersTable.tsx b/src/app/Clusters/components/ClustersTable.tsx
@@ -7,7 +7,6 @@ import { ClustersTableProps } from '../types';
 import { LoadingSpinner } from '@app/components/common/LoadingSpinner';
 import { TablePagination } from '@app/components/common/TablesPagination';
 import { searchItems, filterByStatus, filterByProvider, sortItems, paginateItems } from '@app/utils/tableFilters';
-import { fetchAllPages } from '@app/utils/fetchAllPages';
 import { EmptyState, EmptyStateVariant, EmptyStateBody, Title } from '@patternfly/react-core';
 import { CubesIcon } from '@patternfly/react-icons';
 
@@ -27,21 +26,28 @@ export const ClustersTable: React.FunctionComponent<ClustersTableProps> = ({
   const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc'>('asc');
 
   useEffect(() => {
+    const controller = new AbortController();
+
     const fetchData = async () => {
       try {
         setLoading(true);
-        const allItems = await fetchAllPages(async (page, pageSize) => {
-          const { data } = await api.clusters.clustersList({ page, page_size: pageSize });
-          return { items: data.items || [], count: data.count || 0 };
-        });
-        setAllClusters(allItems);
+        const { data } = await api.clusters.clustersList({ page: 1, page_size: 10000 }, { signal: controller.signal });
+        if (!controller.signal.aborted) {
+          setAllClusters(data.items || []);
+        }
       } catch (error) {
-        console.error('Error fetching clusters:', error);
+        if (!controller.signal.aborted) {
+          console.error('Error fetching clusters:', error);
+        }
       } finally {
-        setLoading(false);
+        if (!controller.signal.aborted) {
+          setLoading(false);
+        }
       }
     };
+
     fetchData();
+    return () => controller.abort();
   }, []);
 
   let processed = allClusters;
diff --git a/src/app/Servers/components/ServersTable.tsx b/src/app/Servers/components/ServersTable.tsx
@@ -7,7 +7,6 @@ import { ServersTableProps } from '../types';
 import { api, InstanceResponseApi } from '@api';
 import { TablePagination } from '@app/components/common/TablesPagination';
 import { searchItems, filterByStatus, filterByProvider, sortItems, paginateItems } from '@app/utils/tableFilters';
-import { fetchAllPages } from '@app/utils/fetchAllPages';
 import { LoadingSpinner } from '@app/components/common/LoadingSpinner';
 import { ServerIcon } from '@patternfly/react-icons';
 
@@ -26,21 +25,31 @@ export const ServersTable: React.FunctionComponent<ServersTableProps> = ({
   const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc'>('asc');
 
   useEffect(() => {
+    const controller = new AbortController();
+
     const fetchData = async () => {
       try {
         setLoading(true);
-        const allItems = await fetchAllPages(async (page, pageSize) => {
-          const { data } = await api.instances.instancesList({ page, page_size: pageSize });
-          return { items: data.items || [], count: data.count || 0 };
-        });
-        setAllInstances(allItems);
+        const { data } = await api.instances.instancesList(
+          { page: 1, page_size: 10000 },
+          { signal: controller.signal }
+        );
+        if (!controller.signal.aborted) {
+          setAllInstances(data.items || []);
+        }
       } catch (error) {
-        console.error('Error fetching instances:', error);
+        if (!controller.signal.aborted) {
+          console.error('Error fetching instances:', error);
+        }
       } finally {
-        setLoading(false);
+        if (!controller.signal.aborted) {
+          setLoading(false);
+        }
       }
     };
+
     fetchData();
+    return () => controller.abort();
   }, []);
 
   let filtered = allInstances;
diff --git a/src/app/utils/fetchAllPages.ts b/src/app/utils/fetchAllPages.ts
