ydb-embedded-ui 22.0.0 → 22.2.0

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>
+    );
+}

package/src/containers/Tenant/Diagnostics/Overview/ResourcePoolInfo/i18n/en.json

@@ -0,0 +1,9 @@
+{
+  "title_pool-settings": "Pool Settings",
+  "group_queue": "Queue & Concurrency",
+  "group_cpu": "CPU",
+  "field_concurrent-query-limit": "Concurrent query limit",
+  "field_queue-size": "Queue size",
+  "field_database-load-cpu-threshold": "Database load CPU threshold",
+  "field_total-cpu-limit-percent-per-node": "Total CPU limit % per node"
+}

package/src/containers/Tenant/Diagnostics/Overview/ResourcePoolInfo/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-diagnostics-resource-pool-info';
+
+export default registerKeysets(COMPONENT, {en});

package/src/containers/Tenant/Diagnostics/Overview/ResourcePoolInfo/index.ts

@@ -0,0 +1 @@
+export * from './ResourcePoolInfo';

package/src/containers/Tenant/Diagnostics/Overview/utils/prepareTopicSchemaInfo.ts

@@ -22,10 +22,10 @@ export const prepareTopicSchemaInfo = (data?: TEvDescribeSchemeResult): Array<In
         return [];
     }
 
-    const {Partitions = [], PQTabletConfig = {PartitionConfig: {LifetimeSeconds: 0}}} = pqGroupData;
+    const {Partitions = [], PQTabletConfig} = pqGroupData;
 
-    const {Codecs, MeteringMode, PartitionStrategy} = PQTabletConfig;
-    const {WriteSpeedInBytesPerSecond, StorageLimitBytes} = PQTabletConfig.PartitionConfig;
+    const {Codecs, MeteringMode, PartitionStrategy, PartitionConfig} = PQTabletConfig ?? {};
+    const {WriteSpeedInBytesPerSecond, StorageLimitBytes} = PartitionConfig ?? {};
 
     //@ts-expect-error
     const pqGeneralInfo = formatObject<TPersQueueGroupDescription>(formatPQGroupItem, {

package/src/containers/Tenant/Diagnostics/TopQueries/QueriesTableWithDrawer.tsx

@@ -8,6 +8,7 @@ import type {DrawerControl} from '../../../../components/Drawer/Drawer';
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import type {KeyValueRow} from '../../../../types/api/query';
 import {cn} from '../../../../utils/cn';
+import {getQueryShortText} from '../../../../utils/query';
 
 import {QueryDetailsDrawerContent} from './QueryDetails/QueryDetailsDrawerContent';
 import i18n from './i18n';
@@ -18,6 +19,7 @@ const b = cn('kv-top-queries');
 interface SimpleTableWithDrawerProps {
     columns: Column<KeyValueRow>[];
     data: KeyValueRow[];
+    getKeyboardRowKey?: (row: KeyValueRow) => string | number | undefined;
     isFetching?: boolean;
     isLoading?: boolean;
     onRowClick?: (
@@ -40,6 +42,7 @@ interface SimpleTableWithDrawerProps {
 export function QueriesTableWithDrawer({
     columns,
     data,
+    getKeyboardRowKey,
     isFetching,
     isLoading,
     onRowClick,
@@ -102,6 +105,9 @@ export function QueriesTableWithDrawer({
             drawerControls={finalDrawerControls}
         >
             <ResizeableDataTable
+                onKeyboardActivate={handleRowClick}
+                getKeyboardRowKey={getKeyboardRowKey}
+                getKeyboardRowLabel={(row) => getQueryShortText(row.QueryText?.toString())}
                 emptyDataMessage={emptyDataMessage || i18n('no-data')}
                 columnsWidthLSKey={columnsWidthLSKey}
                 columns={columns}

package/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx

@@ -86,6 +86,7 @@ export const RunningQueriesData = ({
             <TableWithControlsLayout.Controls renderExtraControls={renderExtraControls}>
                 {renderQueryModeControl()}
                 <Search
+                    tableFilter
                     value={filters.text}
                     onChange={handleTextSearchUpdate}
                     placeholder={i18n('filter.text.placeholder')}
@@ -97,6 +98,9 @@ export const RunningQueriesData = ({
             {error ? <ResponseError error={error} /> : null}
             <TableWithControlsLayout.Table>
                 <QueriesTableWithDrawer
+                    getKeyboardRowKey={(row) =>
+                        JSON.stringify([database, row.SessionId, row.QueryStartAt])
+                    }
                     columns={columnsToShow}
                     data={rows || []}
                     isFetching={isFetching && currentData === undefined}

package/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx

@@ -137,7 +137,9 @@ export const TopQueriesData = ({
     };
 
     return (
-        <TableWithControlsLayout>
+        <TableWithControlsLayout
+            keyboardNavigationResetKey={JSON.stringify([timeFrame, filters.from, filters.to])}
+        >
             <TableWithControlsLayout.Controls renderExtraControls={renderExtraControls}>
                 {renderQueryModeControl()}
                 <Select
@@ -152,6 +154,7 @@ export const TopQueriesData = ({
                     defaultValue={DEFAULT_TIME_FILTER_VALUE}
                 />
                 <Search
+                    tableFilter
                     value={filters.text}
                     inputRef={inputRef}
                     onChange={handleTextSearchUpdate}
@@ -163,6 +166,9 @@ export const TopQueriesData = ({
             {error ? <ResponseError error={error} /> : null}
             <TableWithControlsLayout.Table>
                 <QueriesTableWithDrawer
+                    getKeyboardRowKey={(row) =>
+                        JSON.stringify([database, row.IntervalEnd, row.EndTime, row.QueryText])
+                    }
                     columns={columnsToShow}
                     data={rows || []}
                     isFetching={isFetching && currentData === undefined}

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

@@ -153,7 +153,7 @@ export const TopShards = ({database, path, databaseFullPath}: TopShardsProps) =>
     };
 
     return (
-        <TableWithControlsLayout>
+        <TableWithControlsLayout keyboardNavigation={false}>
             <TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
 
             {filters.mode === EShardsWorkloadMode.History && (

package/src/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx

@@ -16,6 +16,7 @@ import {
 } from '../../../../store/reducers/query/query';
 import type {QueryInHistory} from '../../../../store/reducers/query/types';
 import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
+import {getQueryShortText} from '../../../../utils/query';
 import {QUERY_TABLE_SETTINGS} from '../../utils/constants';
 import {SAVE_QUERY_DIALOG} from '../SaveQuery/SaveQuery';
 import {useOpenExternalQueryInEditor} from '../hooks/useOpenExternalQueryInEditor';
@@ -116,6 +117,7 @@ function QueriesHistory({queriesHistory}: QueriesHistoryProps) {
             <TableWithControlsLayout className={b('table-with-controls')}>
                 <TableWithControlsLayout.Controls>
                     <Search
+                        tableFilter
                         value={filter}
                         onChange={onChangeFilter}
                         placeholder={i18n('field_query-text-search')}
@@ -135,6 +137,9 @@ function QueriesHistory({queriesHistory}: QueriesHistoryProps) {
                         defaultWidth={50}
                     >
                         <ResizeableDataTable
+                            onKeyboardActivate={handleShowPreview}
+                            getKeyboardRowKey={(query) => query.queryId}
+                            getKeyboardRowLabel={(query) => getQueryShortText(query.queryText)}
                             columnsWidthLSKey={QUERIES_HISTORY_COLUMNS_WIDTH_LS_KEY}
                             columns={columns}
                             data={queriesHistory.filteredHistoryQueries}

package/src/containers/Tenant/Query/SavedQueries/SavedQueries.tsx

@@ -243,6 +243,7 @@ export const SavedQueries = () => {
                 <TableWithControlsLayout className={b('table-with-controls')}>
                     <TableWithControlsLayout.Controls>
                         <Search
+                            tableFilter
                             value={filter}
                             onChange={handleChangeFilter}
                             placeholder={i18n('field_saved-query-search')}
@@ -262,6 +263,11 @@ export const SavedQueries = () => {
                             defaultWidth={50}
                         >
                             <ResizeableDataTable
+                                onKeyboardActivate={handleShowPreview}
+                                getKeyboardRowKey={(query) => query.name}
+                                getKeyboardRowLabel={(query) =>
+                                    query.name || EMPTY_DATA_PLACEHOLDER
+                                }
                                 columnsWidthLSKey={SAVED_QUERIES_COLUMNS_WIDTH_LS_KEY}
                                 columns={columns}
                                 data={filteredSavedQueries}

package/src/containers/Tenants/TenantsTable.tsx

@@ -5,6 +5,7 @@ import type {Column, SortOrder} from '@gravity-ui/react-data-table';
 import DataTable from '@gravity-ui/react-data-table';
 import type {LabelProps} from '@gravity-ui/uikit';
 import {Button, Flex, Icon, Label} from '@gravity-ui/uikit';
+import {useHistory} from 'react-router-dom';
 
 import {EntitiesCount} from '../../components/EntitiesCount';
 import {ResponseError} from '../../components/Errors/ResponseError';
@@ -15,6 +16,7 @@ import {Search} from '../../components/Search';
 import {TableColumnSetup} from '../../components/TableColumnSetup/TableColumnSetup';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {TenantNameWrapper} from '../../components/TenantNameWrapper/TenantNameWrapper';
+import {getTenantLink} from '../../components/TenantNameWrapper/utils';
 import {useEmMetaAvailable} from '../../store/reducers/capabilities/hooks';
 import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster';
 import {
@@ -131,6 +133,7 @@ const TenantsTableContent = ({
     onStatusClick,
 }: TenantsTableContentProps) => {
     const SuccessImage = getIllustration('SuccessOperation');
+    const history = useHistory();
 
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isFetching, error} = tenantsApi.useGetTenantsInfoQuery(
@@ -144,7 +147,7 @@ const TenantsTableContent = ({
 
     const isCreateDBAvailable = useEmMetaAvailable() && uiFactory.onCreateDB !== undefined;
 
-    const {domain: domainRoot} = useClusterBaseInfo();
+    const {domain: domainRoot, settings} = useClusterBaseInfo();
 
     const {search, withProblems, handleSearchChange, handleWithProblemsChange} =
         useTenantsQueryParams();
@@ -167,7 +170,40 @@ const TenantsTableContent = ({
         const filteredBySearch = filterTenantsBySearch(filteredByProblems, search);
 
         return filteredBySearch;
-    }, [tenants, withProblems, search]);
+    }, [tenants, withProblems, search, showWithProblemsFilter]);
+
+    const tenantLinks = React.useMemo(
+        () =>
+            new Map(
+                tenants.map((tenant) => [
+                    tenant,
+                    getTenantLink({
+                        tenant,
+                        additionalTenantsProps,
+                        externalLink: Boolean(environmentName),
+                        useDatabaseId:
+                            uiFactory.useDatabaseId && settings?.use_meta_proxy !== false,
+                    }),
+                ]),
+            ),
+        [tenants, additionalTenantsProps, environmentName, settings?.use_meta_proxy],
+    );
+
+    const openTenant = React.useCallback(
+        (tenant: PreparedTenant) => {
+            const link = tenantLinks.get(tenant);
+            if (!link) {
+                return;
+            }
+            if (link.isExternalLink) {
+                window.open(link.href, '_blank', 'noopener,noreferrer');
+                return;
+            }
+
+            history.push(link.href);
+        },
+        [tenantLinks, history],
+    );
 
     const renderCreateDBButton = () => {
         const buttonAvailable = isCreateDBAvailable && clusterName;
@@ -192,6 +228,7 @@ const TenantsTableContent = ({
         return (
             <React.Fragment>
                 <Search
+                    tableFilter
                     value={search}
                     onChange={handleSearchChange}
                     placeholder="Database name"
@@ -221,6 +258,7 @@ const TenantsTableContent = ({
                         clusterName={clusterName}
                         additionalTenantsProps={additionalTenantsProps}
                         externalLink={Boolean(environmentName)}
+                        link={tenantLinks.get(row)}
                         onStatusClick={onStatusClick}
                     />
                 ),
@@ -362,6 +400,7 @@ const TenantsTableContent = ({
         handleSearchChange,
         onStatusClick,
         showPoolsColumn,
+        tenantLinks,
     ]);
 
     const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
@@ -378,14 +417,26 @@ const TenantsTableContent = ({
         }
 
         return (
-            <ResizeableDataTable
-                columnsWidthLSKey={DATABASES_COLUMNS_WIDTH_LS_KEY}
-                data={filteredTenants}
-                columns={columnsToShow}
-                settings={DEFAULT_TABLE_SETTINGS}
-                emptyDataMessage={i18n('no-databases')}
-                onSortChange={setSortParams}
-            />
+            <div>
+                <ResizeableDataTable
+                    onKeyboardActivate={openTenant}
+                    getKeyboardRowKey={(tenant) =>
+                        JSON.stringify([tenant.Cluster, tenant.Id ?? tenant.Name])
+                    }
+                    getKeyboardRowLabel={(tenant) =>
+                        tenant.controlPlaneName ||
+                        tenant.Name ||
+                        tenant.Id ||
+                        EMPTY_DATA_PLACEHOLDER
+                    }
+                    columnsWidthLSKey={DATABASES_COLUMNS_WIDTH_LS_KEY}
+                    data={filteredTenants}
+                    columns={columnsToShow}
+                    settings={DEFAULT_TABLE_SETTINGS}
+                    emptyDataMessage={i18n('no-databases')}
+                    onSortChange={setSortParams}
+                />
+            </div>
         );
     };
 
@@ -411,7 +462,14 @@ const TenantsTableContent = ({
 
     return (
         <div className={b('table-wrapper')}>
-            <TableWithControlsLayout fullHeight>
+            <TableWithControlsLayout
+                fullHeight
+                keyboardNavigationResetKey={JSON.stringify([
+                    withProblems,
+                    showDomainDatabase,
+                    showWithProblemsFilter,
+                ])}
+            >
                 <TableWithControlsLayout.Controls renderExtraControls={renderExtraControls}>
                     {renderControls()}
                 </TableWithControlsLayout.Controls>
@@ -421,7 +479,7 @@ const TenantsTableContent = ({
                     loading={loading}
                     scrollDependencies={[search, withProblems, sortParams]}
                 >
-                    {currentData ? renderTable() : null}
+                    <div>{currentData ? renderTable() : null}</div>
                 </TableWithControlsLayout.Table>
             </TableWithControlsLayout>
         </div>

package/src/containers/VDiskPage/VDiskPage.tsx

@@ -23,6 +23,7 @@ import {vDiskApi} from '../../store/reducers/vdisk/vdisk';
 import {cn} from '../../utils/cn';
 import {parseVdiskId} from '../../utils/dataFormatters/dataFormatters';
 import {VDISK_LABEL_CONFIG} from '../../utils/disks/constants';
+import {formatPDiskType} from '../../utils/disks/getPDiskType';
 import {getDataSeverityColor} from '../../utils/disks/helpers';
 import {useAutoRefreshInterval, useTypedDispatch} from '../../utils/hooks';
 import {useAppTitle} from '../App/AppTitleContext';
@@ -122,7 +123,14 @@ export function VDiskPage() {
             <PageMetaWithAutorefresh
                 className={vDiskPageCn('meta')}
                 loading={loading}
-                items={[hostItem, nodeIdItem, NodeType, NodeDC, pDiskIdItem, PDiskType]}
+                items={[
+                    hostItem,
+                    nodeIdItem,
+                    NodeType,
+                    NodeDC,
+                    pDiskIdItem,
+                    formatPDiskType(PDiskType),
+                ]}
             />
         );
     };
@@ -174,7 +182,7 @@ export function VDiskPage() {
             return null;
         }
         return (
-            <div className={vDiskPageCn('controls')}>
+            <div className={vDiskPageCn('controls')} data-qa="vdisk-controls">
                 <EvictVDiskButton
                     vDiskId={resolvedVDiskId}
                     donorMode={vDiskData?.DonorMode}

package/src/services/api/tablets.ts

@@ -1,4 +1,5 @@
 import type {TTabletHiveResponse} from '../../types/api/tablet';
+import {getTabletDevUiAppPage} from '../../utils/developerUI/tabletDevUi';
 import type {Nullable} from '../../utils/typecheckers';
 
 import type {AxiosOptions} from './base';
@@ -11,6 +12,7 @@ export class TabletsAPI extends BaseYdbAPI {
         failRealmIdx,
         failDomainIdx,
         vDiskIdx,
+        useSecurePath = false,
     }: {
         groupId: string | number;
         groupGeneration: string | number;
@@ -18,12 +20,15 @@ export class TabletsAPI extends BaseYdbAPI {
         failDomainIdx: string | number;
         vDiskIdx: string | number;
         force?: boolean;
+        useSecurePath?: boolean;
     }) {
         // BSC Id is constant for all ydb clusters
         const BSC_TABLET_ID = '72057594037932033';
 
         return this.post(
-            this.getPath(`/tablets/app?TabletID=${BSC_TABLET_ID}&exec=1`),
+            this.getPath(
+                `/tablets/${getTabletDevUiAppPage(useSecurePath)}?TabletID=${BSC_TABLET_ID}&exec=1`,
+            ),
             {
                 Command: {
                     ReassignGroupDisk: {
@@ -54,28 +59,32 @@ export class TabletsAPI extends BaseYdbAPI {
         );
     }
 
-    stopTablet(id: string, hiveId: string) {
+    stopTablet(id: string, hiveId: string, useSecurePath = false) {
         return this.post<unknown>(
-            this.getPath(`/tablets/app?TabletID=${hiveId}&page=StopTablet&tablet=${id}`),
+            this.getPath(
+                `/tablets/${getTabletDevUiAppPage(useSecurePath)}?TabletID=${hiveId}&page=StopTablet&tablet=${id}`,
+            ),
             {},
             {requestConfig: {'axios-retry': {retries: 0}}},
         );
     }
 
-    resumeTablet(id: string, hiveId: string) {
+    resumeTablet(id: string, hiveId: string, useSecurePath = false) {
         return this.post<unknown>(
-            this.getPath(`/tablets/app?TabletID=${hiveId}&page=ResumeTablet&tablet=${id}`),
+            this.getPath(
+                `/tablets/${getTabletDevUiAppPage(useSecurePath)}?TabletID=${hiveId}&page=ResumeTablet&tablet=${id}`,
+            ),
             {},
             {requestConfig: {'axios-retry': {retries: 0}}},
         );
     }
 
     getTabletFromHive(
-        {id, hiveId}: {id: string; hiveId: string},
+        {id, hiveId, useSecurePath = false}: {id: string; hiveId: string; useSecurePath?: boolean},
         {concurrentId, signal}: AxiosOptions = {},
     ) {
         return this.get<Nullable<TTabletHiveResponse>>(
-            this.getPath('/tablets/app'),
+            this.getPath(`/tablets/${getTabletDevUiAppPage(useSecurePath)}`),
             {
                 TabletID: hiveId,
                 page: 'TabletInfo',