fix: open monitoring tab in new navigation

Author: astandrik

src/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -4,16 +4,16 @@ import type {LabelProps} from '@gravity-ui/uikit';
 import {useLocation} from 'react-router-dom';
 
 import {getTenantPath, parseQuery} from '../../../routes';
-import {
-    TENANT_DIAGNOSTICS_TABS_IDS,
-    TENANT_PAGE,
-    TENANT_PAGES_IDS,
-} from '../../../store/reducers/tenant/constants';
-import type {TenantDiagnosticsTab, TenantPage} from '../../../store/reducers/tenant/types';
+import {TENANT_DIAGNOSTICS_TABS_IDS, TENANT_PAGE} from '../../../store/reducers/tenant/constants';
+import type {TenantDiagnosticsTab} from '../../../store/reducers/tenant/types';
 import {EPathSubType, EPathType} from '../../../types/api/schema';
 import type {ETenantType} from '../../../types/api/tenant';
 import type {TenantQuery} from '../TenantPages';
 import {TenantTabsGroups} from '../TenantPages';
+import {
+    V2_DATABASE_PAGE_DIAGNOSTICS_TABS,
+    getTenantPageForDiagnosticsTab,
+} from '../utils/diagnosticsNavigation';
 import {useNavigationV2Enabled} from '../utils/useNavigationV2Enabled';
 
 import i18n from './i18n';
@@ -163,7 +163,18 @@ const ALL_DB_PAGES = [
     backups,
 ];
 
-const DB_PAGES = [database, monitoring, topQueries, storage, network, configs, operations, backups];
+const databasePageById = {
+    [TENANT_DIAGNOSTICS_TABS_IDS.database]: database,
+    [TENANT_DIAGNOSTICS_TABS_IDS.monitoring]: monitoring,
+    [TENANT_DIAGNOSTICS_TABS_IDS.topQueries]: topQueries,
+    [TENANT_DIAGNOSTICS_TABS_IDS.storage]: storage,
+    [TENANT_DIAGNOSTICS_TABS_IDS.network]: network,
+    [TENANT_DIAGNOSTICS_TABS_IDS.configs]: configs,
+    [TENANT_DIAGNOSTICS_TABS_IDS.operations]: operations,
+    [TENANT_DIAGNOSTICS_TABS_IDS.backups]: backups,
+} satisfies Record<(typeof V2_DATABASE_PAGE_DIAGNOSTICS_TABS)[number], Page>;
+
+const DB_PAGES = V2_DATABASE_PAGE_DIAGNOSTICS_TABS.map((id) => databasePageById[id]);
 
 const DIAGNOSTICS_DB_PAGES = [overview, topShards, nodes, tablets, describe, access];
 
@@ -328,39 +339,13 @@ export const getPagesByType = (
     return applyFilters(seeded, options);
 };
 
-// In tenant navigation v2 the database-overview tabs are split across two
-// top-level pages: the "stats"/management tabs (topQueries, storage, network,
-// monitoring, configs, operations, backups) live on `databasePage=database`,
-// while the rest (overview, topShards, nodes, tablets, describe, access) live
-// on `databasePage=diagnostics`. We have to route every "See all" link to the
-// correct top-level page, otherwise the target tab is missing from the active
-// page and Diagnostics silently falls back to its first tab. In v1 everything
-// lives under `databasePage=diagnostics`.
-//
-// Derive the set from the same DB_PAGES list used to render navigation, so the
-// two stay in sync automatically if pages are moved between sections later.
-// Serverless drops a few tabs from DB_PAGES (storage, network, nodes), but the
-// set is only used to *decide which top-level page hosts a tab*; missing tabs
-// just won't be rendered on either page, so we can safely use the regular-DB
-// arrays without branching on databaseType.
-const V2_DATABASE_PAGE_TABS = new Set<string>(DB_PAGES.map((page) => page.id));
-
-function getTenantPageForTab(tab: string, isV2Enabled: boolean): TenantPage {
-    if (!isV2Enabled) {
-        return TENANT_PAGES_IDS.diagnostics;
-    }
-    return V2_DATABASE_PAGE_TABS.has(tab)
-        ? TENANT_PAGES_IDS.database
-        : TENANT_PAGES_IDS.diagnostics;
-}
-
 export const useDiagnosticsPageLinkGetter = () => {
     const location = useLocation();
     const queryParams = parseQuery(location);
     const isV2Enabled = useNavigationV2Enabled();
 
     const getLink = React.useCallback(
-        (tab: string, params?: TenantQuery) => {
+        (tab: TenantDiagnosticsTab, params?: TenantQuery) => {
             return getTenantPath({
                 ...queryParams,
                 ...params,
@@ -371,7 +356,7 @@ export const useDiagnosticsPageLinkGetter = () => {
                 // tab does not exist (and gets silently replaced by the first tab).
                 // Spread after `params` so callers cannot accidentally override the
                 // page/tab the helper is responsible for.
-                [TENANT_PAGE]: getTenantPageForTab(tab, isV2Enabled),
+                [TENANT_PAGE]: getTenantPageForDiagnosticsTab(tab, isV2Enabled),
                 [TenantTabsGroups.diagnosticsTab]: tab,
             });
         },

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

@@ -16,7 +16,6 @@ import {
 import {
     TENANT_DIAGNOSTICS_TABS_IDS,
     TENANT_METRICS_TABS_IDS,
-    TENANT_PAGES_IDS,
 } from '../../../../store/reducers/tenant/constants';
 import {setDiagnosticsTab, tenantApi} from '../../../../store/reducers/tenant/tenant';
 import type {TenantMetricsTab} from '../../../../store/reducers/tenant/types';
@@ -34,6 +33,7 @@ import {useClusterNameFromQuery} from '../../../../utils/hooks/useDatabaseFromQu
 import {useDatabasesV2} from '../../../../utils/hooks/useDatabasesV2';
 import {canShowTenantMonitoringTab} from '../../../../utils/monitoringVisibility';
 import {useTenantPage} from '../../TenantNavigation/useTenantNavigation';
+import {getTenantPageForDiagnosticsTab} from '../../utils/diagnosticsNavigation';
 import {mapDatabaseTypeToDBName} from '../../utils/schema';
 import {useNavigationV2Enabled} from '../../utils/useNavigationV2Enabled';
 
@@ -340,7 +340,12 @@ export function TenantOverview({
     );
 
     const handleOpenMonitoring = () => {
-        handleTenantPageChange(TENANT_PAGES_IDS.diagnostics);
+        handleTenantPageChange(
+            getTenantPageForDiagnosticsTab(
+                TENANT_DIAGNOSTICS_TABS_IDS.monitoring,
+                isV2NavigationEnabled,
+            ),
+        );
         dispatch(setDiagnosticsTab(TENANT_DIAGNOSTICS_TABS_IDS.monitoring));
     };
 

src/containers/Tenant/ObjectSummary/SchemaTree/SchemaTree.tsx

@@ -41,6 +41,7 @@ import {
 } from '../../utils/schema';
 import {getActions} from '../../utils/schemaActions';
 import type {DropdownItem, TreeNodeMeta} from '../../utils/types';
+import {useNavigationV2Enabled} from '../../utils/useNavigationV2Enabled';
 import {CreateDirectoryDialog} from '../CreateDirectoryDialog/CreateDirectoryDialog';
 import {useDispatchTreeKey, useTreeKey} from '../UpdateTreeContext';
 import {isDomain, transformPath} from '../transformPath';
@@ -78,6 +79,7 @@ export function SchemaTree(props: SchemaTreeProps) {
     const isTopicPreviewAvailable = useTopicDataAvailable();
 
     const {handleTenantPageChange} = useTenantPage();
+    const isV2NavigationEnabled = useNavigationV2Enabled();
 
     const [createDirectoryOpen, setCreateDirectoryOpen] = React.useState(false);
     const [parentPath, setParentPath] = React.useState('');
@@ -222,6 +224,7 @@ export function SchemaTree(props: SchemaTreeProps) {
                 schemaData: actionsSchemaData,
                 isSchemaDataLoading: isActionsDataFetching,
                 hasMonitoring,
+                isV2NavigationEnabled,
                 streamingQueryData: streamingSysData,
                 showCreateTableData: getStringifiedData(showCreateTableData),
                 isShowCreateTableLoading: isShowCreateTableFetching,
@@ -242,6 +245,7 @@ export function SchemaTree(props: SchemaTreeProps) {
         isMultiTabEnabled,
         actionsSchemaData,
         isActionsDataFetching,
+        isV2NavigationEnabled,
         streamingSysData,
         showCreateTableData,
         isShowCreateTableFetching,

src/containers/Tenant/utils/diagnosticsNavigation.ts

@@ -0,0 +1,34 @@
+import {
+    TENANT_DIAGNOSTICS_TABS_IDS,
+    TENANT_PAGES_IDS,
+} from '../../../store/reducers/tenant/constants';
+import type {TenantDiagnosticsTab, TenantPage} from '../../../store/reducers/tenant/types';
+
+// In tenant navigation v2 database diagnostics tabs are split between two top-level pages.
+// Route each tab to the page that renders it; otherwise Diagnostics falls back to the
+// first available tab and actions like "Monitoring" appear to do nothing.
+// These tabs live under databasePage=database; the rest stay under databasePage=diagnostics.
+export const V2_DATABASE_PAGE_DIAGNOSTICS_TABS = [
+    TENANT_DIAGNOSTICS_TABS_IDS.database,
+    TENANT_DIAGNOSTICS_TABS_IDS.monitoring,
+    TENANT_DIAGNOSTICS_TABS_IDS.topQueries,
+    TENANT_DIAGNOSTICS_TABS_IDS.storage,
+    TENANT_DIAGNOSTICS_TABS_IDS.network,
+    TENANT_DIAGNOSTICS_TABS_IDS.configs,
+    TENANT_DIAGNOSTICS_TABS_IDS.operations,
+    TENANT_DIAGNOSTICS_TABS_IDS.backups,
+] as const satisfies readonly TenantDiagnosticsTab[];
+
+const V2_DATABASE_PAGE_TABS = new Set<TenantDiagnosticsTab>(V2_DATABASE_PAGE_DIAGNOSTICS_TABS);
+
+export function getTenantPageForDiagnosticsTab(
+    tab: TenantDiagnosticsTab,
+    isV2Enabled: boolean,
+): TenantPage {
+    if (!isV2Enabled) {
+        return TENANT_PAGES_IDS.diagnostics;
+    }
+    return V2_DATABASE_PAGE_TABS.has(tab)
+        ? TENANT_PAGES_IDS.database
+        : TENANT_PAGES_IDS.diagnostics;
+}

src/containers/Tenant/utils/schemaActions.tsx

@@ -21,6 +21,7 @@ import {transformPath} from '../ObjectSummary/transformPath';
 import type {SchemaData} from '../Schema/SchemaViewer/types';
 import i18n from '../i18n';
 
+import {getTenantPageForDiagnosticsTab} from './diagnosticsNavigation';
 import type {TemplateFn} from './schemaQueryTemplates';
 import {
     addFulltextIndex,
@@ -80,6 +81,7 @@ interface ActionsAdditionalParams {
     schemaData?: SchemaData[];
     isSchemaDataLoading?: boolean;
     hasMonitoring?: boolean;
+    isV2NavigationEnabled?: boolean;
     streamingQueryData?: IQueryResult;
     showCreateTableData?: string;
     isStreamingQueryTextLoading?: boolean;
@@ -161,7 +163,12 @@ const bindActions = (
             showCompactionDialog?.(params.path);
         },
         openMonitoring: () => {
-            setTenantPage(TENANT_PAGES_IDS.diagnostics);
+            setTenantPage(
+                getTenantPageForDiagnosticsTab(
+                    TENANT_DIAGNOSTICS_TABS_IDS.monitoring,
+                    Boolean(additionalEffects.isV2NavigationEnabled),
+                ),
+            );
             dispatch(setDiagnosticsTab(TENANT_DIAGNOSTICS_TABS_IDS.monitoring));
             setActivePath(params.path);
         },

tests/suites/tenant/summary/objectSummary.test.ts

@@ -9,6 +9,7 @@ import {
     dsVslotsSchema,
     dsVslotsTableName,
 } from '../../../utils/constants';
+import {setupMonitoringGenericErrorMock} from '../../errorDisplay/errorDisplayMocks';
 import {TenantPage} from '../TenantPage';
 import {QueryEditor} from '../queryEditor/models/QueryEditor';
 
@@ -191,6 +192,57 @@ test.describe('Object Summary', async () => {
         expect(clipboardContent).toBe('.sys/ds_vslots');
     });
 
+    test('Monitoring action opens monitoring tab with new navigation', async ({page}) => {
+        await page.addInitScript(() => {
+            localStorage.setItem('enableTenantNavigationV2', JSON.stringify(true));
+            localStorage.setItem('isV2NavigationAlertSeen', JSON.stringify(true));
+        });
+        await page.route(`${backend}/viewer/json/whoami*`, async (route) => {
+            await route.fulfill({
+                status: 200,
+                contentType: 'application/json',
+                body: JSON.stringify({
+                    UserSID: 'test-user',
+                    UserID: 'test-user-id',
+                    AuthType: 'Login',
+                    IsViewerAllowed: true,
+                    IsMonitoringAllowed: true,
+                }),
+            });
+        });
+        await page.route(`${backend}/viewer/capabilities*`, async (route) => {
+            await route.fulfill({
+                status: 200,
+                contentType: 'application/json',
+                body: JSON.stringify({
+                    Database: database,
+                    Capabilities: {},
+                }),
+            });
+        });
+        await setupMonitoringGenericErrorMock(page);
+
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto({
+            schema: database,
+            database,
+            databasePage: 'query',
+        });
+
+        const objectSummary = new ObjectSummary(page);
+        await objectSummary.clickActionMenuItem('local', 'Monitoring');
+
+        await tenantPage.isDiagnosticsVisible();
+
+        await expect
+            .poll(() => new URL(page.url()).searchParams.get('databasePage'))
+            .toBe('database');
+        await expect
+            .poll(() => new URL(page.url()).searchParams.get('diagnosticsTab'))
+            .toBe('monitoring');
+        await expect(page.locator('a[data-tab="monitoring"]')).toBeVisible();
+    });
+
     test('Create directory in local node', async ({page}) => {
         const pageQueryParams = {
             schema: database,