ydb-embedded-ui 22.0.0 → 22.1.0

package/src/containers/Storage/PaginatedStorageNodesTable/PaginatedStorageNodesTable.tsx

@@ -1,13 +1,21 @@
 import React from 'react';
 
+import {useHistory} from 'react-router-dom';
+
+import {
+    getNodeHostLabel,
+    getNodeHostPath,
+} from '../../../components/NodeHostWrapper/NodeHostWrapper';
 import type {PaginatedTableData, RenderErrorMessage} from '../../../components/PaginatedTable';
 import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../../components/PaginatedTable';
+import {NODES_COLUMNS_IDS} from '../../../components/nodesColumns/constants';
 import type {NodesColumn} from '../../../components/nodesColumns/types';
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
 import type {NodesGroupByField} from '../../../types/api/nodes';
 import {cn} from '../../../utils/cn';
 import {NodesUptimeFilterValues, isUnavailableNode} from '../../../utils/nodes';
+import {STORAGE_NODES_DEFAULT_ROW_HEIGHT} from '../PaginatedStorageNodes/nodeExpertModeLayout';
 
 import {StorageNodesEmptyDataMessage} from './StorageNodesEmptyDataMessage';
 import {STORAGE_NODES_COLUMNS_WIDTH_LS_KEY} from './columns/constants';
@@ -39,6 +47,7 @@ interface PaginatedStorageNodesTableProps {
     scrollContainerRef: React.RefObject<HTMLElement>;
     renderErrorMessage: RenderErrorMessage;
     initialEntitiesCount?: number;
+    rowHeight?: number;
     onDataFetched?: (data: PaginatedTableData<PreparedStorageNode>) => void;
 }
 
@@ -56,8 +65,10 @@ export const PaginatedStorageNodesTable = ({
     scrollContainerRef,
     renderErrorMessage,
     initialEntitiesCount,
+    rowHeight = STORAGE_NODES_DEFAULT_ROW_HEIGHT,
     onDataFetched,
 }: PaginatedStorageNodesTableProps) => {
+    const history = useHistory();
     const tableFilters = React.useMemo(() => {
         return {
             searchValue,
@@ -99,11 +110,23 @@ export const PaginatedStorageNodesTable = ({
 
     return (
         <ResizeablePaginatedTable
+            getKeyboardRowKey={(node) => node.NodeId}
+            getKeyboardRowLabel={getNodeHostLabel}
+            onKeyboardActivate={(node) => {
+                const nodePath = getNodeHostPath(node, database);
+                if (nodePath) {
+                    history.push(nodePath);
+                }
+            }}
             columnsWidthLSKey={STORAGE_NODES_COLUMNS_WIDTH_LS_KEY}
             scrollContainerRef={scrollContainerRef}
             columns={columns}
             fetchData={getStorageNodes}
-            rowHeight={51}
+            rowHeight={
+                columns.some((column) => column.name === NODES_COLUMNS_IDS.PDisks)
+                    ? rowHeight
+                    : undefined
+            }
             initialEntitiesCount={initialEntitiesCount}
             renderErrorMessage={renderErrorMessage}
             renderEmptyDataMessage={renderEmptyDataMessage}

package/src/containers/Storage/PaginatedStorageNodesTable/columns/columns.tsx

@@ -54,10 +54,12 @@ export const getPDisksColumn = ({
                     vDisks={row.VDisks}
                     viewContext={viewContext}
                     pDiskWidth={columnsSettings?.pDiskWidth}
+                    pDiskHeight={columnsSettings?.pDiskHeight}
+                    expertMode={columnsSettings?.expertMode}
                 />
             );
         },
-        align: DataTable.CENTER,
+        align: DataTable.LEFT,
         sortable: false,
         resizeable: false,
     };

package/src/containers/Storage/PaginatedStorageNodesTable/columns/hooks.ts

@@ -51,13 +51,19 @@ export function useStorageNodesSelectedColumns({
         return allColumns.filter((column) => !skippedColumnIds.some((id) => id === column.name));
     }, [database, viewContext, columnsSettings, skippedColumnIds]);
 
-    const requiredColumns = React.useMemo(() => {
+    const stickyColumns = React.useMemo(() => {
         if (visibleEntities === VISIBLE_ENTITIES.missing) {
             return [...REQUIRED_STORAGE_NODES_COLUMNS, NODES_COLUMNS_IDS.Missing];
         }
         return REQUIRED_STORAGE_NODES_COLUMNS;
     }, [visibleEntities]);
 
+    const requiredColumns = React.useMemo(() => {
+        return columnsSettings?.expertMode
+            ? [...stickyColumns, NODES_COLUMNS_IDS.PDisks]
+            : stickyColumns;
+    }, [columnsSettings?.expertMode, stickyColumns]);
+
     const defaultColumns = React.useMemo(() => {
         if (!bridgeModeEnabled) {
             return DEFAULT_STORAGE_NODES_COLUMNS;
@@ -73,6 +79,7 @@ export function useStorageNodesSelectedColumns({
         NODES_COLUMNS_TITLES,
         defaultColumns,
         requiredColumns,
+        stickyColumns,
     );
 
     const hiddenCapacityColumnIds = blobMetricsEnabled

package/src/containers/Storage/PaginatedStorageNodesTable/columns/types.ts

@@ -4,6 +4,8 @@ import type {StorageViewContext} from '../../types';
 export interface StorageNodesColumnsSettings {
     pDiskWidth?: number;
     pDiskContainerWidth?: number;
+    pDiskHeight?: number;
+    expertMode?: boolean;
 }
 
 export interface GetStorageNodesColumnsParams {

package/src/containers/Storage/StorageExpertModePanel/StorageGroupsExpertModePanel.tsx

@@ -0,0 +1,63 @@
+import {useStorageQueryParams} from '../useStorageQueryParams';
+
+import {ExpertModePanelLayout, ExpertModeRow} from './components/ExpertModePanelLayout';
+import type {ExpertModeOption} from './components/ExpertModePanelLayout';
+import {renderPDiskLegend, renderVDiskLegend} from './components/renderExpertModeLegend';
+import {PDisksGroupBy, VDisksGroupBy} from './constants';
+import type {PDisksGroupByValue, VDisksGroupByValue} from './constants';
+import i18n from './i18n';
+
+interface StorageGroupsExpertModePanelProps {
+    className?: string;
+}
+
+function getVDiskOptions(): ExpertModeOption<VDisksGroupByValue>[] {
+    return [
+        {value: VDisksGroupBy.State, content: i18n('value_state')},
+        {value: VDisksGroupBy.Space, content: i18n('value_space')},
+        {value: VDisksGroupBy.FrontQueues, content: i18n('value_front-queues')},
+        {value: VDisksGroupBy.Compaction, content: i18n('value_compaction')},
+        {value: VDisksGroupBy.All, content: i18n('value_all')},
+    ];
+}
+
+function getPDiskOptions(): ExpertModeOption<PDisksGroupByValue>[] {
+    return [
+        {value: PDisksGroupBy.State, content: i18n('value_pdisks-state')},
+        {value: PDisksGroupBy.Space, content: i18n('value_pdisks-space')},
+        {value: PDisksGroupBy.Drive, content: i18n('value_pdisks-drive')},
+        {value: PDisksGroupBy.Decommit, content: i18n('value_pdisks-decommit')},
+        {value: PDisksGroupBy.Maintenance, content: i18n('value_pdisks-maintenance')},
+        {value: PDisksGroupBy.Device, content: i18n('value_pdisks-device')},
+        {value: PDisksGroupBy.All, content: i18n('value_pdisks-all')},
+    ];
+}
+
+export function StorageGroupsExpertModePanel({className}: StorageGroupsExpertModePanelProps) {
+    const {vdisksGroupBy, pdisksGroupBy, handleVDisksGroupByChange, handlePDisksGroupByChange} =
+        useStorageQueryParams();
+
+    return (
+        <ExpertModePanelLayout className={className}>
+            <ExpertModeRow
+                label={i18n('label_vdisks')}
+                value={vdisksGroupBy}
+                onUpdate={handleVDisksGroupByChange}
+                options={getVDiskOptions()}
+                legend={renderVDiskLegend(vdisksGroupBy, 'vdisks')}
+            />
+            <ExpertModeRow
+                qa="storage-pdisks-expert-mode"
+                label={i18n('label_pdisks')}
+                value={pdisksGroupBy}
+                onUpdate={handlePDisksGroupByChange}
+                options={getPDiskOptions()}
+                legend={
+                    <div data-qa="storage-pdisks-expert-mode-legend">
+                        {renderPDiskLegend(pdisksGroupBy, 'pdisks')}
+                    </div>
+                }
+            />
+        </ExpertModePanelLayout>
+    );
+}

package/src/containers/Storage/StorageExpertModePanel/StorageNodesExpertModePanel.tsx

@@ -0,0 +1,67 @@
+import {useStorageQueryParams} from '../useStorageQueryParams';
+
+import {ExpertModePanelLayout, ExpertModeRow} from './components/ExpertModePanelLayout';
+import type {ExpertModeOption} from './components/ExpertModePanelLayout';
+import {renderPDiskLegend, renderVDiskLegend} from './components/renderExpertModeLegend';
+import {PDisksGroupBy, VDisksGroupBy} from './constants';
+import type {NodesPDisksGroupByValue, NodesVDisksGroupByValue} from './constants';
+import i18n from './i18n';
+
+interface StorageNodesExpertModePanelProps {
+    className?: string;
+}
+
+function getVDiskOptions(): ExpertModeOption<NodesVDisksGroupByValue>[] {
+    return [
+        {value: VDisksGroupBy.State, content: i18n('value_state')},
+        {value: VDisksGroupBy.Space, content: i18n('value_space')},
+        {value: VDisksGroupBy.FrontQueues, content: i18n('value_front-queues')},
+        {value: VDisksGroupBy.Compaction, content: i18n('value_compaction')},
+        {value: VDisksGroupBy.All, content: i18n('value_all')},
+    ];
+}
+
+function getPDiskOptions(): ExpertModeOption<NodesPDisksGroupByValue>[] {
+    return [
+        {value: PDisksGroupBy.State, content: i18n('value_pdisks-state')},
+        {value: PDisksGroupBy.Space, content: i18n('value_pdisks-space')},
+        {value: PDisksGroupBy.Drive, content: i18n('value_pdisks-drive')},
+        {value: PDisksGroupBy.Decommit, content: i18n('value_pdisks-decommit')},
+        {value: PDisksGroupBy.Maintenance, content: i18n('value_pdisks-maintenance')},
+        {value: PDisksGroupBy.Device, content: i18n('value_pdisks-device')},
+        {value: PDisksGroupBy.All, content: i18n('value_pdisks-all')},
+    ];
+}
+
+export function StorageNodesExpertModePanel({className}: StorageNodesExpertModePanelProps) {
+    const {
+        nodesVdisksGroupBy,
+        nodesPdisksGroupBy,
+        handleNodesVDisksGroupByChange,
+        handleNodesPDisksGroupByChange,
+    } = useStorageQueryParams();
+
+    return (
+        <ExpertModePanelLayout className={className}>
+            <ExpertModeRow
+                label={i18n('label_vdisks')}
+                value={nodesVdisksGroupBy}
+                onUpdate={handleNodesVDisksGroupByChange}
+                options={getVDiskOptions()}
+                legend={renderVDiskLegend(nodesVdisksGroupBy, 'nodes-vdisks')}
+            />
+            <ExpertModeRow
+                qa="storage-nodes-pdisks-expert-mode"
+                label={i18n('label_pdisks')}
+                value={nodesPdisksGroupBy}
+                onUpdate={handleNodesPDisksGroupByChange}
+                options={getPDiskOptions()}
+                legend={
+                    <div data-qa="storage-nodes-pdisks-expert-mode-legend">
+                        {renderPDiskLegend(nodesPdisksGroupBy, 'nodes-pdisks')}
+                    </div>
+                }
+            />
+        </ExpertModePanelLayout>
+    );
+}

package/src/containers/Storage/StorageExpertModePanel/components/ExpertModePanelLayout.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import {Flex, SegmentedRadioGroup, Text} from '@gravity-ui/uikit';
+
+import {b} from '../constants';
+
+import '../StorageExpertModePanel.scss';
+
+export interface ExpertModeOption<T extends string> {
+    value: T;
+    content: React.ReactNode;
+}
+
+interface ExpertModePanelLayoutProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function ExpertModePanelLayout({children, className}: ExpertModePanelLayoutProps) {
+    return <div className={b(null, className)}>{children}</div>;
+}
+
+interface ExpertModeRowProps<T extends string> {
+    label: React.ReactNode;
+    value: T;
+    onUpdate: (value: T) => void;
+    options: readonly ExpertModeOption<T>[];
+    legend: React.ReactNode;
+    qa?: string;
+}
+
+export function ExpertModeRow<T extends string>({
+    label,
+    value,
+    onUpdate,
+    options,
+    legend,
+    qa,
+}: ExpertModeRowProps<T>) {
+    const labelId = React.useId();
+
+    return (
+        <Flex gap={3} alignItems="center">
+            <Text id={labelId} variant="subheader-1">
+                {label}
+            </Text>
+            <SegmentedRadioGroup
+                aria-labelledby={labelId}
+                qa={qa}
+                value={value}
+                onUpdate={(nextValue) => onUpdate(nextValue as T)}
+                size="s"
+            >
+                {options.map((option) => (
+                    <SegmentedRadioGroup.Option key={option.value} value={option.value}>
+                        {option.content}
+                    </SegmentedRadioGroup.Option>
+                ))}
+            </SegmentedRadioGroup>
+            {legend}
+        </Flex>
+    );
+}

package/src/containers/Storage/StorageExpertModePanel/components/FrontQueuesLegend.tsx

@@ -28,6 +28,7 @@ const legendItems: FrontQueuesLegendItem[] = [
         icon: Dots9,
         className: b('label-danger-heavy'),
     },
+    {text: i18n('value_no-data'), theme: 'unknown'},
 ];
 
 export function FrontQueuesLegend({className}: FrontQueuesLegendProps) {

package/src/containers/Storage/StorageExpertModePanel/components/PDiskDecommitLegend.tsx

@@ -22,6 +22,7 @@ const legendItems: PDiskDecommitLegendItem[] = [
     {text: i18n('value_decommit-rejected'), theme: 'warning', icon: Xmark},
     {text: i18n('value_decommit-pending'), theme: 'info', icon: HourglassStart},
     {text: i18n('value_decommit-none'), theme: 'success'},
+    {text: i18n('value_no-data'), theme: 'unknown'},
 ];
 
 export function PDiskDecommitLegend({className}: PDiskDecommitLegendProps) {

package/src/containers/Storage/StorageExpertModePanel/components/PDiskDriveLegend.tsx

@@ -1,4 +1,4 @@
-import {CircleExclamation, CircleXmark, Clock, TrashBin} from '@gravity-ui/icons';
+import {CircleXmark, Clock, TrashBin, TriangleExclamation} from '@gravity-ui/icons';
 import type {IconData, LabelProps} from '@gravity-ui/uikit';
 import {Flex, Icon, Label, Text} from '@gravity-ui/uikit';
 
@@ -21,8 +21,9 @@ const legendItems: PDiskDriveLegendItem[] = [
     {text: i18n('drive_active'), theme: 'success'},
     {text: i18n('drive_inactive'), theme: 'warning', icon: Clock},
     {text: i18n('drive_to-be-removed'), theme: 'warning', icon: TrashBin},
-    {text: i18n('drive_faulty'), theme: 'danger', icon: CircleExclamation},
+    {text: i18n('drive_faulty'), theme: 'danger', icon: TriangleExclamation},
     {text: i18n('drive_broken'), theme: 'danger', icon: CircleXmark},
+    {text: i18n('value_no-data'), theme: 'unknown'},
 ];
 
 export function PDiskDriveLegend({className}: PDiskDriveLegendProps) {

package/src/containers/Storage/StorageExpertModePanel/components/PDiskMaintenanceLegend.tsx

@@ -29,6 +29,7 @@ const legendItems: PDiskMaintenanceLegendItem[] = [
         icon: Ban,
     },
     {text: i18n('value_maintenance-no-request'), theme: 'success'},
+    {text: i18n('value_no-data'), theme: 'unknown'},
 ];
 
 export function PDiskMaintenanceLegend({className}: PDiskMaintenanceLegendProps) {

package/src/containers/Storage/StorageExpertModePanel/components/SpaceLegend.tsx

@@ -102,6 +102,9 @@ export function SpaceLegend({className, selectionScope = 'vdisks'}: SpaceLegendP
                         </Label>
                     );
                 })}
+                <Label size="xs" theme="unknown">
+                    {i18n('value_no-data')}
+                </Label>
             </Flex>
             <Text className={b('empty-statistics')} color="secondary">
                 {i18n('context_no-statistics')}

package/src/containers/Storage/StorageExpertModePanel/components/StatusPairLegend.tsx

@@ -1,9 +1,4 @@
-import {
-    CircleCheckFill,
-    CircleExclamationFill,
-    CircleXmarkFill,
-    TriangleExclamationFill,
-} from '@gravity-ui/icons';
+import {CircleExclamationFill, CircleXmarkFill, TriangleExclamationFill} from '@gravity-ui/icons';
 import type {IconData, LabelProps} from '@gravity-ui/uikit';
 import {Flex, Icon, Label, Text} from '@gravity-ui/uikit';
 
@@ -18,14 +13,14 @@ interface StatusPairLegendProps {
 interface StatusPairLegendItem {
     text: string;
     theme: LabelProps['theme'];
-    icon: IconData;
+    icon?: IconData;
     className?: string;
 }
 
 const iconSize = 12;
 
 const legendItems: StatusPairLegendItem[] = [
-    {text: i18n('compaction_ok'), theme: 'success', icon: CircleCheckFill},
+    {text: i18n('compaction_ok'), theme: 'success'},
     {text: i18n('compaction_notice'), theme: 'warning', icon: TriangleExclamationFill},
     {text: i18n('compaction_warning'), theme: 'danger', icon: CircleExclamationFill},
     {
@@ -47,11 +42,14 @@ export function StatusPairLegend({className, label}: StatusPairLegendProps) {
                         size="xs"
                         theme={theme}
                         className={labelClassName}
-                        icon={<Icon data={icon} size={iconSize} />}
+                        icon={icon ? <Icon data={icon} size={iconSize} /> : undefined}
                     >
                         {text}
                     </Label>
                 ))}
+                <Label size="xs" theme="unknown">
+                    {i18n('value_no-data')}
+                </Label>
             </Flex>
             <Text className={b('empty-statistics')} color="secondary">
                 {i18n('context_no-statistics')}

package/src/containers/Storage/StorageExpertModePanel/components/getSpaceLegendSelection.ts

@@ -4,7 +4,7 @@ import {loadFromSessionStorage, saveToSessionStorage} from '../../../../utils';
 export const SPACE_LEGEND_STORAGE_KEY = 'ydb-space-legend-inactive';
 export const SPACE_LEGEND_CHANGE_EVENT = 'spaceLegendChange';
 
-export type SpaceLegendSelectionScope = 'vdisks' | 'pdisks';
+export type SpaceLegendSelectionScope = 'vdisks' | 'pdisks' | 'nodes-vdisks' | 'nodes-pdisks';
 
 // By default, GREEN and CYAN are inactive (deselected)
 const defaultInactive = new Set([ECapacityAlert.GREEN, ECapacityAlert.CYAN]);

package/src/containers/Storage/StorageExpertModePanel/components/renderExpertModeLegend.tsx

@@ -0,0 +1,58 @@
+import type {PDisksGroupByValue, VDisksGroupByValue} from '../constants';
+import {PDisksGroupBy, VDisksGroupBy} from '../constants';
+
+import {AllLegend} from './AllLegend';
+import {CompactionLegend} from './CompactionLegend';
+import {FrontQueuesLegend} from './FrontQueuesLegend';
+import {PDiskDecommitLegend} from './PDiskDecommitLegend';
+import {PDiskDeviceLegend} from './PDiskDeviceLegend';
+import {PDiskDriveLegend} from './PDiskDriveLegend';
+import {PDiskMaintenanceLegend} from './PDiskMaintenanceLegend';
+import {PDiskStateLegend} from './PDiskStateLegend';
+import {SpaceLegend} from './SpaceLegend';
+import {StateLegend} from './StateLegend';
+import type {SpaceLegendSelectionScope} from './getSpaceLegendSelection';
+
+export function renderVDiskLegend(
+    vdisksGroupBy: VDisksGroupByValue,
+    selectionScope: SpaceLegendSelectionScope,
+) {
+    switch (vdisksGroupBy) {
+        case VDisksGroupBy.State:
+            return <StateLegend />;
+        case VDisksGroupBy.Space:
+            return <SpaceLegend selectionScope={selectionScope} />;
+        case VDisksGroupBy.FrontQueues:
+            return <FrontQueuesLegend />;
+        case VDisksGroupBy.Compaction:
+            return <CompactionLegend />;
+        case VDisksGroupBy.All:
+            return <AllLegend selectionScope={selectionScope} />;
+        default:
+            return null;
+    }
+}
+
+export function renderPDiskLegend(
+    pdisksGroupBy: PDisksGroupByValue,
+    selectionScope: SpaceLegendSelectionScope,
+) {
+    switch (pdisksGroupBy) {
+        case PDisksGroupBy.State:
+            return <PDiskStateLegend />;
+        case PDisksGroupBy.Space:
+            return <SpaceLegend selectionScope={selectionScope} />;
+        case PDisksGroupBy.Drive:
+            return <PDiskDriveLegend />;
+        case PDisksGroupBy.Decommit:
+            return <PDiskDecommitLegend />;
+        case PDisksGroupBy.Maintenance:
+            return <PDiskMaintenanceLegend />;
+        case PDisksGroupBy.Device:
+            return <PDiskDeviceLegend />;
+        case PDisksGroupBy.All:
+            return <AllLegend selectionScope={selectionScope} />;
+        default:
+            return null;
+    }
+}

package/src/containers/Storage/StorageExpertModePanel/constants.ts

@@ -19,7 +19,33 @@ export const PDisksGroupBy = {
 
 export type PDisksGroupByValue = (typeof PDisksGroupBy)[keyof typeof PDisksGroupBy];
 
+export const NODES_VDISKS_GROUP_BY_VALUES = [
+    VDisksGroupBy.State,
+    VDisksGroupBy.Space,
+    VDisksGroupBy.FrontQueues,
+    VDisksGroupBy.Compaction,
+    VDisksGroupBy.All,
+] as const;
+export type NodesVDisksGroupByValue = (typeof NODES_VDISKS_GROUP_BY_VALUES)[number];
+
+export const NODES_PDISKS_GROUP_BY_VALUES = [
+    PDisksGroupBy.State,
+    PDisksGroupBy.Space,
+    PDisksGroupBy.Drive,
+    PDisksGroupBy.Decommit,
+    PDisksGroupBy.Maintenance,
+    PDisksGroupBy.Device,
+    PDisksGroupBy.All,
+] as const;
+export type NodesPDisksGroupByValue = (typeof NODES_PDISKS_GROUP_BY_VALUES)[number];
+
 export const vdisksGroupBySchema = z.nativeEnum(VDisksGroupBy).catch(VDisksGroupBy.State);
 export const pdisksGroupBySchema = z.nativeEnum(PDisksGroupBy).catch(PDisksGroupBy.State);
+export const nodesVdisksGroupBySchema = z
+    .enum(NODES_VDISKS_GROUP_BY_VALUES)
+    .catch(VDisksGroupBy.State);
+export const nodesPdisksGroupBySchema = z
+    .enum(NODES_PDISKS_GROUP_BY_VALUES)
+    .catch(PDisksGroupBy.State);
 
 export const b = cn('ydb-storage-expert-mode-panel');

package/src/containers/Storage/StorageExpertModePanel/i18n/en.json

@@ -20,7 +20,7 @@
   "value_error": "Error",
   "value_attention": "Attention",
   "value_stopped": "Stopped",
-  "value_no-data": "N/D",
+  "value_no-data": "No data",
   "drive_active": "Active",
   "drive_inactive": "Inactive",
   "drive_to-be-removed": "To be removed",
@@ -32,7 +32,7 @@
   "value_decommit-none": "No decommission",
   "value_maintenance-long-term-planned": "Long term planned",
   "value_maintenance-no-new-vdisks": "No new VDisks",
-  "value_maintenance-no-request": "No request",
+  "value_maintenance-no-request": "Unset / None",
   "context_no-statistics": "No statistics available",
   "label_capacity-alerts": "Capacity alerts:",
   "capacity-alerts_all": "All",

package/src/containers/Storage/TableGroup/TableGroup.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {ArrowToggle, Label, Text} from '@gravity-ui/uikit';
 
+import {TableKeyboardNavigationGroupContext} from '../../../components/TableKeyboardNavigation/TableKeyboardNavigation';
 import {cn} from '../../../utils/cn';
 
 import './TableGroup.scss';
@@ -48,7 +49,11 @@ export const TableGroup = ({
 
     const renderContent = () => {
         if (expanded) {
-            return <div className={b('content')}>{children}</div>;
+            return (
+                <TableKeyboardNavigationGroupContext.Provider value={title}>
+                    <div className={b('content')}>{children}</div>
+                </TableKeyboardNavigationGroupContext.Provider>
+            );
         }
 
         return null;

package/src/containers/Storage/VDisks/VDisks.scss

@@ -4,7 +4,10 @@
     }
 
     &__item {
+        flex-shrink: 0;
+
         width: 55px;
+        min-height: var(--g-text-subheader-2-line-height);
         margin-right: var(--g-spacing-1);
 
         &_with-dc-margin {

package/src/containers/Storage/VDisks/VDisks.tsx

@@ -7,10 +7,13 @@ import type {PreparedVDisk} from '../../../utils/disks/types';
 import {DISKS_POPUP_DEBOUNCE_TIMEOUT} from '../shared';
 import type {StorageViewContext} from '../types';
 import {isVdiskActive, useVDisksWithDCMargins} from '../utils';
+import {useVirtualizedDiskList} from '../utils/useVirtualizedDiskList';
 
 import './VDisks.scss';
 
 const b = cn('ydb-storage-vdisks');
+const EMPTY_VDISKS: PreparedVDisk[] = [];
+const VDiskItem = React.memo(VDiskWithDonorsStack);
 
 interface VDisksProps {
     vDisks?: PreparedVDisk[];
@@ -19,17 +22,34 @@ interface VDisksProps {
     withIcon?: boolean;
 }
 
-export function VDisks({vDisks, viewContext, erasure, withIcon}: VDisksProps) {
+export const VDisks = React.memo(function VDisks({
+    vDisks = EMPTY_VDISKS,
+    viewContext,
+    erasure,
+    withIcon,
+}: VDisksProps) {
     const vDisksWithDCMargins = useVDisksWithDCMargins(vDisks, erasure);
 
     const [highlightedVDisk, setHighlightedVDisk] = React.useState<string | undefined>();
+    const {containerRef, shouldRenderDisk, getPlaceholderProps} = useVirtualizedDiskList(
+        vDisks,
+        vDisks.every((disk) => Boolean(disk.StringifiedId)),
+    );
+
+    React.useEffect(() => {
+        setHighlightedVDisk((id) =>
+            vDisks.some((disk) => disk.StringifiedId === id) ? id : undefined,
+        );
+    }, [vDisks]);
 
     return (
-        <div className={b('wrapper')}>
-            {vDisks?.map((vDisk, index) => (
-                <VDiskWithDonorsStack
+        <div className={b('wrapper')} ref={containerRef}>
+            {vDisks.map((vDisk, index) => (
+                <VDiskItem
                     withIcon={withIcon}
-                    key={vDisk.StringifiedId}
+                    renderContent={shouldRenderDisk(index)}
+                    placeholderProps={getPlaceholderProps(index)}
+                    key={vDisk.StringifiedId || index}
                     data={vDisk}
                     inactive={!isVdiskActive(vDisk, viewContext)}
                     delayOpen={DISKS_POPUP_DEBOUNCE_TIMEOUT}
@@ -37,11 +57,13 @@ export function VDisks({vDisks, viewContext, erasure, withIcon}: VDisksProps) {
                     className={b('item', {
                         'with-dc-margin': vDisksWithDCMargins.includes(index),
                     })}
-                    highlightedVDisk={highlightedVDisk}
+                    highlightedVDisk={
+                        highlightedVDisk === vDisk.StringifiedId ? highlightedVDisk : undefined
+                    }
                     setHighlightedVDisk={setHighlightedVDisk}
                     progressBarClassName={b('vdisks-progress-bar')}
                 />
             ))}
         </div>
     );
-}
+});