ydb-embedded-ui 22.0.0 → 22.1.0

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/Tablet/Tablet.tsx

@@ -14,6 +14,7 @@ import {InternalLink} from '../../components/InternalLink';
 import {LoaderWrapper} from '../../components/LoaderWrapper/LoaderWrapper';
 import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
 import {tabletPageQueryParams, useTabletPagePath} from '../../routes';
+import {useTabletDevUiSecurePath} from '../../store/reducers/capabilities/hooks';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {tabletApi} from '../../store/reducers/tablet';
 import {EFlag} from '../../types/api/enums';
@@ -202,7 +203,7 @@ function TabletTabs({
     }, [activeTab, tabletTab, setParams]);
 
     return (
-        <Flex gap={5} direction="column">
+        <Flex gap={5} direction="column" qa="tablet-tabs">
             {/* block wrapper fror tabs to preserve height */}
             <div>
                 <TabProvider value={tabletTab}>
@@ -232,8 +233,9 @@ function TabletTabs({
 
 function Channels({id, hiveId}: {id: string; hiveId: string}) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
+    const useSecurePath = useTabletDevUiSecurePath();
     const {currentData, error, isFetching} = tabletApi.useGetAdvancedTableInfoQuery(
-        {id, hiveId},
+        {id, hiveId, useSecurePath},
         {
             pollingInterval: autoRefreshInterval,
         },

package/src/containers/Tablet/components/TabletControls/TabletControls.tsx

@@ -4,6 +4,7 @@ import {ArrowRotateLeft, StopFill, TriangleRightFill} from '@gravity-ui/icons';
 import {Flex, Icon} from '@gravity-ui/uikit';
 
 import {ButtonWithConfirmDialog} from '../../../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
+import {useTabletDevUiSecurePath} from '../../../../store/reducers/capabilities/hooks';
 import {tabletApi} from '../../../../store/reducers/tablet';
 import {ETabletState} from '../../../../types/api/tablet';
 import type {TTabletStateInfo} from '../../../../types/api/tablet';
@@ -19,6 +20,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
     const {TabletId, HiveId} = tablet;
 
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
+    const useSecurePath = useTabletDevUiSecurePath();
 
     const [killTablet] = tabletApi.useKillTabletMutation();
     const [stopTablet] = tabletApi.useStopTabletMutation();
@@ -39,7 +41,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
         tablet.State === ETabletState.Stopped || tablet.State === ETabletState.Deleted;
 
     return (
-        <Flex gap={2} wrap="nowrap">
+        <Flex gap={2} wrap="nowrap" qa="tablet-controls">
             <ButtonWithConfirmDialog
                 dialogHeader={i18n('dialog.kill-header')}
                 dialogText={i18n('dialog.kill-text')}
@@ -63,7 +65,9 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                         dialogText={i18n('dialog.stop-text')}
                         applyButtonText={i18n('dialog.stop-header')}
                         applyButtonView="outlined-danger"
-                        onConfirmAction={() => stopTablet({id: TabletId, hiveId: HiveId}).unwrap()}
+                        onConfirmAction={() =>
+                            stopTablet({id: TabletId, hiveId: HiveId, useSecurePath}).unwrap()
+                        }
                         buttonDisabled={isDisabledStop || !isUserAllowedToMakeChanges}
                         withPopover
                         buttonView="normal"
@@ -80,7 +84,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                         applyButtonText={i18n('dialog.resume-header')}
                         applyButtonView="action"
                         onConfirmAction={() =>
-                            resumeTablet({id: TabletId, hiveId: HiveId}).unwrap()
+                            resumeTablet({id: TabletId, hiveId: HiveId, useSecurePath}).unwrap()
                         }
                         buttonDisabled={isDisabledResume || !isUserAllowedToMakeChanges}
                         withPopover

package/src/containers/Tablet/components/TabletInfo/TabletInfo.tsx

@@ -8,13 +8,15 @@ import {TabletUptime} from '../../../../components/UptimeViewer/UptimeViewer';
 import type {YDBDefinitionListItem} from '../../../../components/YDBDefinitionList/YDBDefinitionList';
 import {YDBDefinitionList} from '../../../../components/YDBDefinitionList/YDBDefinitionList';
 import {getDefaultNodePath, useTabletPagePath} from '../../../../routes';
-import {ETabletState} from '../../../../types/api/tablet';
+import {useTabletDevUiSecurePath} from '../../../../store/reducers/capabilities/hooks';
+import {ETabletState, EType} from '../../../../types/api/tablet';
 import type {TTabletStateInfo} from '../../../../types/api/tablet';
 import {cn} from '../../../../utils/cn';
 import {
     createTabletDeveloperUIHref,
     useHasDeveloperUi,
 } from '../../../../utils/developerUI/developerUI';
+import {getTabletDevUiAppPage} from '../../../../utils/developerUI/tabletDevUi';
 import {useDatabaseFromQuery} from '../../../../utils/hooks/useDatabaseFromQuery';
 import {transformPath} from '../../../Tenant/ObjectSummary/transformPath';
 import {getTabletObjectKind, hasHive} from '../../utils';
@@ -34,6 +36,7 @@ interface TabletInfoProps {
 export const TabletInfo = ({tablet, objectPath, objectDatabase}: TabletInfoProps) => {
     const getTabletPagePath = useTabletPagePath();
     const hasDeveloperUi = useHasDeveloperUi();
+    const useSecurePath = useTabletDevUiSecurePath();
     const database = useDatabaseFromQuery();
 
     const {
@@ -51,6 +54,10 @@ export const TabletInfo = ({tablet, objectPath, objectDatabase}: TabletInfoProps
     const hasHiveId = hasHive(HiveId);
     const hasUptime = State === ETabletState.Active;
     const objectKind = getTabletObjectKind(Type);
+    // These tablet types move the whole App page to the secure subtree.
+    const secureApp =
+        useSecurePath &&
+        (Type === EType.DataShard || Type === EType.Hive || Type === EType.BSController);
 
     const tabletInfo: YDBDefinitionListItem[] = [];
 
@@ -136,7 +143,10 @@ export const TabletInfo = ({tablet, objectPath, objectDatabase}: TabletInfoProps
                 <Flex direction="column" gap={3}>
                     <LinkWithIcon
                         title={tabletInfoKeyset('field_developer-ui-app')}
-                        url={createTabletDeveloperUIHref(TabletId, 'app')}
+                        url={createTabletDeveloperUIHref(
+                            TabletId,
+                            getTabletDevUiAppPage(secureApp),
+                        )}
                     />
                     <LinkWithIcon
                         title={tabletInfoKeyset('field_developer-ui-counters')}
@@ -156,7 +166,7 @@ export const TabletInfo = ({tablet, objectPath, objectDatabase}: TabletInfoProps
     };
 
     return (
-        <Flex gap={10} wrap="nowrap">
+        <Flex gap={10} wrap="nowrap" qa="tablet-info">
             <YDBDefinitionList
                 title={tabletInfoKeyset('title_info')}
                 items={tabletInfo}

package/src/containers/Tablets/TabletsTable.tsx

@@ -4,6 +4,7 @@ import {ArrowRotateLeft} from '@gravity-ui/icons';
 import type {Column as DataTableColumn, SortOrder} from '@gravity-ui/react-data-table';
 import {Icon, Select, Text} from '@gravity-ui/uikit';
 import {isNil} from 'lodash';
+import {useHistory} from 'react-router-dom';
 
 import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import {EntitiesCount} from '../../components/EntitiesCount';
@@ -16,6 +17,7 @@ import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/
 import {TabletNameWrapper} from '../../components/TabletNameWrapper/TabletNameWrapper';
 import {TabletState} from '../../components/TabletState/TabletState';
 import {TabletUptime} from '../../components/UptimeViewer/UptimeViewer';
+import {useTabletPagePath} from '../../routes';
 import {tabletApi} from '../../store/reducers/tablet';
 import {ETabletState} from '../../types/api/tablet';
 import type {TTabletStateInfo} from '../../types/api/tablet';
@@ -259,12 +261,31 @@ export function TabletsTable({
         [nodeId, showEndOfRange],
     );
 
+    const history = useHistory();
+    const getTabletPagePath = useTabletPagePath();
+    const openTablet = React.useCallback(
+        (tablet: TTabletStateInfo) => {
+            if (tablet.TabletId) {
+                history.push(
+                    getTabletPagePath(tablet.TabletId, {
+                        followerId: tablet.FollowerId ? String(tablet.FollowerId) : undefined,
+                    }),
+                );
+            }
+        },
+        [getTabletPagePath, history],
+    );
+
     const filtersActive = Boolean(tabletsSearch.trim()) || tabletTypes.length > 0;
 
     return (
-        <TableWithControlsLayout fullHeight>
+        <TableWithControlsLayout
+            fullHeight
+            keyboardNavigationResetKey={JSON.stringify(tabletTypes)}
+        >
             <TableWithControlsLayout.Controls>
                 <Search
+                    tableFilter
                     placeholder={i18n('controls.search-placeholder')}
                     onChange={handleTabletsSearchChange}
                     value={tabletsSearch}
@@ -296,15 +317,34 @@ export function TabletsTable({
                 scrollDependencies={[tabletsSearch, tabletTypes, sortParams]}
                 loading={loading}
             >
-                <ResizeableDataTable
-                    columns={columns}
-                    data={filteredTablets}
-                    settings={DEFAULT_TABLE_SETTINGS}
-                    emptyDataMessage={
-                        filtersActive ? i18n('noTabletsMatchFilters') : i18n('noTabletsData')
-                    }
-                    onSortChange={setSortParams}
-                />
+                <div>
+                    <ResizeableDataTable
+                        onKeyboardActivate={openTablet}
+                        getKeyboardRowKey={(tablet) =>
+                            JSON.stringify([tablet.TabletId, tablet.FollowerId ?? 0])
+                        }
+                        getKeyboardRowLabel={(tablet) =>
+                            [
+                                tablet.Type,
+                                tablet.TabletId,
+                                tablet.FollowerId || isFollowerTablet(tablet)
+                                    ? i18n('value_follower', {
+                                          id: tablet.FollowerId ?? EMPTY_DATA_PLACEHOLDER,
+                                      })
+                                    : undefined,
+                            ]
+                                .filter(Boolean)
+                                .join(', ') || EMPTY_DATA_PLACEHOLDER
+                        }
+                        columns={columns}
+                        data={filteredTablets}
+                        settings={DEFAULT_TABLE_SETTINGS}
+                        emptyDataMessage={
+                            filtersActive ? i18n('noTabletsMatchFilters') : i18n('noTabletsData')
+                        }
+                        onSortChange={setSortParams}
+                    />
+                </div>
             </TableWithControlsLayout.Table>
         </TableWithControlsLayout>
     );

package/src/containers/Tablets/i18n/en.json

@@ -16,5 +16,6 @@
   "controls.search-placeholder": "Tablet ID",
   "controls.type-filter-label": "Type",
   "controls.type-filter-placeholder": "All types",
-  "controls.entities-count-label": "Tablets"
+  "controls.entities-count-label": "Tablets",
+  "value_follower": "follower {{id}}"
 }

package/src/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -15,6 +15,7 @@ import {AsyncReplicationInfo} from './AsyncReplicationInfo';
 import {ChangefeedInfo} from './ChangefeedInfo';
 import {DatabaseInfo} from './DatabaseInfo/DatabaseInfo';
 import {DefaultEntityInfo} from './DefaultEntityInfo';
+import {ResourcePoolInfo} from './ResourcePoolInfo';
 import {SchemaObjectInfoContainer} from './SchemaObjectInfo/SchemaObjectInfoContainer';
 import {StreamingQueryInfo} from './StreamingQueryInfo';
 import {TableInfo} from './TableInfo';
@@ -55,7 +56,7 @@ function Overview({type, path, database, databaseFullPath}: OverviewProps) {
         const pathTypeToComponent: Record<EPathType, (() => React.ReactNode) | undefined> = {
             [EPathType.EPathTypeInvalid]: undefined,
             [EPathType.EPathTypeDir]: undefined,
-            [EPathType.EPathTypeResourcePool]: undefined,
+            [EPathType.EPathTypeResourcePool]: () => <ResourcePoolInfo data={data} />,
             [EPathType.EPathTypeSecret]: undefined,
             [EPathType.EPathTypeTable]: renderTableInfo,
             [EPathType.EPathTypeSysView]: undefined,

package/src/containers/Tenant/Diagnostics/Overview/ResourcePoolInfo/ResourcePoolInfo.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import {Flex, Text} from '@gravity-ui/uikit';
+
+import type {YDBDefinitionListItem} from '../../../../../components/YDBDefinitionList/YDBDefinitionList';
+import {YDBDefinitionList} from '../../../../../components/YDBDefinitionList/YDBDefinitionList';
+import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
+import {EMPTY_DATA_PLACEHOLDER} from '../../../../../utils/constants';
+
+import i18n from './i18n';
+
+/** Sentinel value meaning "no limit" for a resource-pool property. */
+const NO_LIMIT_VALUE = '-1';
+
+interface PropertyGroup {
+    title: string;
+    properties: {key: string; label: string}[];
+}
+
+const PROPERTY_GROUPS: PropertyGroup[] = [
+    {
+        title: i18n('group_queue'),
+        properties: [
+            {key: 'concurrent_query_limit', label: i18n('field_concurrent-query-limit')},
+            {key: 'queue_size', label: i18n('field_queue-size')},
+            {key: 'database_load_cpu_threshold', label: i18n('field_database-load-cpu-threshold')},
+        ],
+    },
+    {
+        title: i18n('group_cpu'),
+        properties: [
+            {
+                key: 'total_cpu_limit_percent_per_node',
+                label: i18n('field_total-cpu-limit-percent-per-node'),
+            },
+        ],
+    },
+];
+
+function isAbsent(value: string | undefined): value is undefined | '' {
+    return value === undefined || value === '';
+}
+
+function formatValue(value: string | undefined): React.ReactNode {
+    if (isAbsent(value) || value === NO_LIMIT_VALUE) {
+        return EMPTY_DATA_PLACEHOLDER;
+    }
+    return <Text variant="code-inline-2">{value}</Text>;
+}
+
+/** Only present copyText for values that are shown as concrete numbers. */
+function getCopyText(value: string | undefined): string | undefined {
+    if (isAbsent(value) || value === NO_LIMIT_VALUE) {
+        return undefined;
+    }
+    return value;
+}
+
+function prepareGroupItems(
+    properties: Record<string, string>,
+    group: PropertyGroup,
+): YDBDefinitionListItem[] {
+    return group.properties.map(({key, label}) => {
+        const value = properties[key];
+        return {
+            name: label,
+            content: formatValue(value),
+            copyText: getCopyText(value),
+        };
+    });
+}
+
+interface ResourcePoolInfoProps {
+    data?: TEvDescribeSchemeResult;
+}
+
+/** Displays overview for ResourcePool EPathType */
+export function ResourcePoolInfo({data}: ResourcePoolInfoProps) {
+    if (!data) {
+        return null;
+    }
+
+    const properties = data.PathDescription?.ResourcePoolDescription?.Properties?.Properties || {};
+
+    const sections = PROPERTY_GROUPS.map((group) => ({
+        title: group.title,
+        items: prepareGroupItems(properties, group),
+    })).filter((section) => section.items.length > 0);
+
+    if (sections.length === 0) {
+        return null;
+    }
+
+    return (
+        <Flex direction="column" gap={3}>
+            {sections.map((section) => (
+                <YDBDefinitionList
+                    key={section.title}
+                    title={section.title}
+                    items={section.items}
+                    responsive
+                />
+            ))}
+        </Flex>
+    );
+}