From c797a88f25f76314c9b267bc2c0513a6e4e7eddb Mon Sep 17 00:00:00 2001
From: Elena Makarova <el-makarova@yandex-team.ru>
Date: Fri, 20 Jun 2025 17:34:14 +0300
Subject: [PATCH 1/2] feat: add backups page with custom render

---
 src/containers/Tenant/Diagnostics/Diagnostics.tsx |  6 ++++++
 .../Tenant/Diagnostics/DiagnosticsPages.ts        | 15 ++++++++++++++-
 src/store/reducers/tenant/constants.ts            |  1 +
 src/uiFactory/types.ts                            |  4 ++++
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.tsx b/src/containers/Tenant/Diagnostics/Diagnostics.tsx
index efb7917a00..df2ba0724c 100644
--- a/src/containers/Tenant/Diagnostics/Diagnostics.tsx
+++ b/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';
@@ -65,6 +66,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 +79,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 +164,9 @@ function Diagnostics(props: DiagnosticsProps) {
             case TENANT_DIAGNOSTICS_TABS_IDS.operations: {
                 return <Operations database={tenantName} />;
             }
+            case TENANT_DIAGNOSTICS_TABS_IDS.backups: {
+                return uiFactory.renderBackups?.();
+            }
             default: {
                 return <div>No data...</div>;
             }
diff --git a/src/containers/Tenant/Diagnostics/DiagnosticsPages.ts b/src/containers/Tenant/Diagnostics/DiagnosticsPages.ts
index 79b4f23ba4..673c0c2321 100644
--- a/src/containers/Tenant/Diagnostics/DiagnosticsPages.ts
+++ b/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;
 };
 
diff --git a/src/store/reducers/tenant/constants.ts b/src/store/reducers/tenant/constants.ts
index 0deb05dd74..d448a70731 100644
--- a/src/store/reducers/tenant/constants.ts
+++ b/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 = {
diff --git a/src/uiFactory/types.ts b/src/uiFactory/types.ts
index b6b9256e95..6d59160e30 100644
--- a/src/uiFactory/types.ts
+++ b/src/uiFactory/types.ts
@@ -1,3 +1,5 @@
+import type React from 'react';
+
 import type {
     CommonIssueType,
     GetHealthcheckViewTitles,
@@ -28,6 +30,8 @@ export interface UIFactory<H extends string = CommonIssueType> {
     getDatabaseLinks?: GetDatabaseLinks;
     getClusterLinks?: GetClusterLinks;
 
+    renderBackups?: () => React.ReactNode;
+
     healthcheck: {
         getHealthckechViewTitles: GetHealthcheckViewTitles<H>;
         getHealthcheckViewsOrder: GetHealthcheckViewsOrder<H>;

From 0ce2f0920fc612697da915bda87751fef53c6173 Mon Sep 17 00:00:00 2001
From: Elena Makarova <el-makarova@yandex-team.ru>
Date: Fri, 20 Jun 2025 18:10:17 +0300
Subject: [PATCH 2/2] fix: add props

---
 src/containers/Tenant/Diagnostics/Diagnostics.tsx | 6 ++++--
 src/uiFactory/types.ts                            | 5 ++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.tsx b/src/containers/Tenant/Diagnostics/Diagnostics.tsx
index df2ba0724c..72884c4ac3 100644
--- a/src/containers/Tenant/Diagnostics/Diagnostics.tsx
+++ b/src/containers/Tenant/Diagnostics/Diagnostics.tsx
@@ -50,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,
@@ -165,7 +164,10 @@ function Diagnostics(props: DiagnosticsProps) {
                 return <Operations database={tenantName} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.backups: {
-                return uiFactory.renderBackups?.();
+                return uiFactory.renderBackups?.({
+                    database: tenantName,
+                    scrollContainerRef: containerRef,
+                });
             }
             default: {
                 return <div>No data...</div>;
diff --git a/src/uiFactory/types.ts b/src/uiFactory/types.ts
index 6d59160e30..11388b6137 100644
--- a/src/uiFactory/types.ts
+++ b/src/uiFactory/types.ts
@@ -30,7 +30,10 @@ export interface UIFactory<H extends string = CommonIssueType> {
     getDatabaseLinks?: GetDatabaseLinks;
     getClusterLinks?: GetClusterLinks;
 
-    renderBackups?: () => React.ReactNode;
+    renderBackups?: (props: {
+        database: string;
+        scrollContainerRef: React.RefObject<HTMLDivElement>;
+    }) => React.ReactNode;
 
     healthcheck: {
         getHealthckechViewTitles: GetHealthcheckViewTitles<H>;