feat: option to insert additional diagnostics tab

Author: astandrik

.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

@@ -215,6 +215,22 @@ function Diagnostics({additionalTenantProps}: DiagnosticsProps) {
                 });
             }
             default: {
+                const customTab = uiFactory.additionalDiagnosticsTabs?.find(
+                    (tab) => tab.id === activeTab?.id,
+                );
+
+                if (customTab) {
+                    return customTab.render({
+                        type,
+                        subType,
+                        database,
+                        path,
+                        databaseFullPath,
+                        additionalTenantProps,
+                        scrollContainerRef: containerRef,
+                    });
+                }
+
                 return <div>{i18n('no-data')}</div>;
             }
         }

src/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -7,6 +7,8 @@ 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 type {AdditionalDiagnosticsTab} from '../../../uiFactory/types';
+import {uiFactory} from '../../../uiFactory/uiFactory';
 import type {TenantQuery} from '../TenantPages';
 import {TenantTabsGroups} from '../TenantPages';
 import {isDatabaseEntityType, isTopicEntityType} from '../utils/schema';
@@ -233,7 +235,34 @@ export const getPagesByType = (
     const dbContext = isDatabaseEntityType(type) || options?.isTopLevel;
     const seeded = dbContext ? getDatabasePages(options?.databaseType) : base;
 
-    return applyFilters(seeded, type, options);
+    const filtered = applyFilters(seeded, type, options);
+
+    // Add custom tabs from uiFactory if available
+    const customTabsToInsert =
+        uiFactory.additionalDiagnosticsTabs?.filter(
+            (tab: AdditionalDiagnosticsTab) => !tab.shouldShow || tab.shouldShow(type, subType),
+        ) || [];
+
+    if (customTabsToInsert.length === 0) {
+        return filtered;
+    }
+
+    const result = [...filtered];
+
+    customTabsToInsert.forEach((customTab: AdditionalDiagnosticsTab) => {
+        const tabPage = {id: customTab.id, title: customTab.title};
+
+        if (customTab.insertAfter === undefined) {
+            // Append at the end
+            result.push(tabPage);
+        } else {
+            // Insert at specific index
+            const index = Math.max(0, Math.min(customTab.insertAfter, result.length));
+            result.splice(index, 0, tabPage);
+        }
+    });
+
+    return result;
 };
 
 export const useDiagnosticsPageLinkGetter = () => {

src/lib.ts

@@ -35,3 +35,4 @@ export type {AsideNavigationProps} from './containers/AsideNavigation/AsideNavig
 export type {GetMonitoringLink, GetMonitoringClusterLink} from './utils/monitoring';
 
 export {configureUIFactory} from './uiFactory/uiFactory';
+export type {DiagnosticsTabProps, AdditionalDiagnosticsTab} from './uiFactory/types';

src/store/reducers/tenant/types.ts

@@ -14,7 +14,7 @@ export const tenantPageSchema = z.nativeEnum(TENANT_PAGES_IDS);
 export type TenantPage = z.infer<typeof tenantPageSchema>;
 
 export type TenantQueryTab = ValueOf<typeof TENANT_QUERY_TABS_ID>;
-export type TenantDiagnosticsTab = ValueOf<typeof TENANT_DIAGNOSTICS_TABS_IDS>;
+export type TenantDiagnosticsTab = ValueOf<typeof TENANT_DIAGNOSTICS_TABS_IDS> | string;
 export type TenantSummaryTab = ValueOf<typeof TENANT_SUMMARY_TABS_IDS>;
 export type TenantMetricsTab = ValueOf<typeof TENANT_METRICS_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;
+    additionalDiagnosticsTabs?: AdditionalDiagnosticsTab[];
     clusterOrDatabaseAccessError?: Partial<EmptyStateProps>;
 
     healthcheck: {
@@ -85,3 +87,21 @@ export type RenderBackups = (props: {
 export type RenderEvents = (props: {
     scrollContainerRef: React.RefObject<HTMLDivElement>;
 }) => React.ReactNode;
+
+export type DiagnosticsTabProps = {
+    type?: EPathType;
+    subType?: EPathSubType;
+    database: string;
+    path: string;
+    databaseFullPath?: string;
+    additionalTenantProps?: AdditionalTenantsProps;
+    scrollContainerRef: React.RefObject<HTMLDivElement>;
+};
+
+export type AdditionalDiagnosticsTab = {
+    id: string;
+    title: string;
+    render: (props: DiagnosticsTabProps) => React.ReactNode;
+    shouldShow?: (type?: EPathType, subType?: EPathSubType) => boolean;
+    insertAfter?: number;
+};