ydb-embedded-ui 21.0.0 → 21.1.0

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",
 

package/src/containers/Tablets/TabletsTable.tsx

@@ -190,7 +190,9 @@ function TabletActions(tablet: TTabletStateInfo) {
         <ButtonWithConfirmDialog
             buttonView="outlined"
             dialogHeader={i18n('dialog.kill-header')}
-            dialogWarning={i18n('dialog.kill-text')}
+            dialogText={i18n('dialog.kill-text')}
+            applyButtonText={i18n('dialog.kill-header')}
+            applyButtonView="action"
             onConfirmAction={() => {
                 return killTablet({id}).unwrap();
             }}

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

@@ -10,7 +10,7 @@
   "Generation": "Generation",
   "Uptime": "Uptime",
   "dialog.kill-header": "Restart tablet",
-  "dialog.kill-text": "The tablet will be restarted. 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.",
   "controls.kill-not-allowed": "You don't have enough rights to restart tablet",
   "controls.kill-impossible-follower": "It's impossible to restart a follower",
   "controls.search-placeholder": "Tablet ID",

package/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx

@@ -7,6 +7,7 @@ import {healthcheckApi} from '../../../../../store/reducers/healthcheckInfo/heal
 import {SelfCheckResult} from '../../../../../types/api/healthcheck';
 import {cn} from '../../../../../utils/cn';
 import {useAutoRefreshInterval} from '../../../../../utils/hooks';
+import {useClusterNameFromQuery} from '../../../../../utils/hooks/useDatabaseFromQuery';
 import {isEnumMember} from '../../../../../utils/typecheckers';
 import {HEALTHCHECK_RESULT_TO_TEXT} from '../../../constants';
 import {useTenantQueryParams} from '../../../useTenantQueryParams';
@@ -24,6 +25,7 @@ interface HealthcheckPreviewProps {
 
 export function HealthcheckPreview(props: HealthcheckPreviewProps) {
     const {database} = props;
+    const clusterName = useClusterNameFromQuery();
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
     const {handleShowHealthcheckChange} = useTenantQueryParams();
@@ -33,7 +35,7 @@ export function HealthcheckPreview(props: HealthcheckPreviewProps) {
         isFetching,
         error,
     } = healthcheckApi.useGetHealthcheckInfoQuery(
-        {database},
+        {database, clusterName},
         {
             pollingInterval: autoRefreshInterval,
         },

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

@@ -311,11 +311,11 @@ export function TenantOverview({
 
     // Use healthcheck self_check_result as the database status color when available;
     // fall back to tenantinfo.Overall (e.g. for Serverless databases where healthcheck is skipped).
-    // Polling is managed by HealthcheckPreview (deduped via the same cache key); the database
+    // Polling is managed by HealthcheckPreview via the same {database, clusterName} cache key. The database
     // status badge is only rendered when !isV2NavigationEnabled, so skip the query in V2 mode
     // and until tenant info is loaded to avoid spurious requests.
     const {currentData: healthcheckData} = healthcheckApi.useGetHealthcheckInfoQuery(
-        {database},
+        {database, clusterName},
         {
             skip: shouldSkipHealthcheck({isServerless, isV2NavigationEnabled, tenant}),
         },

package/src/containers/Tenant/Healthcheck/components/HealthcheckDrawer.tsx

@@ -7,6 +7,7 @@ import {DrawerWrapper} from '../../../../components/Drawer';
 import type {DrawerControl} from '../../../../components/Drawer';
 import {EnableFullscreenButton} from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import type {SelfCheckResult} from '../../../../types/api/healthcheck';
+import {uiFactory} from '../../../../uiFactory/uiFactory';
 import {createAndDownloadJsonFile} from '../../../../utils/downloadFile';
 
 import {HealthcheckDrawerTitle} from './HealthcheckDrawerTitle';
@@ -42,6 +43,20 @@ export function HealthcheckDrawer({
     downloadTooltip,
     isDownloadDisabled,
 }: HealthcheckDrawerProps) {
+    const renderDrawerExtension = uiFactory.healthcheck.renderDrawerExtension;
+    const renderContentWithExtension = React.useCallback(() => {
+        if (!renderDrawerExtension) {
+            return renderDrawerContent();
+        }
+
+        return (
+            <React.Fragment>
+                {renderDrawerExtension()}
+                {renderDrawerContent()}
+            </React.Fragment>
+        );
+    }, [renderDrawerContent, renderDrawerExtension]);
+
     const handleDownload = React.useCallback(
         (event: React.MouseEvent<HTMLButtonElement>) => {
             event.stopPropagation();
@@ -86,7 +101,7 @@ export function HealthcheckDrawer({
             isDrawerVisible={isDrawerVisible}
             onCloseDrawer={onCloseDrawer}
             onTransitionInComplete={onTransitionInComplete}
-            renderDrawerContent={renderDrawerContent}
+            renderDrawerContent={renderContentWithExtension}
             drawerId={drawerId}
             storageKey={storageKey}
             detectClickOutside

package/src/store/reducers/storage/utils.ts

@@ -237,10 +237,10 @@ const prepareStorageNodeData = (
         }).length || 0;
 
     const pDisks = PDisks?.map((pDisk) => {
-        return {
-            ...prepareWhiteboardPDiskData(pDisk),
+        return prepareWhiteboardPDiskData({
+            ...pDisk,
             NodeId,
-        };
+        });
     });
     const vDisks = VDisks?.map((vDisk) => {
         return {

package/src/uiFactory/types.ts

@@ -53,6 +53,7 @@ export interface UIFactory<H extends string = CommonIssueCategory, T extends str
     renderNodeTooltipActions?: RenderNodeTooltipActions;
     clusterOrDatabaseAccessError?: Partial<EmptyStateProps>;
 
+    /** Defaults to true. Undefined preserves the current value when configuring the UI. */
     enableMultiTabQueryEditor?: boolean;
 
     /** Creates a fresh computation-graph layout worker for each layout run. */
@@ -64,6 +65,11 @@ export interface UIFactory<H extends string = CommonIssueCategory, T extends str
         getHealthckechViewTitles: GetHealthcheckViewTitles<H>;
         getHealthcheckViewsOrder: GetHealthcheckViewsOrder<H>;
         renderAssistantAction?: RenderHealthcheckAssistantAction;
+        /**
+         * Renders after the drawer header and before Healthcheck content.
+         * Stays mounted while the drawer is open, independent of loading, error or issue state.
+         */
+        renderDrawerExtension?: () => React.ReactNode;
     };
     hasAccess: HasAccess;
     hideGrantAccess?: boolean;

package/src/uiFactory/uiFactory.ts

@@ -30,7 +30,7 @@ const uiFactoryBase: ResolvedUIFactory = {
     useDatabaseId: false,
     settingsBackend: undefined,
     docs: undefined,
-    enableMultiTabQueryEditor: false,
+    enableMultiTabQueryEditor: true,
     hasDeveloperUi: true,
     isDetailedStorageViewAvailable: () => true,
     maxVDisksInStorageGroup: 9,
@@ -46,10 +46,20 @@ type UIFactoryOverrides<H extends string, T extends string> = Omit<
 export function configureUIFactory<H extends string, T extends string = string>(
     overrides: UIFactoryOverrides<H, T>,
 ) {
-    const {healthcheck, hasAccess, maxVDisksInStorageGroup, ...restOverrides} = overrides;
+    const {
+        healthcheck,
+        hasAccess,
+        maxVDisksInStorageGroup,
+        enableMultiTabQueryEditor,
+        ...restOverrides
+    } = overrides;
 
     Object.assign(uiFactoryBase, restOverrides);
 
+    if (typeof enableMultiTabQueryEditor === 'boolean') {
+        uiFactoryBase.enableMultiTabQueryEditor = enableMultiTabQueryEditor;
+    }
+
     // Only override hasAccess when an actual function is provided.
     // Forwarding an optional config field could pass `undefined` here,
     // which would overwrite the default and crash on the next hasAccess(...) call.