From 2519c80a2807572fe64efbe4360fdcb0f02b533a Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@gmail.com>
Date: Fri, 16 Aug 2024 16:21:41 +0300
Subject: [PATCH 1/2] feat: enable autorefresh for paginated tables (#1146)

---
 .../EntitiesCount/EntitiesCount.tsx           |   6 +-
 .../PaginatedTable/PaginatedTable.tsx         | 247 ++++--------------
 .../ResizeablePaginatedTable.tsx              |   7 +-
 src/components/PaginatedTable/TableChunk.tsx  | 140 +++++++---
 src/components/PaginatedTable/TableRow.tsx    |   2 +-
 src/components/PaginatedTable/reducer.ts      | 141 ----------
 src/components/PaginatedTable/types.ts        |  14 +-
 src/containers/Cluster/Cluster.scss           |  14 +
 src/containers/Cluster/Cluster.tsx            |   4 +-
 src/containers/Nodes/PaginatedNodes.tsx       |  29 +-
 src/containers/Nodes/getNodes.ts              |  51 +++-
 .../StorageGroups/PaginatedStorageGroups.tsx  |  35 +--
 .../Storage/StorageGroups/getGroups.ts        |  28 +-
 .../StorageNodes/PaginatedStorageNodes.tsx    |  37 +--
 .../Storage/StorageNodes/getNodes.ts          |  37 ++-
 src/store/reducers/nodes/types.ts             |  10 +-
 src/store/reducers/storage/types.ts           |  15 ++
 src/store/reducers/tableData.ts               |  38 +++
 tests/suites/nodes/nodes.test.ts              | 127 ++++++++-
 tests/suites/paginatedTable/paginatedTable.ts | 126 +++++++++
 tests/suites/storage/storage.test.ts          | 127 +++++++++
 21 files changed, 749 insertions(+), 486 deletions(-)
 delete mode 100644 src/components/PaginatedTable/reducer.ts
 create mode 100644 src/store/reducers/tableData.ts
 create mode 100644 tests/suites/paginatedTable/paginatedTable.ts

diff --git a/src/components/EntitiesCount/EntitiesCount.tsx b/src/components/EntitiesCount/EntitiesCount.tsx
index a6722c15e..fe71cf563 100644
--- a/src/components/EntitiesCount/EntitiesCount.tsx
+++ b/src/components/EntitiesCount/EntitiesCount.tsx
@@ -1,7 +1,11 @@
 import {Label} from '@gravity-ui/uikit';
 
+import {cn} from '../../utils/cn';
+
 import i18n from './i18n';
 
+const b = cn('ydb-entities-count');
+
 interface EntitiesCountProps {
     current: number | string;
     total?: number | string;
@@ -28,7 +32,7 @@ export const EntitiesCount = ({total, current, label, loading, className}: Entit
     }
 
     return (
-        <Label theme="info" size="m" className={className}>
+        <Label theme="info" size="m" className={b(null, className)}>
             {content}
         </Label>
     );
diff --git a/src/components/PaginatedTable/PaginatedTable.tsx b/src/components/PaginatedTable/PaginatedTable.tsx
index 953e7274d..1c0faddf9 100644
--- a/src/components/PaginatedTable/PaginatedTable.tsx
+++ b/src/components/PaginatedTable/PaginatedTable.tsx
@@ -1,33 +1,19 @@
 import React from 'react';
 
-import type {IResponseError} from '../../types/api/error';
 import {getArray} from '../../utils';
-import {ResponseError} from '../Errors/ResponseError';
 import {TableWithControlsLayout} from '../TableWithControlsLayout/TableWithControlsLayout';
 
 import {TableChunk} from './TableChunk';
 import {TableHead} from './TableHead';
 import {EmptyTableRow} from './TableRow';
-import {DEFAULT_REQUEST_TIMEOUT, DEFAULT_TABLE_ROW_HEIGHT} from './constants';
+import {DEFAULT_TABLE_ROW_HEIGHT} from './constants';
 import i18n from './i18n';
-import {
-    createPaginatedTableReducer,
-    initChunk,
-    removeChunk,
-    resetChunks,
-    setChunkData,
-    setChunkError,
-    setChunkLoading,
-} from './reducer';
 import {b} from './shared';
 import type {
     Column,
     FetchData,
     GetRowClassName,
     HandleTableColumnsResize,
-    OnEntry,
-    OnLeave,
-    OnSort,
     RenderControls,
     RenderEmptyDataMessage,
     RenderErrorMessage,
@@ -37,26 +23,27 @@ import {useIntersectionObserver} from './useIntersectionObserver';
 
 import './PaginatedTable.scss';
 
-export interface PaginatedTableProps<T> {
+export interface PaginatedTableProps<T, F> {
     limit: number;
-    fetchData: FetchData<T>;
+    fetchData: FetchData<T, F>;
+    filters?: F;
+    tableName: string;
     columns: Column<T>[];
     getRowClassName?: GetRowClassName<T>;
     rowHeight?: number;
     parentContainer?: Element | null;
     initialSortParams?: SortParams;
     onColumnsResize?: HandleTableColumnsResize;
-
     renderControls?: RenderControls;
     renderEmptyDataMessage?: RenderEmptyDataMessage;
     renderErrorMessage?: RenderErrorMessage;
-
-    dependencyArray?: unknown[]; // Fully reload table on params change
 }
 
-export const PaginatedTable = <T,>({
+export const PaginatedTable = <T, F>({
     limit,
     fetchData,
+    filters,
+    tableName,
     columns,
     getRowClassName,
     rowHeight = DEFAULT_TABLE_ROW_HEIGHT,
@@ -64,173 +51,53 @@ export const PaginatedTable = <T,>({
     initialSortParams,
     onColumnsResize,
     renderControls,
-    renderEmptyDataMessage,
     renderErrorMessage,
-    dependencyArray,
-}: PaginatedTableProps<T>) => {
-    const inited = React.useRef(false);
-    const tableContainer = React.useRef<HTMLDivElement>(null);
-
-    const [state, dispatch] = React.useReducer(createPaginatedTableReducer<T>(), {});
-
+    renderEmptyDataMessage,
+}: PaginatedTableProps<T, F>) => {
     const [sortParams, setSortParams] = React.useState<SortParams | undefined>(initialSortParams);
-
     const [totalEntities, setTotalEntities] = React.useState(limit);
     const [foundEntities, setFoundEntities] = React.useState(0);
+    const [activeChunks, setActiveChunks] = React.useState<number[]>([]);
+    const [isInitialLoad, setIsInitialLoad] = React.useState(true);
 
-    const [error, setError] = React.useState<IResponseError>();
-
-    const pendingRequests = React.useRef<Record<string, ReturnType<typeof setTimeout>>>({});
-
-    const fetchChunkData = React.useCallback(
-        async (id: string) => {
-            dispatch(setChunkLoading(id));
-
-            const timer = setTimeout(async () => {
-                const offset = Number(id) * limit;
-
-                try {
-                    const response = await fetchData(limit, offset, sortParams);
-                    const {data, total, found} = response;
-
-                    setTotalEntities(total);
-                    setFoundEntities(found);
-                    inited.current = true;
-
-                    dispatch(setChunkData(id, data));
-                } catch (err) {
-                    // Do not set error on cancelled requests
-                    if ((err as IResponseError)?.isCancelled) {
-                        return;
-                    }
-
-                    dispatch(setChunkError(id, err as IResponseError));
-                    setError(err as IResponseError);
-                }
-            }, DEFAULT_REQUEST_TIMEOUT);
-
-            // Chunk data load could be triggered by different events
-            // Cancel previous chunk request, while it is pending (instead of concurrentId)
-            if (pendingRequests.current[id]) {
-                const oldTimer = pendingRequests.current[id];
-                window.clearTimeout(oldTimer);
-            }
-            pendingRequests.current[id] = timer;
-        },
-        [fetchData, limit, sortParams],
-    );
+    const tableContainer = React.useRef<HTMLDivElement>(null);
 
-    const onEntry = React.useCallback<OnEntry>((id) => {
-        dispatch(initChunk(id));
+    const handleDataFetched = React.useCallback((total: number, found: number) => {
+        setTotalEntities(total);
+        setFoundEntities(found);
+        setIsInitialLoad(false);
     }, []);
 
-    const onLeave = React.useCallback<OnLeave>((id) => {
-        dispatch(removeChunk(id));
-
-        // If there is a pending request for the removed chunk, cancel it
-        // It made to prevent excessive requests on fast scroll
-        if (pendingRequests.current[id]) {
-            const timer = pendingRequests.current[id];
-            window.clearTimeout(timer);
-            delete pendingRequests.current[id];
-        }
+    const onEntry = React.useCallback((id: string) => {
+        setActiveChunks((prev) => [...new Set([...prev, Number(id)])]);
     }, []);
 
-    // Cancel all pending requests on component unmount
-    React.useEffect(() => {
-        return () => {
-            Object.values(pendingRequests.current).forEach((timer) => {
-                window.clearTimeout(timer);
-            });
-            pendingRequests.current = {};
-        };
+    const onLeave = React.useCallback((id: string) => {
+        setActiveChunks((prev) => prev.filter((chunk) => chunk !== Number(id)));
     }, []);
 
-    // Load chunks if they become active
-    // This mecanism helps to set chunk active state from different sources, but load data only once
-    // Only currently active chunks should be in state so iteration by the whole state shouldn't be a problem
-    React.useEffect(() => {
-        for (const id of Object.keys(state)) {
-            const chunk = state[Number(id)];
-
-            if (chunk?.active && !chunk?.loading && !chunk?.wasLoaded) {
-                fetchChunkData(id);
-            }
-        }
-    }, [fetchChunkData, state]);
+    const observer = useIntersectionObserver({onEntry, onLeave, parentContainer});
 
-    // Reset table on filters change
-    React.useEffect(() => {
-        // Reset counts, so table unmount unneeded chunks
+    // reset table on filters change
+    React.useLayoutEffect(() => {
         setTotalEntities(limit);
         setFoundEntities(0);
-        setError(undefined);
-
-        // Remove all chunks from state
-        dispatch(resetChunks());
-
-        // Reset table state for the controls
-        inited.current = false;
-
-        // If there is a parent, scroll to parent container ref
-        // Else scroll to table top
-        // It helps to prevent layout shifts, when chunks quantity is changed
+        setIsInitialLoad(true);
         if (parentContainer) {
             parentContainer.scrollTo(0, 0);
         } else {
             tableContainer.current?.scrollTo(0, 0);
         }
 
-        // Make table start to load data
-        dispatch(initChunk('0'));
-    }, [dependencyArray, limit, parentContainer]);
-
-    // Reload currently active chunks
-    // Use case - sort params change, so data should be updated, but without chunks unmount
-    const reloadCurrentViewport = () => {
-        for (const id of Object.keys(state)) {
-            if (state[Number(id)]?.active) {
-                dispatch(initChunk(id));
-            }
-        }
-    };
-
-    const handleSort: OnSort = (params) => {
-        setSortParams(params);
-        reloadCurrentViewport();
-    };
-
-    const observer = useIntersectionObserver({onEntry, onLeave, parentContainer});
-
-    // Render at least 1 chunk
-    const totalLength = foundEntities || limit;
-    const chunksCount = Math.ceil(totalLength / limit);
+        setActiveChunks([0]);
+    }, [filters, limit, parentContainer]);
 
     const renderChunks = () => {
         if (!observer) {
             return null;
         }
 
-        return getArray(chunksCount).map((value) => {
-            const chunkData = state[value];
-
-            return (
-                <TableChunk
-                    observer={observer}
-                    key={value}
-                    id={value}
-                    chunkSize={limit}
-                    rowHeight={rowHeight}
-                    columns={columns}
-                    chunkData={chunkData}
-                    getRowClassName={getRowClassName}
-                />
-            );
-        });
-    };
-
-    const renderData = () => {
-        if (inited.current && foundEntities === 0) {
+        if (!isInitialLoad && foundEntities === 0) {
             return (
                 <tbody>
                     <EmptyTableRow columns={columns}>
@@ -240,44 +107,42 @@ export const PaginatedTable = <T,>({
             );
         }
 
-        // If first chunk is loaded with the error, display error
-        // In case of other chunks table will be inited
-        if (!inited.current && error) {
-            return (
-                <tbody>
-                    <EmptyTableRow columns={columns}>
-                        {renderErrorMessage ? (
-                            renderErrorMessage(error)
-                        ) : (
-                            <ResponseError error={error} />
-                        )}
-                    </EmptyTableRow>
-                </tbody>
-            );
-        }
-
-        return renderChunks();
+        const totalLength = foundEntities || limit;
+        const chunksCount = Math.ceil(totalLength / limit);
+
+        return getArray(chunksCount).map((value) => (
+            <TableChunk<T, F>
+                key={value}
+                id={value}
+                limit={limit}
+                rowHeight={rowHeight}
+                columns={columns}
+                fetchData={fetchData}
+                filters={filters}
+                tableName={tableName}
+                sortParams={sortParams}
+                getRowClassName={getRowClassName}
+                renderErrorMessage={renderErrorMessage}
+                onDataFetched={handleDataFetched}
+                isActive={activeChunks.includes(value)}
+                observer={observer}
+            />
+        ));
     };
 
-    const renderTable = () => {
-        return (
-            <table className={b('table')}>
-                <TableHead
-                    columns={columns}
-                    onSort={handleSort}
-                    onColumnsResize={onColumnsResize}
-                />
-                {renderData()}
-            </table>
-        );
-    };
+    const renderTable = () => (
+        <table className={b('table')}>
+            <TableHead columns={columns} onSort={setSortParams} onColumnsResize={onColumnsResize} />
+            {renderChunks()}
+        </table>
+    );
 
     const renderContent = () => {
         if (renderControls) {
             return (
                 <TableWithControlsLayout>
                     <TableWithControlsLayout.Controls>
-                        {renderControls({inited: inited.current, totalEntities, foundEntities})}
+                        {renderControls({inited: !isInitialLoad, totalEntities, foundEntities})}
                     </TableWithControlsLayout.Controls>
                     <TableWithControlsLayout.Table>{renderTable()}</TableWithControlsLayout.Table>
                 </TableWithControlsLayout>
diff --git a/src/components/PaginatedTable/ResizeablePaginatedTable.tsx b/src/components/PaginatedTable/ResizeablePaginatedTable.tsx
index d3d032430..9bd39308b 100644
--- a/src/components/PaginatedTable/ResizeablePaginatedTable.tsx
+++ b/src/components/PaginatedTable/ResizeablePaginatedTable.tsx
@@ -12,15 +12,16 @@ function updateColumnsWidth<T>(columns: Column<T>[], columnsWidthSetup: ColumnWi
     });
 }
 
-interface ResizeablePaginatedTableProps<T> extends Omit<PaginatedTableProps<T>, 'onColumnsResize'> {
+interface ResizeablePaginatedTableProps<T, F>
+    extends Omit<PaginatedTableProps<T, F>, 'onColumnsResize'> {
     columnsWidthLSKey: string;
 }
 
-export function ResizeablePaginatedTable<T>({
+export function ResizeablePaginatedTable<T, F>({
     columnsWidthLSKey,
     columns,
     ...props
-}: ResizeablePaginatedTableProps<T>) {
+}: ResizeablePaginatedTableProps<T, F>) {
     const [tableColumnsWidth, setTableColumnsWidth] = useTableResize(columnsWidthLSKey);
 
     const updatedColumns = updateColumnsWidth(columns, tableColumnsWidth);
diff --git a/src/components/PaginatedTable/TableChunk.tsx b/src/components/PaginatedTable/TableChunk.tsx
index e8e50a01f..b02990b4b 100644
--- a/src/components/PaginatedTable/TableChunk.tsx
+++ b/src/components/PaginatedTable/TableChunk.tsx
@@ -1,34 +1,81 @@
 import React from 'react';
 
+import {tableDataApi} from '../../store/reducers/tableData';
+import type {IResponseError} from '../../types/api/error';
 import {getArray} from '../../utils';
+import {useAutoRefreshInterval} from '../../utils/hooks';
+import {ResponseError} from '../Errors/ResponseError';
 
-import {LoadingTableRow, TableRow} from './TableRow';
-import type {Chunk, Column, GetRowClassName} from './types';
+import {EmptyTableRow, LoadingTableRow, TableRow} from './TableRow';
+import type {Column, FetchData, GetRowClassName, SortParams} from './types';
 
-// With original memo generic types are lost
-const typedMemo: <T>(Component: T) => T = React.memo;
+const DEBOUNCE_TIMEOUT = 200;
 
-interface TableChunkProps<T> {
+interface TableChunkProps<T, F> {
     id: number;
-    chunkSize: number;
+    limit: number;
     rowHeight: number;
     columns: Column<T>[];
-    chunkData: Chunk<T> | undefined;
+    filters?: F;
+    sortParams?: SortParams;
     observer: IntersectionObserver;
+    isActive: boolean;
+    tableName: string;
+
+    fetchData: FetchData<T, F>;
     getRowClassName?: GetRowClassName<T>;
+    renderErrorMessage?: (error: IResponseError) => React.ReactNode;
+    onDataFetched: (total: number, found: number) => void;
 }
 
-// Memoisation prevents chunks rerenders that could cause perfomance issues on big tables
-export const TableChunk = typedMemo(function TableChunk<T>({
+export const TableChunk = <T, F>({
     id,
-    chunkSize,
+    limit,
     rowHeight,
     columns,
-    chunkData,
+    fetchData,
+    tableName,
+    filters,
+    sortParams,
     observer,
     getRowClassName,
-}: TableChunkProps<T>) {
+    renderErrorMessage,
+    onDataFetched,
+    isActive,
+}: TableChunkProps<T, F>) => {
     const ref = React.useRef<HTMLTableSectionElement>(null);
+    const [isTimeoutActive, setIsTimeoutActive] = React.useState(true);
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+
+    const queryParams = {
+        offset: id * limit,
+        limit,
+        fetchData: fetchData as FetchData<T, unknown>,
+        filters,
+        sortParams,
+        tableName,
+    };
+
+    tableDataApi.useFetchTableChunkQuery(queryParams, {
+        skip: isTimeoutActive || !isActive,
+        pollingInterval: autoRefreshInterval,
+    });
+
+    const {currentData, error} = tableDataApi.endpoints.fetchTableChunk.useQueryState(queryParams);
+
+    React.useEffect(() => {
+        let timeout = 0;
+
+        if (isActive && isTimeoutActive) {
+            timeout = window.setTimeout(() => {
+                setIsTimeoutActive(false);
+            }, DEBOUNCE_TIMEOUT);
+        }
+
+        return () => {
+            window.clearTimeout(timeout);
+        };
+    }, [isActive, isTimeoutActive]);
 
     React.useEffect(() => {
         const el = ref.current;
@@ -42,44 +89,61 @@ export const TableChunk = typedMemo(function TableChunk<T>({
         };
     }, [observer]);
 
-    const dataLength = chunkData?.data?.length;
-    const chunkHeight = dataLength ? dataLength * rowHeight : chunkSize * rowHeight;
+    React.useEffect(() => {
+        if (currentData && isActive) {
+            const {total = 0, found = 0} = currentData;
+            onDataFetched(total, found);
+        }
+    }, [currentData, isActive, onDataFetched]);
 
-    const getLoadingRows = () => {
-        return getArray(chunkSize).map((value) => {
-            return (
-                <LoadingTableRow key={value} columns={columns} height={rowHeight} index={value} />
-            );
-        });
-    };
+    const dataLength = currentData?.data?.length || limit;
 
     const renderContent = () => {
-        if (!chunkData || !chunkData.active) {
+        if (!isActive) {
             return null;
         }
 
-        // Display skeletons in case of error
-        if (chunkData.loading || chunkData.error) {
-            return getLoadingRows();
+        if (!currentData) {
+            if (error) {
+                const errorData = error as IResponseError;
+                return (
+                    <EmptyTableRow columns={columns}>
+                        {renderErrorMessage ? (
+                            renderErrorMessage(errorData)
+                        ) : (
+                            <ResponseError error={errorData} />
+                        )}
+                    </EmptyTableRow>
+                );
+            } else {
+                return getArray(dataLength).map((value) => (
+                    <LoadingTableRow
+                        key={value}
+                        columns={columns}
+                        height={rowHeight}
+                        index={value}
+                    />
+                ));
+            }
         }
 
-        return chunkData.data?.map((data, index) => {
-            return (
-                <TableRow
-                    key={index}
-                    index={index}
-                    row={data}
-                    columns={columns}
-                    height={rowHeight}
-                    getRowClassName={getRowClassName}
-                />
-            );
-        });
+        return currentData.data.map((rowData, index) => (
+            <TableRow
+                key={index}
+                index={index}
+                row={rowData as T}
+                columns={columns}
+                height={rowHeight}
+                getRowClassName={getRowClassName}
+            />
+        ));
     };
 
+    const chunkHeight = dataLength ? dataLength * rowHeight : limit * rowHeight;
+
     return (
         <tbody ref={ref} id={id.toString()} style={{height: `${chunkHeight}px`}}>
             {renderContent()}
         </tbody>
     );
-});
+};
diff --git a/src/components/PaginatedTable/TableRow.tsx b/src/components/PaginatedTable/TableRow.tsx
index 7d80c6857..52dfe8db8 100644
--- a/src/components/PaginatedTable/TableRow.tsx
+++ b/src/components/PaginatedTable/TableRow.tsx
@@ -38,7 +38,7 @@ interface LoadingTableRowProps<T> {
 
 export const LoadingTableRow = <T,>({index, columns, height}: LoadingTableRowProps<T>) => {
     return (
-        <tr className={b('row')}>
+        <tr className={b('row', {loading: true})}>
             {columns.map((column) => {
                 return (
                     <TableRowCell
diff --git a/src/components/PaginatedTable/reducer.ts b/src/components/PaginatedTable/reducer.ts
deleted file mode 100644
index e8c6d32d4..000000000
--- a/src/components/PaginatedTable/reducer.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import type {IResponseError} from '../../types/api/error';
-
-import type {Chunk} from './types';
-
-const INIT_CHUNK = 'infiniteTable/INIT_CHUNK';
-const REMOVE_CHUNK = 'infiniteTable/REMOVE_CHUNK';
-const SET_CHUNK_LOADING = 'infiniteTable/SET_CHUNK_LOADING';
-const SET_CHUNK_DATA = 'infiniteTable/SET_CHUNK_DATA';
-const SET_CHUNK_ERROR = 'infiniteTable/SET_CHUNK_ERROR';
-const RESET_CHUNKS = 'infiniteTable/RESET_CHUNKS';
-
-type PaginatedTableState<T> = Record<string, Chunk<T> | undefined>;
-
-// Intermediary type to pass to ReducerAction (because ReturnType cannot correctly convert generics)
-interface SetChunkDataAction<T> {
-    type: typeof SET_CHUNK_DATA;
-    data: {
-        id: string;
-        data: T[];
-    };
-}
-
-export const setChunkData = <T>(id: string, data: T[]): SetChunkDataAction<T> => {
-    return {
-        type: SET_CHUNK_DATA,
-        data: {id, data},
-    } as const;
-};
-
-export const setChunkError = (id: string, error: IResponseError) => {
-    return {
-        type: SET_CHUNK_ERROR,
-        data: {id, error},
-    } as const;
-};
-
-export const initChunk = (id: string) => {
-    return {
-        type: INIT_CHUNK,
-        data: {id},
-    } as const;
-};
-
-export const setChunkLoading = (id: string) => {
-    return {
-        type: SET_CHUNK_LOADING,
-        data: {id},
-    } as const;
-};
-
-export const removeChunk = (id: string) => {
-    return {
-        type: REMOVE_CHUNK,
-        data: {id},
-    } as const;
-};
-
-export const resetChunks = () => {
-    return {
-        type: RESET_CHUNKS,
-    } as const;
-};
-
-type PaginatedTableAction<T> =
-    | SetChunkDataAction<T>
-    | ReturnType<typeof setChunkError>
-    | ReturnType<typeof initChunk>
-    | ReturnType<typeof setChunkLoading>
-    | ReturnType<typeof removeChunk>
-    | ReturnType<typeof resetChunks>;
-
-// Reducer wrapped in additional function to pass generic type
-export const createPaginatedTableReducer =
-    <T>(): React.Reducer<PaginatedTableState<T>, PaginatedTableAction<T>> =>
-    (state, action) => {
-        switch (action.type) {
-            case SET_CHUNK_DATA: {
-                const {id, data} = action.data;
-
-                return {
-                    ...state,
-                    [id]: {
-                        loading: false,
-                        wasLoaded: true,
-                        active: true,
-                        data,
-                    },
-                };
-            }
-            case SET_CHUNK_ERROR: {
-                const {id, error} = action.data;
-
-                return {
-                    ...state,
-                    [id]: {
-                        loading: false,
-                        wasLoaded: true,
-                        active: true,
-                        error,
-                    },
-                };
-            }
-            case INIT_CHUNK: {
-                const {id} = action.data;
-
-                return {
-                    ...state,
-                    [id]: {
-                        loading: false,
-                        wasLoaded: false,
-                        active: true,
-                    },
-                };
-            }
-            case SET_CHUNK_LOADING: {
-                const {id} = action.data;
-
-                return {
-                    ...state,
-                    [id]: {
-                        loading: true,
-                        wasLoaded: false,
-                        active: true,
-                    },
-                };
-            }
-            case REMOVE_CHUNK: {
-                const {id} = action.data;
-
-                const newState = {...state};
-                delete newState[id];
-
-                return newState;
-            }
-            case RESET_CHUNKS: {
-                return {};
-            }
-            default:
-                return state;
-        }
-    };
diff --git a/src/components/PaginatedTable/types.ts b/src/components/PaginatedTable/types.ts
index 5e21c05fc..d733cede3 100644
--- a/src/components/PaginatedTable/types.ts
+++ b/src/components/PaginatedTable/types.ts
@@ -42,10 +42,16 @@ export interface PaginatedTableData<T> {
     found: number;
 }
 
-export type FetchData<T> = (
-    limit: number,
-    offset: number,
-    sortParams?: SortParams,
+type FetchDataParams<F, E = {}> = {
+    limit: number;
+    offset: number;
+    filters?: F;
+    sortParams?: SortParams;
+    signal?: AbortSignal;
+} & E;
+
+export type FetchData<T, F = undefined, E = {}> = (
+    params: FetchDataParams<F, E>,
 ) => Promise<PaginatedTableData<T>>;
 
 export type OnError = (error?: IResponseError) => void;
diff --git a/src/containers/Cluster/Cluster.scss b/src/containers/Cluster/Cluster.scss
index 442e2b8fb..111eae6f0 100644
--- a/src/containers/Cluster/Cluster.scss
+++ b/src/containers/Cluster/Cluster.scss
@@ -36,4 +36,18 @@
         align-items: center;
         @include tabs-wrapper-styles();
     }
+
+    &__sticky-wrapper {
+        position: sticky;
+        z-index: 4;
+        top: 56px;
+    }
+
+    &__auto-refresh-control {
+        float: right;
+
+        margin-top: -40px;
+
+        background-color: var(--g-color-base-background);
+    }
 }
diff --git a/src/containers/Cluster/Cluster.tsx b/src/containers/Cluster/Cluster.tsx
index 268d47f56..6152edf1b 100644
--- a/src/containers/Cluster/Cluster.tsx
+++ b/src/containers/Cluster/Cluster.tsx
@@ -144,10 +144,12 @@ export function Cluster({
                         );
                     }}
                 />
-                <AutoRefreshControl />
             </div>
 
             <div>
+                <div className={b('sticky-wrapper')}>
+                    <AutoRefreshControl className={b('auto-refresh-control')} />
+                </div>
                 <Switch>
                     <Route
                         path={
diff --git a/src/containers/Nodes/PaginatedNodes.tsx b/src/containers/Nodes/PaginatedNodes.tsx
index 9243ae336..accdec5d5 100644
--- a/src/containers/Nodes/PaginatedNodes.tsx
+++ b/src/containers/Nodes/PaginatedNodes.tsx
@@ -8,7 +8,6 @@ import {ResponseError} from '../../components/Errors/ResponseError';
 import {Illustration} from '../../components/Illustration';
 import {ResizeablePaginatedTable} from '../../components/PaginatedTable';
 import type {
-    FetchData,
     GetRowClassName,
     RenderControls,
     RenderErrorMessage,
@@ -28,13 +27,10 @@ import {cn} from '../../utils/cn';
 import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
 import {
     NodesUptimeFilterValues,
-    getProblemParamValue,
-    getUptimeParamValue,
     isSortableNodesProperty,
     isUnavailableNode,
     nodesUptimeFilterValuesSchema,
 } from '../../utils/nodes';
-import type {NodesSortValue} from '../../utils/nodes';
 
 import {getNodes} from './getNodes';
 import {NODES_COLUMNS_WIDTH_LS_KEY, getNodesColumns} from './getNodesColumns';
@@ -62,26 +58,10 @@ export const PaginatedNodes = ({path, parentContainer, additionalNodesProps}: No
 
     const problemFilter = useTypedSelector(selectProblemFilter);
 
-    const filters = React.useMemo(() => {
-        return [path, searchValue, problemFilter, uptimeFilter];
+    const tableFilters = React.useMemo(() => {
+        return {path, searchValue, problemFilter, uptimeFilter};
     }, [path, searchValue, problemFilter, uptimeFilter]);
 
-    const fetchData = React.useCallback<FetchData<NodesPreparedEntity>>(
-        async (limit, offset, {sortOrder, columnId} = {}) => {
-            return await getNodes({
-                limit,
-                offset,
-                path,
-                filter: searchValue,
-                problems_only: getProblemParamValue(problemFilter),
-                uptime: getUptimeParamValue(uptimeFilter),
-                sortOrder,
-                sortValue: columnId as NodesSortValue,
-            });
-        },
-        [path, problemFilter, searchValue, uptimeFilter],
-    );
-
     const getRowClassName: GetRowClassName<NodesPreparedEntity> = (row) => {
         return b('node', {unavailable: isUnavailableNode(row)});
     };
@@ -151,13 +131,14 @@ export const PaginatedNodes = ({path, parentContainer, additionalNodesProps}: No
             columnsWidthLSKey={NODES_COLUMNS_WIDTH_LS_KEY}
             parentContainer={parentContainer}
             columns={columns}
-            fetchData={fetchData}
+            fetchData={getNodes}
             limit={50}
             renderControls={renderControls}
             renderErrorMessage={renderErrorMessage}
             renderEmptyDataMessage={renderEmptyDataMessage}
-            dependencyArray={filters}
             getRowClassName={getRowClassName}
+            filters={tableFilters}
+            tableName="nodes"
         />
     );
 };
diff --git a/src/containers/Nodes/getNodes.ts b/src/containers/Nodes/getNodes.ts
index 832d37d76..1944470cd 100644
--- a/src/containers/Nodes/getNodes.ts
+++ b/src/containers/Nodes/getNodes.ts
@@ -1,21 +1,50 @@
-import type {NodesApiRequestParams} from '../../store/reducers/nodes/types';
+import type {FetchData} from '../../components/PaginatedTable';
+import type {
+    NodesApiRequestParams,
+    NodesFilters,
+    NodesPreparedEntity,
+} from '../../store/reducers/nodes/types';
 import {prepareNodesData} from '../../store/reducers/nodes/utils';
+import {getProblemParamValue, getUptimeParamValue} from '../../utils/nodes';
+import type {NodesSortValue} from '../../utils/nodes';
 
 const getConcurrentId = (limit?: number, offset?: number) => {
     return `getNodes|offset${offset}|limit${limit}`;
 };
 
-export const getNodes = async ({
-    type = 'any',
-    storage = false,
-    tablets = true,
-    limit,
-    offset,
-    ...params
-}: NodesApiRequestParams) => {
+export const getNodes: FetchData<
+    NodesPreparedEntity,
+    NodesFilters,
+    Pick<NodesApiRequestParams, 'type' | 'storage' | 'tablets'>
+> = async (params) => {
+    const {
+        type = 'any',
+        storage = false,
+        tablets = true,
+        limit,
+        offset,
+        sortParams,
+        filters,
+    } = params;
+
+    const {sortOrder, columnId} = sortParams ?? {};
+    const {path, searchValue, problemFilter, uptimeFilter} = filters ?? {};
+
     const response = await window.api.getNodes(
-        {type, storage, tablets, limit, offset, ...params},
-        {concurrentId: getConcurrentId(limit, offset)},
+        {
+            type,
+            storage,
+            tablets,
+            limit,
+            offset,
+            sortOrder,
+            sortValue: columnId as NodesSortValue,
+            path,
+            filter: searchValue,
+            problems_only: getProblemParamValue(problemFilter),
+            uptime: getUptimeParamValue(uptimeFilter),
+        },
+        {concurrentId: getConcurrentId(limit, offset), signal: params.signal},
     );
     const preparedResponse = prepareNodesData(response);
 
diff --git a/src/containers/Storage/StorageGroups/PaginatedStorageGroups.tsx b/src/containers/Storage/StorageGroups/PaginatedStorageGroups.tsx
index e56f99613..6f10223eb 100644
--- a/src/containers/Storage/StorageGroups/PaginatedStorageGroups.tsx
+++ b/src/containers/Storage/StorageGroups/PaginatedStorageGroups.tsx
@@ -1,15 +1,10 @@
 import React from 'react';
 
-import type {
-    FetchData,
-    RenderControls,
-    RenderErrorMessage,
-} from '../../../components/PaginatedTable';
+import type {RenderControls, RenderErrorMessage} from '../../../components/PaginatedTable';
 import {ResizeablePaginatedTable} from '../../../components/PaginatedTable';
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
-import type {PreparedStorageGroup, VisibleEntities} from '../../../store/reducers/storage/types';
+import type {VisibleEntities} from '../../../store/reducers/storage/types';
 import type {NodesMap} from '../../../types/store/nodesList';
-import type {StorageSortValue} from '../../../utils/storage';
 
 import {StorageGroupsEmptyDataMessage} from './StorageGroupsEmptyDataMessage';
 import {getStorageGroups} from './getGroups';
@@ -44,27 +39,10 @@ export const PaginatedStorageGroups = ({
     renderControls,
     renderErrorMessage,
 }: PaginatedStorageGroupsProps) => {
-    const filters = React.useMemo(() => {
-        return [searchValue, visibleEntities, tenant, nodeId];
+    const tableFilters = React.useMemo(() => {
+        return {searchValue, visibleEntities, tenant, nodeId};
     }, [searchValue, visibleEntities, tenant, nodeId]);
 
-    const fetchData = React.useCallback<FetchData<PreparedStorageGroup>>(
-        async (limit, offset, {sortOrder, columnId} = {}) => {
-            return await getStorageGroups({
-                limit,
-                offset,
-                filter: searchValue,
-                visibleEntities,
-                tenant,
-                nodeId,
-
-                sortOrder,
-                sortValue: columnId as StorageSortValue,
-            });
-        },
-        [nodeId, searchValue, tenant, visibleEntities],
-    );
-
     const columns = React.useMemo(() => {
         return getPreparedStorageGroupsColumns(nodesMap, visibleEntities);
     }, [nodesMap, visibleEntities]);
@@ -87,12 +65,13 @@ export const PaginatedStorageGroups = ({
             columnsWidthLSKey={STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY}
             parentContainer={parentContainer}
             columns={columns}
-            fetchData={fetchData}
+            fetchData={getStorageGroups}
             limit={50}
             renderControls={renderControls}
             renderErrorMessage={renderErrorMessage}
             renderEmptyDataMessage={renderEmptyDataMessage}
-            dependencyArray={filters}
+            filters={tableFilters}
+            tableName="storage-groups"
         />
     );
 };
diff --git a/src/containers/Storage/StorageGroups/getGroups.ts b/src/containers/Storage/StorageGroups/getGroups.ts
index c746f687d..f80f8520e 100644
--- a/src/containers/Storage/StorageGroups/getGroups.ts
+++ b/src/containers/Storage/StorageGroups/getGroups.ts
@@ -1,14 +1,36 @@
-import type {StorageApiRequestParams} from '../../../store/reducers/storage/types';
+import type {FetchData} from '../../../components/PaginatedTable';
+import type {
+    PreparedStorageGroup,
+    PreparedStorageGroupFilters,
+} from '../../../store/reducers/storage/types';
 import {prepareStorageGroupsResponse} from '../../../store/reducers/storage/utils';
 import {EVersion} from '../../../types/api/storage';
+import type {StorageSortValue} from '../../../utils/storage';
 
 const getConcurrentId = (limit?: number, offset?: number) => {
     return `getStorageGroups|offset${offset}|limit${limit}`;
 };
 
-export const getStorageGroups = async ({limit, offset, ...params}: StorageApiRequestParams) => {
+export const getStorageGroups: FetchData<
+    PreparedStorageGroup,
+    PreparedStorageGroupFilters
+> = async (params) => {
+    const {limit, offset, sortParams, filters} = params;
+    const {sortOrder, columnId} = sortParams ?? {};
+    const {searchValue, visibleEntities, tenant, nodeId} = filters ?? {};
+
     const response = await window.api.getStorageInfo(
-        {version: EVersion.v2, limit, offset, ...params},
+        {
+            version: EVersion.v2,
+            limit,
+            offset,
+            sortOrder,
+            sortValue: columnId as StorageSortValue,
+            filter: searchValue,
+            visibleEntities,
+            tenant,
+            nodeId,
+        },
         {concurrentId: getConcurrentId(limit, offset)},
     );
     const preparedResponse = prepareStorageGroupsResponse(response);
diff --git a/src/containers/Storage/StorageNodes/PaginatedStorageNodes.tsx b/src/containers/Storage/StorageNodes/PaginatedStorageNodes.tsx
index 94d525153..0b5ffa828 100644
--- a/src/containers/Storage/StorageNodes/PaginatedStorageNodes.tsx
+++ b/src/containers/Storage/StorageNodes/PaginatedStorageNodes.tsx
@@ -1,16 +1,11 @@
 import React from 'react';
 
-import type {
-    FetchData,
-    RenderControls,
-    RenderErrorMessage,
-} from '../../../components/PaginatedTable';
+import type {RenderControls, RenderErrorMessage} from '../../../components/PaginatedTable';
 import {ResizeablePaginatedTable} from '../../../components/PaginatedTable';
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
-import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
+import type {VisibleEntities} from '../../../store/reducers/storage/types';
 import type {AdditionalNodesProps} from '../../../types/additionalProps';
-import {NodesUptimeFilterValues, getUptimeParamValue} from '../../../utils/nodes';
-import type {NodesSortValue} from '../../../utils/nodes';
+import {NodesUptimeFilterValues} from '../../../utils/nodes';
 
 import {StorageNodesEmptyDataMessage} from './StorageNodesEmptyDataMessage';
 import {getStorageNodes} from './getNodes';
@@ -46,27 +41,10 @@ export const PaginatedStorageNodes = ({
     renderControls,
     renderErrorMessage,
 }: PaginatedStorageNodesProps) => {
-    const filters = React.useMemo(() => {
-        return [searchValue, visibleEntities, nodesUptimeFilter, tenant];
+    const tableFilters = React.useMemo(() => {
+        return {searchValue, visibleEntities, nodesUptimeFilter, tenant};
     }, [searchValue, visibleEntities, nodesUptimeFilter, tenant]);
 
-    const fetchData = React.useCallback<FetchData<PreparedStorageNode>>(
-        async (limit, offset, {sortOrder, columnId} = {}) => {
-            return await getStorageNodes({
-                limit,
-                offset,
-                filter: searchValue,
-                uptime: getUptimeParamValue(nodesUptimeFilter),
-                visibleEntities,
-                tenant,
-
-                sortOrder,
-                sortValue: columnId as NodesSortValue,
-            });
-        },
-        [nodesUptimeFilter, searchValue, tenant, visibleEntities],
-    );
-
     const columns = React.useMemo(() => {
         return getPreparedStorageNodesColumns(additionalNodesProps, visibleEntities);
     }, [additionalNodesProps, visibleEntities]);
@@ -93,14 +71,15 @@ export const PaginatedStorageNodes = ({
             columnsWidthLSKey={STORAGE_NODES_COLUMNS_WIDTH_LS_KEY}
             parentContainer={parentContainer}
             columns={columns}
-            fetchData={fetchData}
+            fetchData={getStorageNodes}
             rowHeight={50}
             limit={50}
             renderControls={renderControls}
             renderErrorMessage={renderErrorMessage}
             renderEmptyDataMessage={renderEmptyDataMessage}
             getRowClassName={getRowUnavailableClassName}
-            dependencyArray={filters}
+            filters={tableFilters}
+            tableName="storage-nodes"
         />
     );
 };
diff --git a/src/containers/Storage/StorageNodes/getNodes.ts b/src/containers/Storage/StorageNodes/getNodes.ts
index 478f2a69a..a1b042ec7 100644
--- a/src/containers/Storage/StorageNodes/getNodes.ts
+++ b/src/containers/Storage/StorageNodes/getNodes.ts
@@ -1,23 +1,42 @@
+import type {FetchData} from '../../../components/PaginatedTable';
 import type {NodesApiRequestParams} from '../../../store/reducers/nodes/types';
+import type {
+    PreparedStorageNode,
+    PreparedStorageNodeFilters,
+} from '../../../store/reducers/storage/types';
 import {prepareStorageNodesResponse} from '../../../store/reducers/storage/utils';
+import {getUptimeParamValue} from '../../../utils/nodes';
+import type {NodesSortValue} from '../../../utils/nodes';
 
 const getConcurrentId = (limit?: number, offset?: number) => {
     return `getStorageNodes|offset${offset}|limit${limit}`;
 };
 
-export const getStorageNodes = async ({
-    type = 'static',
-    storage = true,
-    limit,
-    offset,
-    ...params
-}: NodesApiRequestParams) => {
+export const getStorageNodes: FetchData<
+    PreparedStorageNode,
+    PreparedStorageNodeFilters,
+    Pick<NodesApiRequestParams, 'type' | 'storage'>
+> = async (params) => {
+    const {type = 'static', storage = true, limit, offset, sortParams, filters} = params;
+    const {searchValue, nodesUptimeFilter, visibleEntities, tenant} = filters ?? {};
+    const {sortOrder, columnId} = sortParams ?? {};
+
     const response = await window.api.getNodes(
-        {type, storage, limit, offset, ...params},
+        {
+            type,
+            storage,
+            limit,
+            offset,
+            sortOrder,
+            sortValue: columnId as NodesSortValue,
+            filter: searchValue,
+            uptime: getUptimeParamValue(nodesUptimeFilter),
+            visibleEntities,
+            tenant,
+        },
         {concurrentId: getConcurrentId(limit, offset)},
     );
     const preparedResponse = prepareStorageNodesResponse(response);
-
     return {
         data: preparedResponse.nodes || [],
         found: preparedResponse.found || 0,
diff --git a/src/store/reducers/nodes/types.ts b/src/store/reducers/nodes/types.ts
index 05e3e7a68..1f81cd5eb 100644
--- a/src/store/reducers/nodes/types.ts
+++ b/src/store/reducers/nodes/types.ts
@@ -7,7 +7,8 @@ import type {
 import type {EFlag} from '../../../types/api/enums';
 import type {TEndpoint, TPoolStats} from '../../../types/api/nodes';
 import type {TTabletStateInfo as TFullTabletStateInfo} from '../../../types/api/tablet';
-import type {NodesSortValue} from '../../../utils/nodes';
+import type {NodesSortValue, NodesUptimeFilterValues} from '../../../utils/nodes';
+import type {ProblemFilterValue} from '../settings/types';
 import type {VisibleEntities} from '../storage/types';
 
 // Since nodes from different endpoints can have different types,
@@ -48,6 +49,13 @@ export interface NodesSortParams {
     sortValue: NodesSortValue | undefined;
 }
 
+export interface NodesFilters {
+    searchValue: string;
+    problemFilter: ProblemFilterValue;
+    uptimeFilter: NodesUptimeFilterValues;
+    path?: string;
+}
+
 export interface NodesGeneralRequestParams extends Partial<NodesSortParams> {
     filter?: string; // NodeId or Host
     uptime?: number; // return nodes with less uptime in seconds
diff --git a/src/store/reducers/storage/types.ts b/src/store/reducers/storage/types.ts
index 23f711eae..97978e787 100644
--- a/src/store/reducers/storage/types.ts
+++ b/src/store/reducers/storage/types.ts
@@ -4,6 +4,7 @@ import {z} from 'zod';
 import type {TSystemStateInfo} from '../../../types/api/nodes';
 import type {EVersion, TStorageGroupInfo} from '../../../types/api/storage';
 import type {PreparedPDisk, PreparedVDisk} from '../../../utils/disks/types';
+import type {NodesUptimeFilterValues} from '../../../utils/nodes';
 import type {StorageSortValue} from '../../../utils/storage';
 
 import {STORAGE_TYPES, VISIBLE_ENTITIES} from './constants';
@@ -13,6 +14,13 @@ export type VisibleEntities = z.infer<typeof visibleEntitiesSchema>;
 export const storageTypeSchema = z.nativeEnum(STORAGE_TYPES).catch(STORAGE_TYPES.groups);
 export type StorageType = z.infer<typeof storageTypeSchema>;
 
+export interface PreparedStorageNodeFilters {
+    searchValue: string;
+    nodesUptimeFilter: NodesUptimeFilterValues;
+    visibleEntities: VisibleEntities;
+    tenant?: string;
+}
+
 export interface PreparedStorageNode extends TSystemStateInfo {
     NodeId: number;
     PDisks?: PreparedPDisk[];
@@ -25,6 +33,13 @@ export interface PreparedStorageNode extends TSystemStateInfo {
     Uptime: string;
 }
 
+export interface PreparedStorageGroupFilters {
+    searchValue: string;
+    visibleEntities: VisibleEntities;
+    tenant?: string;
+    nodeId?: string;
+}
+
 export interface PreparedStorageGroup extends TStorageGroupInfo {
     PoolName: string | undefined;
 
diff --git a/src/store/reducers/tableData.ts b/src/store/reducers/tableData.ts
new file mode 100644
index 000000000..8797d35c6
--- /dev/null
+++ b/src/store/reducers/tableData.ts
@@ -0,0 +1,38 @@
+import type {BaseQueryFn, EndpointBuilder} from '@reduxjs/toolkit/query';
+
+import type {FetchData, PaginatedTableData, SortParams} from '../../components/PaginatedTable';
+
+import {api} from './api';
+
+interface PaginatedTableParams<T, F> {
+    offset: number;
+    fetchData: FetchData<T, F>;
+    filters: F;
+    limit: number;
+    sortParams?: SortParams;
+    tableName: string;
+}
+
+function endpoints<T, F>(build: EndpointBuilder<BaseQueryFn, string, string>) {
+    return {
+        fetchTableChunk: build.query<PaginatedTableData<T>, PaginatedTableParams<T, F>>({
+            queryFn: async ({offset, limit, sortParams, filters, fetchData}, {signal}) => {
+                try {
+                    const response = await fetchData({
+                        limit,
+                        offset,
+                        filters,
+                        sortParams,
+                        signal,
+                    });
+                    return {data: response};
+                } catch (error) {
+                    return {error: error};
+                }
+            },
+            providesTags: ['All'],
+        }),
+    };
+}
+
+export const tableDataApi = api.injectEndpoints({endpoints});
diff --git a/tests/suites/nodes/nodes.test.ts b/tests/suites/nodes/nodes.test.ts
index eb629085b..89797c3d7 100644
--- a/tests/suites/nodes/nodes.test.ts
+++ b/tests/suites/nodes/nodes.test.ts
@@ -1,6 +1,7 @@
 import {expect, test} from '@playwright/test';
 
-import {NodesPage} from './NodesPage';
+import {NodesPage} from '../nodes/NodesPage';
+import {PaginatedTable} from '../paginatedTable/paginatedTable';
 
 test.describe('Test Nodes page', async () => {
     test('Nodes page is OK', async ({page}) => {
@@ -19,3 +20,127 @@ test.describe('Test Nodes page', async () => {
         await expect(nodesPage.table).toBeVisible();
     });
 });
+
+test.describe('Test Nodes Paginated Table', async () => {
+    test.beforeEach(async ({page}) => {
+        const nodesPage = new NodesPage(page);
+        let response = await nodesPage.goto();
+        expect(response?.ok()).toBe(true);
+
+        // Wil be removed since it's an experiment
+        await page.evaluate(() => {
+            localStorage.setItem('useBackendParamsForTables', 'true');
+            location.reload();
+        });
+        response = await nodesPage.goto();
+        expect(response?.ok()).toBe(true);
+    });
+
+    test('Table loads and displays data', async ({page}) => {
+        const paginatedTable = new PaginatedTable(page);
+
+        await paginatedTable.waitForTableToLoad();
+        await paginatedTable.waitForTableData();
+
+        const rowCount = await paginatedTable.getRowCount();
+        expect(rowCount).toBeGreaterThan(0);
+    });
+
+    test('Search by hostname filters the table', async ({page}) => {
+        const paginatedTable = new PaginatedTable(page);
+
+        await paginatedTable.waitForTableToLoad();
+        await paginatedTable.waitForTableData();
+
+        const initialRowCount = await paginatedTable.getRowCount();
+        await paginatedTable.search('localhost');
+
+        await page.waitForTimeout(1000); // Wait for the table to update
+
+        const filteredRowCount = await paginatedTable.getRowCount();
+        expect(filteredRowCount).toBeLessThanOrEqual(initialRowCount);
+    });
+
+    test('Radio button selection changes displayed data', async ({page}) => {
+        const paginatedTable = new PaginatedTable(page);
+
+        await paginatedTable.waitForTableToLoad();
+        await paginatedTable.waitForTableData();
+
+        const initialRowCount = await paginatedTable.getRowCount();
+        await paginatedTable.selectRadioOption(0, 'With problems');
+
+        await page.waitForTimeout(1000); // Wait for the table to update
+
+        const filteredRowCount = await paginatedTable.getRowCount();
+        expect(filteredRowCount).toBeLessThanOrEqual(initialRowCount);
+    });
+
+    test('Node count is displayed correctly', async ({page}) => {
+        const paginatedTable = new PaginatedTable(page);
+
+        await paginatedTable.waitForTableToLoad();
+        await paginatedTable.waitForTableData();
+
+        const nodeCount = await paginatedTable.getCount();
+        const rowCount = await paginatedTable.getRowCount();
+
+        expect(nodeCount).toBe(rowCount);
+    });
+
+    test('Uptime values are displayed in correct format', async ({page}) => {
+        const paginatedTable = new PaginatedTable(page);
+
+        await paginatedTable.waitForTableToLoad();
+        await paginatedTable.waitForTableData();
+
+        const uptimeValues = await paginatedTable.getColumnValues('Uptime');
+
+        for (const uptime of uptimeValues) {
+            expect(uptime).toMatch(/^\d+:\d{2}:\d{2}$/); // Format: HH:MM:SS
+        }
+    });
+
+    test('Refresh button updates the table data', async ({page}) => {
+        const paginatedTable = new PaginatedTable(page);
+
+        await paginatedTable.waitForTableToLoad();
+        await paginatedTable.waitForTableData();
+
+        const initialUptimeValues = await paginatedTable.getColumnValues('Uptime');
+        await page.waitForTimeout(2000); // Wait for some time to pass
+        await paginatedTable.clickRefreshButton();
+        await paginatedTable.waitForTableData();
+
+        const updatedUptimeValues = await paginatedTable.getColumnValues('Uptime');
+        expect(updatedUptimeValues).not.toEqual(initialUptimeValues);
+    });
+
+    test('Row data can be retrieved correctly', async ({page}) => {
+        const storageTable = new PaginatedTable(page);
+
+        await storageTable.waitForTableToLoad();
+        await storageTable.waitForTableData();
+
+        const rowData = await storageTable.getRowData(0);
+
+        expect(rowData).toHaveProperty('Host');
+        expect(rowData).toHaveProperty('Uptime');
+        expect(rowData).toHaveProperty('Memory');
+        expect(rowData).toHaveProperty('CPU');
+    });
+
+    test('Column values can be retrieved correctly', async ({page}) => {
+        const paginatedTable = new PaginatedTable(page);
+
+        await paginatedTable.waitForTableToLoad();
+        await paginatedTable.waitForTableData();
+
+        const hostValues = await paginatedTable.getColumnValues('Host');
+        const uptimeValues = await paginatedTable.getColumnValues('Uptime');
+
+        expect(hostValues.length).toBeGreaterThan(0);
+        expect(uptimeValues.length).toBeGreaterThan(0);
+        expect(hostValues.length).toBe(uptimeValues.length);
+    });
+});
diff --git a/tests/suites/paginatedTable/paginatedTable.ts b/tests/suites/paginatedTable/paginatedTable.ts
new file mode 100644
index 000000000..79ef716a1
--- /dev/null
+++ b/tests/suites/paginatedTable/paginatedTable.ts
@@ -0,0 +1,126 @@
+import type {Locator, Page} from '@playwright/test';
+
+export class PaginatedTable {
+    private page: Page;
+    private tableSelector: Locator;
+    private searchInput: Locator;
+    private radioButtons: Locator;
+    private countLabel: Locator;
+    private tableRows: Locator;
+    private refreshButton: Locator;
+    private refreshIntervalSelect: Locator;
+    private headCells: Locator;
+
+    constructor(page: Page) {
+        this.page = page;
+        this.tableSelector = page.locator('.ydb-table-with-controls-layout');
+        this.searchInput = this.tableSelector.locator('.ydb-search input');
+        this.radioButtons = this.tableSelector.locator('.g-radio-button');
+        this.countLabel = this.tableSelector.locator('.ydb-entities-count .g-label__content');
+        this.headCells = this.tableSelector.locator('.ydb-paginated-table__head-cell');
+        this.tableRows = this.tableSelector.locator('.ydb-paginated-table__row');
+        this.refreshButton = page.locator('.auto-refresh-control button[aria-label="Refresh"]');
+        this.refreshIntervalSelect = page.locator('.cluster__auto-refresh-select');
+    }
+
+    async search(searchTerm: string) {
+        await this.searchInput.fill(searchTerm);
+    }
+
+    async selectRadioOption(groupIndex: number, optionText: string) {
+        const radioGroup = this.radioButtons.nth(groupIndex);
+        const option = radioGroup.locator(`.g-radio-button__option:has-text("${optionText}")`);
+
+        await option.evaluate((el) => (el as HTMLElement).click());
+    }
+
+    async getCount(): Promise<number> {
+        const countText = await this.countLabel.innerText();
+        const match = countText.match(/: (\d+)/);
+        return match ? parseInt(match[1], 10) : 0;
+    }
+
+    async getColumnValues(columnName: string): Promise<string[]> {
+        const columnIndex = await this.getColumnIndex(columnName);
+        return this.tableRows.evaluateAll(
+            (rows, index) =>
+                rows.map(
+                    (row) =>
+                        row.querySelector(`td:nth-child(${index + 1})`)?.textContent?.trim() || '',
+                ),
+            columnIndex,
+        );
+    }
+
+    async getRowData(rowIndex: number): Promise<Record<string, string>> {
+        const rowCells = this.tableRows.nth(rowIndex).locator('td');
+        const headerCount = await this.headCells.count();
+        const rowData: Record<string, string> = {};
+
+        for (let i = 0; i < headerCount; i++) {
+            const headerText = (await this.headCells.nth(i).innerText()).trim().replace(/\n/g, ' ');
+            const cellText = (await rowCells.nth(i).innerText()).trim().replace(/\n/g, ' ');
+            rowData[headerText] = cellText;
+        }
+
+        return rowData;
+    }
+
+    async getRowCount(): Promise<number> {
+        return this.tableRows.count();
+    }
+
+    async waitForTableToLoad() {
+        await this.tableSelector.waitFor({state: 'visible'});
+    }
+
+    async waitForTableData(timeout = 2000) {
+        await this.page.waitForFunction(
+            () => {
+                const rows = document.querySelectorAll('.ydb-paginated-table__row');
+                const loadingRows = document.querySelectorAll('.ydb-paginated-table__row_loading');
+                return (
+                    rows.length > 0 &&
+                    rows[0].querySelectorAll('td').length > 0 &&
+                    loadingRows.length === 0
+                );
+            },
+            {timeout},
+        );
+
+        await this.page.waitForTimeout(1000);
+    }
+
+    async clickRefreshButton() {
+        await this.refreshButton.click();
+    }
+
+    async setRefreshInterval(interval: string) {
+        await this.refreshIntervalSelect.click();
+        await this.page.locator('.g-select-popup__option', {hasText: interval}).click();
+    }
+
+    async getRefreshInterval(): Promise<string> {
+        return this.refreshIntervalSelect.locator('.g-select-control__option-text').innerText();
+    }
+
+    async sortByColumn(columnName: string) {
+        const columnHeader = this.tableSelector.locator(
+            `.ydb-paginated-table__head-cell:has-text("${columnName}")`,
+        );
+        await columnHeader.click();
+        await this.page.waitForTimeout(1000);
+        await this.waitForTableData();
+    }
+
+    private async getColumnIndex(columnName: string): Promise<number> {
+        const count = await this.headCells.count();
+        for (let i = 0; i < count; i++) {
+            const cellText = (await this.headCells.nth(i).innerText()).trim().replace(/\n/g, ' ');
+            if (cellText === columnName) {
+                return i;
+            }
+        }
+        throw new Error(`Column "${columnName}" not found`);
+    }
+}
diff --git a/tests/suites/storage/storage.test.ts b/tests/suites/storage/storage.test.ts
index 38b010706..d10c044bb 100644
--- a/tests/suites/storage/storage.test.ts
+++ b/tests/suites/storage/storage.test.ts
@@ -1,5 +1,7 @@
 import {expect, test} from '@playwright/test';
 
+import {PaginatedTable} from '../paginatedTable/paginatedTable';
+
 import {StoragePage} from './StoragePage';
 
 test.describe('Test Storage page', async () => {
@@ -29,3 +31,128 @@ test.describe('Test Storage page', async () => {
         await expect(storagePage.table).toBeVisible();
     });
 });
+
+test.describe('Test Storage Paginated Table', async () => {
+    test.beforeEach(async ({page}) => {
+        const nodesPage = new StoragePage(page);
+        let response = await nodesPage.goto();
+        expect(response?.ok()).toBe(true);
+
+        // Wil be removed since it's an experiment
+        await page.evaluate(() => {
+            localStorage.setItem('useBackendParamsForTables', 'true');
+            location.reload();
+        });
+        response = await nodesPage.goto();
+        expect(response?.ok()).toBe(true);
+    });
+
+    test('Table loads and displays data', async ({page}) => {
+        const paginatedTable = new PaginatedTable(page);
+
+        await paginatedTable.waitForTableToLoad();
+        await paginatedTable.waitForTableData();
+
+        const rowCount = await paginatedTable.getRowCount();
+        expect(rowCount).toBeGreaterThan(0);
+    });
+
+    test('Search by pool name filters the table', async ({page}) => {
+        const paginatedTable = new PaginatedTable(page);
+
+        await paginatedTable.waitForTableToLoad();
+        await paginatedTable.waitForTableData();
+
+        const initialRowCount = await paginatedTable.getRowCount();
+        await paginatedTable.search('static');
+
+        await page.waitForTimeout(1000); // Wait for the table to update
+
+        const filteredRowCount = await paginatedTable.getRowCount();
+        expect(filteredRowCount).toBeLessThanOrEqual(initialRowCount);
+    });
+
+    test('Radio button selection changes displayed data', async ({page}) => {
+        const paginatedTable = new PaginatedTable(page);
+
+        await paginatedTable.waitForTableToLoad();
+        await paginatedTable.waitForTableData();
+
+        const initialRowCount = await paginatedTable.getRowCount();
+        await paginatedTable.selectRadioOption(0, 'Nodes');
+
+        await page.waitForTimeout(1000); // Wait for the table to update
+
+        const nodesRowCount = await paginatedTable.getRowCount();
+        expect(nodesRowCount).not.toEqual(initialRowCount);
+    });
+
+    test('Groups count is displayed correctly', async ({page}) => {
+        const paginatedTable = new PaginatedTable(page);
+
+        await paginatedTable.waitForTableToLoad();
+        await paginatedTable.waitForTableData();
+
+        const nodeCount = await paginatedTable.getCount();
+        const rowCount = await paginatedTable.getRowCount();
+
+        expect(nodeCount).toBe(rowCount);
+    });
+
+    test('Row data can be retrieved correctly', async ({page}) => {
+        const storageTable = new PaginatedTable(page);
+
+        await storageTable.waitForTableToLoad();
+        await storageTable.waitForTableData();
+
+        const rowData = await storageTable.getRowData(0);
+
+        expect(rowData).toHaveProperty('Pool Name');
+        expect(rowData).toHaveProperty('Type');
+        expect(rowData).toHaveProperty('Erasure');
+        expect(rowData).toHaveProperty('Usage');
+    });
+
+    test('Column values can be retrieved correctly', async ({page}) => {
+        const paginatedTable = new PaginatedTable(page);
+
+        await paginatedTable.waitForTableToLoad();
+        await paginatedTable.waitForTableData();
+
+        const typeValues = await paginatedTable.getColumnValues('Type');
+        const erasureValues = await paginatedTable.getColumnValues('Erasure');
+
+        expect(typeValues.length).toBeGreaterThan(0);
+        expect(erasureValues.length).toBeGreaterThan(0);
+        expect(typeValues.length).toBe(erasureValues.length);
+    });
+
+    test('Clicking on Group ID header sorts the table', async ({page}) => {
+        const storageTable = new PaginatedTable(page);
+
+        await storageTable.waitForTableToLoad();
+        await storageTable.waitForTableData();
+
+        const initialGroupIds = await storageTable.getColumnValues('Group ID');
+
+        await storageTable.sortByColumn('Group ID');
+
+        const sortedGroupIds = await storageTable.getColumnValues('Group ID');
+
+        expect(sortedGroupIds).not.toEqual(initialGroupIds);
+
+        const sortedDescending = [...sortedGroupIds].sort((a, b) => {
+            return parseInt(b, 10) - parseInt(a, 10);
+        });
+        expect(sortedGroupIds).toEqual(sortedDescending);
+
+        await storageTable.sortByColumn('Group ID');
+
+        const sortedAscGroupIds = await storageTable.getColumnValues('Group ID');
+
+        const sortedAscending = [...sortedAscGroupIds].sort((a, b) => {
+            return parseInt(a, 10) - parseInt(b, 10);
+        });
+        expect(sortedAscGroupIds).toEqual(sortedAscending);
+    });
+});

From a210ba17f9f022062e30fc86ca047a245de41313 Mon Sep 17 00:00:00 2001
From: sareyu <sareyu@yandex-team.ru>
Date: Fri, 16 Aug 2024 16:44:18 +0300
Subject: [PATCH 2/2] fix: default value fixes (#1166)

---
 src/containers/Tenant/Schema/SchemaViewer/columns.tsx    | 2 +-
 src/containers/Tenant/Schema/SchemaViewer/prepareData.ts | 2 +-
 src/containers/Tenant/Schema/SchemaViewer/types.ts       | 2 +-
 src/types/api/schema/shared.ts                           | 4 +---
 4 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/containers/Tenant/Schema/SchemaViewer/columns.tsx b/src/containers/Tenant/Schema/SchemaViewer/columns.tsx
index c8af39d2e..647fb0d4b 100644
--- a/src/containers/Tenant/Schema/SchemaViewer/columns.tsx
+++ b/src/containers/Tenant/Schema/SchemaViewer/columns.tsx
@@ -102,7 +102,7 @@ const defaultValueColumn: SchemaColumn = {
         return i18n('column-title.defaultValue');
     },
     width: 100,
-    render: ({row}) => row.defaultValue,
+    render: ({row}) => String(row.defaultValue),
 };
 
 const familyColumn: SchemaColumn = {
diff --git a/src/containers/Tenant/Schema/SchemaViewer/prepareData.ts b/src/containers/Tenant/Schema/SchemaViewer/prepareData.ts
index 2aabb2e8a..8dbae25be 100644
--- a/src/containers/Tenant/Schema/SchemaViewer/prepareData.ts
+++ b/src/containers/Tenant/Schema/SchemaViewer/prepareData.ts
@@ -81,7 +81,7 @@ function prepareRowTableSchema(data: TTableDescription = {}): SchemaData[] {
             type: Type,
             notNull: NotNull,
             autoIncrement: Boolean(DefaultFromSequence),
-            defaultValue: DefaultFromLiteral?.value?.text_value,
+            defaultValue: Object.values(DefaultFromLiteral?.value || {})[0] || '-',
             familyName,
             prefferedPoolKind,
             columnCodec,
diff --git a/src/containers/Tenant/Schema/SchemaViewer/types.ts b/src/containers/Tenant/Schema/SchemaViewer/types.ts
index 391e96849..0a2406db5 100644
--- a/src/containers/Tenant/Schema/SchemaViewer/types.ts
+++ b/src/containers/Tenant/Schema/SchemaViewer/types.ts
@@ -12,7 +12,7 @@ export interface SchemaData {
     familyName?: string;
     prefferedPoolKind?: string;
     columnCodec?: string;
-    defaultValue?: string;
+    defaultValue?: string | number | boolean;
 }
 
 export interface SchemaColumn extends Column<SchemaData> {
diff --git a/src/types/api/schema/shared.ts b/src/types/api/schema/shared.ts
index 08914b480..a57177914 100644
--- a/src/types/api/schema/shared.ts
+++ b/src/types/api/schema/shared.ts
@@ -28,9 +28,7 @@ export interface TColumnDescription {
         type: {
             type_id: string;
         };
-        value: {
-            text_value: string;
-        };
+        value: Record<string, string | number | boolean>;
     };
     NotNull?: boolean;
 }