feat: renderMonitoring to diagnostics

src/containers/Header/Header.tsx

@@ -28,7 +28,7 @@ import {clustersApi} from '../../store/reducers/clusters/clusters';
 import {tenantApi} from '../../store/reducers/tenant/tenant';
 import {uiFactory} from '../../uiFactory/uiFactory';
 import {cn} from '../../utils/cn';
-import {DEVELOPER_UI_TITLE} from '../../utils/constants';
+import {DEVELOPER_UI_TITLE, MONITORING_UI_TITLE} from '../../utils/constants';
 import {createDeveloperUIInternalPageHref} from '../../utils/developerUI/developerUI';
 import {useTypedSelector} from '../../utils/hooks';
 import {
@@ -56,7 +56,7 @@ function Header() {
 
     const isMetaDatabasesAvailable = useDatabasesAvailable();
 
-    const {title: clusterTitle} = useClusterBaseInfo();
+    const {title: clusterTitle, monitoring} = useClusterBaseInfo();
 
     const database = useDatabaseFromQuery();
 
@@ -93,6 +93,16 @@ function Header() {
     const {currentData: databaseData, isLoading: isDatabaseDataLoading} =
         tenantApi.useGetTenantInfoQuery(params);
 
+    const monitoringLinkUrl =
+        monitoring && uiFactory.getMonitoringLink && databaseData?.Name && databaseData?.Type
+            ? uiFactory.getMonitoringLink({
+                  monitoring,
+                  clusterName,
+                  dbName: databaseData.Name,
+                  dbType: databaseData.Type,
+              })
+            : null;
+
     const breadcrumbItems = React.useMemo(() => {
         let options = {
             ...pageBreadcrumbsOptions,
@@ -128,6 +138,15 @@ function Header() {
         }
 
         if (isDatabasePage && database) {
+            if (monitoringLinkUrl) {
+                elements.push(
+                    <Button view="flat" href={monitoringLinkUrl} target="_blank">
+                        {MONITORING_UI_TITLE}
+                        <Icon data={ArrowUpRightFromSquare} />
+                    </Button>,
+                );
+            }
+
             elements.push(
                 <Button view={'flat'} onClick={() => getConnectToDBDialog({database})}>
                     <Icon data={PlugConnection} />

src/containers/Tenant/Diagnostics/Diagnostics.scss

@@ -8,6 +8,10 @@
 
     height: 100%;
 
+    &__tab-badge {
+        margin-left: var(--g-spacing-2);
+    }
+
     &__header-wrapper {
         padding: 0 var(--g-spacing-5);
 

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 
-import {Tab, TabList, TabProvider} from '@gravity-ui/uikit';
+import {TabList, TabProvider} from '@gravity-ui/uikit';
 import {Helmet} from 'react-helmet-async';
 
 import {AutoRefreshControl} from '../../../components/AutoRefreshControl/AutoRefreshControl';
 import {DrawerContextProvider} from '../../../components/Drawer/DrawerContext';
-import {InternalLink} from '../../../components/InternalLink';
 import {
     useConfigAvailable,
     useTopicDataAvailable,
@@ -32,6 +31,7 @@ import {Consumers} from './Consumers';
 import Describe from './Describe/Describe';
 import DetailedOverview from './DetailedOverview/DetailedOverview';
 import {getPagesByType, useDiagnosticsPageLinkGetter} from './DiagnosticsPages';
+import {DiagnosticsTabItem} from './DiagnosticsTabItem';
 import {HotKeys} from './HotKeys/HotKeys';
 import {NetworkWrapper} from './Network/NetworkWrapper';
 import {Partitions} from './Partitions/Partitions';
@@ -71,6 +71,7 @@ function Diagnostics({additionalTenantProps}: DiagnosticsProps) {
         hasBackups: typeof uiFactory.renderBackups === 'function' && Boolean(controlPlane),
         hasConfigs: isViewerUser && hasConfigs,
         hasAccess: uiFactory.hasAccess,
+        hasMonitoring: typeof uiFactory.renderMonitoring === 'function',
         databaseType,
     });
     let activeTab = pages.find((el) => el.id === diagnosticsTab);
@@ -214,6 +215,17 @@ function Diagnostics({additionalTenantProps}: DiagnosticsProps) {
                     scrollContainerRef: containerRef,
                 });
             }
+            case TENANT_DIAGNOSTICS_TABS_IDS.monitoring: {
+                return uiFactory.renderMonitoring?.({
+                    type,
+                    subType,
+                    database,
+                    path,
+                    databaseFullPath,
+                    additionalTenantProps,
+                    scrollContainerRef: containerRef,
+                });
+            }
             default: {
                 return <div>{i18n('no-data')}</div>;
             }
@@ -225,16 +237,15 @@ function Diagnostics({additionalTenantProps}: DiagnosticsProps) {
                 <div className={b('tabs')}>
                     <TabProvider value={activeTab?.id}>
                         <TabList size="l">
-                            {pages.map(({id, title}) => {
-                                const linkPath = getDiagnosticsPageLink(id);
-                                return (
-                                    <Tab key={id} value={id}>
-                                        <InternalLink to={linkPath} as="tab">
-                                            {title}
-                                        </InternalLink>
-                                    </Tab>
-                                );
-                            })}
+                            {pages.map(({id, title, badge}) => (
+                                <DiagnosticsTabItem
+                                    key={id}
+                                    id={id}
+                                    title={title}
+                                    linkPath={getDiagnosticsPageLink(id)}
+                                    badge={badge}
+                                />
+                            ))}
                         </TabList>
                     </TabProvider>
                     <AutoRefreshControl />

src/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import type {LabelProps} from '@gravity-ui/uikit';
 import {StringParam, useQueryParams} from 'use-query-params';
 
 import {getTenantPath} from '../../../routes';
@@ -11,9 +12,16 @@ import type {TenantQuery} from '../TenantPages';
 import {TenantTabsGroups} from '../TenantPages';
 import {isDatabaseEntityType, isTopicEntityType} from '../utils/schema';
 
+interface Badge {
+    text: string;
+    theme?: LabelProps['theme'];
+    size?: LabelProps['size'];
+}
+
 type Page = {
     id: TenantDiagnosticsTab;
     title: string;
+    badge?: Badge;
 };
 
 interface GetPagesOptions {
@@ -22,6 +30,7 @@ interface GetPagesOptions {
     hasBackups?: boolean;
     hasConfigs?: boolean;
     hasAccess?: boolean;
+    hasMonitoring?: boolean;
     databaseType?: ETenantType;
 }
 
@@ -110,12 +119,23 @@ const operations = {
     title: 'Operations',
 };
 
+const monitoring = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.monitoring,
+    title: 'Monitoring',
+    badge: {
+        text: 'New',
+        theme: 'normal' as const,
+        size: 'xs' as const,
+    },
+};
+
 const ASYNC_REPLICATION_PAGES = [overview, tablets, describe, access];
 
 const TRANSFER_PAGES = [overview, tablets, describe, access];
 
 const DATABASE_PAGES = [
     overview,
+    monitoring,
     topQueries,
     topShards,
     nodes,
@@ -131,6 +151,7 @@ const DATABASE_PAGES = [
 
 const SERVERLESS_DATABASE_PAGES = [
     overview,
+    monitoring,
     topQueries,
     topShards,
     tablets,
@@ -220,6 +241,9 @@ function applyFilters(pages: Page[], type?: EPathType, options: GetPagesOptions
     if (!options.hasAccess) {
         removals.push(TENANT_DIAGNOSTICS_TABS_IDS.access);
     }
+    if (!options.hasMonitoring) {
+        removals.push(TENANT_DIAGNOSTICS_TABS_IDS.monitoring);
+    }
 
     return result.filter((p) => !removals.includes(p.id));
 }

src/containers/Tenant/Diagnostics/DiagnosticsTabItem.tsx

@@ -0,0 +1,33 @@
+import type {LabelProps} from '@gravity-ui/uikit';
+import {Label, Tab} from '@gravity-ui/uikit';
+
+import {InternalLink} from '../../../components/InternalLink';
+import {cn} from '../../../utils/cn';
+
+const b = cn('kv-tenant-diagnostics');
+
+interface DiagnosticsTabItemProps {
+    id: string;
+    title: string;
+    linkPath: string;
+    badge?: {
+        text: string;
+        theme?: LabelProps['theme'];
+        size?: LabelProps['size'];
+    };
+}
+
+export function DiagnosticsTabItem({id, title, linkPath, badge}: DiagnosticsTabItemProps) {
+    return (
+        <Tab key={id} value={id}>
+            <InternalLink to={linkPath} as="tab">
+                {title}
+                {badge && (
+                    <Label className={b('tab-badge')} theme={badge.theme} size={badge.size}>
+                        {badge.text}
+                    </Label>
+                )}
+            </InternalLink>
+        </Tab>
+    );
+}

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

@@ -1,17 +1,27 @@
+import {DisplayPulse} from '@gravity-ui/icons';
 import {Button, Flex, HelpMark, Icon, Label} from '@gravity-ui/uikit';
 
 import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
 import {LoaderWrapper} from '../../../../components/LoaderWrapper/LoaderWrapper';
 import {QueriesActivityBar} from '../../../../components/QueriesActivityBar/QueriesActivityBar';
 import {useDatabasesAvailable} from '../../../../store/reducers/capabilities/hooks';
 import {overviewApi} from '../../../../store/reducers/overview/overview';
-import {TENANT_METRICS_TABS_IDS} from '../../../../store/reducers/tenant/constants';
-import {tenantApi} from '../../../../store/reducers/tenant/tenant';
+import {
+    TENANT_DIAGNOSTICS_TABS_IDS,
+    TENANT_METRICS_TABS_IDS,
+    TENANT_PAGES_IDS,
+} from '../../../../store/reducers/tenant/constants';
+import {
+    setDiagnosticsTab,
+    setTenantPage,
+    tenantApi,
+} from '../../../../store/reducers/tenant/tenant';
 import {calculateTenantMetrics} from '../../../../store/reducers/tenants/utils';
 import type {AdditionalTenantsProps} from '../../../../types/additionalProps';
-import {getDatabaseLinks} from '../../../../utils/additionalProps';
+import {uiFactory} from '../../../../uiFactory/uiFactory';
+import {getInfoTabLinks} from '../../../../utils/additionalProps';
 import {TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
-import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks';
+import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
 import {useClusterNameFromQuery} from '../../../../utils/hooks/useDatabaseFromQuery';
 import {mapDatabaseTypeToDBName} from '../../utils/schema';
 
@@ -40,6 +50,7 @@ export function TenantOverview({
     const {metricsTab} = useTypedSelector((state) => state.tenant);
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const clusterName = useClusterNameFromQuery();
+    const dispatch = useTypedDispatch();
 
     const isMetaDatabasesAvailable = useDatabasesAvailable();
 
@@ -176,28 +187,44 @@ export function TenantOverview({
         }
     };
 
-    const links = getDatabaseLinks(additionalTenantProps, Name, Type);
+    const links = getInfoTabLinks(additionalTenantProps, Name, Type);
+    const monitoringTabAvailable = Boolean(uiFactory.renderMonitoring);
+
+    const handleOpenMonitoring = () => {
+        dispatch(setTenantPage(TENANT_PAGES_IDS.diagnostics));
+        dispatch(setDiagnosticsTab(TENANT_DIAGNOSTICS_TABS_IDS.monitoring));
+    };
 
     return (
         <LoaderWrapper loading={tenantLoading}>
             <div className={b()}>
                 <div className={b('info')}>
-                    <div className={b('top-label')}>{tenantType}</div>
+                    <Flex alignItems="center" gap="2" className={b('top-label')}>
+                        {tenantType}
+                        {monitoringTabAvailable && (
+                            <Button view="normal" onClick={handleOpenMonitoring}>
+                                <Icon data={DisplayPulse} size={16} />
+                                {i18n('action_open-monitoring')}
+                            </Button>
+                        )}
+                    </Flex>
                     <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}
-                                >
-                                    <Icon data={icon} />
-                                </Button>
-                            ))}
-                        </Flex>
+                        {links.length > 0 && (
+                            <Flex gap="2">
+                                {links.map(({title, url, icon}) => (
+                                    <Button
+                                        key={title}
+                                        href={url}
+                                        target="_blank"
+                                        size="xs"
+                                        title={title}
+                                    >
+                                        <Icon data={icon} />
+                                    </Button>
+                                ))}
+                            </Flex>
+                        )}
                     </Flex>
                     <Flex direction="column" gap={4}>
                         {!isServerless && <HealthcheckPreview database={database} />}

src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json

@@ -1,4 +1,5 @@
 {
+  "action_open-monitoring": "Monitoring",
   "top-nodes.empty-data": "No such nodes",
   "title_top-nodes-load": "Top nodes by load",
   "title_top-nodes-pool": "Top nodes by pools usage",

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

@@ -14,6 +14,7 @@ import {selectIsDirty, selectUserInput} from '../../../../store/reducers/query/q
 import {schemaApi} from '../../../../store/reducers/schema/schema';
 import {tableSchemaDataApi} from '../../../../store/reducers/tableSchemaData';
 import type {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
+import {uiFactory} from '../../../../uiFactory/uiFactory';
 import {valueIsDefined} from '../../../../utils';
 import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
 import {getConfirmation} from '../../../../utils/hooks/withConfirmation/useChangeInputWithConfirmation';
@@ -144,6 +145,7 @@ export function SchemaTree(props: SchemaTreeProps) {
                 getConnectToDBDialog,
                 schemaData: actionsSchemaData,
                 isSchemaDataLoading: isActionsDataFetching,
+                hasMonitoring: typeof uiFactory.renderMonitoring === 'function',
             },
             databaseFullPath,
             database,

src/containers/Tenant/i18n/en.json

@@ -28,6 +28,7 @@
   "actions.connectToDB": "Connect to DB",
   "actions.dropIndex": "Drop index",
   "actions.openPreview": "Open preview",
+  "actions.openMonitoring": "Monitoring",
   "actions.createTable": "Create table...",
   "actions.createExternalTable": "Create external table...",
   "actions.createTopic": "Create topic...",