@@ -227,10 +244,21 @@ function Diagnostics({additionalTenantProps}: DiagnosticsProps) {
{pages.map(({id, title}) => {
const linkPath = getDiagnosticsPageLink(id);
+ const isMonitoringTab =
+ id === TENANT_DIAGNOSTICS_TABS_IDS.monitoring;
return (
{title}
+ {isMonitoringTab && showNewLabel && (
+
+ )}
);
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..fa3e31f031
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.scss
@@ -0,0 +1,28 @@
+@use '../../../../styles/mixins';
+
+.ydb-monitoring {
+ width: 100%;
+ height: 100%;
+
+ &__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..54e6cf6570
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/Monitoring/Monitoring.tsx
@@ -0,0 +1,33 @@
+import {cn} from '../../../../utils/cn';
+
+import i18n from './i18n';
+
+import './Monitoring.scss';
+
+const b = cn('ydb-monitoring');
+
+interface MonitoringProps {
+ database: string;
+ monitoringUrl?: string;
+}
+
+export function Monitoring({monitoringUrl}: MonitoringProps) {
+ if (!monitoringUrl) {
+ return (
+
+
{i18n('message_not-available')}
+
+ );
+ }
+
+ return (
+
+
+
+ );
+}
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});
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({
{renderName()}
- {links.map(({title, url, icon}) => (
-
- ))}
+ );
+
+ const button = (
+
+ );
+
+ return isMonitoring ? (
+
+ {button}
+
+ ) : (
+ button
+ );
+ })}
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: ,
};
+ const monitoringItem = {
+ text: i18n('actions.monitoring'),
+ action: actions.goToMonitoring,
+ iconStart: ,
+ };
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',