From e5540eed92284c71c43db0886493a7aaad5ed5eb Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 22 Oct 2025 11:11:52 +0000
Subject: [PATCH 1/4] Initial plan


From 113aad8df3e9eec74b45cc869ed603066e1841ad Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 22 Oct 2025 11:33:12 +0000
Subject: [PATCH 2/4] feat: add monitoring tab to database diagnostics page

Co-authored-by: astandrik <8037318+astandrik@users.noreply.github.com>
---
 .../Tenant/Diagnostics/Diagnostics.scss       |  4 ++
 .../Tenant/Diagnostics/Diagnostics.tsx        | 30 +++++++++-
 .../Tenant/Diagnostics/DiagnosticsPages.ts    |  7 +++
 .../Diagnostics/Monitoring/Monitoring.scss    | 44 +++++++++++++++
 .../Diagnostics/Monitoring/Monitoring.tsx     | 56 +++++++++++++++++++
 .../TenantOverview/TenantOverview.tsx         | 42 ++++++++++----
 .../Diagnostics/TenantOverview/i18n/en.json   |  4 +-
 src/containers/Tenant/i18n/en.json            |  1 +
 src/containers/Tenant/utils/schemaActions.tsx | 22 ++++++--
 src/store/reducers/tenant/constants.ts        |  1 +
 10 files changed, 194 insertions(+), 17 deletions(-)
 create mode 100644 src/containers/Tenant/Diagnostics/Monitoring/Monitoring.scss
 create mode 100644 src/containers/Tenant/Diagnostics/Monitoring/Monitoring.tsx

diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.scss b/src/containers/Tenant/Diagnostics/Diagnostics.scss
index 94c229d652..d5e26309c4 100644
--- a/src/containers/Tenant/Diagnostics/Diagnostics.scss
+++ b/src/containers/Tenant/Diagnostics/Diagnostics.scss
@@ -45,4 +45,8 @@
         // This prevents inheritance issues with percentage-based calculations
         container-type: size;
     }
+
+    &__new-label {
+        margin-left: 8px;
+    }
 }
diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.tsx b/src/containers/Tenant/Diagnostics/Diagnostics.tsx
index 86f5fec76e..4784aafa6b 100644
--- a/src/containers/Tenant/Diagnostics/Diagnostics.tsx
+++ b/src/containers/Tenant/Diagnostics/Diagnostics.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Tab, TabList, TabProvider} from '@gravity-ui/uikit';
+import {Label, Tab, TabList, TabProvider} from '@gravity-ui/uikit';
 import {Helmet} from 'react-helmet-async';
 
 import {AutoRefreshControl} from '../../../components/AutoRefreshControl/AutoRefreshControl';
@@ -33,6 +33,7 @@ import Describe from './Describe/Describe';
 import DetailedOverview from './DetailedOverview/DetailedOverview';
 import {getPagesByType, useDiagnosticsPageLinkGetter} from './DiagnosticsPages';
 import {HotKeys} from './HotKeys/HotKeys';
+import {Monitoring} from './Monitoring/Monitoring';
 import {NetworkWrapper} from './Network/NetworkWrapper';
 import {Partitions} from './Partitions/Partitions';
 import {TopQueries} from './TopQueries';
@@ -98,6 +99,15 @@ function Diagnostics({additionalTenantProps}: DiagnosticsProps) {
                     />
                 );
             }
+            case TENANT_DIAGNOSTICS_TABS_IDS.monitoring: {
+                const monitoringUrl = additionalTenantProps?.getMonitoringLink?.(
+                    database,
+                    databaseType,
+                );
+                return (
+                    <Monitoring database={database} monitoringUrl={monitoringUrl || undefined} />
+                );
+            }
             case TENANT_DIAGNOSTICS_TABS_IDS.schema: {
                 return (
                     <SchemaViewer
@@ -220,6 +230,13 @@ function Diagnostics({additionalTenantProps}: DiagnosticsProps) {
         }
     };
     const renderTabs = () => {
+        // Date when the Monitoring tab was added (Oct 22, 2025)
+        const MONITORING_TAB_LAUNCH_DATE = new Date('2025-10-22');
+        const FOURTEEN_DAYS_MS = 14 * 24 * 60 * 60 * 1000;
+        const now = new Date();
+        const showNewLabel =
+            now.getTime() - MONITORING_TAB_LAUNCH_DATE.getTime() < FOURTEEN_DAYS_MS;
+
         return (
             <div className={b('header-wrapper')}>
                 <div className={b('tabs')}>
@@ -227,10 +244,21 @@ function Diagnostics({additionalTenantProps}: DiagnosticsProps) {
                         <TabList size="l">
                             {pages.map(({id, title}) => {
                                 const linkPath = getDiagnosticsPageLink(id);
+                                const isMonitoringTab =
+                                    id === TENANT_DIAGNOSTICS_TABS_IDS.monitoring;
                                 return (
                                     <Tab key={id} value={id}>
                                         <InternalLink to={linkPath} as="tab">
                                             {title}
+                                            {isMonitoringTab && showNewLabel && (
+                                                <Label
+                                                    theme="info"
+                                                    size="xs"
+                                                    className={b('new-label')}
+                                                >
+                                                    New
+                                                </Label>
+                                            )}
                                         </InternalLink>
                                     </Tab>
                                 );
diff --git a/src/containers/Tenant/Diagnostics/DiagnosticsPages.ts b/src/containers/Tenant/Diagnostics/DiagnosticsPages.ts
index c6c81b8d34..973302b30b 100644
--- a/src/containers/Tenant/Diagnostics/DiagnosticsPages.ts
+++ b/src/containers/Tenant/Diagnostics/DiagnosticsPages.ts
@@ -29,6 +29,11 @@ const overview = {
     title: 'Info',
 };
 
+const monitoring = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.monitoring,
+    title: 'Monitoring',
+};
+
 const schema = {
     id: TENANT_DIAGNOSTICS_TABS_IDS.schema,
     title: 'Schema',
@@ -115,6 +120,7 @@ const TRANSFER_PAGES = [overview, tablets, describe, access];
 
 const DATABASE_PAGES = [
     overview,
+    monitoring,
     topQueries,
     topShards,
     nodes,
@@ -130,6 +136,7 @@ const DATABASE_PAGES = [
 
 const SERVERLESS_DATABASE_PAGES = [
     overview,
+    monitoring,
     topQueries,
     topShards,
     tablets,
diff --git a/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.scss b/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.scss
new file mode 100644
index 0000000000..e8a22153f3
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.scss
@@ -0,0 +1,44 @@
+@use '../../../../styles/mixins';
+
+.ydb-monitoring {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    height: 100%;
+
+    &__controls {
+        padding: 16px 20px;
+
+        border-bottom: 1px solid var(--g-color-line-generic);
+    }
+
+    &__content {
+        position: relative;
+
+        overflow: hidden;
+        flex: 1;
+    }
+
+    &__iframe {
+        width: 100%;
+        height: 100%;
+
+        border: none;
+    }
+
+    &__empty {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        width: 100%;
+        height: 100%;
+    }
+
+    &__empty-text {
+        font-size: 16px;
+
+        color: var(--g-color-text-secondary);
+    }
+}
diff --git a/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.tsx b/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.tsx
new file mode 100644
index 0000000000..218bdd1d89
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import {SegmentedRadioGroup} from '@gravity-ui/uikit';
+
+import {cn} from '../../../../utils/cn';
+
+import './Monitoring.scss';
+
+const b = cn('ydb-monitoring');
+
+interface MonitoringProps {
+    database: string;
+    monitoringUrl?: string;
+}
+
+const MONITORING_TABS = [
+    {value: 'diagnostics', content: 'Diagnostics'},
+    {value: 'transactions', content: 'Transactions'},
+    {value: 'calling-api', content: 'Calling API'},
+    {value: 'yql-queries', content: 'YQL Queries'},
+    {value: 'tables-rw', content: 'Tables R/W'},
+    {value: 'topics-rw', content: 'Topics R/W'},
+];
+
+export function Monitoring({monitoringUrl}: MonitoringProps) {
+    const [activeTab, setActiveTab] = React.useState('diagnostics');
+
+    if (!monitoringUrl) {
+        return (
+            <div className={b('empty')}>
+                <div className={b('empty-text')}>Monitoring is not available</div>
+            </div>
+        );
+    }
+
+    return (
+        <div className={b()}>
+            <div className={b('controls')}>
+                <SegmentedRadioGroup
+                    size="l"
+                    value={activeTab}
+                    onUpdate={setActiveTab}
+                    options={MONITORING_TABS}
+                />
+            </div>
+            <div className={b('content')}>
+                <iframe
+                    className={b('iframe')}
+                    src={monitoringUrl}
+                    title="YDB Monitoring Dashboard"
+                    frameBorder="0"
+                />
+            </div>
+        </div>
+    );
+}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx
index d2c2926cf3..3e3b4bcfea 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx
@@ -1,4 +1,4 @@
-import {Button, Flex, HelpMark, Icon, Label} from '@gravity-ui/uikit';
+import {Button, Flex, HelpMark, Icon, Label, Tooltip} from '@gravity-ui/uikit';
 
 import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
 import {LoaderWrapper} from '../../../../components/LoaderWrapper/LoaderWrapper';
@@ -186,17 +186,37 @@ export function TenantOverview({
                     <Flex alignItems="center" gap="1" className={b('top')}>
                         {renderName()}
                         <Flex gap="2">
-                            {links.map(({title, url, icon}) => (
-                                <Button
-                                    key={title}
-                                    href={url}
-                                    target="_blank"
-                                    size="xs"
-                                    title={title}
-                                >
+                            {links.map(({title, url, icon}) => {
+                                const isMonitoring = title === i18n('field_monitoring-link');
+                                const buttonContent = isMonitoring ? (
+                                    <>
+                                        <Icon data={icon} />
+                                        Monium
+                                    </>
+                                ) : (
                                     <Icon data={icon} />
-                                </Button>
-                            ))}
+                                );
+
+                                const button = (
+                                    <Button
+                                        key={title}
+                                        href={url}
+                                        target="_blank"
+                                        size="xs"
+                                        title={isMonitoring ? undefined : title}
+                                    >
+                                        {buttonContent}
+                                    </Button>
+                                );
+
+                                return isMonitoring ? (
+                                    <Tooltip key={title} content={i18n('tooltip_monium')}>
+                                        {button}
+                                    </Tooltip>
+                                ) : (
+                                    button
+                                );
+                            })}
                         </Flex>
                     </Flex>
                     <Flex direction="column" gap={4}>
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json b/src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json
index 9ec4807cc0..f32c0017a1 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json
@@ -41,5 +41,7 @@
   "value_serverless": "Serverless",
   "context_serverless-tooltip": "Some metrics are hidden in Serverless mode — resources scale automatically based on workload",
   "context_serverless-autoscaled": "Auto-Scaled Resources",
-  "context_serverless-storage-subtitle": "{{legend}} | {{groups}} groups"
+  "context_serverless-storage-subtitle": "{{legend}} | {{groups}} groups",
+  "field_monitoring-link": "Monitoring",
+  "tooltip_monium": "Full monitoring in Monium"
 }
diff --git a/src/containers/Tenant/i18n/en.json b/src/containers/Tenant/i18n/en.json
index 371eb83583..6fe261c66c 100644
--- a/src/containers/Tenant/i18n/en.json
+++ b/src/containers/Tenant/i18n/en.json
@@ -26,6 +26,7 @@
   "actions.notCopied": "Couldn’t copy the path",
   "actions.copyPath": "Copy path",
   "actions.connectToDB": "Connect to DB",
+  "actions.monitoring": "Monitoring",
   "actions.dropIndex": "Drop index",
   "actions.openPreview": "Open preview",
   "actions.createTable": "Create table...",
diff --git a/src/containers/Tenant/utils/schemaActions.tsx b/src/containers/Tenant/utils/schemaActions.tsx
index 1ad121c38e..464f09be79 100644
--- a/src/containers/Tenant/utils/schemaActions.tsx
+++ b/src/containers/Tenant/utils/schemaActions.tsx
@@ -1,12 +1,16 @@
-import {CirclePlus, Copy, PlugConnection} from '@gravity-ui/icons';
+import {CirclePlus, Copy, PlugConnection, Pulse} from '@gravity-ui/icons';
 import {Flex, Spin} from '@gravity-ui/uikit';
 import copy from 'copy-to-clipboard';
 import type {NavigationTreeNodeType} from 'ydb-ui-components';
 
 import type {SnippetParams} from '../../../components/ConnectToDB/types';
 import type {AppDispatch} from '../../../store';
-import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
-import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
+import {
+    TENANT_DIAGNOSTICS_TABS_IDS,
+    TENANT_PAGES_IDS,
+    TENANT_QUERY_TABS_ID,
+} from '../../../store/reducers/tenant/constants';
+import {setDiagnosticsTab, setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
 import createToast from '../../../utils/createToast';
 import {insertSnippetToEditor} from '../../../utils/monaco/insertSnippet';
 import {transformPath} from '../ObjectSummary/transformPath';
@@ -98,6 +102,11 @@ const bindActions = (
               }
             : undefined,
         getConnectToDBDialog: () => getConnectToDBDialog?.({database: params.database}),
+        goToMonitoring: () => {
+            dispatch(setTenantPage(TENANT_PAGES_IDS.diagnostics));
+            dispatch(setDiagnosticsTab(TENANT_DIAGNOSTICS_TABS_IDS.monitoring));
+            setActivePath(params.path);
+        },
         createTable: inputQuery(createTableTemplate),
         createColumnTable: inputQuery(createColumnTableTemplate),
         createAsyncReplication: inputQuery(createAsyncReplicationTemplate),
@@ -190,6 +199,11 @@ export const getActions =
             action: actions.getConnectToDBDialog,
             iconStart: <PlugConnection />,
         };
+        const monitoringItem = {
+            text: i18n('actions.monitoring'),
+            action: actions.goToMonitoring,
+            iconStart: <Pulse />,
+        };
 
         const createEntitiesSet = [
             {text: i18n('actions.createTable'), action: actions.createTable},
@@ -216,7 +230,7 @@ export const getActions =
                 },
             ],
         };
-        const DB_SET: ActionsSet = [[copyItem, connectToDBItem], createEntitiesSet];
+        const DB_SET: ActionsSet = [[copyItem, connectToDBItem, monitoringItem], createEntitiesSet];
 
         const DIR_SET: ActionsSet = [[copyItem], createEntitiesSet];
 
diff --git a/src/store/reducers/tenant/constants.ts b/src/store/reducers/tenant/constants.ts
index 9b3ae84100..4e1507c3b6 100644
--- a/src/store/reducers/tenant/constants.ts
+++ b/src/store/reducers/tenant/constants.ts
@@ -13,6 +13,7 @@ export const TENANT_QUERY_TABS_ID = {
 
 export const TENANT_DIAGNOSTICS_TABS_IDS = {
     overview: 'overview',
+    monitoring: 'monitoring',
     schema: 'schema',
     topQueries: 'topQueries',
     topShards: 'topShards',

From 5181820dcb4b07a430ac6391b10857191db48843 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 22 Oct 2025 11:36:09 +0000
Subject: [PATCH 3/4] refactor: simplify monitoring component to only show
 iframe

Co-authored-by: astandrik <8037318+astandrik@users.noreply.github.com>
---
 .../Diagnostics/Monitoring/Monitoring.scss    | 16 --------
 .../Diagnostics/Monitoring/Monitoring.tsx     | 37 +++----------------
 2 files changed, 6 insertions(+), 47 deletions(-)

diff --git a/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.scss b/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.scss
index e8a22153f3..fa3e31f031 100644
--- a/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.scss
+++ b/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.scss
@@ -1,25 +1,9 @@
 @use '../../../../styles/mixins';
 
 .ydb-monitoring {
-    display: flex;
-    flex-direction: column;
-
     width: 100%;
     height: 100%;
 
-    &__controls {
-        padding: 16px 20px;
-
-        border-bottom: 1px solid var(--g-color-line-generic);
-    }
-
-    &__content {
-        position: relative;
-
-        overflow: hidden;
-        flex: 1;
-    }
-
     &__iframe {
         width: 100%;
         height: 100%;
diff --git a/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.tsx b/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.tsx
index 218bdd1d89..875b7f3f23 100644
--- a/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.tsx
+++ b/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.tsx
@@ -1,7 +1,3 @@
-import React from 'react';
-
-import {SegmentedRadioGroup} from '@gravity-ui/uikit';
-
 import {cn} from '../../../../utils/cn';
 
 import './Monitoring.scss';
@@ -13,18 +9,7 @@ interface MonitoringProps {
     monitoringUrl?: string;
 }
 
-const MONITORING_TABS = [
-    {value: 'diagnostics', content: 'Diagnostics'},
-    {value: 'transactions', content: 'Transactions'},
-    {value: 'calling-api', content: 'Calling API'},
-    {value: 'yql-queries', content: 'YQL Queries'},
-    {value: 'tables-rw', content: 'Tables R/W'},
-    {value: 'topics-rw', content: 'Topics R/W'},
-];
-
 export function Monitoring({monitoringUrl}: MonitoringProps) {
-    const [activeTab, setActiveTab] = React.useState('diagnostics');
-
     if (!monitoringUrl) {
         return (
             <div className={b('empty')}>
@@ -35,22 +20,12 @@ export function Monitoring({monitoringUrl}: MonitoringProps) {
 
     return (
         <div className={b()}>
-            <div className={b('controls')}>
-                <SegmentedRadioGroup
-                    size="l"
-                    value={activeTab}
-                    onUpdate={setActiveTab}
-                    options={MONITORING_TABS}
-                />
-            </div>
-            <div className={b('content')}>
-                <iframe
-                    className={b('iframe')}
-                    src={monitoringUrl}
-                    title="YDB Monitoring Dashboard"
-                    frameBorder="0"
-                />
-            </div>
+            <iframe
+                className={b('iframe')}
+                src={monitoringUrl}
+                title="YDB Monitoring Dashboard"
+                frameBorder="0"
+            />
         </div>
     );
 }

From d9a70c6df93bbd1157b55ddd47fd09e093b7379d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 22 Oct 2025 11:44:20 +0000
Subject: [PATCH 4/4] feat: add internationalization for monitoring component

Co-authored-by: astandrik <8037318+astandrik@users.noreply.github.com>
---
 .../Tenant/Diagnostics/Monitoring/Monitoring.tsx           | 4 +++-
 src/containers/Tenant/Diagnostics/Monitoring/i18n/en.json  | 3 +++
 src/containers/Tenant/Diagnostics/Monitoring/i18n/index.ts | 7 +++++++
 3 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 src/containers/Tenant/Diagnostics/Monitoring/i18n/en.json
 create mode 100644 src/containers/Tenant/Diagnostics/Monitoring/i18n/index.ts

diff --git a/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.tsx b/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.tsx
index 875b7f3f23..54e6cf6570 100644
--- a/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.tsx
+++ b/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.tsx
@@ -1,5 +1,7 @@
 import {cn} from '../../../../utils/cn';
 
+import i18n from './i18n';
+
 import './Monitoring.scss';
 
 const b = cn('ydb-monitoring');
@@ -13,7 +15,7 @@ export function Monitoring({monitoringUrl}: MonitoringProps) {
     if (!monitoringUrl) {
         return (
             <div className={b('empty')}>
-                <div className={b('empty-text')}>Monitoring is not available</div>
+                <div className={b('empty-text')}>{i18n('message_not-available')}</div>
             </div>
         );
     }
diff --git a/src/containers/Tenant/Diagnostics/Monitoring/i18n/en.json b/src/containers/Tenant/Diagnostics/Monitoring/i18n/en.json
new file mode 100644
index 0000000000..d92f426ad5
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/Monitoring/i18n/en.json
@@ -0,0 +1,3 @@
+{
+  "message_not-available": "Monitoring is not available"
+}
diff --git a/src/containers/Tenant/Diagnostics/Monitoring/i18n/index.ts b/src/containers/Tenant/Diagnostics/Monitoring/i18n/index.ts
new file mode 100644
index 0000000000..e6b31862ef
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/Monitoring/i18n/index.ts
@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-monitoring';
+
+export default registerKeysets(COMPONENT, {en});