ydb-embedded-ui 21.1.0 → 22.1.0

package/src/containers/Storage/useStorageQueryParams.ts

@@ -22,10 +22,17 @@ import {storageNodesGroupByParamSchema} from './PaginatedStorageNodesTable/colum
 import {
     PDisksGroupBy,
     VDisksGroupBy,
+    nodesPdisksGroupBySchema,
+    nodesVdisksGroupBySchema,
     pdisksGroupBySchema,
     vdisksGroupBySchema,
 } from './StorageExpertModePanel/constants';
-import type {PDisksGroupByValue, VDisksGroupByValue} from './StorageExpertModePanel/constants';
+import type {
+    NodesPDisksGroupByValue,
+    NodesVDisksGroupByValue,
+    PDisksGroupByValue,
+    VDisksGroupByValue,
+} from './StorageExpertModePanel/constants';
 import {STORAGE_SEARCH_PARAM_BY_TYPE} from './constants';
 
 interface StorageGroupByCleanupParams {
@@ -81,6 +88,8 @@ export function useStorageQueryParams() {
         storageExpertMode: BooleanParam,
         vdisksGroupBy: StringParam,
         pdisksGroupBy: StringParam,
+        nodesVdisksGroupBy: StringParam,
+        nodesPdisksGroupBy: StringParam,
     });
 
     const [savedStorageType, setSavedStorageType] = useSetting<StorageType>(
@@ -128,6 +137,26 @@ export function useStorageQueryParams() {
         queryParams.pdisksGroupBy ?? savedPDisksGroupBy,
     );
 
+    const [savedNodesVDisksGroupBy, setSavedNodesVDisksGroupBy] =
+        useSetting<NodesVDisksGroupByValue>(
+            SETTING_KEYS.STORAGE_NODES_VDISKS_GROUP_BY,
+            VDisksGroupBy.State,
+        );
+
+    const nodesVdisksGroupBy = nodesVdisksGroupBySchema.parse(
+        queryParams.nodesVdisksGroupBy ?? savedNodesVDisksGroupBy,
+    );
+
+    const [savedNodesPDisksGroupBy, setSavedNodesPDisksGroupBy] =
+        useSetting<NodesPDisksGroupByValue>(
+            SETTING_KEYS.STORAGE_NODES_PDISKS_GROUP_BY,
+            PDisksGroupBy.State,
+        );
+
+    const nodesPdisksGroupBy = nodesPdisksGroupBySchema.parse(
+        queryParams.nodesPdisksGroupBy ?? savedNodesPDisksGroupBy,
+    );
+
     React.useEffect(() => {
         if (queryParams.search) {
             const patch: Record<string, string | undefined> = {search: undefined};
@@ -198,6 +227,22 @@ export function useStorageQueryParams() {
         [setQueryParams, setSavedPDisksGroupBy],
     );
 
+    const handleNodesVDisksGroupByChange = React.useCallback(
+        (value: NodesVDisksGroupByValue) => {
+            setQueryParams({nodesVdisksGroupBy: value}, 'replaceIn');
+            setSavedNodesVDisksGroupBy(value);
+        },
+        [setQueryParams, setSavedNodesVDisksGroupBy],
+    );
+
+    const handleNodesPDisksGroupByChange = React.useCallback(
+        (value: NodesPDisksGroupByValue) => {
+            setQueryParams({nodesPdisksGroupBy: value}, 'replaceIn');
+            setSavedNodesPDisksGroupBy(value);
+        },
+        [setQueryParams, setSavedNodesPDisksGroupBy],
+    );
+
     const handleShowAllGroups = () => {
         handleVisibleEntitiesChange('all');
     };
@@ -235,6 +280,8 @@ export function useStorageQueryParams() {
         storageExpertMode,
         vdisksGroupBy,
         pdisksGroupBy,
+        nodesVdisksGroupBy,
+        nodesPdisksGroupBy,
 
         handleTextFilterGroupsChange,
         handleTextFilterNodesChange,
@@ -247,6 +294,8 @@ export function useStorageQueryParams() {
         handleStorageExpertModeChange,
         handleVDisksGroupByChange,
         handlePDisksGroupByChange,
+        handleNodesVDisksGroupByChange,
+        handleNodesPDisksGroupByChange,
 
         handleShowAllGroups,
         handleShowAllNodes,
@@ -296,6 +345,32 @@ export function usePDisksGroupByParam() {
     );
 }
 
+export function useNodesVDisksGroupByParam() {
+    const [queryNodesVDisksGroupBy] = useQueryParam('nodesVdisksGroupBy', StringParam);
+    const [savedNodesVDisksGroupBy] = useSetting<NodesVDisksGroupByValue>(
+        SETTING_KEYS.STORAGE_NODES_VDISKS_GROUP_BY,
+        VDisksGroupBy.State,
+    );
+
+    return React.useMemo(
+        () => nodesVdisksGroupBySchema.parse(queryNodesVDisksGroupBy ?? savedNodesVDisksGroupBy),
+        [queryNodesVDisksGroupBy, savedNodesVDisksGroupBy],
+    );
+}
+
+export function useNodesPDisksGroupByParam() {
+    const [queryNodesPDisksGroupBy] = useQueryParam('nodesPdisksGroupBy', StringParam);
+    const [savedNodesPDisksGroupBy] = useSetting<NodesPDisksGroupByValue>(
+        SETTING_KEYS.STORAGE_NODES_PDISKS_GROUP_BY,
+        PDisksGroupBy.State,
+    );
+
+    return React.useMemo(
+        () => nodesPdisksGroupBySchema.parse(queryNodesPDisksGroupBy ?? savedNodesPDisksGroupBy),
+        [queryNodesPDisksGroupBy, savedNodesPDisksGroupBy],
+    );
+}
+
 export function useSaveVDisksGroupBy() {
     const [queryVDisksGroupBy, setQueryVDisksGroupBy] = useQueryParam('vdisksGroupBy', StringParam);
     const [savedVDisksGroupBy] = useSetting<VDisksGroupByValue>(
@@ -334,6 +409,50 @@ export function useSavePDisksGroupBy() {
     }, [normalizedPDisksGroupBy, queryPDisksGroupBy, setQueryPDisksGroupBy]);
 }
 
+export function useSaveNodesVDisksGroupBy() {
+    const [queryNodesVDisksGroupBy, setQueryNodesVDisksGroupBy] = useQueryParam(
+        'nodesVdisksGroupBy',
+        StringParam,
+    );
+    const [savedNodesVDisksGroupBy] = useSetting<NodesVDisksGroupByValue>(
+        SETTING_KEYS.STORAGE_NODES_VDISKS_GROUP_BY,
+        VDisksGroupBy.State,
+    );
+
+    const normalizedNodesVDisksGroupBy = React.useMemo(
+        () => nodesVdisksGroupBySchema.parse(queryNodesVDisksGroupBy ?? savedNodesVDisksGroupBy),
+        [queryNodesVDisksGroupBy, savedNodesVDisksGroupBy],
+    );
+
+    React.useEffect(() => {
+        if (normalizedNodesVDisksGroupBy !== queryNodesVDisksGroupBy) {
+            setQueryNodesVDisksGroupBy(normalizedNodesVDisksGroupBy, 'replaceIn');
+        }
+    }, [normalizedNodesVDisksGroupBy, queryNodesVDisksGroupBy, setQueryNodesVDisksGroupBy]);
+}
+
+export function useSaveNodesPDisksGroupBy() {
+    const [queryNodesPDisksGroupBy, setQueryNodesPDisksGroupBy] = useQueryParam(
+        'nodesPdisksGroupBy',
+        StringParam,
+    );
+    const [savedNodesPDisksGroupBy] = useSetting<NodesPDisksGroupByValue>(
+        SETTING_KEYS.STORAGE_NODES_PDISKS_GROUP_BY,
+        PDisksGroupBy.State,
+    );
+
+    const normalizedNodesPDisksGroupBy = React.useMemo(
+        () => nodesPdisksGroupBySchema.parse(queryNodesPDisksGroupBy ?? savedNodesPDisksGroupBy),
+        [queryNodesPDisksGroupBy, savedNodesPDisksGroupBy],
+    );
+
+    React.useEffect(() => {
+        if (normalizedNodesPDisksGroupBy !== queryNodesPDisksGroupBy) {
+            setQueryNodesPDisksGroupBy(normalizedNodesPDisksGroupBy, 'replaceIn');
+        }
+    }, [normalizedNodesPDisksGroupBy, queryNodesPDisksGroupBy, setQueryNodesPDisksGroupBy]);
+}
+
 export function useSaveStorageExpertMode() {
     const [queryStorageExpertMode, setQueryStorageExpertMode] = useQueryParam(
         'storageExpertMode',

package/src/containers/Storage/useStorageVDiskDisplayStateGetter.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {CircleXmarkFill, ClockFill} from '@gravity-ui/icons';
+
 import {ECapacityAlert, EFlag, isCapacityAlert} from '../../types/api/enums';
 import {EVDiskState} from '../../types/api/vdisk';
 import {
@@ -22,11 +24,17 @@ import {
     calculateCompactionIcon,
     calculateFrontQueuesIcon,
     calculateSpaceIcon,
+    calculateStateIcon,
 } from '../../utils/disks/iconCalculators';
 import type {PreparedVDisk} from '../../utils/disks/types';
 
+import type {SpaceLegendSelectionScope} from './StorageExpertModePanel/components/getSpaceLegendSelection';
 import {useSpaceLegendSelection} from './StorageExpertModePanel/components/useSpaceLegendSelection';
-import {useIsStorageExpertMode, useVDisksGroupByParam} from './useStorageQueryParams';
+import {
+    useIsStorageExpertMode,
+    useNodesVDisksGroupByParam,
+    useVDisksGroupByParam,
+} from './useStorageQueryParams';
 
 function getMode(groupBy: VDisksGroupByValue): DiskDisplayMode {
     switch (groupBy) {
@@ -71,7 +79,7 @@ function getAllModeIndicators(
     return {
         ...(capacityAlert ? {capacityAlert} : {}),
         ...(frontQueues ? {frontQueues} : {}),
-        ...(compaction ? {compaction} : {}),
+        ...(compaction?.length ? {compaction} : {}),
     };
 }
 
@@ -103,14 +111,22 @@ function getMissingVDiskDisplayState(
     vDisk: PreparedVDisk,
     isDonor: boolean | undefined,
     mode: DiskDisplayMode,
+    showNoDataPlaceholder: boolean,
 ): VDiskDisplayState {
     const isAllMode = mode === 'all';
+    let icon: VDiskDisplayState['icon'];
+    if (isDonor) {
+        icon = calculateStateIcon(vDisk, isDonor);
+    } else if (mode === 'state' || isAllMode) {
+        icon = getKnownVDiskStateIcon(vDisk);
+    }
     const displayState: VDiskDisplayState = {
         severity: NOT_AVAILABLE_SEVERITY,
-        icon: undefined,
+        icon,
         mode,
+        isNoData: true,
         isLegendInactive: false,
-        showNoDataPlaceholder: true,
+        showNoDataPlaceholder,
         allocatedPercent: isAllMode ? vDisk.AllocatedPercent : undefined,
         showAllocatedPercentLabel: !isAllMode,
         striped: Boolean(isDonor),
@@ -124,9 +140,25 @@ function getMissingVDiskDisplayState(
     return displayState;
 }
 
+function getKnownVDiskStateIcon(vDisk: PreparedVDisk) {
+    if (vDisk.VDiskState !== undefined) {
+        return calculateStateIcon(vDisk);
+    }
+
+    switch (vDisk.Status) {
+        case 'ERROR':
+            return CircleXmarkFill;
+        case 'INIT_PENDING':
+            return ClockFill;
+        default:
+            return undefined;
+    }
+}
+
 interface GetExpertVDiskDisplayStateParams {
     inactiveLegendItems: Set<ECapacityAlert>;
     isDonor?: boolean;
+    selectionScope: SpaceLegendSelectionScope;
     vDisk: PreparedVDisk;
     vdisksGroupBy: VDisksGroupByValue;
 }
@@ -134,12 +166,13 @@ interface GetExpertVDiskDisplayStateParams {
 function getExpertVDiskDisplayState({
     inactiveLegendItems,
     isDonor,
+    selectionScope,
     vDisk,
     vdisksGroupBy,
 }: GetExpertVDiskDisplayStateParams): VDiskDisplayState {
     const mode = getMode(vdisksGroupBy);
-    if (!vDisk.VDiskId) {
-        return getMissingVDiskDisplayState(vDisk, isDonor, mode);
+    if (!(vDisk.HasWhiteboardData ?? Boolean(vDisk.VDiskId))) {
+        return getMissingVDiskDisplayState(vDisk, isDonor, mode, selectionScope !== 'nodes-vdisks');
     }
 
     const severity = getSeverityCalculator(vdisksGroupBy)(vDisk);
@@ -147,11 +180,18 @@ function getExpertVDiskDisplayState({
     const isCapacityAlertInactive =
         isCapacityAlert(vDisk.CapacityAlert) && inactiveLegendItems.has(vDisk.CapacityAlert);
     const allMode = getAllModeDisplayState(mode, vDisk, isDonor, isCapacityAlertInactive);
+    const spaceBorderless = mode === 'space' && isCapacityAlertInactive;
+    const stateBorderless =
+        mode === 'state' &&
+        !isDonor &&
+        (severity === DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Green ||
+            severity === DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Yellow);
     const displayState: VDiskDisplayState = {
         severity,
         icon,
         mode,
         isLegendInactive: mode === 'space' && isCapacityAlertInactive,
+        borderless: spaceBorderless || stateBorderless,
         showNoDataPlaceholder: false,
         allocatedPercent: mode === 'all' ? vDisk.AllocatedPercent : undefined,
         showAllocatedPercentLabel: mode !== 'all',
@@ -166,10 +206,12 @@ function getExpertVDiskDisplayState({
     return displayState;
 }
 
-export function useStorageVDiskDisplayStateGetter(): VDiskDisplayStateGetter {
+function useVDiskDisplayStateGetter(
+    vdisksGroupBy: VDisksGroupByValue,
+    selectionScope: SpaceLegendSelectionScope,
+): VDiskDisplayStateGetter {
     const isExpertMode = useIsStorageExpertMode();
-    const vdisksGroupBy = useVDisksGroupByParam();
-    const inactiveLegendItems = useSpaceLegendSelection();
+    const inactiveLegendItems = useSpaceLegendSelection(selectionScope);
 
     return React.useCallback(
         (vDisk, isDonor) => {
@@ -180,10 +222,23 @@ export function useStorageVDiskDisplayStateGetter(): VDiskDisplayStateGetter {
             return getExpertVDiskDisplayState({
                 inactiveLegendItems,
                 isDonor,
+                selectionScope,
                 vDisk,
                 vdisksGroupBy,
             });
         },
-        [inactiveLegendItems, isExpertMode, vdisksGroupBy],
+        [inactiveLegendItems, isExpertMode, selectionScope, vdisksGroupBy],
     );
 }
+
+export function useStorageVDiskDisplayStateGetter(): VDiskDisplayStateGetter {
+    const vdisksGroupBy = useVDisksGroupByParam();
+
+    return useVDiskDisplayStateGetter(vdisksGroupBy, 'vdisks');
+}
+
+export function useStorageNodesVDiskDisplayStateGetter(): VDiskDisplayStateGetter {
+    const vdisksGroupBy = useNodesVDisksGroupByParam();
+
+    return useVDiskDisplayStateGetter(vdisksGroupBy, 'nodes-vdisks');
+}

package/src/containers/Storage/utils/useStorageColumnsSettings.ts

@@ -1,78 +1,106 @@
 import React from 'react';
 
+import {VDisksGroupBy} from '../../../utils/disks/groupBy';
+import {
+    NODE_EXPERT_ALL_PDISK_WIDTH,
+    NODE_EXPERT_PDISK_WIDTH,
+    STORAGE_NODES_DEFAULT_PDISK_HEIGHT,
+    STORAGE_NODES_DEFAULT_ROW_HEIGHT,
+    getNodeExpertPDiskHeight,
+    getStorageNodesExpertRowHeight,
+} from '../PaginatedStorageNodes/nodeExpertModeLayout';
 import type {StorageNodesColumnsSettings} from '../PaginatedStorageNodesTable/columns/types';
 import type {StorageNodesPaginatedTableData} from '../types';
+import {useNodesVDisksGroupByParam} from '../useStorageQueryParams';
 
 /**
  * Storage → Nodes → column "PDisks": size coupling notes (keep in sync)
  *
  * Data flow:
  * - `window.api.viewer.getNodes()` returns `MaximumSlotsPerDisk` / `MaximumDisksPerNode`
- *   → `prepareStorageNodesResponse()` maps them into `columnsSettings.{maxSlotsPerDisk,maxDisksPerNode}`
- *     (`src/store/reducers/storage/utils.ts`)
- *   → `handleDataFetched()` calculates `pDiskWidth` and `pDiskContainerWidth` (this file)
- *   → `PaginatedStorageNodesTable` column width uses `pDiskContainerWidth`
- *     and each `PDisk` instance gets `width={pDiskWidth}`.
+ *   → `prepareStorageNodesResponse()` maps them into `columnsSettings`
+ *   → `handleDataFetched()` retains the largest dimensions observed while the table is mounted
+ *   → this hook derives the PDisk column width, PDisk content height, and virtualized row height.
  *
- * Visual model:
- * - One PDisk cell renders a horizontal row of compact VDisks above the PDisk progress bar
- *   (`src/containers/Storage/PDisk/PDisk.tsx`).
- * - Each VDisk "slot" has a hard minimum width and a gap between slots:
- *   - slot min-width is effectively 8px:
- *     - `--pdisk-vdisk-width: 8px` (`src/containers/Storage/PDisk/PDisk.scss`)
- *     - `DiskStateProgressBar` compact min-width is 8px
- *       (`src/components/DiskStateProgressBar/DiskStateProgressBar.scss`)
- *   - gap is 2px: `--pdisk-gap-width: 2px` (`src/containers/Storage/PDisk/PDisk.scss`)
- *
- * Therefore, the `pDiskWidth` formula below MUST use the same slot/gap values,
- * otherwise with large `maxSlotsPerDisk` the VDisks row will overflow the PDisk width.
+ * Default mode keeps VDisks in one row and grows PDisk width when necessary. Expert mode uses
+ * rows of 8; VDisk All uses rows of 4 fixed-width disks with size indicators above them.
+ * nodeExpertModeLayout owns the dimensions used for both the content and virtualized rows.
  */
 const PDISK_VDISK_WIDTH = 8;
 const PDISK_GAP_WIDTH = 2;
-const PDISK_MIN_WIDTH = 165;
 const PDISK_MARGIN = 10;
 const MAX_SLOTS_DEFAULT = 1;
-const PAGNATED_TABLE_CELL_HORIZONTAL_PADDING = 10;
+const PAGINATED_TABLE_CELL_HORIZONTAL_PADDING = 10;
 
-export function useStorageColumnsSettings() {
-    const [pDiskWidth, setPDiskWidth] = React.useState<number | undefined>(undefined);
-    const [pDiskContainerWidth, setPDiskContainerWidth] = React.useState<number | undefined>(
-        undefined,
-    );
+interface StorageDisksLayoutData {
+    maxSlotsPerDisk: number;
+    maxDisksPerNode: number;
+}
 
-    const handleDataFetched = React.useCallback(
-        (data: StorageNodesPaginatedTableData) => {
-            if (data?.columnsSettings && !pDiskWidth) {
-                const {maxSlotsPerDisk, maxDisksPerNode} = data.columnsSettings;
-                const maxSlots = maxSlotsPerDisk || MAX_SLOTS_DEFAULT;
-                const maxDisks = maxDisksPerNode || MAX_SLOTS_DEFAULT;
+export function useStorageColumnsSettings({expertMode = false} = {}) {
+    const vDisksGroupBy = useNodesVDisksGroupByParam();
+    const isAllVDisksLayout = expertMode && vDisksGroupBy === VDisksGroupBy.All;
+    const [layoutData, setLayoutData] = React.useState<StorageDisksLayoutData>();
 
-                const calculatedPDiskWidth = Math.max(
-                    maxSlots * PDISK_VDISK_WIDTH + (maxSlots - 1) * PDISK_GAP_WIDTH,
-                    PDISK_MIN_WIDTH,
-                );
+    const handleDataFetched = React.useCallback((data: StorageNodesPaginatedTableData) => {
+        if (!data.columnsSettings) {
+            return;
+        }
 
-                const calculatedPDiskContainerWidth =
-                    maxDisks * calculatedPDiskWidth +
-                    (maxDisks - 1) * PDISK_MARGIN +
-                    2 * PAGNATED_TABLE_CELL_HORIZONTAL_PADDING;
+        const nextLayoutData = data.columnsSettings;
+        setLayoutData((currentLayoutData) => {
+            const maxSlotsPerDisk = Math.max(
+                currentLayoutData?.maxSlotsPerDisk ?? 0,
+                nextLayoutData.maxSlotsPerDisk,
+            );
+            const maxDisksPerNode = Math.max(
+                currentLayoutData?.maxDisksPerNode ?? 0,
+                nextLayoutData.maxDisksPerNode,
+            );
 
-                setPDiskWidth(calculatedPDiskWidth);
-                setPDiskContainerWidth(calculatedPDiskContainerWidth);
+            if (
+                currentLayoutData?.maxSlotsPerDisk === maxSlotsPerDisk &&
+                currentLayoutData.maxDisksPerNode === maxDisksPerNode
+            ) {
+                return currentLayoutData;
             }
-        },
-        [pDiskWidth],
-    );
 
-    const columnsSettings: StorageNodesColumnsSettings = React.useMemo(() => {
-        return {
-            pDiskWidth: pDiskWidth || PDISK_MIN_WIDTH,
-            pDiskContainerWidth: pDiskContainerWidth,
-        };
-    }, [pDiskContainerWidth, pDiskWidth]);
+            return {maxSlotsPerDisk, maxDisksPerNode};
+        });
+    }, []);
+
+    const maxSlotsPerDisk = layoutData?.maxSlotsPerDisk || MAX_SLOTS_DEFAULT;
+    const maxDisksPerNode = layoutData?.maxDisksPerNode || MAX_SLOTS_DEFAULT;
+
+    const expertPDiskWidth = isAllVDisksLayout
+        ? NODE_EXPERT_ALL_PDISK_WIDTH
+        : NODE_EXPERT_PDISK_WIDTH;
+    const pDiskWidth = expertMode
+        ? expertPDiskWidth
+        : Math.max(
+              maxSlotsPerDisk * PDISK_VDISK_WIDTH + (maxSlotsPerDisk - 1) * PDISK_GAP_WIDTH,
+              NODE_EXPERT_PDISK_WIDTH,
+          );
+    const pDiskHeight = expertMode
+        ? getNodeExpertPDiskHeight(maxSlotsPerDisk, isAllVDisksLayout)
+        : STORAGE_NODES_DEFAULT_PDISK_HEIGHT;
+    const rowHeight = expertMode
+        ? getStorageNodesExpertRowHeight(maxSlotsPerDisk, isAllVDisksLayout)
+        : STORAGE_NODES_DEFAULT_ROW_HEIGHT;
+    const pDiskContainerWidth = layoutData
+        ? maxDisksPerNode * pDiskWidth +
+          (maxDisksPerNode - 1) * PDISK_MARGIN +
+          2 * PAGINATED_TABLE_CELL_HORIZONTAL_PADDING
+        : undefined;
+
+    const columnsSettings: StorageNodesColumnsSettings = React.useMemo(
+        () => ({pDiskWidth, pDiskContainerWidth, pDiskHeight, expertMode}),
+        [pDiskContainerWidth, pDiskHeight, pDiskWidth, expertMode],
+    );
 
     return {
         handleDataFetched,
         columnsSettings,
+        rowHeight,
     };
 }

package/src/containers/Storage/utils/useVirtualizedDiskList.ts

@@ -0,0 +1,156 @@
+import React from 'react';
+
+interface DiskItem {
+    StringifiedId?: string;
+}
+
+const MIN_VIRTUALIZED_DISKS_COUNT = 10;
+
+function getDiskKey(disks: readonly DiskItem[], index: number) {
+    return disks[index]?.StringifiedId || index;
+}
+
+function getElementDiskKey(element: Element, index: number) {
+    return element.getAttribute('data-disk-id') || index;
+}
+
+export function useVirtualizedDiskList(disks: readonly DiskItem[], enabled = true) {
+    const shouldVirtualize = enabled && disks.length >= MIN_VIRTUALIZED_DISKS_COUNT;
+    const containerRef = React.useRef<HTMLDivElement | null>(null);
+    const pendingFocusRef = React.useRef<{element: HTMLDivElement; fromEnd: boolean}>();
+    const [visibleKeys, setVisibleKeys] = React.useState<Set<string | number>>(() => new Set());
+    const [lastFocusedKey, setLastFocusedKey] = React.useState<string | number>();
+    const lastFocusedIndex = disks.findIndex(
+        (_, index) => getDiskKey(disks, index) === lastFocusedKey,
+    );
+
+    React.useEffect(() => {
+        if (lastFocusedKey !== undefined && lastFocusedIndex === -1) {
+            setLastFocusedKey(undefined);
+        }
+    }, [lastFocusedIndex, lastFocusedKey]);
+
+    const placeholderProps = React.useMemo<React.HTMLAttributes<HTMLDivElement>>(
+        () => ({
+            // Wrappers fall back to -1 when content mounts: removing tabIndex would
+            // blur the placeholder before the layout effect can focus its link.
+            tabIndex: 0,
+            // Record the handoff before native focusin tracking can mount the disk
+            // and remove the placeholder's React event handler.
+            onFocusCapture: (event) => {
+                if (event.target !== event.currentTarget) {
+                    return;
+                }
+                const elements = Array.from(containerRef.current?.children ?? []);
+                const index = elements.findIndex((element) =>
+                    element.contains(event.currentTarget),
+                );
+                if (index !== -1) {
+                    pendingFocusRef.current = {
+                        element: event.currentTarget,
+                        fromEnd: index === elements.length - 1,
+                    };
+                    setLastFocusedKey(getElementDiskKey(elements[index], index));
+                }
+            },
+        }),
+        [],
+    );
+
+    React.useLayoutEffect(() => {
+        const pendingFocus = pendingFocusRef.current;
+        pendingFocusRef.current = undefined;
+        if (!pendingFocus || document.activeElement !== pendingFocus.element) {
+            return;
+        }
+        // Mount the boundary disk before handing focus to its first/last link.
+        const links = pendingFocus.element.querySelectorAll<HTMLAnchorElement>('a[href]');
+        const link = pendingFocus.fromEnd ? links[links.length - 1] : links[0];
+        link?.focus();
+    });
+
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return undefined;
+        }
+
+        const onFocus = (event: FocusEvent) => {
+            const target = event.target;
+            if (!(target instanceof Node)) {
+                return;
+            }
+            const elements = Array.from(container.children);
+            const index = elements.findIndex((element) => element.contains(target));
+            if (index !== -1) {
+                // React restores focus before effects update after a reorder. Read
+                // the committed DOM identity, not an index into the previous data.
+                setLastFocusedKey(getElementDiskKey(elements[index], index));
+            }
+        };
+        container.addEventListener('focusin', onFocus);
+
+        if (!shouldVirtualize) {
+            return () => container.removeEventListener('focusin', onFocus);
+        }
+
+        // Each disk keeps one direct child as its sized placeholder.
+        const keysByElement = new Map(
+            Array.from(container.children, (element, index) => [
+                element,
+                getElementDiskKey(element, index),
+            ]),
+        );
+        const intersectingKeys = new Set<string | number>();
+        let active = true;
+        const observer = new IntersectionObserver((entries) => {
+            if (!active) {
+                return;
+            }
+            for (const entry of entries) {
+                const key = keysByElement.get(entry.target);
+                if (key === undefined) {
+                    continue;
+                }
+                if (entry.isIntersecting) {
+                    intersectingKeys.add(key);
+                } else {
+                    intersectingKeys.delete(key);
+                }
+            }
+            const next = new Set(intersectingKeys);
+            setVisibleKeys((previous) => {
+                return next.size === previous.size && [...next].every((key) => previous.has(key))
+                    ? previous
+                    : next;
+            });
+        });
+        keysByElement.forEach((_, element) => observer.observe(element));
+
+        return () => {
+            active = false;
+            observer.disconnect();
+            container.removeEventListener('focusin', onFocus);
+        };
+    }, [disks, shouldVirtualize]);
+
+    const shouldRenderDisk = (index: number) =>
+        !shouldVirtualize ||
+        visibleKeys.has(getDiskKey(disks, index)) ||
+        // Keep neighbors for scrolling and Tab/Shift+Tab navigation.
+        visibleKeys.has(getDiskKey(disks, index - 1)) ||
+        visibleKeys.has(getDiskKey(disks, index + 1)) ||
+        // Keep the last keyboard target reachable when returning from the next row.
+        (lastFocusedIndex !== -1 && Math.abs(index - lastFocusedIndex) <= 1);
+
+    return {
+        containerRef,
+        shouldRenderDisk,
+        getPlaceholderProps: (index: number) =>
+            shouldVirtualize &&
+            !shouldRenderDisk(index) &&
+            (index === 0 || index === disks.length - 1)
+                ? placeholderProps
+                : undefined,
+    };
+}

package/src/containers/StorageGroupPage/StorageGroupPage.tsx

@@ -9,10 +9,7 @@ import {ResponseError} from '../../components/Errors/ResponseError';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
 import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
 import {StorageGroupInfo} from '../../components/StorageGroupInfo/StorageGroupInfo';
-import {
-    useCapabilitiesLoaded,
-    useStorageGroupsHandlerAvailable,
-} from '../../store/reducers/capabilities/hooks';
+import {useCapabilitiesLoaded} from '../../store/reducers/capabilities/hooks';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {storageApi} from '../../store/reducers/storage/storage';
 import {EFlag} from '../../types/api/enums';
@@ -41,11 +38,10 @@ export function StorageGroupPage() {
     }, [dispatch, groupId, database]);
 
     const [autoRefreshInterval] = useAutoRefreshInterval();
-    const shouldUseGroupsHandler = useStorageGroupsHandlerAvailable();
     const capabilitiesLoaded = useCapabilitiesLoaded();
     const groupQuery = storageApi.useGetStorageGroupsInfoQuery(
         valueIsDefined(groupId)
-            ? {groupId, shouldUseGroupsHandler, with: 'all', fieldsRequired: 'all', database}
+            ? {groupId, with: 'all', fieldsRequired: 'all', database}
             : skipToken,
         {
             pollingInterval: autoRefreshInterval,