feat: renderMonitoring to diagnostics

.rooignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+playwright-artifacts
+
+# production
+/build
+/dist
+*.zip
+
+# misc
+.idea
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.vscode
+.cursor
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.env
+
+
+embedded-ui.tar.bz2

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -214,6 +214,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>;
             }

src/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -7,6 +7,7 @@ import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/consta
 import type {TenantDiagnosticsTab} from '../../../store/reducers/tenant/types';
 import {EPathSubType, EPathType} from '../../../types/api/schema';
 import type {ETenantType} from '../../../types/api/tenant';
+import {uiFactory} from '../../../uiFactory/uiFactory';
 import type {TenantQuery} from '../TenantPages';
 import {TenantTabsGroups} from '../TenantPages';
 import {isDatabaseEntityType, isTopicEntityType} from '../utils/schema';
@@ -110,6 +111,11 @@ const operations = {
     title: 'Operations',
 };
 
+const monitoring = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.monitoring,
+    title: 'Monitoring',
+};
+
 const ASYNC_REPLICATION_PAGES = [overview, tablets, describe, access];
 
 const TRANSFER_PAGES = [overview, tablets, describe, access];
@@ -233,7 +239,14 @@ export const getPagesByType = (
     const dbContext = isDatabaseEntityType(type) || options?.isTopLevel;
     const seeded = dbContext ? getDatabasePages(options?.databaseType) : base;
 
-    return applyFilters(seeded, type, options);
+    const result = applyFilters(seeded, type, options);
+
+    // Add monitoring tab as second tab if renderMonitoring is available
+    if (uiFactory.renderMonitoring) {
+        result.splice(1, 0, monitoring);
+    }
+
+    return result;
 };
 
 export const useDiagnosticsPageLinkGetter = () => {

src/store/reducers/tenant/constants.ts

@@ -30,6 +30,7 @@ export const TENANT_DIAGNOSTICS_TABS_IDS = {
     operations: 'operations',
     access: 'access',
     backups: 'backups',
+    monitoring: 'monitoring',
 } as const;
 
 export const TENANT_SUMMARY_TABS_IDS = {

src/uiFactory/types.ts

@@ -9,8 +9,9 @@ import type {
 import type {ClusterInfo} from '../store/reducers/cluster/cluster';
 import type {IssuesTree} from '../store/reducers/healthcheckInfo/types';
 import type {PreparedTenant} from '../store/reducers/tenants/types';
-import type {ClusterLink, DatabaseLink} from '../types/additionalProps';
+import type {AdditionalTenantsProps, ClusterLink, DatabaseLink} from '../types/additionalProps';
 import type {MetaBaseClusterInfo} from '../types/api/meta';
+import type {EPathSubType, EPathType} from '../types/api/schema/schema';
 import type {ETenantType} from '../types/api/tenant';
 import type {GetLogsLink} from '../utils/logs';
 import type {GetMonitoringClusterLink, GetMonitoringLink} from '../utils/monitoring';
@@ -35,6 +36,7 @@ export interface UIFactory<H extends string = CommonIssueType> {
 
     renderBackups?: RenderBackups;
     renderEvents?: RenderEvents;
+    renderMonitoring?: RenderMonitoring;
     clusterOrDatabaseAccessError?: Partial<EmptyStateProps>;
 
     healthcheck: {
@@ -85,3 +87,13 @@ export type RenderBackups = (props: {
 export type RenderEvents = (props: {
     scrollContainerRef: React.RefObject<HTMLDivElement>;
 }) => React.ReactNode;
+
+export type RenderMonitoring = (props: {
+    type?: EPathType;
+    subType?: EPathSubType;
+    database: string;
+    path: string;
+    databaseFullPath?: string;
+    additionalTenantProps?: AdditionalTenantsProps;
+    scrollContainerRef: React.RefObject<HTMLDivElement>;
+}) => React.ReactNode;