ydb-embedded-ui 21.0.0 → 22.0.0

package/src/containers/Header/HeaderActionsMenu.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {DatabaseArrowRight, Pencil, PlugConnection, TrashBin} from '@gravity-ui/icons';
+import {Flex, Spin, Text} from '@gravity-ui/uikit';
 import {useHistory} from 'react-router-dom';
 
 import {getConnectToDBDialog} from '../../components/ConnectToDB/ConnectToDBDialog';
@@ -41,7 +42,7 @@ export function DBHeaderActionsMenu({
     const history = useHistory();
 
     const emMetaAvailable = useEmMetaAvailable();
-    const sharedDatabasePath = useSharedDatabasePath({
+    const {isSharedDatabaseLoading, sharedDatabasePath} = useSharedDatabasePath({
         clusterName,
         databaseData,
         isViewerUser,
@@ -81,7 +82,25 @@ export function DBHeaderActionsMenu({
             ]);
         }
 
-        if (sharedDatabasePath) {
+        if (isSharedDatabaseLoading) {
+            menuItems.push([
+                {
+                    title: (
+                        <Flex alignItems="center" gap={2}>
+                            <Spin size="xs" qa="shared-database-link-loader" />
+                            <Text>{headerKeyset('action_go-to-shared-db')}</Text>
+                        </Flex>
+                    ),
+                    action: () => undefined,
+                    disabled: true,
+                    extraProps: {
+                        'aria-busy': true,
+                        'aria-disabled': true,
+                        'aria-label': headerKeyset('status_loading-shared-db'),
+                    },
+                },
+            ]);
+        } else if (sharedDatabasePath) {
             menuItems.push([
                 {
                     title: headerKeyset('action_go-to-shared-db'),
@@ -136,6 +155,7 @@ export function DBHeaderActionsMenu({
         history,
         isEditDBAvailable,
         isDeleteDBAvailable,
+        isSharedDatabaseLoading,
         sharedDatabasePath,
     ]);
 

package/src/containers/Header/hooks/useSharedDatabasePath.ts

@@ -132,28 +132,30 @@ export function useSharedDatabasePath({
     const shouldResolveSharedDatabaseFromViewer =
         shouldResolveSharedDatabaseName && !window.api.meta;
 
-    const {currentData: sharedDatabaseFromViewer} = tenantsApi.useGetSharedDatabaseQuery(
-        shouldResolveSharedDatabaseFromViewer && databaseData?.ResourceId
-            ? {
-                  clusterName,
-                  database: databaseData.Name,
-                  backend: activeBackend,
-                  environmentName: environment,
-                  isMonitoringAllowed: isMonitoringAllowed === true,
-                  needNodeIds: needSharedDatabaseNodeIds,
-                  resourceId: databaseData.ResourceId,
-              }
-            : skipToken,
-    );
+    const {currentData: sharedDatabaseFromViewer, isFetching: isSharedDatabaseFromViewerFetching} =
+        tenantsApi.useGetSharedDatabaseQuery(
+            shouldResolveSharedDatabaseFromViewer && databaseData?.ResourceId
+                ? {
+                      clusterName,
+                      database: databaseData.Name,
+                      backend: activeBackend,
+                      environmentName: environment,
+                      isMonitoringAllowed: isMonitoringAllowed === true,
+                      needNodeIds: needSharedDatabaseNodeIds,
+                      resourceId: databaseData.ResourceId,
+                  }
+                : skipToken,
+        );
 
     const shouldResolveSharedDatabaseFromMetaList =
         shouldResolveSharedDatabaseName && Boolean(window.api.meta);
 
-    const {currentData: databases} = tenantsApi.useGetTenantsInfoQuery(
-        shouldResolveSharedDatabaseFromMetaList
-            ? {clusterName, environmentName: environment, isMetaDatabasesAvailable}
-            : skipToken,
-    );
+    const {currentData: databases, isFetching: isDatabasesFetching} =
+        tenantsApi.useGetTenantsInfoQuery(
+            shouldResolveSharedDatabaseFromMetaList
+                ? {clusterName, environmentName: environment, isMetaDatabasesAvailable}
+                : skipToken,
+        );
 
     const sharedDatabaseTarget = React.useMemo<SharedDatabaseTarget | undefined>(() => {
         if (databaseData?.sharedTenantName) {
@@ -184,12 +186,17 @@ export function useSharedDatabasePath({
     const sharedDatabase = useDatabaseId ? databaseData?.ResourceId : sharedDatabaseTarget?.name;
     const backend = getSharedDatabaseBackend(sharedDatabaseTarget, prepareTenantBackend);
 
-    return getResolvedSharedDatabasePath({
-        backend,
-        clusterName,
-        databaseData,
-        isClusterBaseInfoResolved: isClusterBaseInfoAvailable,
-        isViewerUser,
-        sharedDatabase,
-    });
+    return {
+        isSharedDatabaseLoading:
+            (isSharedDatabaseFromViewerFetching && sharedDatabaseFromViewer === undefined) ||
+            (isDatabasesFetching && databases === undefined),
+        sharedDatabasePath: getResolvedSharedDatabasePath({
+            backend,
+            clusterName,
+            databaseData,
+            isClusterBaseInfoResolved: isClusterBaseInfoAvailable,
+            isViewerUser,
+            sharedDatabase,
+        }),
+    };
 }

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

@@ -16,6 +16,7 @@
   "action_delete-cluster": "Delete Cluster",
   "action_connect-to-db": "Connect to database",
   "action_go-to-shared-db": "Go to shared database",
+  "status_loading-shared-db": "Loading shared database",
   "action_manage": "Manage",
 
   "title_developer-ui": "Developer UI",

package/src/containers/Node/Node.tsx

@@ -16,7 +16,6 @@ import routes, {getDefaultNodePath} from '../../routes';
 import {
     useCapabilitiesLoaded,
     useConfigAvailable,
-    useDiskPagesAvailable,
     useViewerPeersHandlerAvailable,
 } from '../../store/reducers/capabilities/hooks';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
@@ -34,7 +33,6 @@ import {Tablets} from '../Tablets/Tablets';
 
 import type {NodeTab} from './NodePages';
 import {NODE_TABS, nodePageQueryParams, nodePageTabSchema} from './NodePages';
-import NodeStructure from './NodeStructure/NodeStructure';
 import {Threads} from './Threads/Threads';
 import i18n from './i18n';
 
@@ -52,12 +50,14 @@ export function Node() {
     const dispatch = useTypedDispatch();
     const history = useHistory();
 
-    const match = useRouteMatch<{id: string; activeTab: string}>(routes.node);
+    const match = useRouteMatch<{id: string; activeTab: string; environment?: string}>(routes.node);
 
     const nodeId = match?.params.id;
     const activeTabIdFromQuery = match?.params.activeTab;
+    const environment = match?.params.environment;
 
-    const [{database: tenantNameFromQuery}] = useQueryParams(nodePageQueryParams);
+    const [{database: tenantNameFromQuery, clusterName, backend}] =
+        useQueryParams(nodePageQueryParams);
     const database = tenantNameFromQuery?.toString();
 
     const activeTabId = nodePageTabSchema.parse(activeTabIdFromQuery);
@@ -72,7 +72,6 @@ export function Node() {
     } = nodeApi.useGetNodeInfoQuery(params, {pollingInterval: autoRefreshInterval});
 
     const capabilitiesLoaded = useCapabilitiesLoaded();
-    const isDiskPagesAvailable = useDiskPagesAvailable();
     const isPeersHandlerAvailable = useViewerPeersHandlerAvailable();
 
     const pageLoading = isLoading || !capabilitiesLoaded;
@@ -89,9 +88,6 @@ export function Node() {
         if (!configsAvailable) {
             skippedTabs.push('configs');
         }
-        if (isDiskPagesAvailable) {
-            skippedTabs.push('structure');
-        }
         if ((!database && !isViewerUser) || !hasThreads) {
             skippedTabs.push('threads');
         }
@@ -111,7 +107,6 @@ export function Node() {
         return {activeTab: actualActiveTab, nodeTabs: actualNodeTabs};
     }, [
         isStorageNode,
-        isDiskPagesAvailable,
         isPeersHandlerAvailable,
         activeTabId,
         hasThreads,
@@ -142,12 +137,26 @@ export function Node() {
             return;
         }
 
-        if (activeTab.id !== activeTabId) {
-            const path = getDefaultNodePath({id: nodeId, activeTab: activeTab.id}, {database});
+        if (activeTab.id !== activeTabId || activeTabIdFromQuery === 'structure') {
+            const path = getDefaultNodePath(
+                {id: nodeId, activeTab: activeTab.id, environment},
+                {database, clusterName: clusterName ?? undefined, backend: backend ?? undefined},
+            );
 
             history.replace(path);
         }
-    }, [nodeId, database, activeTab.id, activeTabId, history, activeTab]);
+    }, [
+        nodeId,
+        database,
+        clusterName,
+        backend,
+        environment,
+        activeTab.id,
+        activeTabId,
+        activeTabIdFromQuery,
+        history,
+        activeTab,
+    ]);
 
     return (
         <div className={b(null)} ref={container}>
@@ -160,6 +169,9 @@ export function Node() {
                 <NodePageContent
                     nodeId={nodeId}
                     database={database}
+                    clusterName={clusterName ?? undefined}
+                    backend={backend ?? undefined}
+                    environment={environment}
                     activeTabId={activeTab.id}
                     tabs={nodeTabs}
                     parentContainer={container}
@@ -233,6 +245,9 @@ function NodePageInfo({node, loading}: NodePageInfoProps) {
 interface NodePageContentProps {
     nodeId: string;
     database?: string;
+    clusterName?: string;
+    backend?: string;
+    environment?: string;
 
     activeTabId: NodeTab;
     tabs: {id: string; title: string}[];
@@ -243,6 +258,9 @@ interface NodePageContentProps {
 function NodePageContent({
     nodeId,
     database,
+    clusterName,
+    backend,
+    environment,
     activeTabId,
     tabs,
     parentContainer,
@@ -254,8 +272,8 @@ function NodePageContent({
                     <TabList className={b('tab-list')} size="l">
                         {tabs.map(({id, title}) => {
                             const path = getDefaultNodePath(
-                                {id: nodeId, activeTab: id as NodeTab},
-                                {database},
+                                {id: nodeId, activeTab: id as NodeTab, environment},
+                                {database, clusterName, backend},
                             );
                             return (
                                 <Tab value={id} key={id}>
@@ -296,10 +314,6 @@ function NodePageContent({
                 );
             }
 
-            case 'structure': {
-                return <NodeStructure nodeId={nodeId} />;
-            }
-
             case 'threads': {
                 return (
                     <Threads

package/src/containers/Node/NodePages.ts

@@ -9,7 +9,6 @@ import i18n from './i18n';
 const NODE_TABS_IDS = {
     storage: 'storage',
     tablets: 'tablets',
-    structure: 'structure',
     threads: 'threads',
     network: 'network',
     configs: 'configs',
@@ -24,12 +23,6 @@ export const NODE_TABS = [
             return i18n('tabs.storage');
         },
     },
-    {
-        id: NODE_TABS_IDS.structure,
-        get title() {
-            return i18n('tabs.structure');
-        },
-    },
     {
         id: NODE_TABS_IDS.tablets,
         get title() {
@@ -56,13 +49,15 @@ export const NODE_TABS = [
     },
 ];
 
-export const nodePageTabSchema = z.nativeEnum(NODE_TABS_IDS).catch(NODE_TABS_IDS.tablets);
+export const nodePageTabSchema = z.preprocess(
+    (value) => (value === 'structure' ? NODE_TABS_IDS.storage : value),
+    z.nativeEnum(NODE_TABS_IDS).catch(NODE_TABS_IDS.tablets),
+);
 
 export const nodePageQueryParams = {
     database: StringParam,
-    pdiskId: StringParam,
-    vdiskId: StringParam,
     clusterName: StringParam,
+    backend: StringParam,
 };
 
 export type NodePageQuery = QueryParamsTypeFromQueryObject<typeof nodePageQueryParams>;

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

@@ -1,9 +1,5 @@
 {
-  "pdisk.developer-ui-button-title": "PDisk Developer UI page",
-  "vdisk.developer-ui-button-title": "VDisk Developer UI page",
-
   "tabs.storage": "Storage",
-  "tabs.structure": "Structure",
   "tabs.tablets": "Tablets",
   "tabs.threads": "Threads",
   "tabs.network": "Network",

package/src/containers/Nodes/NodesTable.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 
 import type {PaginatedTableData} from '../../components/PaginatedTable';
 import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../components/PaginatedTable';
-import {NODES_COLUMNS_WIDTH_LS_KEY} from '../../components/nodesColumns/constants';
+import {
+    NODES_COLUMNS_IDS,
+    NODES_COLUMNS_WIDTH_LS_KEY,
+} from '../../components/nodesColumns/constants';
 import type {NodesColumn} from '../../components/nodesColumns/types';
 import {useClusterWithProxy} from '../../store/reducers/cluster/cluster';
 import type {NodesFilters} from '../../store/reducers/nodes/types';
@@ -94,6 +97,9 @@ export function NodesTable({
             columnsWidthLSKey={NODES_COLUMNS_WIDTH_LS_KEY}
             scrollContainerRef={scrollContainerRef}
             columns={columns}
+            rowHeight={
+                columns.some((column) => column.name === NODES_COLUMNS_IDS.PDisks) ? 51 : undefined
+            }
             fetchData={getNodes}
             initialEntitiesCount={initialEntitiesCount}
             renderErrorMessage={renderPaginatedTableErrorMessage}

package/src/containers/Operations/columns.tsx

@@ -216,6 +216,8 @@ function OperationsActions({operation, database}: OperationsActionsProps) {
                         buttonView="outlined"
                         dialogHeader={i18n('header_forget')}
                         dialogText={i18n('text_forget')}
+                        applyButtonText={i18n('header_forget')}
+                        applyButtonView="outlined-danger"
                         onConfirmAction={() =>
                             forgetOperation({id, database})
                                 .unwrap()
@@ -244,6 +246,8 @@ function OperationsActions({operation, database}: OperationsActionsProps) {
                         buttonView="outlined"
                         dialogHeader={i18n('header_cancel')}
                         dialogText={i18n('text_cancel')}
+                        applyButtonText={i18n('header_cancel')}
+                        applyButtonView="outlined-danger"
                         onConfirmAction={() =>
                             cancelOperation({id, database})
                                 .unwrap()

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

@@ -33,8 +33,8 @@
   "value_progress_create_changefeeds": "Creating Changefeeds",
   "header_cancel": "Cancel operation",
   "header_forget": "Forget operation",
-  "text_cancel": "The operation will be cancelled. Do you want to proceed?",
-  "text_forget": "The operation will be forgotten. Do you want to proceed?",
+  "text_cancel": "This will cancel the operation in progress. This action cannot be undone.",
+  "text_forget": "This will remove the operation from the list. This action cannot be undone.",
   "text_forgotten": "The operation {{id}} has been forgotten",
   "text_cancelled": "The operation {{id}} has been cancelled"
 }

package/src/containers/PDiskPage/DecommissionButton/DecommissionButton.tsx

@@ -139,6 +139,8 @@ export function DecommissionButton({
                 warningText={getDecommissionWarningText(newDecommission)}
                 withRetry={withRetry}
                 withCheckBox
+                applyButtonText={pDiskPageKeyset('decommission-dialog-title')}
+                applyButtonView="outlined-danger"
                 retryButtonText={pDiskPageKeyset('decommission-dialog-force-change')}
                 onConfirm={handleConfirmAction}
                 onConfirmActionSuccess={handleConfirmActionSuccess}

package/src/containers/PDiskPage/PDiskPage.tsx

@@ -187,7 +187,9 @@ export function PDiskPage() {
                     buttonDisabled={!pDiskParamsDefined || !isUserAllowedToMakeChanges}
                     buttonView="normal"
                     dialogHeader={pDiskPageKeyset('restart-pdisk-dialog-header')}
-                    dialogWarning={pDiskPageKeyset('restart-pdisk-dialog-text')}
+                    dialogText={pDiskPageKeyset('restart-pdisk-dialog-text')}
+                    applyButtonText={pDiskPageKeyset('restart-pdisk-button')}
+                    applyButtonView="action"
                     retryButtonText={pDiskPageKeyset('force-restart-pdisk-button')}
                     withPopover
                     popoverContent={pDiskPageKeyset('restart-pdisk-not-allowed')}

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

@@ -16,11 +16,11 @@
   "no-slots-data": "No slots data",
 
   "restart-pdisk-button": "Restart PDisk",
-  "force-restart-pdisk-button": "Restart anyway",
+  "force-restart-pdisk-button": "Restart PDisk anyway",
   "restart-pdisk-not-allowed": "You don't have enough rights to restart PDisk",
 
   "restart-pdisk-dialog-header": "Restart PDisk",
-  "restart-pdisk-dialog-text": "PDisk will be restarted. Do you want to proceed?",
+  "restart-pdisk-dialog-text": "Are you sure you want to restart this PDisk?",
 
   "decommission-none": "None",
   "decommission-imminent": "Imminent",
@@ -34,7 +34,7 @@
   "decommission-dialog-title": "Change decommission status",
   "decommission-dialog-force-change": "Change anyway",
 
-  "decommission-dialog-imminent-warning": "This will start imminent decommission. Existing slots will be moved from the disk",
+  "decommission-dialog-imminent-warning": "This will start imminent decommission. All existing slots will be moved from the disk.",
   "decommission-dialog-pending-warning": "This will start pending decommission. Decommission will be planned for this disk, but will not start immediatelly. Existing slots will not be moved from the disk, but no new slots will be allocated on it",
   "decommission-dialog-rejected-warning": "This will start rejected decommission. No slots from other disks are placed on this disk in the process of decommission",
   "decommission-dialog-none-warning": "This will reset decommission mode, allowing the disk to  be used by the storage"

package/src/containers/Storage/PDisks/PDisks.tsx

@@ -31,7 +31,7 @@ export function PDisks({pDisks = [], vDisks = [], viewContext, pDiskWidth}: PDis
 
                 const relatedVDisks = vDisks.filter((vdisk) => vdisk.PDiskId === pDisk.PDiskId);
 
-                const highlighted = highlightedDisk === id;
+                const highlighted = id !== undefined && highlightedDisk === id;
 
                 return (
                     <div className={b('pdisks-item')} key={id}>

package/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx

@@ -112,7 +112,6 @@ export function GroupedStorageGroupsComponent({
             groupId,
             pDiskId,
             filter: groupsSearchValue.trim(),
-            shouldUseGroupsHandler: true,
             group: storageGroupsGroupByParam,
         },
         {

package/src/containers/Storage/PaginatedStorageGroupsTable/PaginatedStorageGroupsTable.tsx

@@ -3,10 +3,7 @@ import React from 'react';
 import {LoaderWrapper} from '../../../components/LoaderWrapper/LoaderWrapper';
 import type {RenderErrorMessage} from '../../../components/PaginatedTable';
 import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../../components/PaginatedTable';
-import {
-    useCapabilitiesLoaded,
-    useStorageGroupsHandlerAvailable,
-} from '../../../store/reducers/capabilities/hooks';
+import {useCapabilitiesLoaded} from '../../../store/reducers/capabilities/hooks';
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import type {VisibleEntities} from '../../../store/reducers/storage/types';
 import type {GroupsGroupByField} from '../../../types/api/storage';
@@ -65,9 +62,8 @@ export const PaginatedStorageGroupsTable = ({
     initialEntitiesCount,
 }: PaginatedStorageGroupsTableProps) => {
     const capabilitiesLoaded = useCapabilitiesLoaded();
-    const groupsHandlerAvailable = useStorageGroupsHandlerAvailable();
 
-    const fetchData = useGroupsGetter(groupsHandlerAvailable);
+    const fetchData = useGroupsGetter();
 
     const hasVDisksColumns = React.useMemo(() => {
         return columns.some((column) => columnsWithVDisks.has(column.name));

package/src/containers/Storage/PaginatedStorageGroupsTable/columns/constants.ts

@@ -8,7 +8,7 @@ import {
 import type {
     GroupsGroupByField,
     GroupsRequiredField,
-    StorageV2SortValue,
+    GroupsSortField,
 } from '../../../../types/api/storage';
 import type {ValueOf} from '../../../../types/common';
 
@@ -295,7 +295,7 @@ export const GROUPS_COLUMNS_TO_DATA_FIELDS: Record<StorageGroupsColumnId, Groups
 
 const STORAGE_GROUPS_COLUMNS_TO_SORT_FIELDS: Record<
     StorageGroupsColumnId,
-    StorageV2SortValue | undefined
+    GroupsSortField | undefined
 > = {
     GroupId: 'GroupId',
     PoolName: 'PoolName',

package/src/containers/Storage/PaginatedStorageGroupsTable/getGroups.ts

@@ -13,53 +13,46 @@ import {GROUPS_COLUMNS_TO_DATA_FIELDS, getStorageGroupsColumnSortField} from './
 
 type GetStorageGroups = FetchData<PreparedStorageGroup, PreparedStorageGroupFilters>;
 
-export function useGroupsGetter(shouldUseGroupsHandler: boolean) {
-    const fetchData: GetStorageGroups = React.useCallback(
-        async (params) => {
-            const {limit, offset, sortParams, filters, columnsIds} = params;
-            const {sortOrder, columnId} = sortParams ?? {};
-            const {
-                searchValue,
-                visibleEntities,
-                database,
-                nodeId,
-                groupId,
-                pDiskId,
-                filterGroup,
-                filterGroupBy,
-            } = filters ?? {};
-
-            const sortField = getStorageGroupsColumnSortField(columnId);
-            const sort = sortField ? prepareSortValue(sortField, sortOrder) : undefined;
-            const dataFieldsRequired = getRequiredDataFields(
-                columnsIds,
-                GROUPS_COLUMNS_TO_DATA_FIELDS,
-            );
-
-            const {groups, found, total} = await requestStorageData({
-                limit,
-                offset,
-                sort,
-                filter: searchValue?.trim(),
-                with: visibleEntities,
-                database,
-                nodeId,
-                groupId,
-                pDiskId,
-                filter_group: filterGroup,
-                filter_group_by: filterGroupBy,
-                fieldsRequired: dataFieldsRequired,
-                shouldUseGroupsHandler,
-            });
-
-            return {
-                data: groups || [],
-                found: found || 0,
-                total: total || 0,
-            };
-        },
-        [shouldUseGroupsHandler],
-    );
+export function useGroupsGetter() {
+    const fetchData: GetStorageGroups = React.useCallback(async (params) => {
+        const {limit, offset, sortParams, filters, columnsIds} = params;
+        const {sortOrder, columnId} = sortParams ?? {};
+        const {
+            searchValue,
+            visibleEntities,
+            database,
+            nodeId,
+            groupId,
+            pDiskId,
+            filterGroup,
+            filterGroupBy,
+        } = filters ?? {};
+
+        const sortField = getStorageGroupsColumnSortField(columnId);
+        const sort = sortField ? prepareSortValue(sortField, sortOrder) : undefined;
+        const dataFieldsRequired = getRequiredDataFields(columnsIds, GROUPS_COLUMNS_TO_DATA_FIELDS);
+
+        const {groups, found, total} = await requestStorageData({
+            limit,
+            offset,
+            sort,
+            filter: searchValue?.trim(),
+            with: visibleEntities,
+            database,
+            nodeId,
+            groupId,
+            pDiskId,
+            filter_group: filterGroup,
+            filter_group_by: filterGroupBy,
+            fieldsRequired: dataFieldsRequired,
+        });
+
+        return {
+            data: groups || [],
+            found: found || 0,
+            total: total || 0,
+        };
+    }, []);
 
     return fetchData;
 }

package/src/containers/StorageGroupPage/StorageGroupPage.tsx

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

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

@@ -42,7 +42,9 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
         <Flex gap={2} wrap="nowrap">
             <ButtonWithConfirmDialog
                 dialogHeader={i18n('dialog.kill-header')}
-                dialogWarning={i18n('dialog.kill-text')}
+                dialogText={i18n('dialog.kill-text')}
+                applyButtonText={i18n('dialog.kill-header')}
+                applyButtonView="action"
                 onConfirmAction={() => killTablet({id: TabletId}).unwrap()}
                 buttonDisabled={isDisabledRestart || !isUserAllowedToMakeChanges}
                 withPopover
@@ -59,6 +61,8 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                     <ButtonWithConfirmDialog
                         dialogHeader={i18n('dialog.stop-header')}
                         dialogText={i18n('dialog.stop-text')}
+                        applyButtonText={i18n('dialog.stop-header')}
+                        applyButtonView="outlined-danger"
                         onConfirmAction={() => stopTablet({id: TabletId, hiveId: HiveId}).unwrap()}
                         buttonDisabled={isDisabledStop || !isUserAllowedToMakeChanges}
                         withPopover
@@ -73,6 +77,8 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                     <ButtonWithConfirmDialog
                         dialogHeader={i18n('dialog.resume-header')}
                         dialogText={i18n('dialog.resume-text')}
+                        applyButtonText={i18n('dialog.resume-header')}
+                        applyButtonView="action"
                         onConfirmAction={() =>
                             resumeTablet({id: TabletId, hiveId: HiveId}).unwrap()
                         }

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

@@ -16,9 +16,9 @@
   "dialog.stop-header": "Stop tablet",
   "dialog.resume-header": "Resume tablet",
 
-  "dialog.kill-text": "The tablet will be restarted. Do you want to proceed?",
-  "dialog.stop-text": "The tablet will be stopped. Do you want to proceed?",
-  "dialog.resume-text": "The tablet will be resumed. Do you want to proceed?",
+  "dialog.kill-text": "The tablet will restart. A portion of table data will be temporarily unavailable. Active transactions and scans will be interrupted with a retriable error and can be retried.",
+  "dialog.stop-text": "The tablet will be stopped. The key range will be unavailable until the tablet is manually resumed. Data is not deleted and will be restored after resume.",
+  "dialog.resume-text": "The tablet will be resumed and return to Active state.",
 
   "emptyState": "The tablet was not found",