fix: use render pattern

Author: astandrik

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -214,23 +214,18 @@ function Diagnostics({additionalTenantProps}: DiagnosticsProps) {
                     scrollContainerRef: containerRef,
                 });
             }
+            case TENANT_DIAGNOSTICS_TABS_IDS.monitoring: {
+                return uiFactory.renderMonitoring?.({
+                    type,
+                    subType,
+                    database,
+                    path,
+                    databaseFullPath,
+                    additionalTenantProps,
+                    scrollContainerRef: containerRef,
+                });
+            }
             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,7 +7,6 @@ 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';
@@ -112,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];
@@ -235,33 +239,13 @@ export const getPagesByType = (
     const dbContext = isDatabaseEntityType(type) || options?.isTopLevel;
     const seeded = dbContext ? getDatabasePages(options?.databaseType) : base;
 
-    const filtered = applyFilters(seeded, type, options);
+    const result = 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;
+    // Add monitoring tab as second tab if renderMonitoring is available
+    if (uiFactory.renderMonitoring) {
+        result.splice(1, 0, monitoring);
     }
 
-    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;
 };
 

src/lib.ts

@@ -35,4 +35,3 @@ 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/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/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> | string;
+export type TenantDiagnosticsTab = ValueOf<typeof TENANT_DIAGNOSTICS_TABS_IDS>;
 export type TenantSummaryTab = ValueOf<typeof TENANT_SUMMARY_TABS_IDS>;
 export type TenantMetricsTab = ValueOf<typeof TENANT_METRICS_TABS_IDS>;
 

src/uiFactory/types.ts

@@ -36,7 +36,7 @@ export interface UIFactory<H extends string = CommonIssueType> {
 
     renderBackups?: RenderBackups;
     renderEvents?: RenderEvents;
-    additionalDiagnosticsTabs?: AdditionalDiagnosticsTab[];
+    renderMonitoring?: RenderMonitoring;
     clusterOrDatabaseAccessError?: Partial<EmptyStateProps>;
 
     healthcheck: {
@@ -88,20 +88,12 @@ export type RenderEvents = (props: {
     scrollContainerRef: React.RefObject<HTMLDivElement>;
 }) => React.ReactNode;
 
-export type DiagnosticsTabProps = {
+export type RenderMonitoring = (props: {
     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;
-};
+}) => React.ReactNode;