ydb-embedded-ui 22.0.0 → 22.2.0

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 {
@@ -14,6 +16,7 @@ import type {
     VDiskDisplayStateGetter,
 } from '../../utils/disks/displayState';
 import {getDefaultDiskDisplayState} from '../../utils/disks/displayState';
+import {getDriveTypeDisplayState} from '../../utils/disks/driveType';
 import {getIconCalculator} from '../../utils/disks/getIconStrategy';
 import {getSeverityCalculator} from '../../utils/disks/getSeverityStrategy';
 import type {VDisksGroupByValue} from '../../utils/disks/groupBy';
@@ -22,11 +25,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 +80,7 @@ function getAllModeIndicators(
     return {
         ...(capacityAlert ? {capacityAlert} : {}),
         ...(frontQueues ? {frontQueues} : {}),
-        ...(compaction ? {compaction} : {}),
+        ...(compaction?.length ? {compaction} : {}),
     };
 }
 
@@ -103,14 +112,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 +141,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 +167,22 @@ interface GetExpertVDiskDisplayStateParams {
 function getExpertVDiskDisplayState({
     inactiveLegendItems,
     isDonor,
+    selectionScope,
     vDisk,
     vdisksGroupBy,
 }: GetExpertVDiskDisplayStateParams): VDiskDisplayState {
+    const hasWhiteboardData = vDisk.HasWhiteboardData ?? Boolean(vDisk.VDiskId);
+    if (vdisksGroupBy === VDisksGroupBy.DriveType) {
+        return {
+            ...getDriveTypeDisplayState(hasWhiteboardData ? vDisk.PDisk : undefined),
+            striped: false,
+            iconPlacement: 'inline',
+        };
+    }
+
     const mode = getMode(vdisksGroupBy);
-    if (!vDisk.VDiskId) {
-        return getMissingVDiskDisplayState(vDisk, isDonor, mode);
+    if (!hasWhiteboardData) {
+        return getMissingVDiskDisplayState(vDisk, isDonor, mode, selectionScope !== 'nodes-vdisks');
     }
 
     const severity = getSeverityCalculator(vdisksGroupBy)(vDisk);
@@ -147,11 +190,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 +216,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 +232,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/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}