feat: add backups page with custom render (#2442)

Author: Raubzeug

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -13,6 +13,7 @@ import {
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
 import {setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
 import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../types/additionalProps';
+import {uiFactory} from '../../../uiFactory/uiFactory';
 import {cn} from '../../../utils/cn';
 import {useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
 import {Heatmap} from '../../Heatmap';
@@ -49,7 +50,6 @@ const b = cn('kv-tenant-diagnostics');
 function Diagnostics(props: DiagnosticsProps) {
     const {path, database, type, subType} = useCurrentSchema();
     const containerRef = React.useRef<HTMLDivElement>(null);
-
     const dispatch = useTypedDispatch();
     const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview} = useTypedSelector(
         (state) => state.tenant,
@@ -65,6 +65,7 @@ function Diagnostics(props: DiagnosticsProps) {
         hasFeatureFlags,
         hasTopicData,
         isTopLevel: path === database,
+        hasBackups: typeof uiFactory.renderBackups === 'function',
     });
     let activeTab = pages.find((el) => el.id === diagnosticsTab);
     if (!activeTab) {
@@ -77,6 +78,7 @@ function Diagnostics(props: DiagnosticsProps) {
         }
     }, [activeTab, diagnosticsTab, dispatch]);
 
+    // eslint-disable-next-line complexity
     const renderTabContent = () => {
         switch (activeTab?.id) {
             case TENANT_DIAGNOSTICS_TABS_IDS.overview: {
@@ -161,6 +163,12 @@ function Diagnostics(props: DiagnosticsProps) {
             case TENANT_DIAGNOSTICS_TABS_IDS.operations: {
                 return <Operations database={tenantName} />;
             }
+            case TENANT_DIAGNOSTICS_TABS_IDS.backups: {
+                return uiFactory.renderBackups?.({
+                    database: tenantName,
+                    scrollContainerRef: containerRef,
+                });
+            }
             default: {
                 return <div>No data...</div>;
             }

src/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -37,6 +37,10 @@ const access = {
     id: TENANT_DIAGNOSTICS_TABS_IDS.access,
     title: 'Access',
 };
+const backups = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.backups,
+    title: 'Backups',
+};
 
 const nodes = {
     id: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
@@ -111,6 +115,7 @@ const DATABASE_PAGES = [
     configs,
     access,
     operations,
+    backups,
 ];
 
 const TABLE_PAGES = [overview, schema, topShards, nodes, graph, tablets, hotKeys, describe, access];
@@ -166,7 +171,12 @@ const pathSubTypeToPages: Record<EPathSubType, Page[] | undefined> = {
 export const getPagesByType = (
     type?: EPathType,
     subType?: EPathSubType,
-    options?: {hasFeatureFlags?: boolean; hasTopicData?: boolean; isTopLevel?: boolean},
+    options?: {
+        hasFeatureFlags?: boolean;
+        hasTopicData?: boolean;
+        isTopLevel?: boolean;
+        hasBackups?: boolean;
+    },
 ) => {
     const subTypePages = subType ? pathSubTypeToPages[subType] : undefined;
     const typePages = type ? pathTypeToPages[type] : undefined;
@@ -181,6 +191,9 @@ export const getPagesByType = (
             return pages.filter((item) => item.id !== TENANT_DIAGNOSTICS_TABS_IDS.configs);
         }
     }
+    if (!options?.hasBackups) {
+        return pages.filter((item) => item.id !== TENANT_DIAGNOSTICS_TABS_IDS.backups);
+    }
     return pages;
 };
 

src/store/reducers/tenant/constants.ts

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

src/uiFactory/types.ts

@@ -1,3 +1,5 @@
+import type React from 'react';
+
 import type {
     CommonIssueType,
     GetHealthcheckViewTitles,
@@ -28,6 +30,11 @@ export interface UIFactory<H extends string = CommonIssueType> {
     getDatabaseLinks?: GetDatabaseLinks;
     getClusterLinks?: GetClusterLinks;
 
+    renderBackups?: (props: {
+        database: string;
+        scrollContainerRef: React.RefObject<HTMLDivElement>;
+    }) => React.ReactNode;
+
     healthcheck: {
         getHealthckechViewTitles: GetHealthcheckViewTitles<H>;
         getHealthcheckViewsOrder: GetHealthcheckViewsOrder<H>;