fix: table is broken because of batching (#2356)

Author: astandrik

src/components/PaginatedTable/PaginatedTableContext.tsx

@@ -14,6 +14,7 @@ const defaultTableState: PaginatedTableState = {
 interface PaginatedTableStateContextType {
     // State
     tableState: PaginatedTableState;
+    noBatching?: boolean;
 
     // Granular setters
     setSortParams: (params: PaginatedTableState['sortParams']) => void;
@@ -35,12 +36,14 @@ export const PaginatedTableStateContext = React.createContext<PaginatedTableStat
 interface PaginatedTableStateProviderProps {
     children: React.ReactNode;
     initialState?: Partial<PaginatedTableState>;
+    noBatching?: boolean;
 }
 
 // Provider component
 export const PaginatedTableProvider = ({
     children,
     initialState = {},
+    noBatching,
 }: PaginatedTableStateProviderProps) => {
     // Use individual state variables for each field
     const [sortParams, setSortParams] = React.useState<PaginatedTableState['sortParams']>(
@@ -71,12 +74,13 @@ export const PaginatedTableProvider = ({
     const contextValue = React.useMemo(
         () => ({
             tableState,
+            noBatching,
             setSortParams,
             setTotalEntities,
             setFoundEntities,
             setIsInitialLoad,
         }),
-        [tableState, setSortParams, setTotalEntities, setFoundEntities, setIsInitialLoad],
+        [tableState, noBatching],
     );
 
     return (

src/components/PaginatedTable/PaginatedTableWithLayout.tsx

@@ -13,6 +13,7 @@ export interface PaginatedTableWithLayoutProps {
     error?: React.ReactNode;
     initialState?: Partial<PaginatedTableState>;
     fullHeight?: boolean;
+    noBatching?: boolean;
 }
 
 export const PaginatedTableWithLayout = ({
@@ -21,9 +22,10 @@ export const PaginatedTableWithLayout = ({
     tableProps,
     error,
     initialState,
+    noBatching,
     fullHeight = true,
 }: PaginatedTableWithLayoutProps) => (
-    <PaginatedTableProvider initialState={initialState}>
+    <PaginatedTableProvider initialState={initialState} noBatching={noBatching}>
         <TableWithControlsLayout fullHeight={fullHeight}>
             <TableWithControlsLayout.Controls>{controls}</TableWithControlsLayout.Controls>
             {error}

src/components/PaginatedTable/TableChunk.tsx

@@ -6,6 +6,7 @@ import {getArray} from '../../utils';
 import {useAutoRefreshInterval} from '../../utils/hooks';
 import {ResponseError} from '../Errors/ResponseError';
 
+import {usePaginatedTableState} from './PaginatedTableContext';
 import {EmptyTableRow, LoadingTableRow, TableRow} from './TableRow';
 import i18n from './i18n';
 import type {
@@ -63,6 +64,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
 }: TableChunkProps<T, F>) {
     const [isTimeoutActive, setIsTimeoutActive] = React.useState(true);
     const [autoRefreshInterval] = useAutoRefreshInterval();
+    const {noBatching} = usePaginatedTableState();
 
     const columnsIds = columns.map((column) => column.name);
 
@@ -74,6 +76,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
         sortParams,
         columnsIds,
         tableName,
+        noBatching,
     };
 
     tableDataApi.useFetchTableChunkQuery(queryParams, {

src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx

@@ -348,6 +348,7 @@ export function TopicData({scrollContainerRef, path, database}: TopicDataProps)
                         scrollDependencies: [baseOffset, baseEndOffset, tableFilters],
                     }}
                     fullHeight
+                    noBatching
                 />
             </DrawerWrapper>
         )

src/store/reducers/tableData.ts

@@ -13,35 +13,49 @@ interface PaginatedTableParams<T, F> {
     sortParams?: SortParams;
     columnsIds: string[];
     tableName: string;
+    noBatching?: boolean;
 }
 
 function endpoints<T, F>(build: EndpointBuilder<BaseQueryFn, string, string>) {
     return {
         fetchTableChunk: build.query<PaginatedTableData<T>, PaginatedTableParams<T, F>>({
             queryFn: async (
-                {offset, limit, sortParams, filters, columnsIds, fetchData, tableName},
+                {offset, limit, sortParams, filters, columnsIds, fetchData, tableName, noBatching},
                 {signal},
             ) => {
                 try {
-                    // Use the request batcher for potential merging
-                    const result = await requestBatcher.queueRequest(
-                        {
-                            offset,
+                    if (noBatching) {
+                        const response = await fetchData({
                             limit,
-                            sortParams,
+                            offset,
                             filters,
+                            sortParams,
                             columnsIds,
-                            fetchData,
-                            tableName,
-                        },
-                        signal,
-                    );
-
-                    if ('error' in result) {
-                        return {error: result.error};
-                    }
 
-                    return result;
+                            signal,
+                        });
+                        return {data: response};
+                    } else {
+                        // Use the request batcher for potential merging
+                        const result = await requestBatcher.queueRequest(
+                            {
+                                offset,
+                                limit,
+                                sortParams,
+                                filters,
+                                columnsIds,
+                                fetchData,
+                                tableName,
+                            },
+                            signal,
+                        );
+
+                        if ('error' in result) {
+                            return {error: result.error};
+                        }
+
+                        return result;
+                    }
                 } catch (error) {
                     return {error: error};
                 }