From 57f29f07b4bf99882e025dc61b937c4d2ab396a2 Mon Sep 17 00:00:00 2001
From: astandrik <astandrik@yandex-team.ru>
Date: Thu, 19 Jun 2025 12:02:20 +0300
Subject: [PATCH 01/16] fix: operations tab

---
 ...scrolling-pagination-technical-overview.md | 188 ++++++++++++++++++
 .../TableWithControlsLayout.tsx               |   4 +-
 src/containers/Operations/Operations.tsx      |  90 ++++++---
 src/containers/Operations/columns.tsx         | 140 +++++++------
 .../Operations/useInfiniteOperations.ts       | 104 ++++++++++
 5 files changed, 439 insertions(+), 87 deletions(-)
 create mode 100644 docs/infinite-scrolling-pagination-technical-overview.md
 create mode 100644 src/containers/Operations/useInfiniteOperations.ts

diff --git a/docs/infinite-scrolling-pagination-technical-overview.md b/docs/infinite-scrolling-pagination-technical-overview.md
new file mode 100644
index 0000000000..eece946f82
--- /dev/null
+++ b/docs/infinite-scrolling-pagination-technical-overview.md
@@ -0,0 +1,188 @@
+# Infinite Scrolling Pagination - Technical Overview
+
+## Architecture Overview
+
+The implementation transforms a traditional paginated table into an infinite scrolling experience by leveraging token-based pagination provided by the YDB API. The solution accumulates data from multiple API responses while maintaining seamless user experience through scroll-based loading triggers.
+
+## Technology Stack
+
+### Core Libraries
+
+1. **@gravity-ui/table**
+
+   - Provides the base table component with built-in virtualization support
+   - Offers React hooks for table state management
+   - Integrates seamlessly with @tanstack/react-table for advanced features
+
+2. **@tanstack/react-table (v8)**
+
+   - Powers the table logic including sorting, filtering, and column management
+   - Provides TypeScript-first API with strong type safety
+   - Offers flexible column definitions and cell rendering capabilities
+
+3. **RTK Query (Redux Toolkit Query)**
+
+   - Manages API calls through the existing `operationsApi` service
+   - Provides caching, polling, and request lifecycle management
+   - Enables conditional query execution through the `skip` parameter
+
+4. **React Hooks**
+   - Custom hooks pattern for encapsulating infinite scroll logic
+   - Leverages useState, useEffect, useCallback, and useMemo for state management
+   - Provides clean separation of concerns between UI and business logic
+
+## Technical Design Decisions
+
+### Token-Based Pagination Strategy
+
+The implementation uses a token-based pagination approach rather than offset/limit pagination:
+
+- **Advantages**: Consistent results even with concurrent data modifications, no missed or duplicate records
+- **Token Management**: Maintains a single `currentPageToken` state that updates with each API response
+- **End Detection**: Determines end of data when API returns no `next_page_token`
+
+### Data Accumulation Pattern
+
+Instead of replacing data on each page load, the system accumulates operations:
+
+- **Memory Considerations**: All loaded operations remain in memory until filter/search changes
+- **Performance Trade-offs**: Faster perceived performance vs. increased memory usage
+- **Reset Triggers**: Search term changes and operation kind filter changes clear accumulated data
+
+### Scroll Detection Mechanism
+
+The scroll handler uses a threshold-based approach:
+
+- **Threshold**: 100 pixels from bottom of scrollable area
+- **Debouncing**: Natural debouncing through loading state checks
+- **Event Delegation**: Scroll events attached to table container via enhanced TableWithControlsLayout
+
+## State Management Architecture
+
+### Local State Management
+
+The `useInfiniteOperations` hook manages four key pieces of state:
+
+1. **allOperations**: Accumulated array of operations from all loaded pages
+2. **currentPageToken**: Token for fetching the next page
+3. **hasNextPage**: Boolean flag indicating data availability
+4. **isLoadingMore**: Loading state for subsequent pages (not initial load)
+
+### API Integration Pattern
+
+The implementation integrates with existing RTK Query infrastructure:
+
+- **Query Reuse**: Uses existing `useGetOperationListQuery` endpoint
+- **Conditional Fetching**: Skips queries when no more pages available
+- **Polling Support**: Maintains auto-refresh functionality with `pollingInterval`
+
+## Migration Strategy
+
+### From @gravity-ui/react-data-table to @tanstack/react-table
+
+The migration involved several architectural changes:
+
+1. **Column Definition Format**
+
+   - Changed from proprietary column format to ColumnDef interface
+   - Migrated render functions to cell accessor pattern
+   - Updated sorting functions to use row.original data access
+
+2. **Table Instance Management**
+
+   - Replaced imperative API with declarative hook-based approach
+   - Moved from direct data manipulation to reactive state updates
+   - Integrated with @gravity-ui/table wrapper for consistent styling
+
+3. **Feature Preservation**
+   - Maintained all existing sorting capabilities
+   - Preserved custom cell renderers and formatters
+   - Kept action buttons and confirmation dialogs intact
+
+## Performance Characteristics
+
+### Network Efficiency
+
+- **Lazy Loading**: Data fetched only when user scrolls near bottom
+- **Request Deduplication**: Loading state prevents concurrent requests
+- **Optimal Page Size**: Configurable through existing pageSize parameter
+
+### Memory Management
+
+- **Linear Growth**: Memory usage grows linearly with scrolled content
+- **No Virtualization**: Current implementation renders all loaded rows
+- **Reset Mechanism**: Filter changes clear accumulated data
+
+### User Experience Optimizations
+
+- **Smooth Scrolling**: No scroll position jumps during data loading
+- **Loading Indicators**: Separate indicators for initial load vs. loading more
+- **Error Boundaries**: Graceful error handling without losing loaded data
+
+## Integration Points
+
+### Component Hierarchy
+
+The implementation maintains clean separation of concerns:
+
+1. **Operations Component**: Orchestrates table setup and scroll handling
+2. **useInfiniteOperations Hook**: Manages data fetching and accumulation
+3. **TableWithControlsLayout**: Enhanced with scroll event propagation
+4. **Table Component**: Renders accumulated data with @gravity-ui styling
+
+### API Contract
+
+The implementation relies on specific API response structure:
+
+- **operations**: Array of operation objects
+- **next_page_token**: String token for next page (optional)
+- **Pagination Parameters**: page_size and page_token query parameters
+
+## Backward Compatibility
+
+### Preserved Interfaces
+
+- All public component props remain unchanged
+- Existing column definitions work with minor syntax updates
+- Search and filter functionality operates identically
+
+### Internal Changes
+
+- Table rendering engine switched to @tanstack/react-table
+- Pagination state management moved to custom hook
+- Scroll event handling added to table container
+
+## Scalability Considerations
+
+### Current Limitations
+
+- All data held in memory (no virtual scrolling)
+- Client-side search across accumulated data
+- No server-side cursor management
+
+### Future Enhancement Paths
+
+1. **Virtual Scrolling**: Implement for datasets exceeding 1000 rows
+2. **Intelligent Prefetching**: Load next page before user reaches threshold
+3. **Memory Management**: Implement sliding window or LRU cache
+4. **Server-Side Search**: Optimize search to work with pagination
+
+## Testing Strategy
+
+### Unit Testing Approach
+
+- Hook testing with React Testing Library
+- Mocked API responses for pagination scenarios
+- Scroll event simulation for trigger testing
+
+### Integration Testing
+
+- Full component rendering with mock data
+- User interaction flows including scroll and search
+- Error scenario handling and recovery
+
+### Performance Testing
+
+- Memory profiling with large datasets
+- Scroll performance metrics
+- Network request optimization validation
diff --git a/src/components/TableWithControlsLayout/TableWithControlsLayout.tsx b/src/components/TableWithControlsLayout/TableWithControlsLayout.tsx
index cec3679ac5..84e283e9b8 100644
--- a/src/components/TableWithControlsLayout/TableWithControlsLayout.tsx
+++ b/src/components/TableWithControlsLayout/TableWithControlsLayout.tsx
@@ -22,6 +22,7 @@ export interface TableWrapperProps extends Omit<TableWithControlsLayoutItemProps
     loading?: boolean;
     scrollContainerRef?: React.RefObject<HTMLElement>;
     scrollDependencies?: any[];
+    onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
     children: React.ReactNode;
 }
 
@@ -57,6 +58,7 @@ TableWithControlsLayout.Table = function Table({
     className,
     scrollContainerRef,
     scrollDependencies = [],
+    onScroll,
 }: TableWrapperProps) {
     // Create an internal ref for the table container
     const tableContainerRef = React.useRef<HTMLDivElement>(null);
@@ -73,7 +75,7 @@ TableWithControlsLayout.Table = function Table({
     }
 
     return (
-        <div ref={tableContainerRef} className={b('table', className)}>
+        <div ref={tableContainerRef} className={b('table', className)} onScroll={onScroll}>
             {children}
         </div>
     );
diff --git a/src/containers/Operations/Operations.tsx b/src/containers/Operations/Operations.tsx
index 45f69be6d0..652aa64349 100644
--- a/src/containers/Operations/Operations.tsx
+++ b/src/containers/Operations/Operations.tsx
@@ -1,18 +1,19 @@
 import React from 'react';
 
+import {useTable} from '@gravity-ui/table';
+
 import {AccessDenied} from '../../components/Errors/403';
 import {ResponseError} from '../../components/Errors/ResponseError';
-import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
+import {Table} from '../../components/Table/Table';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
-import {operationsApi} from '../../store/reducers/operations';
 import {useAutoRefreshInterval} from '../../utils/hooks';
 import {isAccessError} from '../../utils/response';
 
 import {OperationsControls} from './OperationsControls';
 import {getColumns} from './columns';
-import {OPERATIONS_SELECTED_COLUMNS_KEY} from './constants';
 import i18n from './i18n';
 import {b} from './shared';
+import {useInfiniteOperations} from './useInfiniteOperations';
 import {useOperationsQueryParams} from './useOperationsQueryParams';
 
 interface OperationsProps {
@@ -22,24 +23,53 @@ interface OperationsProps {
 export function Operations({database}: OperationsProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
-    const {kind, searchValue, pageSize, pageToken, handleKindChange, handleSearchChange} =
+    const {kind, searchValue, pageSize, handleKindChange, handleSearchChange} =
         useOperationsQueryParams();
 
-    const {data, isLoading, error, refetch} = operationsApi.useGetOperationListQuery(
-        {database, kind, page_size: pageSize, page_token: pageToken},
-        {
-            pollingInterval: autoRefreshInterval,
-        },
+    const {
+        operations,
+        isLoading,
+        isLoadingMore,
+        error,
+        hasNextPage,
+        loadNextPage,
+        refreshTable,
+        totalCount,
+    } = useInfiniteOperations({
+        database,
+        kind,
+        pageSize,
+        searchValue,
+        pollingInterval: autoRefreshInterval,
+    });
+
+    // Set up table with infinite scrolling
+    const columns = React.useMemo(
+        () => getColumns({database, refreshTable}),
+        [database, refreshTable],
     );
 
-    const filteredOperations = React.useMemo(() => {
-        if (!data?.operations) {
-            return [];
-        }
-        return data.operations.filter((op) =>
-            op.id?.toLowerCase().includes(searchValue.toLowerCase()),
-        );
-    }, [data?.operations, searchValue]);
+    const table = useTable({
+        data: operations,
+        columns,
+        enableSorting: true,
+    });
+
+    // Handle scroll for infinite loading
+    const handleScroll = React.useCallback(
+        (event: React.UIEvent<HTMLDivElement>) => {
+            const target = event.target as HTMLElement;
+            const scrollTop = target.scrollTop;
+            const scrollHeight = target.scrollHeight;
+            const clientHeight = target.clientHeight;
+
+            // Load next page when scrolled near bottom
+            if (scrollHeight - scrollTop - clientHeight < 100 && hasNextPage && !isLoadingMore) {
+                loadNextPage();
+            }
+        },
+        [hasNextPage, isLoadingMore, loadNextPage],
+    );
 
     if (isAccessError(error)) {
         return <AccessDenied position="left" />;
@@ -51,23 +81,27 @@ export function Operations({database}: OperationsProps) {
                 <OperationsControls
                     kind={kind}
                     searchValue={searchValue}
-                    entitiesCountCurrent={filteredOperations.length}
-                    entitiesCountTotal={data?.operations?.length}
+                    entitiesCountCurrent={operations.length}
+                    entitiesCountTotal={totalCount}
                     entitiesLoading={isLoading}
                     handleKindChange={handleKindChange}
                     handleSearchChange={handleSearchChange}
                 />
             </TableWithControlsLayout.Controls>
             {error ? <ResponseError error={error} /> : null}
-            <TableWithControlsLayout.Table loading={isLoading} className={b('table')}>
-                {data ? (
-                    <ResizeableDataTable
-                        columns={getColumns({database, refreshTable: refetch})}
-                        columnsWidthLSKey={OPERATIONS_SELECTED_COLUMNS_KEY}
-                        data={filteredOperations}
-                        emptyDataMessage={i18n('title_empty')}
-                    />
-                ) : null}
+            <TableWithControlsLayout.Table
+                loading={isLoading}
+                className={b('table')}
+                onScroll={handleScroll}
+            >
+                {operations.length > 0 || isLoading ? (
+                    <Table table={table} />
+                ) : (
+                    <div>{i18n('title_empty')}</div>
+                )}
+                {isLoadingMore && (
+                    <div style={{textAlign: 'center', padding: '16px'}}>Loading more...</div>
+                )}
             </TableWithControlsLayout.Table>
         </TableWithControlsLayout>
     );
diff --git a/src/containers/Operations/columns.tsx b/src/containers/Operations/columns.tsx
index d6dc6e3d27..852134e647 100644
--- a/src/containers/Operations/columns.tsx
+++ b/src/containers/Operations/columns.tsx
@@ -1,10 +1,11 @@
 import {duration} from '@gravity-ui/date-utils';
 import {Ban, CircleStop} from '@gravity-ui/icons';
-import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
 import {ActionTooltip, Flex, Icon, Text} from '@gravity-ui/uikit';
+import type {ColumnDef} from '@tanstack/react-table';
 
 import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import {CellWithPopover} from '../../components/CellWithPopover/CellWithPopover';
+import {ColumnHeader} from '../../components/Table/Table';
 import {operationsApi} from '../../store/reducers/operations';
 import type {TOperation} from '../../types/api/operations';
 import {EStatusCode} from '../../types/api/operations';
@@ -24,82 +25,102 @@ export function getColumns({
 }: {
     database: string;
     refreshTable: VoidFunction;
-}): DataTableColumn<TOperation>[] {
+}): ColumnDef<TOperation>[] {
     return [
         {
-            name: COLUMNS_NAMES.ID,
-            header: COLUMNS_TITLES[COLUMNS_NAMES.ID],
-            width: 340,
-            render: ({row}) => {
-                if (!row.id) {
+            accessorKey: 'id',
+            header: () => <ColumnHeader>{COLUMNS_TITLES[COLUMNS_NAMES.ID]}</ColumnHeader>,
+            size: 340,
+            cell: ({getValue}) => {
+                const id = getValue<string>();
+                if (!id) {
                     return EMPTY_DATA_PLACEHOLDER;
                 }
                 return (
-                    <CellWithPopover placement={['top', 'bottom']} content={row.id}>
-                        {row.id}
+                    <CellWithPopover placement={['top', 'bottom']} content={id}>
+                        {id}
                     </CellWithPopover>
                 );
             },
         },
         {
-            name: COLUMNS_NAMES.STATUS,
-            header: COLUMNS_TITLES[COLUMNS_NAMES.STATUS],
-            render: ({row}) => {
-                if (!row.status) {
+            accessorKey: 'status',
+            header: () => <ColumnHeader>{COLUMNS_TITLES[COLUMNS_NAMES.STATUS]}</ColumnHeader>,
+            cell: ({getValue}) => {
+                const status = getValue<EStatusCode>();
+                if (!status) {
                     return EMPTY_DATA_PLACEHOLDER;
                 }
                 return (
-                    <Text color={row.status === EStatusCode.SUCCESS ? 'positive' : 'danger'}>
-                        {row.status}
+                    <Text color={status === EStatusCode.SUCCESS ? 'positive' : 'danger'}>
+                        {status}
                     </Text>
                 );
             },
         },
         {
-            name: COLUMNS_NAMES.CREATED_BY,
-            header: COLUMNS_TITLES[COLUMNS_NAMES.CREATED_BY],
-            render: ({row}) => {
-                if (!row.created_by) {
+            accessorKey: 'created_by',
+            header: () => <ColumnHeader>{COLUMNS_TITLES[COLUMNS_NAMES.CREATED_BY]}</ColumnHeader>,
+            cell: ({getValue}) => {
+                const createdBy = getValue<string>();
+                if (!createdBy) {
                     return EMPTY_DATA_PLACEHOLDER;
                 }
-                return row.created_by;
+                return createdBy;
             },
         },
         {
-            name: COLUMNS_NAMES.CREATE_TIME,
-            header: COLUMNS_TITLES[COLUMNS_NAMES.CREATE_TIME],
-            render: ({row}) => {
-                if (!row.create_time) {
+            accessorKey: 'create_time',
+            header: () => <ColumnHeader>{COLUMNS_TITLES[COLUMNS_NAMES.CREATE_TIME]}</ColumnHeader>,
+            cell: ({getValue}) => {
+                const createTime = getValue<TOperation['create_time']>();
+                if (!createTime) {
                     return EMPTY_DATA_PLACEHOLDER;
                 }
-                return formatDateTime(parseProtobufTimestampToMs(row.create_time));
+                return formatDateTime(parseProtobufTimestampToMs(createTime));
+            },
+            sortingFn: (rowA, rowB) => {
+                const a = rowA.original.create_time
+                    ? parseProtobufTimestampToMs(rowA.original.create_time)
+                    : 0;
+                const b = rowB.original.create_time
+                    ? parseProtobufTimestampToMs(rowB.original.create_time)
+                    : 0;
+                return a - b;
             },
-            sortAccessor: (row) =>
-                row.create_time ? parseProtobufTimestampToMs(row.create_time) : 0,
         },
         {
-            name: COLUMNS_NAMES.END_TIME,
-            header: COLUMNS_TITLES[COLUMNS_NAMES.END_TIME],
-            render: ({row}) => {
-                if (!row.end_time) {
+            accessorKey: 'end_time',
+            header: () => <ColumnHeader>{COLUMNS_TITLES[COLUMNS_NAMES.END_TIME]}</ColumnHeader>,
+            cell: ({getValue}) => {
+                const endTime = getValue<TOperation['end_time']>();
+                if (!endTime) {
                     return EMPTY_DATA_PLACEHOLDER;
                 }
-                return formatDateTime(parseProtobufTimestampToMs(row.end_time));
+                return formatDateTime(parseProtobufTimestampToMs(endTime));
+            },
+            sortingFn: (rowA, rowB) => {
+                const a = rowA.original.end_time
+                    ? parseProtobufTimestampToMs(rowA.original.end_time)
+                    : Number.MAX_SAFE_INTEGER;
+                const b = rowB.original.end_time
+                    ? parseProtobufTimestampToMs(rowB.original.end_time)
+                    : Number.MAX_SAFE_INTEGER;
+                return a - b;
             },
-            sortAccessor: (row) =>
-                row.end_time ? parseProtobufTimestampToMs(row.end_time) : Number.MAX_SAFE_INTEGER,
         },
         {
-            name: COLUMNS_NAMES.DURATION,
-            header: COLUMNS_TITLES[COLUMNS_NAMES.DURATION],
-            render: ({row}) => {
+            id: 'duration',
+            header: () => <ColumnHeader>{COLUMNS_TITLES[COLUMNS_NAMES.DURATION]}</ColumnHeader>,
+            cell: ({row}) => {
+                const operation = row.original;
                 let durationValue = 0;
-                if (!row.create_time) {
+                if (!operation.create_time) {
                     return EMPTY_DATA_PLACEHOLDER;
                 }
-                const createTime = parseProtobufTimestampToMs(row.create_time);
-                if (row.end_time) {
-                    const endTime = parseProtobufTimestampToMs(row.end_time);
+                const createTime = parseProtobufTimestampToMs(operation.create_time);
+                if (operation.end_time) {
+                    const endTime = parseProtobufTimestampToMs(operation.end_time);
                     durationValue = endTime - createTime;
                 } else {
                     durationValue = Date.now() - createTime;
@@ -110,36 +131,39 @@ export function getColumns({
                         ? duration(durationValue).format('hh:mm:ss')
                         : duration(durationValue).format('mm:ss');
 
-                return row.end_time
+                return operation.end_time
                     ? durationFormatted
                     : i18n('label_duration-ongoing', {value: durationFormatted});
             },
-            sortAccessor: (row) => {
-                if (!row.create_time) {
-                    return 0;
-                }
-                const createTime = parseProtobufTimestampToMs(row.create_time);
-                if (row.end_time) {
-                    const endTime = parseProtobufTimestampToMs(row.end_time);
-                    return endTime - createTime;
-                }
-                return Date.now() - createTime;
+            sortingFn: (rowA, rowB) => {
+                const getDuration = (operation: TOperation) => {
+                    if (!operation.create_time) {
+                        return 0;
+                    }
+                    const createTime = parseProtobufTimestampToMs(operation.create_time);
+                    if (operation.end_time) {
+                        const endTime = parseProtobufTimestampToMs(operation.end_time);
+                        return endTime - createTime;
+                    }
+                    return Date.now() - createTime;
+                };
+                return getDuration(rowA.original) - getDuration(rowB.original);
             },
         },
         {
-            name: 'Actions',
-            sortable: false,
-            resizeable: false,
-            header: '',
-            render: ({row}) => {
+            id: 'actions',
+            header: () => <ColumnHeader> </ColumnHeader>,
+            cell: ({row}) => {
                 return (
                     <OperationsActions
-                        operation={row}
+                        operation={row.original}
                         database={database}
                         refreshTable={refreshTable}
                     />
                 );
             },
+            enableSorting: false,
+            size: 100,
         },
     ];
 }
diff --git a/src/containers/Operations/useInfiniteOperations.ts b/src/containers/Operations/useInfiniteOperations.ts
new file mode 100644
index 0000000000..1362187d27
--- /dev/null
+++ b/src/containers/Operations/useInfiniteOperations.ts
@@ -0,0 +1,104 @@
+import React from 'react';
+
+import {operationsApi} from '../../store/reducers/operations';
+import type {OperationKind, TOperation} from '../../types/api/operations';
+
+interface UseInfiniteOperationsProps {
+    database: string;
+    kind: OperationKind;
+    pageSize?: number;
+    searchValue: string;
+    pollingInterval?: number;
+}
+
+export function useInfiniteOperations({
+    database,
+    kind,
+    pageSize,
+    searchValue,
+    pollingInterval,
+}: UseInfiniteOperationsProps) {
+    // Accumulated operations from all loaded pages
+    const [allOperations, setAllOperations] = React.useState<TOperation[]>([]);
+
+    // Current page token for next page
+    const [currentPageToken, setCurrentPageToken] = React.useState<string | undefined>();
+
+    // Track if we have more pages to load
+    const [hasNextPage, setHasNextPage] = React.useState(true);
+
+    // Track loading state for infinite scroll
+    const [isLoadingMore, setIsLoadingMore] = React.useState(false);
+
+    // Current page query
+    const {data, isLoading, error, refetch} = operationsApi.useGetOperationListQuery(
+        {database, kind, page_size: pageSize, page_token: currentPageToken},
+        {
+            pollingInterval,
+            skip: !hasNextPage && currentPageToken !== undefined,
+        },
+    );
+
+    // Reset everything when search or kind changes
+    React.useEffect(() => {
+        setAllOperations([]);
+        setCurrentPageToken(undefined);
+        setHasNextPage(true);
+        setIsLoadingMore(false);
+    }, [searchValue, kind]);
+
+    // Accumulate operations when new data arrives
+    React.useEffect(() => {
+        if (data?.operations) {
+            if (currentPageToken === undefined) {
+                // First page - replace all operations
+                setAllOperations(data.operations);
+            } else {
+                // Subsequent pages - append to existing operations
+                setAllOperations((prev) => [...prev, ...data.operations!]);
+            }
+
+            // Update pagination state
+            setHasNextPage(Boolean(data.next_page_token));
+            setIsLoadingMore(false);
+        }
+    }, [data, currentPageToken]);
+
+    // Function to load next page
+    const loadNextPage = React.useCallback(() => {
+        if (data?.next_page_token && !isLoadingMore && !isLoading) {
+            setIsLoadingMore(true);
+            setCurrentPageToken(data.next_page_token);
+        }
+    }, [data?.next_page_token, isLoadingMore, isLoading]);
+
+    // Filter operations based on search
+    const filteredOperations = React.useMemo(() => {
+        if (!searchValue) {
+            return allOperations;
+        }
+        return allOperations.filter((op) =>
+            op.id?.toLowerCase().includes(searchValue.toLowerCase()),
+        );
+    }, [allOperations, searchValue]);
+
+    // Refresh function that resets pagination
+    const refreshTable = React.useCallback(() => {
+        setAllOperations([]);
+        setCurrentPageToken(undefined);
+        setHasNextPage(true);
+        setIsLoadingMore(false);
+        refetch();
+    }, [refetch]);
+
+    return {
+        operations: filteredOperations,
+        isLoading: isLoading && currentPageToken === undefined, // Only show loading for first page
+        isLoadingMore,
+        error,
+        hasNextPage,
+        loadNextPage,
+        refreshTable,
+        totalCount: allOperations.length,
+    };
+}

From 19ad3f259aa40b55ffbabe7a5933a76cc01b8dc3 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Thu, 19 Jun 2025 13:20:27 +0300
Subject: [PATCH 02/16] Revert "fix: operations tab"

This reverts commit 57f29f07b4bf99882e025dc61b937c4d2ab396a2.
---
 ...scrolling-pagination-technical-overview.md | 188 ------------------
 .../TableWithControlsLayout.tsx               |   4 +-
 src/containers/Operations/Operations.tsx      |  90 +++------
 src/containers/Operations/columns.tsx         | 140 ++++++-------
 .../Operations/useInfiniteOperations.ts       | 104 ----------
 5 files changed, 87 insertions(+), 439 deletions(-)
 delete mode 100644 docs/infinite-scrolling-pagination-technical-overview.md
 delete mode 100644 src/containers/Operations/useInfiniteOperations.ts

diff --git a/docs/infinite-scrolling-pagination-technical-overview.md b/docs/infinite-scrolling-pagination-technical-overview.md
deleted file mode 100644
index eece946f82..0000000000
--- a/docs/infinite-scrolling-pagination-technical-overview.md
+++ /dev/null
@@ -1,188 +0,0 @@
-# Infinite Scrolling Pagination - Technical Overview
-
-## Architecture Overview
-
-The implementation transforms a traditional paginated table into an infinite scrolling experience by leveraging token-based pagination provided by the YDB API. The solution accumulates data from multiple API responses while maintaining seamless user experience through scroll-based loading triggers.
-
-## Technology Stack
-
-### Core Libraries
-
-1. **@gravity-ui/table**
-
-   - Provides the base table component with built-in virtualization support
-   - Offers React hooks for table state management
-   - Integrates seamlessly with @tanstack/react-table for advanced features
-
-2. **@tanstack/react-table (v8)**
-
-   - Powers the table logic including sorting, filtering, and column management
-   - Provides TypeScript-first API with strong type safety
-   - Offers flexible column definitions and cell rendering capabilities
-
-3. **RTK Query (Redux Toolkit Query)**
-
-   - Manages API calls through the existing `operationsApi` service
-   - Provides caching, polling, and request lifecycle management
-   - Enables conditional query execution through the `skip` parameter
-
-4. **React Hooks**
-   - Custom hooks pattern for encapsulating infinite scroll logic
-   - Leverages useState, useEffect, useCallback, and useMemo for state management
-   - Provides clean separation of concerns between UI and business logic
-
-## Technical Design Decisions
-
-### Token-Based Pagination Strategy
-
-The implementation uses a token-based pagination approach rather than offset/limit pagination:
-
-- **Advantages**: Consistent results even with concurrent data modifications, no missed or duplicate records
-- **Token Management**: Maintains a single `currentPageToken` state that updates with each API response
-- **End Detection**: Determines end of data when API returns no `next_page_token`
-
-### Data Accumulation Pattern
-
-Instead of replacing data on each page load, the system accumulates operations:
-
-- **Memory Considerations**: All loaded operations remain in memory until filter/search changes
-- **Performance Trade-offs**: Faster perceived performance vs. increased memory usage
-- **Reset Triggers**: Search term changes and operation kind filter changes clear accumulated data
-
-### Scroll Detection Mechanism
-
-The scroll handler uses a threshold-based approach:
-
-- **Threshold**: 100 pixels from bottom of scrollable area
-- **Debouncing**: Natural debouncing through loading state checks
-- **Event Delegation**: Scroll events attached to table container via enhanced TableWithControlsLayout
-
-## State Management Architecture
-
-### Local State Management
-
-The `useInfiniteOperations` hook manages four key pieces of state:
-
-1. **allOperations**: Accumulated array of operations from all loaded pages
-2. **currentPageToken**: Token for fetching the next page
-3. **hasNextPage**: Boolean flag indicating data availability
-4. **isLoadingMore**: Loading state for subsequent pages (not initial load)
-
-### API Integration Pattern
-
-The implementation integrates with existing RTK Query infrastructure:
-
-- **Query Reuse**: Uses existing `useGetOperationListQuery` endpoint
-- **Conditional Fetching**: Skips queries when no more pages available
-- **Polling Support**: Maintains auto-refresh functionality with `pollingInterval`
-
-## Migration Strategy
-
-### From @gravity-ui/react-data-table to @tanstack/react-table
-
-The migration involved several architectural changes:
-
-1. **Column Definition Format**
-
-   - Changed from proprietary column format to ColumnDef interface
-   - Migrated render functions to cell accessor pattern
-   - Updated sorting functions to use row.original data access
-
-2. **Table Instance Management**
-
-   - Replaced imperative API with declarative hook-based approach
-   - Moved from direct data manipulation to reactive state updates
-   - Integrated with @gravity-ui/table wrapper for consistent styling
-
-3. **Feature Preservation**
-   - Maintained all existing sorting capabilities
-   - Preserved custom cell renderers and formatters
-   - Kept action buttons and confirmation dialogs intact
-
-## Performance Characteristics
-
-### Network Efficiency
-
-- **Lazy Loading**: Data fetched only when user scrolls near bottom
-- **Request Deduplication**: Loading state prevents concurrent requests
-- **Optimal Page Size**: Configurable through existing pageSize parameter
-
-### Memory Management
-
-- **Linear Growth**: Memory usage grows linearly with scrolled content
-- **No Virtualization**: Current implementation renders all loaded rows
-- **Reset Mechanism**: Filter changes clear accumulated data
-
-### User Experience Optimizations
-
-- **Smooth Scrolling**: No scroll position jumps during data loading
-- **Loading Indicators**: Separate indicators for initial load vs. loading more
-- **Error Boundaries**: Graceful error handling without losing loaded data
-
-## Integration Points
-
-### Component Hierarchy
-
-The implementation maintains clean separation of concerns:
-
-1. **Operations Component**: Orchestrates table setup and scroll handling
-2. **useInfiniteOperations Hook**: Manages data fetching and accumulation
-3. **TableWithControlsLayout**: Enhanced with scroll event propagation
-4. **Table Component**: Renders accumulated data with @gravity-ui styling
-
-### API Contract
-
-The implementation relies on specific API response structure:
-
-- **operations**: Array of operation objects
-- **next_page_token**: String token for next page (optional)
-- **Pagination Parameters**: page_size and page_token query parameters
-
-## Backward Compatibility
-
-### Preserved Interfaces
-
-- All public component props remain unchanged
-- Existing column definitions work with minor syntax updates
-- Search and filter functionality operates identically
-
-### Internal Changes
-
-- Table rendering engine switched to @tanstack/react-table
-- Pagination state management moved to custom hook
-- Scroll event handling added to table container
-
-## Scalability Considerations
-
-### Current Limitations
-
-- All data held in memory (no virtual scrolling)
-- Client-side search across accumulated data
-- No server-side cursor management
-
-### Future Enhancement Paths
-
-1. **Virtual Scrolling**: Implement for datasets exceeding 1000 rows
-2. **Intelligent Prefetching**: Load next page before user reaches threshold
-3. **Memory Management**: Implement sliding window or LRU cache
-4. **Server-Side Search**: Optimize search to work with pagination
-
-## Testing Strategy
-
-### Unit Testing Approach
-
-- Hook testing with React Testing Library
-- Mocked API responses for pagination scenarios
-- Scroll event simulation for trigger testing
-
-### Integration Testing
-
-- Full component rendering with mock data
-- User interaction flows including scroll and search
-- Error scenario handling and recovery
-
-### Performance Testing
-
-- Memory profiling with large datasets
-- Scroll performance metrics
-- Network request optimization validation
diff --git a/src/components/TableWithControlsLayout/TableWithControlsLayout.tsx b/src/components/TableWithControlsLayout/TableWithControlsLayout.tsx
index 84e283e9b8..cec3679ac5 100644
--- a/src/components/TableWithControlsLayout/TableWithControlsLayout.tsx
+++ b/src/components/TableWithControlsLayout/TableWithControlsLayout.tsx
@@ -22,7 +22,6 @@ export interface TableWrapperProps extends Omit<TableWithControlsLayoutItemProps
     loading?: boolean;
     scrollContainerRef?: React.RefObject<HTMLElement>;
     scrollDependencies?: any[];
-    onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
     children: React.ReactNode;
 }
 
@@ -58,7 +57,6 @@ TableWithControlsLayout.Table = function Table({
     className,
     scrollContainerRef,
     scrollDependencies = [],
-    onScroll,
 }: TableWrapperProps) {
     // Create an internal ref for the table container
     const tableContainerRef = React.useRef<HTMLDivElement>(null);
@@ -75,7 +73,7 @@ TableWithControlsLayout.Table = function Table({
     }
 
     return (
-        <div ref={tableContainerRef} className={b('table', className)} onScroll={onScroll}>
+        <div ref={tableContainerRef} className={b('table', className)}>
             {children}
         </div>
     );
diff --git a/src/containers/Operations/Operations.tsx b/src/containers/Operations/Operations.tsx
index 652aa64349..45f69be6d0 100644
--- a/src/containers/Operations/Operations.tsx
+++ b/src/containers/Operations/Operations.tsx
@@ -1,19 +1,18 @@
 import React from 'react';
 
-import {useTable} from '@gravity-ui/table';
-
 import {AccessDenied} from '../../components/Errors/403';
 import {ResponseError} from '../../components/Errors/ResponseError';
-import {Table} from '../../components/Table/Table';
+import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
+import {operationsApi} from '../../store/reducers/operations';
 import {useAutoRefreshInterval} from '../../utils/hooks';
 import {isAccessError} from '../../utils/response';
 
 import {OperationsControls} from './OperationsControls';
 import {getColumns} from './columns';
+import {OPERATIONS_SELECTED_COLUMNS_KEY} from './constants';
 import i18n from './i18n';
 import {b} from './shared';
-import {useInfiniteOperations} from './useInfiniteOperations';
 import {useOperationsQueryParams} from './useOperationsQueryParams';
 
 interface OperationsProps {
@@ -23,54 +22,25 @@ interface OperationsProps {
 export function Operations({database}: OperationsProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
-    const {kind, searchValue, pageSize, handleKindChange, handleSearchChange} =
+    const {kind, searchValue, pageSize, pageToken, handleKindChange, handleSearchChange} =
         useOperationsQueryParams();
 
-    const {
-        operations,
-        isLoading,
-        isLoadingMore,
-        error,
-        hasNextPage,
-        loadNextPage,
-        refreshTable,
-        totalCount,
-    } = useInfiniteOperations({
-        database,
-        kind,
-        pageSize,
-        searchValue,
-        pollingInterval: autoRefreshInterval,
-    });
-
-    // Set up table with infinite scrolling
-    const columns = React.useMemo(
-        () => getColumns({database, refreshTable}),
-        [database, refreshTable],
-    );
-
-    const table = useTable({
-        data: operations,
-        columns,
-        enableSorting: true,
-    });
-
-    // Handle scroll for infinite loading
-    const handleScroll = React.useCallback(
-        (event: React.UIEvent<HTMLDivElement>) => {
-            const target = event.target as HTMLElement;
-            const scrollTop = target.scrollTop;
-            const scrollHeight = target.scrollHeight;
-            const clientHeight = target.clientHeight;
-
-            // Load next page when scrolled near bottom
-            if (scrollHeight - scrollTop - clientHeight < 100 && hasNextPage && !isLoadingMore) {
-                loadNextPage();
-            }
+    const {data, isLoading, error, refetch} = operationsApi.useGetOperationListQuery(
+        {database, kind, page_size: pageSize, page_token: pageToken},
+        {
+            pollingInterval: autoRefreshInterval,
         },
-        [hasNextPage, isLoadingMore, loadNextPage],
     );
 
+    const filteredOperations = React.useMemo(() => {
+        if (!data?.operations) {
+            return [];
+        }
+        return data.operations.filter((op) =>
+            op.id?.toLowerCase().includes(searchValue.toLowerCase()),
+        );
+    }, [data?.operations, searchValue]);
+
     if (isAccessError(error)) {
         return <AccessDenied position="left" />;
     }
@@ -81,27 +51,23 @@ export function Operations({database}: OperationsProps) {
                 <OperationsControls
                     kind={kind}
                     searchValue={searchValue}
-                    entitiesCountCurrent={operations.length}
-                    entitiesCountTotal={totalCount}
+                    entitiesCountCurrent={filteredOperations.length}
+                    entitiesCountTotal={data?.operations?.length}
                     entitiesLoading={isLoading}
                     handleKindChange={handleKindChange}
                     handleSearchChange={handleSearchChange}
                 />
             </TableWithControlsLayout.Controls>
             {error ? <ResponseError error={error} /> : null}
-            <TableWithControlsLayout.Table
-                loading={isLoading}
-                className={b('table')}
-                onScroll={handleScroll}
-            >
-                {operations.length > 0 || isLoading ? (
-                    <Table table={table} />
-                ) : (
-                    <div>{i18n('title_empty')}</div>
-                )}
-                {isLoadingMore && (
-                    <div style={{textAlign: 'center', padding: '16px'}}>Loading more...</div>
-                )}
+            <TableWithControlsLayout.Table loading={isLoading} className={b('table')}>
+                {data ? (
+                    <ResizeableDataTable
+                        columns={getColumns({database, refreshTable: refetch})}
+                        columnsWidthLSKey={OPERATIONS_SELECTED_COLUMNS_KEY}
+                        data={filteredOperations}
+                        emptyDataMessage={i18n('title_empty')}
+                    />
+                ) : null}
             </TableWithControlsLayout.Table>
         </TableWithControlsLayout>
     );
diff --git a/src/containers/Operations/columns.tsx b/src/containers/Operations/columns.tsx
index 852134e647..d6dc6e3d27 100644
--- a/src/containers/Operations/columns.tsx
+++ b/src/containers/Operations/columns.tsx
@@ -1,11 +1,10 @@
 import {duration} from '@gravity-ui/date-utils';
 import {Ban, CircleStop} from '@gravity-ui/icons';
+import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
 import {ActionTooltip, Flex, Icon, Text} from '@gravity-ui/uikit';
-import type {ColumnDef} from '@tanstack/react-table';
 
 import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import {CellWithPopover} from '../../components/CellWithPopover/CellWithPopover';
-import {ColumnHeader} from '../../components/Table/Table';
 import {operationsApi} from '../../store/reducers/operations';
 import type {TOperation} from '../../types/api/operations';
 import {EStatusCode} from '../../types/api/operations';
@@ -25,102 +24,82 @@ export function getColumns({
 }: {
     database: string;
     refreshTable: VoidFunction;
-}): ColumnDef<TOperation>[] {
+}): DataTableColumn<TOperation>[] {
     return [
         {
-            accessorKey: 'id',
-            header: () => <ColumnHeader>{COLUMNS_TITLES[COLUMNS_NAMES.ID]}</ColumnHeader>,
-            size: 340,
-            cell: ({getValue}) => {
-                const id = getValue<string>();
-                if (!id) {
+            name: COLUMNS_NAMES.ID,
+            header: COLUMNS_TITLES[COLUMNS_NAMES.ID],
+            width: 340,
+            render: ({row}) => {
+                if (!row.id) {
                     return EMPTY_DATA_PLACEHOLDER;
                 }
                 return (
-                    <CellWithPopover placement={['top', 'bottom']} content={id}>
-                        {id}
+                    <CellWithPopover placement={['top', 'bottom']} content={row.id}>
+                        {row.id}
                     </CellWithPopover>
                 );
             },
         },
         {
-            accessorKey: 'status',
-            header: () => <ColumnHeader>{COLUMNS_TITLES[COLUMNS_NAMES.STATUS]}</ColumnHeader>,
-            cell: ({getValue}) => {
-                const status = getValue<EStatusCode>();
-                if (!status) {
+            name: COLUMNS_NAMES.STATUS,
+            header: COLUMNS_TITLES[COLUMNS_NAMES.STATUS],
+            render: ({row}) => {
+                if (!row.status) {
                     return EMPTY_DATA_PLACEHOLDER;
                 }
                 return (
-                    <Text color={status === EStatusCode.SUCCESS ? 'positive' : 'danger'}>
-                        {status}
+                    <Text color={row.status === EStatusCode.SUCCESS ? 'positive' : 'danger'}>
+                        {row.status}
                     </Text>
                 );
             },
         },
         {
-            accessorKey: 'created_by',
-            header: () => <ColumnHeader>{COLUMNS_TITLES[COLUMNS_NAMES.CREATED_BY]}</ColumnHeader>,
-            cell: ({getValue}) => {
-                const createdBy = getValue<string>();
-                if (!createdBy) {
+            name: COLUMNS_NAMES.CREATED_BY,
+            header: COLUMNS_TITLES[COLUMNS_NAMES.CREATED_BY],
+            render: ({row}) => {
+                if (!row.created_by) {
                     return EMPTY_DATA_PLACEHOLDER;
                 }
-                return createdBy;
+                return row.created_by;
             },
         },
         {
-            accessorKey: 'create_time',
-            header: () => <ColumnHeader>{COLUMNS_TITLES[COLUMNS_NAMES.CREATE_TIME]}</ColumnHeader>,
-            cell: ({getValue}) => {
-                const createTime = getValue<TOperation['create_time']>();
-                if (!createTime) {
+            name: COLUMNS_NAMES.CREATE_TIME,
+            header: COLUMNS_TITLES[COLUMNS_NAMES.CREATE_TIME],
+            render: ({row}) => {
+                if (!row.create_time) {
                     return EMPTY_DATA_PLACEHOLDER;
                 }
-                return formatDateTime(parseProtobufTimestampToMs(createTime));
-            },
-            sortingFn: (rowA, rowB) => {
-                const a = rowA.original.create_time
-                    ? parseProtobufTimestampToMs(rowA.original.create_time)
-                    : 0;
-                const b = rowB.original.create_time
-                    ? parseProtobufTimestampToMs(rowB.original.create_time)
-                    : 0;
-                return a - b;
+                return formatDateTime(parseProtobufTimestampToMs(row.create_time));
             },
+            sortAccessor: (row) =>
+                row.create_time ? parseProtobufTimestampToMs(row.create_time) : 0,
         },
         {
-            accessorKey: 'end_time',
-            header: () => <ColumnHeader>{COLUMNS_TITLES[COLUMNS_NAMES.END_TIME]}</ColumnHeader>,
-            cell: ({getValue}) => {
-                const endTime = getValue<TOperation['end_time']>();
-                if (!endTime) {
+            name: COLUMNS_NAMES.END_TIME,
+            header: COLUMNS_TITLES[COLUMNS_NAMES.END_TIME],
+            render: ({row}) => {
+                if (!row.end_time) {
                     return EMPTY_DATA_PLACEHOLDER;
                 }
-                return formatDateTime(parseProtobufTimestampToMs(endTime));
-            },
-            sortingFn: (rowA, rowB) => {
-                const a = rowA.original.end_time
-                    ? parseProtobufTimestampToMs(rowA.original.end_time)
-                    : Number.MAX_SAFE_INTEGER;
-                const b = rowB.original.end_time
-                    ? parseProtobufTimestampToMs(rowB.original.end_time)
-                    : Number.MAX_SAFE_INTEGER;
-                return a - b;
+                return formatDateTime(parseProtobufTimestampToMs(row.end_time));
             },
+            sortAccessor: (row) =>
+                row.end_time ? parseProtobufTimestampToMs(row.end_time) : Number.MAX_SAFE_INTEGER,
         },
         {
-            id: 'duration',
-            header: () => <ColumnHeader>{COLUMNS_TITLES[COLUMNS_NAMES.DURATION]}</ColumnHeader>,
-            cell: ({row}) => {
-                const operation = row.original;
+            name: COLUMNS_NAMES.DURATION,
+            header: COLUMNS_TITLES[COLUMNS_NAMES.DURATION],
+            render: ({row}) => {
                 let durationValue = 0;
-                if (!operation.create_time) {
+                if (!row.create_time) {
                     return EMPTY_DATA_PLACEHOLDER;
                 }
-                const createTime = parseProtobufTimestampToMs(operation.create_time);
-                if (operation.end_time) {
-                    const endTime = parseProtobufTimestampToMs(operation.end_time);
+                const createTime = parseProtobufTimestampToMs(row.create_time);
+                if (row.end_time) {
+                    const endTime = parseProtobufTimestampToMs(row.end_time);
                     durationValue = endTime - createTime;
                 } else {
                     durationValue = Date.now() - createTime;
@@ -131,39 +110,36 @@ export function getColumns({
                         ? duration(durationValue).format('hh:mm:ss')
                         : duration(durationValue).format('mm:ss');
 
-                return operation.end_time
+                return row.end_time
                     ? durationFormatted
                     : i18n('label_duration-ongoing', {value: durationFormatted});
             },
-            sortingFn: (rowA, rowB) => {
-                const getDuration = (operation: TOperation) => {
-                    if (!operation.create_time) {
-                        return 0;
-                    }
-                    const createTime = parseProtobufTimestampToMs(operation.create_time);
-                    if (operation.end_time) {
-                        const endTime = parseProtobufTimestampToMs(operation.end_time);
-                        return endTime - createTime;
-                    }
-                    return Date.now() - createTime;
-                };
-                return getDuration(rowA.original) - getDuration(rowB.original);
+            sortAccessor: (row) => {
+                if (!row.create_time) {
+                    return 0;
+                }
+                const createTime = parseProtobufTimestampToMs(row.create_time);
+                if (row.end_time) {
+                    const endTime = parseProtobufTimestampToMs(row.end_time);
+                    return endTime - createTime;
+                }
+                return Date.now() - createTime;
             },
         },
         {
-            id: 'actions',
-            header: () => <ColumnHeader> </ColumnHeader>,
-            cell: ({row}) => {
+            name: 'Actions',
+            sortable: false,
+            resizeable: false,
+            header: '',
+            render: ({row}) => {
                 return (
                     <OperationsActions
-                        operation={row.original}
+                        operation={row}
                         database={database}
                         refreshTable={refreshTable}
                     />
                 );
             },
-            enableSorting: false,
-            size: 100,
         },
     ];
 }
diff --git a/src/containers/Operations/useInfiniteOperations.ts b/src/containers/Operations/useInfiniteOperations.ts
deleted file mode 100644
index 1362187d27..0000000000
--- a/src/containers/Operations/useInfiniteOperations.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from 'react';
-
-import {operationsApi} from '../../store/reducers/operations';
-import type {OperationKind, TOperation} from '../../types/api/operations';
-
-interface UseInfiniteOperationsProps {
-    database: string;
-    kind: OperationKind;
-    pageSize?: number;
-    searchValue: string;
-    pollingInterval?: number;
-}
-
-export function useInfiniteOperations({
-    database,
-    kind,
-    pageSize,
-    searchValue,
-    pollingInterval,
-}: UseInfiniteOperationsProps) {
-    // Accumulated operations from all loaded pages
-    const [allOperations, setAllOperations] = React.useState<TOperation[]>([]);
-
-    // Current page token for next page
-    const [currentPageToken, setCurrentPageToken] = React.useState<string | undefined>();
-
-    // Track if we have more pages to load
-    const [hasNextPage, setHasNextPage] = React.useState(true);
-
-    // Track loading state for infinite scroll
-    const [isLoadingMore, setIsLoadingMore] = React.useState(false);
-
-    // Current page query
-    const {data, isLoading, error, refetch} = operationsApi.useGetOperationListQuery(
-        {database, kind, page_size: pageSize, page_token: currentPageToken},
-        {
-            pollingInterval,
-            skip: !hasNextPage && currentPageToken !== undefined,
-        },
-    );
-
-    // Reset everything when search or kind changes
-    React.useEffect(() => {
-        setAllOperations([]);
-        setCurrentPageToken(undefined);
-        setHasNextPage(true);
-        setIsLoadingMore(false);
-    }, [searchValue, kind]);
-
-    // Accumulate operations when new data arrives
-    React.useEffect(() => {
-        if (data?.operations) {
-            if (currentPageToken === undefined) {
-                // First page - replace all operations
-                setAllOperations(data.operations);
-            } else {
-                // Subsequent pages - append to existing operations
-                setAllOperations((prev) => [...prev, ...data.operations!]);
-            }
-
-            // Update pagination state
-            setHasNextPage(Boolean(data.next_page_token));
-            setIsLoadingMore(false);
-        }
-    }, [data, currentPageToken]);
-
-    // Function to load next page
-    const loadNextPage = React.useCallback(() => {
-        if (data?.next_page_token && !isLoadingMore && !isLoading) {
-            setIsLoadingMore(true);
-            setCurrentPageToken(data.next_page_token);
-        }
-    }, [data?.next_page_token, isLoadingMore, isLoading]);
-
-    // Filter operations based on search
-    const filteredOperations = React.useMemo(() => {
-        if (!searchValue) {
-            return allOperations;
-        }
-        return allOperations.filter((op) =>
-            op.id?.toLowerCase().includes(searchValue.toLowerCase()),
-        );
-    }, [allOperations, searchValue]);
-
-    // Refresh function that resets pagination
-    const refreshTable = React.useCallback(() => {
-        setAllOperations([]);
-        setCurrentPageToken(undefined);
-        setHasNextPage(true);
-        setIsLoadingMore(false);
-        refetch();
-    }, [refetch]);
-
-    return {
-        operations: filteredOperations,
-        isLoading: isLoading && currentPageToken === undefined, // Only show loading for first page
-        isLoadingMore,
-        error,
-        hasNextPage,
-        loadNextPage,
-        refreshTable,
-        totalCount: allOperations.length,
-    };
-}

From 4ce5ea92ef83cfd4681c934cb3efb360ee306f8c Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Thu, 19 Jun 2025 15:45:56 +0300
Subject: [PATCH 03/16] feat: operations pagination

---
 .../TableSkeleton/TableSkeleton.scss          | 13 +++
 .../TableSkeleton/TableSkeleton.tsx           | 32 +++++--
 src/containers/Operations/Operations.tsx      | 59 +++++++-----
 src/containers/Operations/columns.tsx         | 15 ---
 .../Operations/useInfiniteOperations.ts       | 92 +++++++++++++++++++
 .../Tenant/Diagnostics/Diagnostics.tsx        |  2 +-
 src/types/api/operations.ts                   |  4 +-
 7 files changed, 169 insertions(+), 48 deletions(-)
 create mode 100644 src/containers/Operations/useInfiniteOperations.ts

diff --git a/src/components/TableSkeleton/TableSkeleton.scss b/src/components/TableSkeleton/TableSkeleton.scss
index d976c39f88..1590db2f1b 100644
--- a/src/components/TableSkeleton/TableSkeleton.scss
+++ b/src/components/TableSkeleton/TableSkeleton.scss
@@ -36,6 +36,19 @@
 
     &__col-5 {
         width: 20%;
+        margin-right: 5%;
+    }
+
+    &__col-6,
+    &__col-7,
+    &__col-8,
+    &__col-9 {
+        width: 8%;
+        margin-right: 3%;
+    }
+
+    &__col-10 {
+        width: 8%;
     }
 
     &__col-full {
diff --git a/src/components/TableSkeleton/TableSkeleton.tsx b/src/components/TableSkeleton/TableSkeleton.tsx
index 9b5161695d..0e13a856af 100644
--- a/src/components/TableSkeleton/TableSkeleton.tsx
+++ b/src/components/TableSkeleton/TableSkeleton.tsx
@@ -11,20 +11,36 @@ interface TableSkeletonProps {
     className?: string;
     rows?: number;
     delay?: number;
+    columns?: number;
+    showHeader?: boolean;
 }
 
-export const TableSkeleton = ({rows = 2, delay = 600, className}: TableSkeletonProps) => {
+export const TableSkeleton = ({
+    rows = 2,
+    delay = 600,
+    className,
+    columns = 5,
+    showHeader = true,
+}: TableSkeletonProps) => {
     const [show] = useDelayed(delay);
 
-    return (
-        <div className={b('wrapper', {hidden: !show}, className)}>
+    const renderHeaderRow = () => {
+        if (!showHeader) {
+            return null;
+        }
+
+        return (
             <div className={b('row')}>
-                <Skeleton className={b('col-1')} />
-                <Skeleton className={b('col-2')} />
-                <Skeleton className={b('col-3')} />
-                <Skeleton className={b('col-4')} />
-                <Skeleton className={b('col-5')} />
+                {[...new Array(columns)].map((_, index) => (
+                    <Skeleton key={`header-col-${index}`} className={b(`col-${index + 1}`)} />
+                ))}
             </div>
+        );
+    };
+
+    return (
+        <div className={b('wrapper', {hidden: !show}, className)}>
+            {renderHeaderRow()}
             {[...new Array(rows)].map((_, index) => (
                 <div className={b('row')} key={`skeleton-row-${index}`}>
                     <Skeleton className={b('col-full')} />
diff --git a/src/containers/Operations/Operations.tsx b/src/containers/Operations/Operations.tsx
index 45f69be6d0..b5626eb0fc 100644
--- a/src/containers/Operations/Operations.tsx
+++ b/src/containers/Operations/Operations.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import {AccessDenied} from '../../components/Errors/403';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
+import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
-import {operationsApi} from '../../store/reducers/operations';
 import {useAutoRefreshInterval} from '../../utils/hooks';
 import {isAccessError} from '../../utils/response';
 
@@ -13,46 +13,48 @@ import {getColumns} from './columns';
 import {OPERATIONS_SELECTED_COLUMNS_KEY} from './constants';
 import i18n from './i18n';
 import {b} from './shared';
+import {useInfiniteOperations} from './useInfiniteOperations';
 import {useOperationsQueryParams} from './useOperationsQueryParams';
 
 interface OperationsProps {
     database: string;
+    scrollContainerRef?: React.RefObject<HTMLElement>;
 }
 
-export function Operations({database}: OperationsProps) {
+export function Operations({database, scrollContainerRef}: OperationsProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
-    const {kind, searchValue, pageSize, pageToken, handleKindChange, handleSearchChange} =
+    const {kind, searchValue, pageSize, handleKindChange, handleSearchChange} =
         useOperationsQueryParams();
 
-    const {data, isLoading, error, refetch} = operationsApi.useGetOperationListQuery(
-        {database, kind, page_size: pageSize, page_token: pageToken},
-        {
+    const {operations, isLoading, isLoadingMore, error, refreshTable, totalCount} =
+        useInfiniteOperations({
+            database,
+            kind,
+            pageSize,
+            searchValue,
             pollingInterval: autoRefreshInterval,
-        },
-    );
-
-    const filteredOperations = React.useMemo(() => {
-        if (!data?.operations) {
-            return [];
-        }
-        return data.operations.filter((op) =>
-            op.id?.toLowerCase().includes(searchValue.toLowerCase()),
-        );
-    }, [data?.operations, searchValue]);
+            scrollContainerRef,
+        });
 
     if (isAccessError(error)) {
         return <AccessDenied position="left" />;
     }
 
+    const settings = React.useMemo(() => {
+        return {
+            sortable: false,
+        };
+    }, []);
+
     return (
         <TableWithControlsLayout>
             <TableWithControlsLayout.Controls>
                 <OperationsControls
                     kind={kind}
                     searchValue={searchValue}
-                    entitiesCountCurrent={filteredOperations.length}
-                    entitiesCountTotal={data?.operations?.length}
+                    entitiesCountCurrent={operations.length}
+                    entitiesCountTotal={totalCount}
                     entitiesLoading={isLoading}
                     handleKindChange={handleKindChange}
                     handleSearchChange={handleSearchChange}
@@ -60,14 +62,25 @@ export function Operations({database}: OperationsProps) {
             </TableWithControlsLayout.Controls>
             {error ? <ResponseError error={error} /> : null}
             <TableWithControlsLayout.Table loading={isLoading} className={b('table')}>
-                {data ? (
+                {operations.length > 0 || isLoading ? (
                     <ResizeableDataTable
-                        columns={getColumns({database, refreshTable: refetch})}
+                        columns={getColumns({database, refreshTable})}
                         columnsWidthLSKey={OPERATIONS_SELECTED_COLUMNS_KEY}
-                        data={filteredOperations}
+                        data={operations}
+                        settings={settings}
                         emptyDataMessage={i18n('title_empty')}
                     />
-                ) : null}
+                ) : (
+                    <div>{i18n('title_empty')}</div>
+                )}
+                {isLoadingMore && (
+                    <TableSkeleton
+                        showHeader={false}
+                        rows={3}
+                        delay={0}
+                        className={b('loading-more')}
+                    />
+                )}
             </TableWithControlsLayout.Table>
         </TableWithControlsLayout>
     );
diff --git a/src/containers/Operations/columns.tsx b/src/containers/Operations/columns.tsx
index d6dc6e3d27..b2400d7fbb 100644
--- a/src/containers/Operations/columns.tsx
+++ b/src/containers/Operations/columns.tsx
@@ -74,8 +74,6 @@ export function getColumns({
                 }
                 return formatDateTime(parseProtobufTimestampToMs(row.create_time));
             },
-            sortAccessor: (row) =>
-                row.create_time ? parseProtobufTimestampToMs(row.create_time) : 0,
         },
         {
             name: COLUMNS_NAMES.END_TIME,
@@ -86,8 +84,6 @@ export function getColumns({
                 }
                 return formatDateTime(parseProtobufTimestampToMs(row.end_time));
             },
-            sortAccessor: (row) =>
-                row.end_time ? parseProtobufTimestampToMs(row.end_time) : Number.MAX_SAFE_INTEGER,
         },
         {
             name: COLUMNS_NAMES.DURATION,
@@ -114,17 +110,6 @@ export function getColumns({
                     ? durationFormatted
                     : i18n('label_duration-ongoing', {value: durationFormatted});
             },
-            sortAccessor: (row) => {
-                if (!row.create_time) {
-                    return 0;
-                }
-                const createTime = parseProtobufTimestampToMs(row.create_time);
-                if (row.end_time) {
-                    const endTime = parseProtobufTimestampToMs(row.end_time);
-                    return endTime - createTime;
-                }
-                return Date.now() - createTime;
-            },
         },
         {
             name: 'Actions',
diff --git a/src/containers/Operations/useInfiniteOperations.ts b/src/containers/Operations/useInfiniteOperations.ts
new file mode 100644
index 0000000000..36fb5b6dcc
--- /dev/null
+++ b/src/containers/Operations/useInfiniteOperations.ts
@@ -0,0 +1,92 @@
+import React from 'react';
+
+import {operationsApi} from '../../store/reducers/operations';
+import type {OperationKind, TOperation} from '../../types/api/operations';
+
+interface UseInfiniteOperationsProps {
+    database: string;
+    kind: OperationKind;
+    pageSize?: number;
+    searchValue: string;
+    pollingInterval?: number;
+    scrollContainerRef?: React.RefObject<HTMLElement>;
+}
+
+const DEFAULT_PAGE_SIZE = 10;
+const DEFAULT_SCROLL_MARGIN = 100;
+
+export function useInfiniteOperations({
+    database,
+    kind,
+    pageSize = DEFAULT_PAGE_SIZE,
+    searchValue,
+    pollingInterval,
+    scrollContainerRef,
+}: UseInfiniteOperationsProps) {
+    const [operationsList, setOperationsList] = React.useState<TOperation[]>([]);
+    const [nextPageToken, setNextPageToken] = React.useState<string | undefined>();
+
+    const [loadPage, {data, isFetching, error}] = operationsApi.useLazyGetOperationListQuery({
+        pollingInterval,
+    });
+
+    // Load initial page when kind/search changes
+    React.useEffect(() => {
+        setOperationsList([]);
+        setNextPageToken(undefined);
+        loadPage({database, kind, page_size: pageSize});
+    }, [kind, searchValue, database, pageSize, loadPage]);
+
+    // When data arrives, update state
+    React.useEffect(() => {
+        if (data?.operations) {
+            setOperationsList((prev) => [...prev, ...data.operations!]);
+            setNextPageToken(data.next_page_token === '0' ? undefined : data.next_page_token);
+        }
+    }, [data]);
+
+    // Scroll handler
+    React.useEffect(() => {
+        const scrollContainer = scrollContainerRef?.current;
+        if (!scrollContainer) {
+            return;
+        }
+
+        const handleScroll = () => {
+            const {scrollTop, scrollHeight, clientHeight} = scrollContainer;
+
+            if (
+                scrollHeight - scrollTop - clientHeight < DEFAULT_SCROLL_MARGIN &&
+                nextPageToken &&
+                !isFetching
+            ) {
+                loadPage({database, kind, page_size: pageSize, page_token: nextPageToken});
+            }
+        };
+
+        scrollContainer.addEventListener('scroll', handleScroll);
+        return () => scrollContainer.removeEventListener('scroll', handleScroll);
+    }, [scrollContainerRef, nextPageToken, isFetching, database, kind, pageSize, loadPage]);
+
+    // Filter operations
+    const filteredOperations = React.useMemo(() => {
+        return operationsList.filter((op) =>
+            op.id?.toLowerCase().includes(searchValue.toLowerCase()),
+        );
+    }, [operationsList, searchValue]);
+
+    const refreshTable = React.useCallback(() => {
+        setOperationsList([]);
+        setNextPageToken(undefined);
+        loadPage({database, kind, page_size: pageSize});
+    }, []);
+
+    return {
+        operations: filteredOperations,
+        isLoading: isFetching && operationsList.length === 0,
+        isLoadingMore: isFetching && operationsList.length > 0,
+        error,
+        refreshTable,
+        totalCount: operationsList.length,
+    };
+}
diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.tsx b/src/containers/Tenant/Diagnostics/Diagnostics.tsx
index efb7917a00..6bc629b8d6 100644
--- a/src/containers/Tenant/Diagnostics/Diagnostics.tsx
+++ b/src/containers/Tenant/Diagnostics/Diagnostics.tsx
@@ -159,7 +159,7 @@ function Diagnostics(props: DiagnosticsProps) {
                 return <Configs database={tenantName} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.operations: {
-                return <Operations database={tenantName} />;
+                return <Operations database={tenantName} scrollContainerRef={containerRef} />;
             }
             default: {
                 return <div>No data...</div>;
diff --git a/src/types/api/operations.ts b/src/types/api/operations.ts
index 7134805f81..94b7e9fb0c 100644
--- a/src/types/api/operations.ts
+++ b/src/types/api/operations.ts
@@ -125,7 +125,9 @@ export type OperationKind =
 export interface OperationListRequestParams {
     database: string;
     kind: OperationKind;
-    page_size?: number;
+
+    // required and important to pass correct value.
+    page_size: number;
     page_token?: string;
 }
 

From 95bc85b05803cfb587713e5b6803856fddcfdba4 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Thu, 19 Jun 2025 16:50:51 +0300
Subject: [PATCH 04/16] fix: manual refresh

---
 src/containers/Operations/Operations.tsx      |   4 -
 .../Operations/useInfiniteOperations.ts       | 109 +++++++++++++++---
 .../Tenant/Diagnostics/Diagnostics.tsx        |   7 +-
 3 files changed, 97 insertions(+), 23 deletions(-)

diff --git a/src/containers/Operations/Operations.tsx b/src/containers/Operations/Operations.tsx
index b5626eb0fc..6752b559fb 100644
--- a/src/containers/Operations/Operations.tsx
+++ b/src/containers/Operations/Operations.tsx
@@ -5,7 +5,6 @@ import {ResponseError} from '../../components/Errors/ResponseError';
 import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
-import {useAutoRefreshInterval} from '../../utils/hooks';
 import {isAccessError} from '../../utils/response';
 
 import {OperationsControls} from './OperationsControls';
@@ -22,8 +21,6 @@ interface OperationsProps {
 }
 
 export function Operations({database, scrollContainerRef}: OperationsProps) {
-    const [autoRefreshInterval] = useAutoRefreshInterval();
-
     const {kind, searchValue, pageSize, handleKindChange, handleSearchChange} =
         useOperationsQueryParams();
 
@@ -33,7 +30,6 @@ export function Operations({database, scrollContainerRef}: OperationsProps) {
             kind,
             pageSize,
             searchValue,
-            pollingInterval: autoRefreshInterval,
             scrollContainerRef,
         });
 
diff --git a/src/containers/Operations/useInfiniteOperations.ts b/src/containers/Operations/useInfiniteOperations.ts
index 36fb5b6dcc..e3265fc11c 100644
--- a/src/containers/Operations/useInfiniteOperations.ts
+++ b/src/containers/Operations/useInfiniteOperations.ts
@@ -8,11 +8,10 @@ interface UseInfiniteOperationsProps {
     kind: OperationKind;
     pageSize?: number;
     searchValue: string;
-    pollingInterval?: number;
     scrollContainerRef?: React.RefObject<HTMLElement>;
 }
 
-const DEFAULT_PAGE_SIZE = 10;
+const DEFAULT_PAGE_SIZE = 50;
 const DEFAULT_SCROLL_MARGIN = 100;
 
 export function useInfiniteOperations({
@@ -20,30 +19,88 @@ export function useInfiniteOperations({
     kind,
     pageSize = DEFAULT_PAGE_SIZE,
     searchValue,
-    pollingInterval,
     scrollContainerRef,
 }: UseInfiniteOperationsProps) {
     const [operationsList, setOperationsList] = React.useState<TOperation[]>([]);
     const [nextPageToken, setNextPageToken] = React.useState<string | undefined>();
 
-    const [loadPage, {data, isFetching, error}] = operationsApi.useLazyGetOperationListQuery({
-        pollingInterval,
-    });
+    const [loadPage, {isFetching, error}] = operationsApi.useLazyGetOperationListQuery();
+
+    // Load a page and update state
+    const loadPageAndUpdate = React.useCallback(
+        async (
+            params: {
+                database: string;
+                kind: OperationKind;
+                page_size: number;
+                page_token?: string;
+            },
+            isInitial = false,
+        ) => {
+            try {
+                const result = await loadPage(params).unwrap();
+
+                if (result?.operations) {
+                    if (isInitial) {
+                        // Initial load or refresh - replace data
+                        setOperationsList(result.operations);
+                    } else {
+                        // Pagination - append data
+                        setOperationsList((prev) => [...prev, ...result.operations!]);
+                    }
+                    setNextPageToken(
+                        result.next_page_token === '0' ? undefined : result.next_page_token,
+                    );
+                }
+            } catch (err) {
+                // Error is handled by RTK Query
+                console.error('Failed to load operations:', err);
+            }
+        },
+        [loadPage],
+    );
 
     // Load initial page when kind/search changes
     React.useEffect(() => {
         setOperationsList([]);
         setNextPageToken(undefined);
-        loadPage({database, kind, page_size: pageSize});
-    }, [kind, searchValue, database, pageSize, loadPage]);
+        loadPageAndUpdate({database, kind, page_size: pageSize}, true);
+    }, [kind, searchValue, database, pageSize, loadPageAndUpdate]);
 
-    // When data arrives, update state
-    React.useEffect(() => {
-        if (data?.operations) {
-            setOperationsList((prev) => [...prev, ...data.operations!]);
-            setNextPageToken(data.next_page_token === '0' ? undefined : data.next_page_token);
+    // Check if we need to load more pages to fill the viewport
+    const checkAndLoadMorePages = React.useCallback(async () => {
+        const scrollContainer = scrollContainerRef?.current;
+        if (!scrollContainer || !nextPageToken || isFetching) {
+            return;
+        }
+
+        const {scrollHeight, clientHeight} = scrollContainer;
+
+        // If content height is less than or equal to viewport height, load more
+        if (scrollHeight <= clientHeight) {
+            await loadPageAndUpdate({
+                database,
+                kind,
+                page_size: pageSize,
+                page_token: nextPageToken,
+            });
+        }
+    }, [
+        scrollContainerRef,
+        nextPageToken,
+        isFetching,
+        database,
+        kind,
+        pageSize,
+        loadPageAndUpdate,
+    ]);
+
+    // Check if we need to load more pages after data updates
+    React.useLayoutEffect(() => {
+        if (!isFetching) {
+            checkAndLoadMorePages();
         }
-    }, [data]);
+    }, [operationsList, isFetching, checkAndLoadMorePages]);
 
     // Scroll handler
     React.useEffect(() => {
@@ -60,13 +117,21 @@ export function useInfiniteOperations({
                 nextPageToken &&
                 !isFetching
             ) {
-                loadPage({database, kind, page_size: pageSize, page_token: nextPageToken});
+                loadPageAndUpdate({database, kind, page_size: pageSize, page_token: nextPageToken});
             }
         };
 
         scrollContainer.addEventListener('scroll', handleScroll);
         return () => scrollContainer.removeEventListener('scroll', handleScroll);
-    }, [scrollContainerRef, nextPageToken, isFetching, database, kind, pageSize, loadPage]);
+    }, [
+        scrollContainerRef,
+        nextPageToken,
+        isFetching,
+        database,
+        kind,
+        pageSize,
+        loadPageAndUpdate,
+    ]);
 
     // Filter operations
     const filteredOperations = React.useMemo(() => {
@@ -78,8 +143,16 @@ export function useInfiniteOperations({
     const refreshTable = React.useCallback(() => {
         setOperationsList([]);
         setNextPageToken(undefined);
-        loadPage({database, kind, page_size: pageSize});
-    }, []);
+        loadPageAndUpdate({database, kind, page_size: pageSize}, true);
+    }, [database, kind, pageSize, loadPageAndUpdate]);
+
+    // Listen for diagnostics refresh events
+    React.useEffect(() => {
+        document.addEventListener('diagnosticsRefresh', refreshTable);
+        return () => {
+            document.removeEventListener('diagnosticsRefresh', refreshTable);
+        };
+    }, [refreshTable]);
 
     return {
         operations: filteredOperations,
diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.tsx b/src/containers/Tenant/Diagnostics/Diagnostics.tsx
index 6bc629b8d6..c7d0c41d90 100644
--- a/src/containers/Tenant/Diagnostics/Diagnostics.tsx
+++ b/src/containers/Tenant/Diagnostics/Diagnostics.tsx
@@ -185,7 +185,12 @@ function Diagnostics(props: DiagnosticsProps) {
                         }}
                         allowNotSelected={true}
                     />
-                    <AutoRefreshControl />
+                    <AutoRefreshControl
+                        onManualRefresh={() => {
+                            const event = new CustomEvent('diagnosticsRefresh');
+                            document.dispatchEvent(event);
+                        }}
+                    />
                 </div>
             </div>
         );

From 0d424ee1fda3ebbc784f03c1115986e236c147ab Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Thu, 19 Jun 2025 16:58:36 +0300
Subject: [PATCH 05/16] fix: resize

---
 .../Operations/useInfiniteOperations.ts       | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/containers/Operations/useInfiniteOperations.ts b/src/containers/Operations/useInfiniteOperations.ts
index e3265fc11c..6649fb1a6a 100644
--- a/src/containers/Operations/useInfiniteOperations.ts
+++ b/src/containers/Operations/useInfiniteOperations.ts
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {throttle} from 'lodash';
+
 import {operationsApi} from '../../store/reducers/operations';
 import type {OperationKind, TOperation} from '../../types/api/operations';
 
@@ -133,6 +135,25 @@ export function useInfiniteOperations({
         loadPageAndUpdate,
     ]);
 
+    // Resize handler - check if we need to load more pages when viewport changes
+    React.useEffect(() => {
+        const throttledHandleResize = throttle(
+            () => {
+                checkAndLoadMorePages();
+            },
+            200,
+            {
+                trailing: true,
+                leading: true,
+            },
+        );
+
+        window.addEventListener('resize', throttledHandleResize);
+        return () => {
+            window.removeEventListener('resize', throttledHandleResize);
+        };
+    }, [checkAndLoadMorePages]);
+
     // Filter operations
     const filteredOperations = React.useMemo(() => {
         return operationsList.filter((op) =>

From 4ec0a2165c2cba0363b0c4e6ee91c38f6f9fe6ac Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Thu, 19 Jun 2025 17:05:46 +0300
Subject: [PATCH 06/16] fix: moving header

---
 src/containers/Operations/Operations.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/containers/Operations/Operations.tsx b/src/containers/Operations/Operations.tsx
index 6752b559fb..90901053c8 100644
--- a/src/containers/Operations/Operations.tsx
+++ b/src/containers/Operations/Operations.tsx
@@ -5,6 +5,7 @@ import {ResponseError} from '../../components/Errors/ResponseError';
 import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
+import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {isAccessError} from '../../utils/response';
 
 import {OperationsControls} from './OperationsControls';
@@ -39,6 +40,7 @@ export function Operations({database, scrollContainerRef}: OperationsProps) {
 
     const settings = React.useMemo(() => {
         return {
+            ...DEFAULT_TABLE_SETTINGS,
             sortable: false,
         };
     }, []);

From 83e36dfd32485c2d22741bd83122ab1a7d6b8feb Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Thu, 19 Jun 2025 17:14:51 +0300
Subject: [PATCH 07/16] feat: do not allow to use "Cancel Operation" if
 operation has "ready" prop equal to true.

---
 src/containers/Operations/columns.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/containers/Operations/columns.tsx b/src/containers/Operations/columns.tsx
index b2400d7fbb..7f001b8436 100644
--- a/src/containers/Operations/columns.tsx
+++ b/src/containers/Operations/columns.tsx
@@ -146,6 +146,9 @@ function OperationsActions({operation, database, refreshTable}: OperationsAction
         return null;
     }
 
+    const isForgetButtonDisabled = isLoadingCancel;
+    const isCancelButtonDisabled = isForgetLoading || operation.ready === true;
+
     return (
         <Flex gap="2">
             <ActionTooltip title={i18n('header_forget')} placement={['left', 'auto']}>
@@ -166,15 +169,20 @@ function OperationsActions({operation, database, refreshTable}: OperationsAction
                                     refreshTable();
                                 })
                         }
-                        buttonDisabled={isLoadingCancel}
+                        buttonDisabled={isForgetButtonDisabled}
                     >
                         <Icon data={Ban} />
                     </ButtonWithConfirmDialog>
                 </div>
             </ActionTooltip>
-            <ActionTooltip title={i18n('header_cancel')} placement={['right', 'auto']}>
+            <ActionTooltip
+                title={i18n('header_cancel')}
+                placement={['right', 'auto']}
+                disabled={isCancelButtonDisabled}
+            >
                 <div>
                     <ButtonWithConfirmDialog
+                        popoverDisabled={isCancelButtonDisabled}
                         buttonView="outlined"
                         dialogHeader={i18n('header_cancel')}
                         dialogText={i18n('text_cancel')}
@@ -190,7 +198,7 @@ function OperationsActions({operation, database, refreshTable}: OperationsAction
                                     refreshTable();
                                 })
                         }
-                        buttonDisabled={isForgetLoading}
+                        buttonDisabled={isCancelButtonDisabled}
                     >
                         <Icon data={CircleStop} />
                     </ButtonWithConfirmDialog>

From 12d5a08210ff33e2c0925ae5b0903829f7761554 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Thu, 19 Jun 2025 17:36:05 +0300
Subject: [PATCH 08/16] fix: new columns for build index

---
 src/containers/Operations/Operations.tsx      |   2 +-
 src/containers/Operations/columns.tsx         | 187 +++++++++++-------
 src/containers/Operations/constants.ts        |   4 +
 src/containers/Operations/i18n/en.json        |   2 +
 .../Operations/useInfiniteOperations.ts       |   4 +-
 5 files changed, 128 insertions(+), 71 deletions(-)

diff --git a/src/containers/Operations/Operations.tsx b/src/containers/Operations/Operations.tsx
index 90901053c8..bc6d5f66d1 100644
--- a/src/containers/Operations/Operations.tsx
+++ b/src/containers/Operations/Operations.tsx
@@ -62,7 +62,7 @@ export function Operations({database, scrollContainerRef}: OperationsProps) {
             <TableWithControlsLayout.Table loading={isLoading} className={b('table')}>
                 {operations.length > 0 || isLoading ? (
                     <ResizeableDataTable
-                        columns={getColumns({database, refreshTable})}
+                        columns={getColumns({database, refreshTable, kind})}
                         columnsWidthLSKey={OPERATIONS_SELECTED_COLUMNS_KEY}
                         data={operations}
                         settings={settings}
diff --git a/src/containers/Operations/columns.tsx b/src/containers/Operations/columns.tsx
index 7f001b8436..19e832d457 100644
--- a/src/containers/Operations/columns.tsx
+++ b/src/containers/Operations/columns.tsx
@@ -6,7 +6,7 @@ import {ActionTooltip, Flex, Icon, Text} from '@gravity-ui/uikit';
 import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import {CellWithPopover} from '../../components/CellWithPopover/CellWithPopover';
 import {operationsApi} from '../../store/reducers/operations';
-import type {TOperation} from '../../types/api/operations';
+import type {IndexBuildMetadata, OperationKind, TOperation} from '../../types/api/operations';
 import {EStatusCode} from '../../types/api/operations';
 import {EMPTY_DATA_PLACEHOLDER, HOUR_IN_SECONDS, SECOND_IN_MS} from '../../utils/constants';
 import createToast from '../../utils/createToast';
@@ -21,11 +21,23 @@ import './Operations.scss';
 export function getColumns({
     database,
     refreshTable,
+    kind,
 }: {
     database: string;
     refreshTable: VoidFunction;
+    kind: OperationKind;
 }): DataTableColumn<TOperation>[] {
-    return [
+    const isBuildIndex = kind === 'buildindex';
+
+    // Helper function to get description tooltip content
+    const getDescriptionTooltip = (operation: TOperation): string => {
+        if (!operation.metadata?.description) {
+            return '';
+        }
+        return JSON.stringify(operation.metadata.description, null, 2);
+    };
+
+    const columns: DataTableColumn<TOperation>[] = [
         {
             name: COLUMNS_NAMES.ID,
             header: COLUMNS_TITLES[COLUMNS_NAMES.ID],
@@ -34,8 +46,11 @@ export function getColumns({
                 if (!row.id) {
                     return EMPTY_DATA_PLACEHOLDER;
                 }
+
+                const tooltipContent = isBuildIndex ? getDescriptionTooltip(row) || row.id : row.id;
+
                 return (
-                    <CellWithPopover placement={['top', 'bottom']} content={row.id}>
+                    <CellWithPopover placement={['top', 'bottom']} content={tooltipContent}>
                         {row.id}
                     </CellWithPopover>
                 );
@@ -55,78 +70,114 @@ export function getColumns({
                 );
             },
         },
-        {
-            name: COLUMNS_NAMES.CREATED_BY,
-            header: COLUMNS_TITLES[COLUMNS_NAMES.CREATED_BY],
-            render: ({row}) => {
-                if (!row.created_by) {
-                    return EMPTY_DATA_PLACEHOLDER;
-                }
-                return row.created_by;
+    ];
+
+    // Add buildindex-specific columns
+    if (isBuildIndex) {
+        columns.push(
+            {
+                name: COLUMNS_NAMES.STATE,
+                header: COLUMNS_TITLES[COLUMNS_NAMES.STATE],
+                render: ({row}) => {
+                    const metadata = row.metadata as IndexBuildMetadata | undefined;
+                    if (!metadata?.state) {
+                        return EMPTY_DATA_PLACEHOLDER;
+                    }
+                    return metadata.state;
+                },
             },
-        },
-        {
-            name: COLUMNS_NAMES.CREATE_TIME,
-            header: COLUMNS_TITLES[COLUMNS_NAMES.CREATE_TIME],
-            render: ({row}) => {
-                if (!row.create_time) {
-                    return EMPTY_DATA_PLACEHOLDER;
-                }
-                return formatDateTime(parseProtobufTimestampToMs(row.create_time));
+            {
+                name: COLUMNS_NAMES.PROGRESS,
+                header: COLUMNS_TITLES[COLUMNS_NAMES.PROGRESS],
+                render: ({row}) => {
+                    const metadata = row.metadata as IndexBuildMetadata | undefined;
+                    if (metadata?.progress === undefined) {
+                        return EMPTY_DATA_PLACEHOLDER;
+                    }
+                    return `${Math.round(metadata.progress)}%`;
+                },
             },
-        },
-        {
-            name: COLUMNS_NAMES.END_TIME,
-            header: COLUMNS_TITLES[COLUMNS_NAMES.END_TIME],
-            render: ({row}) => {
-                if (!row.end_time) {
-                    return EMPTY_DATA_PLACEHOLDER;
-                }
-                return formatDateTime(parseProtobufTimestampToMs(row.end_time));
+        );
+    } else {
+        // Add standard columns for non-buildindex operations
+        columns.push(
+            {
+                name: COLUMNS_NAMES.CREATED_BY,
+                header: COLUMNS_TITLES[COLUMNS_NAMES.CREATED_BY],
+                render: ({row}) => {
+                    if (!row.created_by) {
+                        return EMPTY_DATA_PLACEHOLDER;
+                    }
+                    return row.created_by;
+                },
             },
-        },
-        {
-            name: COLUMNS_NAMES.DURATION,
-            header: COLUMNS_TITLES[COLUMNS_NAMES.DURATION],
-            render: ({row}) => {
-                let durationValue = 0;
-                if (!row.create_time) {
-                    return EMPTY_DATA_PLACEHOLDER;
-                }
-                const createTime = parseProtobufTimestampToMs(row.create_time);
-                if (row.end_time) {
-                    const endTime = parseProtobufTimestampToMs(row.end_time);
-                    durationValue = endTime - createTime;
-                } else {
-                    durationValue = Date.now() - createTime;
-                }
+            {
+                name: COLUMNS_NAMES.CREATE_TIME,
+                header: COLUMNS_TITLES[COLUMNS_NAMES.CREATE_TIME],
+                render: ({row}) => {
+                    if (!row.create_time) {
+                        return EMPTY_DATA_PLACEHOLDER;
+                    }
+                    return formatDateTime(parseProtobufTimestampToMs(row.create_time));
+                },
+            },
+            {
+                name: COLUMNS_NAMES.END_TIME,
+                header: COLUMNS_TITLES[COLUMNS_NAMES.END_TIME],
+                render: ({row}) => {
+                    if (!row.end_time) {
+                        return EMPTY_DATA_PLACEHOLDER;
+                    }
+                    return formatDateTime(parseProtobufTimestampToMs(row.end_time));
+                },
+            },
+            {
+                name: COLUMNS_NAMES.DURATION,
+                header: COLUMNS_TITLES[COLUMNS_NAMES.DURATION],
+                render: ({row}) => {
+                    let durationValue = 0;
+                    if (!row.create_time) {
+                        return EMPTY_DATA_PLACEHOLDER;
+                    }
+                    const createTime = parseProtobufTimestampToMs(row.create_time);
+                    if (row.end_time) {
+                        const endTime = parseProtobufTimestampToMs(row.end_time);
+                        durationValue = endTime - createTime;
+                    } else {
+                        durationValue = Date.now() - createTime;
+                    }
 
-                const durationFormatted =
-                    durationValue > HOUR_IN_SECONDS * SECOND_IN_MS
-                        ? duration(durationValue).format('hh:mm:ss')
-                        : duration(durationValue).format('mm:ss');
+                    const durationFormatted =
+                        durationValue > HOUR_IN_SECONDS * SECOND_IN_MS
+                            ? duration(durationValue).format('hh:mm:ss')
+                            : duration(durationValue).format('mm:ss');
 
-                return row.end_time
-                    ? durationFormatted
-                    : i18n('label_duration-ongoing', {value: durationFormatted});
-            },
-        },
-        {
-            name: 'Actions',
-            sortable: false,
-            resizeable: false,
-            header: '',
-            render: ({row}) => {
-                return (
-                    <OperationsActions
-                        operation={row}
-                        database={database}
-                        refreshTable={refreshTable}
-                    />
-                );
+                    return row.end_time
+                        ? durationFormatted
+                        : i18n('label_duration-ongoing', {value: durationFormatted});
+                },
             },
+        );
+    }
+
+    // Add Actions column
+    columns.push({
+        name: 'Actions',
+        sortable: false,
+        resizeable: false,
+        header: '',
+        render: ({row}) => {
+            return (
+                <OperationsActions
+                    operation={row}
+                    database={database}
+                    refreshTable={refreshTable}
+                />
+            );
         },
-    ];
+    });
+
+    return columns;
 }
 
 interface OperationsActionsProps {
diff --git a/src/containers/Operations/constants.ts b/src/containers/Operations/constants.ts
index 10c991ed74..b252b3d33b 100644
--- a/src/containers/Operations/constants.ts
+++ b/src/containers/Operations/constants.ts
@@ -11,6 +11,8 @@ export const COLUMNS_NAMES = {
     CREATE_TIME: 'create_time',
     END_TIME: 'end_time',
     DURATION: 'duration',
+    STATE: 'state',
+    PROGRESS: 'progress',
 } as const;
 
 export const COLUMNS_TITLES = {
@@ -20,6 +22,8 @@ export const COLUMNS_TITLES = {
     [COLUMNS_NAMES.CREATE_TIME]: i18n('column_createTime'),
     [COLUMNS_NAMES.END_TIME]: i18n('column_endTime'),
     [COLUMNS_NAMES.DURATION]: i18n('column_duration'),
+    [COLUMNS_NAMES.STATE]: i18n('column_state'),
+    [COLUMNS_NAMES.PROGRESS]: i18n('column_progress'),
 } as const;
 
 export const BASE_COLUMNS = [
diff --git a/src/containers/Operations/i18n/en.json b/src/containers/Operations/i18n/en.json
index a651c2d7e4..d32cc35873 100644
--- a/src/containers/Operations/i18n/en.json
+++ b/src/containers/Operations/i18n/en.json
@@ -15,6 +15,8 @@
   "column_createTime": "Create Time",
   "column_endTime": "End Time",
   "column_duration": "Duration",
+  "column_state": "State",
+  "column_progress": "Progress",
   "label_duration-ongoing": "{{value}} (ongoing)",
 
   "header_cancel": "Cancel operation",
diff --git a/src/containers/Operations/useInfiniteOperations.ts b/src/containers/Operations/useInfiniteOperations.ts
index 6649fb1a6a..913bca49be 100644
--- a/src/containers/Operations/useInfiniteOperations.ts
+++ b/src/containers/Operations/useInfiniteOperations.ts
@@ -63,7 +63,7 @@ export function useInfiniteOperations({
     );
 
     // Load initial page when kind/search changes
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         setOperationsList([]);
         setNextPageToken(undefined);
         loadPageAndUpdate({database, kind, page_size: pageSize}, true);
@@ -108,7 +108,7 @@ export function useInfiniteOperations({
     React.useEffect(() => {
         const scrollContainer = scrollContainerRef?.current;
         if (!scrollContainer) {
-            return;
+            return undefined;
         }
 
         const handleScroll = () => {

From d6a24b249777de666a7054d26d5c907ce1f32d89 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Thu, 19 Jun 2025 17:57:43 +0300
Subject: [PATCH 09/16] fix: reduce page size for demo

---
 src/containers/Operations/useInfiniteOperations.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/Operations/useInfiniteOperations.ts b/src/containers/Operations/useInfiniteOperations.ts
index 913bca49be..67f0b01140 100644
--- a/src/containers/Operations/useInfiniteOperations.ts
+++ b/src/containers/Operations/useInfiniteOperations.ts
@@ -13,7 +13,7 @@ interface UseInfiniteOperationsProps {
     scrollContainerRef?: React.RefObject<HTMLElement>;
 }
 
-const DEFAULT_PAGE_SIZE = 50;
+const DEFAULT_PAGE_SIZE = 10;
 const DEFAULT_SCROLL_MARGIN = 100;
 
 export function useInfiniteOperations({

From 6d293b86516055418235819d7446c6cbcb0ab25a Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Tue, 24 Jun 2025 12:09:04 +0300
Subject: [PATCH 10/16] feat: move to infiniteQuery

---
 package-lock.json                             |  23 ++-
 package.json                                  |   2 +-
 src/containers/Operations/Operations.tsx      |   4 +-
 .../Operations/useInfiniteOperations.ts       | 186 ------------------
 .../Operations/useOperationsInfiniteQuery.ts  | 119 +++++++++++
 src/store/reducers/operations.ts              |  32 +++
 6 files changed, 173 insertions(+), 193 deletions(-)
 delete mode 100644 src/containers/Operations/useInfiniteOperations.ts
 create mode 100644 src/containers/Operations/useOperationsInfiniteQuery.ts

diff --git a/package-lock.json b/package-lock.json
index 1499dc66bf..70ad988696 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
         "@gravity-ui/websql-autocomplete": "^13.7.0",
         "@hookform/resolvers": "^3.10.0",
         "@mjackson/multipart-parser": "^0.8.2",
-        "@reduxjs/toolkit": "^2.5.0",
+        "@reduxjs/toolkit": "^2.8.2",
         "@tanstack/react-table": "^8.20.6",
         "@ydb-platform/monaco-ghost": "^0.6.1",
         "axios": "^1.8.4",
@@ -5033,10 +5033,13 @@
       }
     },
     "node_modules/@reduxjs/toolkit": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.5.0.tgz",
-      "integrity": "sha512-awNe2oTodsZ6LmRqmkFhtb/KH03hUhxOamEQy411m3Njj3BbFvoBovxo4Q1cBWnV1ErprVj9MlF0UPXkng0eyg==",
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.8.2.tgz",
+      "integrity": "sha512-MYlOhQ0sLdw4ud48FoC5w0dH9VfWQjtCjreKwYTT3l+r427qYC5Y8PihNutepr8XrNaBUDQo9khWUwQxZaqt5A==",
+      "license": "MIT",
       "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
         "immer": "^10.0.3",
         "redux": "^5.0.1",
         "redux-thunk": "^3.1.0",
@@ -5172,6 +5175,18 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
+      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
diff --git a/package.json b/package.json
index ea58b37696..64692450fc 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "@gravity-ui/websql-autocomplete": "^13.7.0",
     "@hookform/resolvers": "^3.10.0",
     "@mjackson/multipart-parser": "^0.8.2",
-    "@reduxjs/toolkit": "^2.5.0",
+    "@reduxjs/toolkit": "^2.8.2",
     "@tanstack/react-table": "^8.20.6",
     "@ydb-platform/monaco-ghost": "^0.6.1",
     "axios": "^1.8.4",
diff --git a/src/containers/Operations/Operations.tsx b/src/containers/Operations/Operations.tsx
index bc6d5f66d1..8540e2c0ef 100644
--- a/src/containers/Operations/Operations.tsx
+++ b/src/containers/Operations/Operations.tsx
@@ -13,7 +13,7 @@ import {getColumns} from './columns';
 import {OPERATIONS_SELECTED_COLUMNS_KEY} from './constants';
 import i18n from './i18n';
 import {b} from './shared';
-import {useInfiniteOperations} from './useInfiniteOperations';
+import {useOperationsInfiniteQuery} from './useOperationsInfiniteQuery';
 import {useOperationsQueryParams} from './useOperationsQueryParams';
 
 interface OperationsProps {
@@ -26,7 +26,7 @@ export function Operations({database, scrollContainerRef}: OperationsProps) {
         useOperationsQueryParams();
 
     const {operations, isLoading, isLoadingMore, error, refreshTable, totalCount} =
-        useInfiniteOperations({
+        useOperationsInfiniteQuery({
             database,
             kind,
             pageSize,
diff --git a/src/containers/Operations/useInfiniteOperations.ts b/src/containers/Operations/useInfiniteOperations.ts
deleted file mode 100644
index 67f0b01140..0000000000
--- a/src/containers/Operations/useInfiniteOperations.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-import React from 'react';
-
-import {throttle} from 'lodash';
-
-import {operationsApi} from '../../store/reducers/operations';
-import type {OperationKind, TOperation} from '../../types/api/operations';
-
-interface UseInfiniteOperationsProps {
-    database: string;
-    kind: OperationKind;
-    pageSize?: number;
-    searchValue: string;
-    scrollContainerRef?: React.RefObject<HTMLElement>;
-}
-
-const DEFAULT_PAGE_SIZE = 10;
-const DEFAULT_SCROLL_MARGIN = 100;
-
-export function useInfiniteOperations({
-    database,
-    kind,
-    pageSize = DEFAULT_PAGE_SIZE,
-    searchValue,
-    scrollContainerRef,
-}: UseInfiniteOperationsProps) {
-    const [operationsList, setOperationsList] = React.useState<TOperation[]>([]);
-    const [nextPageToken, setNextPageToken] = React.useState<string | undefined>();
-
-    const [loadPage, {isFetching, error}] = operationsApi.useLazyGetOperationListQuery();
-
-    // Load a page and update state
-    const loadPageAndUpdate = React.useCallback(
-        async (
-            params: {
-                database: string;
-                kind: OperationKind;
-                page_size: number;
-                page_token?: string;
-            },
-            isInitial = false,
-        ) => {
-            try {
-                const result = await loadPage(params).unwrap();
-
-                if (result?.operations) {
-                    if (isInitial) {
-                        // Initial load or refresh - replace data
-                        setOperationsList(result.operations);
-                    } else {
-                        // Pagination - append data
-                        setOperationsList((prev) => [...prev, ...result.operations!]);
-                    }
-                    setNextPageToken(
-                        result.next_page_token === '0' ? undefined : result.next_page_token,
-                    );
-                }
-            } catch (err) {
-                // Error is handled by RTK Query
-                console.error('Failed to load operations:', err);
-            }
-        },
-        [loadPage],
-    );
-
-    // Load initial page when kind/search changes
-    React.useLayoutEffect(() => {
-        setOperationsList([]);
-        setNextPageToken(undefined);
-        loadPageAndUpdate({database, kind, page_size: pageSize}, true);
-    }, [kind, searchValue, database, pageSize, loadPageAndUpdate]);
-
-    // Check if we need to load more pages to fill the viewport
-    const checkAndLoadMorePages = React.useCallback(async () => {
-        const scrollContainer = scrollContainerRef?.current;
-        if (!scrollContainer || !nextPageToken || isFetching) {
-            return;
-        }
-
-        const {scrollHeight, clientHeight} = scrollContainer;
-
-        // If content height is less than or equal to viewport height, load more
-        if (scrollHeight <= clientHeight) {
-            await loadPageAndUpdate({
-                database,
-                kind,
-                page_size: pageSize,
-                page_token: nextPageToken,
-            });
-        }
-    }, [
-        scrollContainerRef,
-        nextPageToken,
-        isFetching,
-        database,
-        kind,
-        pageSize,
-        loadPageAndUpdate,
-    ]);
-
-    // Check if we need to load more pages after data updates
-    React.useLayoutEffect(() => {
-        if (!isFetching) {
-            checkAndLoadMorePages();
-        }
-    }, [operationsList, isFetching, checkAndLoadMorePages]);
-
-    // Scroll handler
-    React.useEffect(() => {
-        const scrollContainer = scrollContainerRef?.current;
-        if (!scrollContainer) {
-            return undefined;
-        }
-
-        const handleScroll = () => {
-            const {scrollTop, scrollHeight, clientHeight} = scrollContainer;
-
-            if (
-                scrollHeight - scrollTop - clientHeight < DEFAULT_SCROLL_MARGIN &&
-                nextPageToken &&
-                !isFetching
-            ) {
-                loadPageAndUpdate({database, kind, page_size: pageSize, page_token: nextPageToken});
-            }
-        };
-
-        scrollContainer.addEventListener('scroll', handleScroll);
-        return () => scrollContainer.removeEventListener('scroll', handleScroll);
-    }, [
-        scrollContainerRef,
-        nextPageToken,
-        isFetching,
-        database,
-        kind,
-        pageSize,
-        loadPageAndUpdate,
-    ]);
-
-    // Resize handler - check if we need to load more pages when viewport changes
-    React.useEffect(() => {
-        const throttledHandleResize = throttle(
-            () => {
-                checkAndLoadMorePages();
-            },
-            200,
-            {
-                trailing: true,
-                leading: true,
-            },
-        );
-
-        window.addEventListener('resize', throttledHandleResize);
-        return () => {
-            window.removeEventListener('resize', throttledHandleResize);
-        };
-    }, [checkAndLoadMorePages]);
-
-    // Filter operations
-    const filteredOperations = React.useMemo(() => {
-        return operationsList.filter((op) =>
-            op.id?.toLowerCase().includes(searchValue.toLowerCase()),
-        );
-    }, [operationsList, searchValue]);
-
-    const refreshTable = React.useCallback(() => {
-        setOperationsList([]);
-        setNextPageToken(undefined);
-        loadPageAndUpdate({database, kind, page_size: pageSize}, true);
-    }, [database, kind, pageSize, loadPageAndUpdate]);
-
-    // Listen for diagnostics refresh events
-    React.useEffect(() => {
-        document.addEventListener('diagnosticsRefresh', refreshTable);
-        return () => {
-            document.removeEventListener('diagnosticsRefresh', refreshTable);
-        };
-    }, [refreshTable]);
-
-    return {
-        operations: filteredOperations,
-        isLoading: isFetching && operationsList.length === 0,
-        isLoadingMore: isFetching && operationsList.length > 0,
-        error,
-        refreshTable,
-        totalCount: operationsList.length,
-    };
-}
diff --git a/src/containers/Operations/useOperationsInfiniteQuery.ts b/src/containers/Operations/useOperationsInfiniteQuery.ts
new file mode 100644
index 0000000000..ba92b86e52
--- /dev/null
+++ b/src/containers/Operations/useOperationsInfiniteQuery.ts
@@ -0,0 +1,119 @@
+import React from 'react';
+
+import {throttle} from 'lodash';
+
+import {operationsApi} from '../../store/reducers/operations';
+import type {OperationKind} from '../../types/api/operations';
+
+interface UseOperationsInfiniteQueryProps {
+    database: string;
+    kind: OperationKind;
+    pageSize?: number;
+    searchValue: string;
+    scrollContainerRef?: React.RefObject<HTMLElement>;
+}
+
+const DEFAULT_SCROLL_MARGIN = 100;
+
+export function useOperationsInfiniteQuery({
+    database,
+    kind,
+    pageSize = 10,
+    searchValue,
+    scrollContainerRef,
+}: UseOperationsInfiniteQueryProps) {
+    const {data, error, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage, refetch} =
+        operationsApi.useGetOperationListInfiniteInfiniteQuery({
+            database,
+            kind,
+            page_size: pageSize,
+        });
+
+    // Flatten all pages into a single array of operations
+    const allOperations = React.useMemo(() => {
+        if (!data?.pages) {
+            return [];
+        }
+        // Each page is a TOperationList, so we need to extract operations from each
+        return data.pages.flatMap((page) => page.operations || []);
+    }, [data]);
+
+    const filteredOperations = React.useMemo(() => {
+        if (!searchValue) {
+            return allOperations;
+        }
+        return allOperations.filter((op) =>
+            op.id?.toLowerCase().includes(searchValue.toLowerCase()),
+        );
+    }, [allOperations, searchValue]);
+
+    // Auto-load more pages to fill viewport
+    const checkAndLoadMorePages = React.useCallback(async () => {
+        const scrollContainer = scrollContainerRef?.current;
+        if (!scrollContainer || !hasNextPage || isFetchingNextPage) {
+            return;
+        }
+
+        const {scrollHeight, clientHeight} = scrollContainer;
+        if (scrollHeight <= clientHeight) {
+            await fetchNextPage();
+        }
+    }, [scrollContainerRef, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+    // Check after data updates
+    React.useLayoutEffect(() => {
+        if (!isFetchingNextPage) {
+            checkAndLoadMorePages();
+        }
+    }, [data, isFetchingNextPage, checkAndLoadMorePages]);
+
+    // Scroll handler for infinite scrolling
+    React.useEffect(() => {
+        const scrollContainer = scrollContainerRef?.current;
+        if (!scrollContainer) {
+            return undefined;
+        }
+
+        const handleScroll = () => {
+            const {scrollTop, scrollHeight, clientHeight} = scrollContainer;
+
+            if (
+                scrollHeight - scrollTop - clientHeight < DEFAULT_SCROLL_MARGIN &&
+                hasNextPage &&
+                !isFetchingNextPage
+            ) {
+                fetchNextPage();
+            }
+        };
+
+        scrollContainer.addEventListener('scroll', handleScroll);
+        return () => scrollContainer.removeEventListener('scroll', handleScroll);
+    }, [scrollContainerRef, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+    // Resize handler to check if more content is needed when viewport changes
+    React.useEffect(() => {
+        const throttledHandleResize = throttle(checkAndLoadMorePages, 200, {
+            trailing: true,
+            leading: true,
+        });
+
+        window.addEventListener('resize', throttledHandleResize);
+        return () => window.removeEventListener('resize', throttledHandleResize);
+    }, [checkAndLoadMorePages]);
+
+    // Listen for diagnostics refresh events
+    React.useEffect(() => {
+        const handleRefresh = () => refetch();
+        document.addEventListener('diagnosticsRefresh', handleRefresh);
+        return () => document.removeEventListener('diagnosticsRefresh', handleRefresh);
+    }, [refetch]);
+
+    return {
+        operations: filteredOperations,
+        isLoading,
+        isLoadingMore: isFetchingNextPage,
+        error,
+        refreshTable: refetch,
+        totalCount: allOperations.length,
+    };
+}
diff --git a/src/store/reducers/operations.ts b/src/store/reducers/operations.ts
index b09abb5b01..e43d2af1b2 100644
--- a/src/store/reducers/operations.ts
+++ b/src/store/reducers/operations.ts
@@ -1,11 +1,15 @@
 import type {
     OperationCancelRequestParams,
     OperationForgetRequestParams,
+    OperationKind,
     OperationListRequestParams,
+    TOperationList,
 } from '../../types/api/operations';
 
 import {api} from './api';
 
+const DEFAULT_PAGE_SIZE = 10;
+
 export const operationsApi = api.injectEndpoints({
     endpoints: (build) => ({
         getOperationList: build.query({
@@ -19,6 +23,34 @@ export const operationsApi = api.injectEndpoints({
             },
             providesTags: ['All'],
         }),
+        getOperationListInfinite: build.infiniteQuery<
+            TOperationList, // Full response type to access next_page_token
+            {database: string; kind: OperationKind; page_size?: number}, // Include page_size in query arg
+            string | undefined // Page param type (page token)
+        >({
+            infiniteQueryOptions: {
+                initialPageParam: undefined as string | undefined,
+                getNextPageParam: (lastPage) => {
+                    // Return next page token if available, undefined if no more pages
+                    return lastPage.next_page_token === '0' ? undefined : lastPage.next_page_token;
+                },
+            },
+            queryFn: async ({queryArg, pageParam}, {signal}) => {
+                try {
+                    const params: OperationListRequestParams = {
+                        database: queryArg.database,
+                        kind: queryArg.kind,
+                        page_size: queryArg.page_size ?? DEFAULT_PAGE_SIZE,
+                        page_token: pageParam,
+                    };
+                    const data = await window.api.operation.getOperationList(params, {signal});
+                    return {data};
+                } catch (error) {
+                    return {error};
+                }
+            },
+            providesTags: ['All'],
+        }),
         cancelOperation: build.mutation({
             queryFn: async (params: OperationCancelRequestParams, {signal}) => {
                 try {

From 827d8be3e5c3a5167c8ade2d59c80674fe0c67bd Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Tue, 24 Jun 2025 12:13:36 +0300
Subject: [PATCH 11/16] fix: fix tests

---
 config-overrides.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/config-overrides.js b/config-overrides.js
index 98185f0970..2505a89bc0 100644
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -58,7 +58,9 @@ module.exports = {
         // By default jest does not transform anything in node_modules
         // So this override excludes node_modules except @gravity-ui
         // see https://github.com/timarney/react-app-rewired/issues/241
-        config.transformIgnorePatterns = ['node_modules/(?!(@gravity-ui|@mjackson)/)'];
+        config.transformIgnorePatterns = [
+            'node_modules/(?!(@gravity-ui|@mjackson|@standard-schema)/)',
+        ];
 
         // Add .github directory to roots
         config.roots = ['<rootDir>/src', '<rootDir>/.github'];

From 52d7dd60d1dfd63a01f13ce238fd2cd53a5f2e88 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Tue, 24 Jun 2025 14:15:16 +0300
Subject: [PATCH 12/16] fix: add operations tests

---
 src/containers/Operations/columns.tsx         |   6 +-
 .../Operations/useOperationsInfiniteQuery.ts  |   5 +-
 .../suites/tenant/diagnostics/Diagnostics.ts  |   5 +
 .../diagnostics/tabs/OperationsModel.ts       | 127 ++++++++++
 .../diagnostics/tabs/operations.test.ts       | 122 +++++++++
 .../diagnostics/tabs/operationsMocks.ts       | 233 ++++++++++++++++++
 6 files changed, 494 insertions(+), 4 deletions(-)
 create mode 100644 tests/suites/tenant/diagnostics/tabs/OperationsModel.ts
 create mode 100644 tests/suites/tenant/diagnostics/tabs/operations.test.ts
 create mode 100644 tests/suites/tenant/diagnostics/tabs/operationsMocks.ts

diff --git a/src/containers/Operations/columns.tsx b/src/containers/Operations/columns.tsx
index 19e832d457..45f8599e5e 100644
--- a/src/containers/Operations/columns.tsx
+++ b/src/containers/Operations/columns.tsx
@@ -187,7 +187,7 @@ interface OperationsActionsProps {
 }
 
 function OperationsActions({operation, database, refreshTable}: OperationsActionsProps) {
-    const [cancelOperation, {isLoading: isLoadingCancel}] =
+    const [cancelOperation, {isLoading: isCancelLoading}] =
         operationsApi.useCancelOperationMutation();
     const [forgetOperation, {isLoading: isForgetLoading}] =
         operationsApi.useForgetOperationMutation();
@@ -197,8 +197,8 @@ function OperationsActions({operation, database, refreshTable}: OperationsAction
         return null;
     }
 
-    const isForgetButtonDisabled = isLoadingCancel;
-    const isCancelButtonDisabled = isForgetLoading || operation.ready === true;
+    const isForgetButtonDisabled = isForgetLoading;
+    const isCancelButtonDisabled = isCancelLoading || operation.ready === true;
 
     return (
         <Flex gap="2">
diff --git a/src/containers/Operations/useOperationsInfiniteQuery.ts b/src/containers/Operations/useOperationsInfiniteQuery.ts
index ba92b86e52..099ca48ebd 100644
--- a/src/containers/Operations/useOperationsInfiniteQuery.ts
+++ b/src/containers/Operations/useOperationsInfiniteQuery.ts
@@ -98,7 +98,10 @@ export function useOperationsInfiniteQuery({
         });
 
         window.addEventListener('resize', throttledHandleResize);
-        return () => window.removeEventListener('resize', throttledHandleResize);
+        return () => {
+            throttledHandleResize.cancel();
+            window.removeEventListener('resize', throttledHandleResize);
+        };
     }, [checkAndLoadMorePages]);
 
     // Listen for diagnostics refresh events
diff --git a/tests/suites/tenant/diagnostics/Diagnostics.ts b/tests/suites/tenant/diagnostics/Diagnostics.ts
index 04ede054a6..d6baaea3a0 100644
--- a/tests/suites/tenant/diagnostics/Diagnostics.ts
+++ b/tests/suites/tenant/diagnostics/Diagnostics.ts
@@ -6,6 +6,8 @@ import {NodesPage} from '../../nodes/NodesPage';
 import {StoragePage} from '../../storage/StoragePage';
 import {VISIBILITY_TIMEOUT} from '../TenantPage';
 
+import {OperationsTable} from './tabs/OperationsModel';
+
 export enum DiagnosticsTab {
     Info = 'Info',
     Schema = 'Schema',
@@ -17,6 +19,7 @@ export enum DiagnosticsTab {
     HotKeys = 'Hot keys',
     Describe = 'Describe',
     Storage = 'Storage',
+    Operations = 'Operations',
     Access = 'Access',
 }
 
@@ -231,6 +234,7 @@ export class Diagnostics {
     storage: StoragePage;
     nodes: NodesPage;
     memoryViewer: MemoryViewer;
+    operations: OperationsTable;
     private page: Page;
 
     private tabs: Locator;
@@ -256,6 +260,7 @@ export class Diagnostics {
         this.storage = new StoragePage(page);
         this.nodes = new NodesPage(page);
         this.memoryViewer = new MemoryViewer(page);
+        this.operations = new OperationsTable(page);
         this.tabs = page.locator('.kv-tenant-diagnostics__tabs');
         this.tableControls = page.locator('.ydb-table-with-controls-layout__controls');
         this.schemaViewer = page.locator('.schema-viewer');
diff --git a/tests/suites/tenant/diagnostics/tabs/OperationsModel.ts b/tests/suites/tenant/diagnostics/tabs/OperationsModel.ts
new file mode 100644
index 0000000000..9abae7905b
--- /dev/null
+++ b/tests/suites/tenant/diagnostics/tabs/OperationsModel.ts
@@ -0,0 +1,127 @@
+import type {Locator, Page} from '@playwright/test';
+
+import {BaseModel} from '../../../../models/BaseModel';
+import {VISIBILITY_TIMEOUT} from '../../TenantPage';
+
+export enum OperationTab {
+    Operations = 'Operations',
+}
+
+export class OperationsTable extends BaseModel {
+    private tableContainer: Locator;
+    private tableRows: Locator;
+    private emptyState: Locator;
+    private loadingMore: Locator;
+    private scrollContainer: Locator;
+
+    constructor(page: Page) {
+        super(page, page.locator('.kv-tenant-diagnostics'));
+
+        this.tableContainer = page.locator('.ydb-table-with-controls-layout');
+        this.tableRows = page.locator('.data-table__row:not(.data-table__row_header)');
+        this.emptyState = page.locator('.operations__table:has-text("No operations data")');
+        this.loadingMore = page.locator('.operations__loading-more');
+        this.scrollContainer = page.locator('.kv-tenant-diagnostics__page-wrapper');
+    }
+
+    async waitForTableVisible() {
+        await this.tableContainer.waitFor({state: 'visible', timeout: VISIBILITY_TIMEOUT});
+    }
+
+    async waitForDataLoad() {
+        // Wait for either data rows or empty state
+        await this.page.waitForFunction(
+            () => {
+                const rows = document.querySelectorAll(
+                    '.data-table__row:not(.data-table__row_header)',
+                );
+                const tableContainer = document.querySelector('.operations__table');
+                const hasEmptyText = tableContainer?.textContent?.includes('No operations data');
+                return rows.length > 0 || hasEmptyText === true;
+            },
+            {timeout: VISIBILITY_TIMEOUT},
+        );
+        // Additional wait for stability
+        await this.page.waitForTimeout(500);
+    }
+
+    async getRowCount(): Promise<number> {
+        return await this.tableRows.count();
+    }
+
+    async isEmptyStateVisible(): Promise<boolean> {
+        return await this.emptyState.isVisible();
+    }
+
+    async scrollToBottom() {
+        await this.scrollContainer.evaluate((element) => {
+            element.scrollTo({top: element.scrollHeight, behavior: 'instant'});
+        });
+    }
+
+    async isLoadingMoreVisible(): Promise<boolean> {
+        return await this.loadingMore.isVisible();
+    }
+
+    async waitForLoadingMoreToDisappear() {
+        await this.loadingMore.waitFor({state: 'hidden', timeout: VISIBILITY_TIMEOUT});
+    }
+
+    async getRowData(rowIndex: number): Promise<Record<string, string>> {
+        const row = this.tableRows.nth(rowIndex);
+        const cells = row.locator('td');
+        const allHeaders = await this.page.locator('.data-table__th').allTextContents();
+
+        // Take first occurrence of headers (they might be duplicated due to virtual scrolling)
+        const uniqueHeaders: string[] = [];
+        const seen = new Set<string>();
+        let emptyCount = 0;
+
+        for (const header of allHeaders) {
+            const trimmed = header.trim();
+            if (trimmed === '') {
+                // Handle multiple empty headers (e.g., for action columns)
+                uniqueHeaders.push(`_empty_${emptyCount++}`);
+            } else if (!seen.has(trimmed)) {
+                seen.add(trimmed);
+                uniqueHeaders.push(trimmed);
+            }
+            // Stop when we have enough headers for the cells
+            if (uniqueHeaders.length >= (await cells.count())) {
+                break;
+            }
+        }
+
+        const rowData: Record<string, string> = {};
+        const cellCount = await cells.count();
+
+        for (let i = 0; i < cellCount && i < uniqueHeaders.length; i++) {
+            const headerText = uniqueHeaders[i];
+            const cellText = await cells.nth(i).textContent();
+            // Don't include empty headers in the result
+            if (!headerText.startsWith('_empty_')) {
+                rowData[headerText] = cellText?.trim() || '';
+            }
+        }
+
+        return rowData;
+    }
+
+    async hasActiveInfiniteScroll(): Promise<boolean> {
+        // Check if scrolling triggers loading more
+        const initialCount = await this.getRowCount();
+        await this.scrollToBottom();
+
+        // Wait a bit to see if loading more appears
+        await this.page.waitForTimeout(1000);
+
+        const hasLoadingMore = await this.isLoadingMoreVisible();
+        if (hasLoadingMore) {
+            await this.waitForLoadingMoreToDisappear();
+            const newCount = await this.getRowCount();
+            return newCount > initialCount;
+        }
+
+        return false;
+    }
+}
diff --git a/tests/suites/tenant/diagnostics/tabs/operations.test.ts b/tests/suites/tenant/diagnostics/tabs/operations.test.ts
new file mode 100644
index 0000000000..c77abc89dc
--- /dev/null
+++ b/tests/suites/tenant/diagnostics/tabs/operations.test.ts
@@ -0,0 +1,122 @@
+import {expect, test} from '@playwright/test';
+
+import {tenantName} from '../../../../utils/constants';
+import {TenantPage} from '../../TenantPage';
+import {Diagnostics, DiagnosticsTab} from '../Diagnostics';
+
+import {setupEmptyOperationsMock, setupOperationsMock} from './operationsMocks';
+
+test.describe('Operations Tab - Infinite Query', () => {
+    test('loads initial page of operations on tab click', async ({page}) => {
+        // Setup mocks with 30 operations (3 pages of 10)
+        await setupOperationsMock(page, {totalOperations: 30});
+
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+        };
+
+        const tenantPageInstance = new TenantPage(page);
+        await tenantPageInstance.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+        await diagnostics.clickTab(DiagnosticsTab.Operations);
+
+        // Wait for table to be visible and data to load
+        await diagnostics.operations.waitForTableVisible();
+        await diagnostics.operations.waitForDataLoad();
+
+        // Verify initial page loaded (should have some rows)
+        const rowCount = await diagnostics.operations.getRowCount();
+        expect(rowCount).toBeGreaterThan(0);
+        expect(rowCount).toBeLessThanOrEqual(20); // Reasonable page size
+
+        // Verify first row data structure
+        const firstRowData = await diagnostics.operations.getRowData(0);
+        expect(firstRowData['Operation ID']).toBeTruthy();
+        expect(firstRowData['Operation ID']).toContain('ydb://');
+        expect(firstRowData['Status']).toBeTruthy();
+        expect(['SUCCESS', 'GENERIC_ERROR', 'CANCELLED', 'ABORTED']).toContain(
+            firstRowData['Status'],
+        );
+        expect(firstRowData['State']).toBeTruthy();
+        expect(firstRowData['Progress']).toBeTruthy();
+
+        // Verify loading more indicator is not visible initially
+        const isLoadingVisible = await diagnostics.operations.isLoadingMoreVisible();
+        expect(isLoadingVisible).toBe(false);
+    });
+
+    test('loads more operations on scroll', async ({page}) => {
+        // Setup mocks with 30 operations (3 pages of 10)
+        await setupOperationsMock(page, {totalOperations: 30});
+
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+        };
+
+        const tenantPageInstance = new TenantPage(page);
+        await tenantPageInstance.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+        await diagnostics.clickTab(DiagnosticsTab.Operations);
+
+        // Wait for initial data
+        await diagnostics.operations.waitForTableVisible();
+        await diagnostics.operations.waitForDataLoad();
+
+        // Get initial row count
+        const initialRowCount = await diagnostics.operations.getRowCount();
+        expect(initialRowCount).toBeGreaterThan(0);
+
+        // Scroll to bottom
+        await diagnostics.operations.scrollToBottom();
+
+        // Wait a bit for potential loading
+        await page.waitForTimeout(2000);
+
+        // Get final row count
+        const finalRowCount = await diagnostics.operations.getRowCount();
+
+        // Check if more rows were loaded
+        if (finalRowCount > initialRowCount) {
+            // Infinite scroll worked - more rows were loaded
+            expect(finalRowCount).toBeGreaterThan(initialRowCount);
+        } else {
+            // No more data to load - row count should stay the same
+            expect(finalRowCount).toBe(initialRowCount);
+        }
+    });
+
+    test('shows empty state when no operations', async ({page}) => {
+        // Setup empty operations mock
+        await setupEmptyOperationsMock(page);
+
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+        };
+
+        const tenantPageInstance = new TenantPage(page);
+        await tenantPageInstance.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+        await diagnostics.clickTab(DiagnosticsTab.Operations);
+
+        // Wait for table to be visible
+        await diagnostics.operations.waitForTableVisible();
+        await diagnostics.operations.waitForDataLoad();
+
+        // Verify empty state is shown
+        const isEmptyVisible = await diagnostics.operations.isEmptyStateVisible();
+        expect(isEmptyVisible).toBe(true);
+
+        // Verify no data rows (or possibly one empty row)
+        const rowCount = await diagnostics.operations.getRowCount();
+        expect(rowCount).toBeLessThanOrEqual(1);
+    });
+});
diff --git a/tests/suites/tenant/diagnostics/tabs/operationsMocks.ts b/tests/suites/tenant/diagnostics/tabs/operationsMocks.ts
new file mode 100644
index 0000000000..8e7b32d5c8
--- /dev/null
+++ b/tests/suites/tenant/diagnostics/tabs/operationsMocks.ts
@@ -0,0 +1,233 @@
+import type {Page} from '@playwright/test';
+
+import {backend} from '../../../../utils/constants';
+
+interface Operation {
+    ready: boolean;
+    metadata: {
+        description?: any;
+        settings?: any;
+        progress: number;
+        '@type': string;
+        state: string;
+    };
+    status: string;
+    create_time: {
+        seconds: string;
+    };
+    end_time?: {
+        seconds: string;
+    };
+    id: string;
+    issues?: Array<{
+        severity: number;
+        message: string;
+    }>;
+    created_by?: string;
+}
+
+const MOCK_DELAY = 200; // 200ms delay to simulate network latency
+
+interface OperationMockOptions {
+    totalOperations?: number;
+    pageSize?: number;
+}
+
+const generateBuildIndexOperations = (start: number, count: number): Operation[] => {
+    const now = Math.floor(Date.now() / 1000);
+    return Array.from({length: count}, (_, i) => {
+        const index = start + i;
+        const createTime = now - (index + 1) * 60; // Created minutes ago
+        const endTime = createTime + 30; // Completed after 30 seconds
+
+        return {
+            ready: true,
+            metadata: {
+                description: {
+                    index: {
+                        name: `index_${index}`,
+                        global_index: {},
+                        index_columns: [`column_${index}`],
+                    },
+                    path: `/dev02/home/testuser/db1/table_${index}`,
+                },
+                progress: 100,
+                '@type': 'type.googleapis.com/Ydb.Table.IndexBuildMetadata',
+                state: 'STATE_DONE',
+            },
+            status: 'SUCCESS',
+            end_time: {
+                seconds: endTime.toString(),
+            },
+            create_time: {
+                seconds: createTime.toString(),
+            },
+            id: `ydb://buildindex/7?id=56300033048${8000 + index}`,
+            ...(index % 3 === 0
+                ? {
+                      issues: [
+                          {
+                              severity: 1,
+                              message: `TShardStatus { ShardIdx: 72075186224037897:${100 + index} Status: DONE UploadStatus: STATUS_CODE_UNSPECIFIED DebugMessage: <main>: Error: Shard or requested range is empty\n SeqNoRound: 1 Processed: { upload rows: 0, upload bytes: 0, read rows: 0, read bytes: 0 } }`,
+                          },
+                      ],
+                  }
+                : {}),
+        };
+    });
+};
+
+const generateExportOperations = (start: number, count: number): Operation[] => {
+    const now = Math.floor(Date.now() / 1000);
+    return Array.from({length: count}, (_, i) => {
+        const index = start + i;
+        const createTime = now - (index + 1) * 120; // Created 2 minutes ago each
+        const isCompleted = index % 2 === 0;
+
+        return {
+            ready: isCompleted,
+            metadata: {
+                settings: {
+                    export_s3_settings: {
+                        bucket: `export-bucket-${index}`,
+                        endpoint: 'https://s3.amazonaws.com',
+                        number_of_retries: 3,
+                        scheme: 'HTTPS',
+                    },
+                },
+                progress: isCompleted ? 100 : 30 + (index % 7) * 10,
+                '@type': 'type.googleapis.com/Ydb.Export.ExportToS3Metadata',
+                state: isCompleted ? 'STATE_DONE' : 'STATE_IN_PROGRESS',
+            },
+            status: isCompleted ? 'SUCCESS' : 'GENERIC_ERROR',
+            create_time: {
+                seconds: createTime.toString(),
+            },
+            ...(isCompleted
+                ? {
+                      end_time: {
+                          seconds: (createTime + 60).toString(),
+                      },
+                  }
+                : {}),
+            id: `ydb://export/s3/7?id=56300033048${9000 + index}`,
+            created_by: `user${index % 3}@example.com`,
+        };
+    });
+};
+
+export const setupOperationsMock = async (page: Page, options?: OperationMockOptions) => {
+    const totalOperations = options?.totalOperations || 100;
+
+    await page.route(`${backend}/operation/list*`, async (route) => {
+        const url = new URL(route.request().url());
+        const params = Object.fromEntries(url.searchParams);
+
+        const requestedPageSize = parseInt(params.page_size || '10', 10);
+        const pageToken = params.page_token;
+        const kind = params.kind || 'buildindex';
+
+        // Calculate page index from token
+        const pageIndex = pageToken ? parseInt(pageToken, 10) : 0;
+        const start = pageIndex * requestedPageSize;
+        const remainingOperations = Math.max(0, totalOperations - start);
+        const count = Math.min(requestedPageSize, remainingOperations);
+
+        let operations: Operation[] = [];
+        if (kind === 'buildindex') {
+            operations = generateBuildIndexOperations(start, count);
+        } else if (kind === 'export/s3') {
+            operations = generateExportOperations(start, count);
+        } else {
+            operations = []; // Empty for other kinds
+        }
+
+        // Calculate next page token
+        const hasMorePages = start + count < totalOperations;
+        const nextPageToken = hasMorePages ? (pageIndex + 1).toString() : '0';
+
+        const response = {
+            next_page_token: nextPageToken,
+            status: 'SUCCESS',
+            operations,
+        };
+
+        await new Promise((resolve) => setTimeout(resolve, MOCK_DELAY));
+
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify(response),
+        });
+    });
+};
+
+export const setupEmptyOperationsMock = async (page: Page) => {
+    await page.route(`${backend}/operation/list*`, async (route) => {
+        const response = {
+            next_page_token: '0',
+            status: 'SUCCESS',
+            operations: [],
+        };
+
+        await new Promise((resolve) => setTimeout(resolve, MOCK_DELAY));
+
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify(response),
+        });
+    });
+};
+
+export const setupLargeOperationsMock = async (page: Page, totalOperations = 1000) => {
+    await setupOperationsMock(page, {totalOperations});
+};
+
+export const setupOperationMutationMocks = async (page: Page) => {
+    // Mock cancel operation
+    await page.route(`${backend}/operation/cancel*`, async (route) => {
+        await new Promise((resolve) => setTimeout(resolve, MOCK_DELAY));
+
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                status: 'SUCCESS',
+            }),
+        });
+    });
+
+    // Mock forget operation
+    await page.route(`${backend}/operation/forget*`, async (route) => {
+        await new Promise((resolve) => setTimeout(resolve, MOCK_DELAY));
+
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                status: 'SUCCESS',
+            }),
+        });
+    });
+};
+
+export const setupOperationErrorMock = async (page: Page) => {
+    await page.route(`${backend}/operation/list*`, async (route) => {
+        await new Promise((resolve) => setTimeout(resolve, MOCK_DELAY));
+
+        await route.fulfill({
+            status: 500,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                error: 'Internal server error',
+            }),
+        });
+    });
+};
+
+// Helper to setup all required mocks for operations
+export const setupAllOperationMocks = async (page: Page, options?: {totalOperations?: number}) => {
+    await setupOperationsMock(page, options);
+    await setupOperationMutationMocks(page);
+};

From 4fff2f864db602fb437e7222d38d6934bf6365da Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Tue, 24 Jun 2025 14:17:55 +0300
Subject: [PATCH 13/16] fix: skip broken tests

---
 tests/suites/tenant/diagnostics/tabs/queries.test.ts   | 3 ++-
 tests/suites/tenant/diagnostics/tabs/topShards.test.ts | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/tests/suites/tenant/diagnostics/tabs/queries.test.ts b/tests/suites/tenant/diagnostics/tabs/queries.test.ts
index 2facd3f85a..08784d87bd 100644
--- a/tests/suites/tenant/diagnostics/tabs/queries.test.ts
+++ b/tests/suites/tenant/diagnostics/tabs/queries.test.ts
@@ -97,7 +97,8 @@ test.describe('Diagnostics Queries tab', async () => {
         ]);
     });
 
-    test('Query tab first row has values for all columns in Top mode', async ({page}) => {
+    // TODO: https://github.com/ydb-platform/ydb-embedded-ui/issues/2459
+    test.skip('Query tab first row has values for all columns in Top mode', async ({page}) => {
         const pageQueryParams = {
             schema: tenantName,
             database: tenantName,
diff --git a/tests/suites/tenant/diagnostics/tabs/topShards.test.ts b/tests/suites/tenant/diagnostics/tabs/topShards.test.ts
index ce0581f89d..6e8ebd6d40 100644
--- a/tests/suites/tenant/diagnostics/tabs/topShards.test.ts
+++ b/tests/suites/tenant/diagnostics/tabs/topShards.test.ts
@@ -89,7 +89,10 @@ test.describe('Diagnostics TopShards tab', async () => {
         }
     });
 
-    test('TopShards tab first row has values for all columns in History mode', async ({page}) => {
+    // TODO: https://github.com/ydb-platform/ydb-embedded-ui/issues/2459
+    test.skip('TopShards tab first row has values for all columns in History mode', async ({
+        page,
+    }) => {
         // Setup mock for TopShards tab in History mode
         await setupTopShardsHistoryMock(page);
 

From ffef406a70005514f189a2084243096efe052312 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Tue, 24 Jun 2025 14:26:27 +0300
Subject: [PATCH 14/16] fix: small renaming

---
 .../Operations/useOperationsInfiniteQuery.ts        |  2 +-
 src/store/reducers/operations.ts                    | 13 +------------
 2 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/containers/Operations/useOperationsInfiniteQuery.ts b/src/containers/Operations/useOperationsInfiniteQuery.ts
index 099ca48ebd..68819ec048 100644
--- a/src/containers/Operations/useOperationsInfiniteQuery.ts
+++ b/src/containers/Operations/useOperationsInfiniteQuery.ts
@@ -23,7 +23,7 @@ export function useOperationsInfiniteQuery({
     scrollContainerRef,
 }: UseOperationsInfiniteQueryProps) {
     const {data, error, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage, refetch} =
-        operationsApi.useGetOperationListInfiniteInfiniteQuery({
+        operationsApi.useGetOperationListInfiniteQuery({
             database,
             kind,
             page_size: pageSize,
diff --git a/src/store/reducers/operations.ts b/src/store/reducers/operations.ts
index e43d2af1b2..1b1ba6d80a 100644
--- a/src/store/reducers/operations.ts
+++ b/src/store/reducers/operations.ts
@@ -12,18 +12,7 @@ const DEFAULT_PAGE_SIZE = 10;
 
 export const operationsApi = api.injectEndpoints({
     endpoints: (build) => ({
-        getOperationList: build.query({
-            queryFn: async (params: OperationListRequestParams, {signal}) => {
-                try {
-                    const data = await window.api.operation.getOperationList(params, {signal});
-                    return {data};
-                } catch (error) {
-                    return {error};
-                }
-            },
-            providesTags: ['All'],
-        }),
-        getOperationListInfinite: build.infiniteQuery<
+        getOperationList: build.infiniteQuery<
             TOperationList, // Full response type to access next_page_token
             {database: string; kind: OperationKind; page_size?: number}, // Include page_size in query arg
             string | undefined // Page param type (page token)

From ea3ce20100a712424d09ca6d936617397addbbc1 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Tue, 24 Jun 2025 14:32:10 +0300
Subject: [PATCH 15/16] fix: nanofix

---
 src/containers/Operations/columns.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/containers/Operations/columns.tsx b/src/containers/Operations/columns.tsx
index 45f8599e5e..11e5de5636 100644
--- a/src/containers/Operations/columns.tsx
+++ b/src/containers/Operations/columns.tsx
@@ -202,7 +202,11 @@ function OperationsActions({operation, database, refreshTable}: OperationsAction
 
     return (
         <Flex gap="2">
-            <ActionTooltip title={i18n('header_forget')} placement={['left', 'auto']}>
+            <ActionTooltip
+                title={i18n('header_forget')}
+                placement={['left', 'auto']}
+                disabled={isForgetButtonDisabled}
+            >
                 <div>
                     <ButtonWithConfirmDialog
                         buttonView="outlined"

From c45550b886021087acaec65fd06231e520c55a35 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Tue, 24 Jun 2025 17:54:14 +0300
Subject: [PATCH 16/16] fix: review fixes

---
 src/containers/Operations/useOperationsInfiniteQuery.ts | 7 -------
 src/containers/Tenant/Diagnostics/Diagnostics.tsx       | 7 +------
 src/store/reducers/operations.ts                        | 2 +-
 3 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/containers/Operations/useOperationsInfiniteQuery.ts b/src/containers/Operations/useOperationsInfiniteQuery.ts
index 68819ec048..d6d0f6aa66 100644
--- a/src/containers/Operations/useOperationsInfiniteQuery.ts
+++ b/src/containers/Operations/useOperationsInfiniteQuery.ts
@@ -104,13 +104,6 @@ export function useOperationsInfiniteQuery({
         };
     }, [checkAndLoadMorePages]);
 
-    // Listen for diagnostics refresh events
-    React.useEffect(() => {
-        const handleRefresh = () => refetch();
-        document.addEventListener('diagnosticsRefresh', handleRefresh);
-        return () => document.removeEventListener('diagnosticsRefresh', handleRefresh);
-    }, [refetch]);
-
     return {
         operations: filteredOperations,
         isLoading,
diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.tsx b/src/containers/Tenant/Diagnostics/Diagnostics.tsx
index 5e5bcb2803..bf9ec04d90 100644
--- a/src/containers/Tenant/Diagnostics/Diagnostics.tsx
+++ b/src/containers/Tenant/Diagnostics/Diagnostics.tsx
@@ -193,12 +193,7 @@ function Diagnostics(props: DiagnosticsProps) {
                         }}
                         allowNotSelected={true}
                     />
-                    <AutoRefreshControl
-                        onManualRefresh={() => {
-                            const event = new CustomEvent('diagnosticsRefresh');
-                            document.dispatchEvent(event);
-                        }}
-                    />
+                    <AutoRefreshControl />
                 </div>
             </div>
         );
diff --git a/src/store/reducers/operations.ts b/src/store/reducers/operations.ts
index 1b1ba6d80a..4d046d6e47 100644
--- a/src/store/reducers/operations.ts
+++ b/src/store/reducers/operations.ts
@@ -18,7 +18,7 @@ export const operationsApi = api.injectEndpoints({
             string | undefined // Page param type (page token)
         >({
             infiniteQueryOptions: {
-                initialPageParam: undefined as string | undefined,
+                initialPageParam: undefined,
                 getNextPageParam: (lastPage) => {
                     // Return next page token if available, undefined if no more pages
                     return lastPage.next_page_token === '0' ? undefined : lastPage.next_page_token;