feat: allow defining a list of links for cluster and database overviews

src/components/TenantNameWrapper/TenantNameWrapper.tsx

@@ -3,6 +3,7 @@ import {DefinitionList, Flex} from '@gravity-ui/uikit';
 import {getTenantPath} from '../../containers/Tenant/TenantPages';
 import type {PreparedTenant} from '../../store/reducers/tenants/types';
 import type {AdditionalTenantsProps} from '../../types/additionalProps';
+import {getDatabaseLinks} from '../../utils/additionalProps';
 import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
@@ -37,23 +38,16 @@ export function TenantNameWrapper({tenant, additionalTenantsProps}: TenantNameWr
     const backend = getTenantBackend(tenant, additionalTenantsProps);
     const isExternalLink = Boolean(backend);
 
-    const monitoringLink = additionalTenantsProps?.getMonitoringLink?.(tenant.Name, tenant.Type);
-    const logsLink = additionalTenantsProps?.getLogsLink?.(tenant.Name);
+    const links = getDatabaseLinks(additionalTenantsProps, tenant?.Name, tenant?.Type);
 
     const infoPopoverContent =
-        (monitoringLink || logsLink) && isUserAllowedToMakeChanges ? (
+        links.length > 0 && isUserAllowedToMakeChanges ? (
             <DefinitionList responsive>
                 <DefinitionList.Item name={i18n('field_links')}>
                     <Flex gap={2} wrap="wrap">
-                        {monitoringLink && (
-                            <LinkWithIcon
-                                title={i18n('field_monitoring-link')}
-                                url={monitoringLink}
-                            />
-                        )}
-                        {logsLink && (
-                            <LinkWithIcon title={i18n('field_logs-link')} url={logsLink} />
-                        )}
+                        {links.map(({title, url}) => (
+                            <LinkWithIcon key={title} title={title} url={url} />
+                        ))}
                     </Flex>
                 </DefinitionList.Item>
             </DefinitionList>

src/containers/AppWithClusters/AppWithClusters.tsx

@@ -28,6 +28,8 @@ export function AppWithClusters({store, history, userSettings, children}: AppWit
                             getLogsLink={uiFactory.getLogsLink}
                             getMonitoringLink={uiFactory.getMonitoringLink}
                             getMonitoringClusterLink={uiFactory.getMonitoringClusterLink}
+                            getDatabaseLinks={uiFactory.getDatabaseLinks}
+                            getClusterLinks={uiFactory.getClusterLinks}
                         />
                     );
                 }}
@@ -39,6 +41,7 @@ export function AppWithClusters({store, history, userSettings, children}: AppWit
                             component={component}
                             getLogsLink={uiFactory.getLogsLink}
                             getMonitoringLink={uiFactory.getMonitoringLink}
+                            getDatabaseLinks={uiFactory.getDatabaseLinks}
                         />
                     );
                 }}

src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx

@@ -1,18 +1,15 @@
 import {ClipboardButton} from '@gravity-ui/uikit';
-import {isNil} from 'lodash';
 
 import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster';
-import type {AdditionalClusterProps, AdditionalTenantsProps} from '../../../types/additionalProps';
-import type {ETenantType} from '../../../types/api/tenant';
+import type {AdditionalClusterProps} from '../../../types/additionalProps';
+import type {GetClusterLinks, GetDatabaseLinks} from '../../../uiFactory/types';
 import {cn} from '../../../utils/cn';
-import {USE_CLUSTER_BALANCER_AS_BACKEND_KEY} from '../../../utils/constants';
-import {useSetting} from '../../../utils/hooks';
 import {useAdditionalNodesProps} from '../../../utils/hooks/useAdditionalNodesProps';
 import type {GetLogsLink} from '../../../utils/logs';
 import type {GetMonitoringClusterLink, GetMonitoringLink} from '../../../utils/monitoring';
-import {getCleanBalancerValue, prepareBackendFromBalancer} from '../../../utils/parseBalancer';
-import {getBackendFromBalancerAndNodeId} from '../../../utils/prepareBackend';
+import {getCleanBalancerValue} from '../../../utils/parseBalancer';
 import type {Cluster} from '../../Cluster/Cluster';
+import {useAdditionalTenantsProps} from '../utils/useAdditionalTenantsProps';
 
 import './ExtendedCluster.scss';
 
@@ -33,133 +30,68 @@ const getAdditionalBalancerInfo = (balancer: string) => {
 };
 
 interface GetAdditionalClusterProps {
-    clusterName: string | undefined;
-    monitoring: string | undefined;
-    balancer: string | undefined;
     getMonitoringClusterLink?: GetMonitoringClusterLink;
+    getClusterLinks?: GetClusterLinks;
 }
 
-const getAdditionalClusterProps = ({
-    clusterName,
-    monitoring,
-    balancer,
+const useAdditionalClusterProps = ({
     getMonitoringClusterLink,
+    getClusterLinks,
 }: GetAdditionalClusterProps) => {
-    const additionalClusterProps: AdditionalClusterProps = {};
+    const clusterInfo = useClusterBaseInfo();
+    const {name: clusterName, balancer, monitoring} = clusterInfo;
 
+    const additionalClusterProps: AdditionalClusterProps = {};
+    additionalClusterProps.links = [];
     if (monitoring && getMonitoringClusterLink) {
         const clusterLink = getMonitoringClusterLink(monitoring, clusterName);
 
         if (clusterLink) {
-            additionalClusterProps.links = [{title: 'Monitoring', url: clusterLink}];
+            additionalClusterProps.links.push({title: 'Monitoring', url: clusterLink});
         }
     }
 
+    if (getClusterLinks) {
+        const clusterLinks = getClusterLinks({clusterInfo});
+        additionalClusterProps.links.push(...clusterLinks);
+    }
+
     if (balancer) {
         additionalClusterProps.info = [getAdditionalBalancerInfo(balancer)];
     }
 
     return additionalClusterProps;
 };
 
-interface GetAdditionalTenantsProps {
-    clusterName: string | undefined;
-    monitoring: string | undefined;
-    balancer: string | undefined;
-    logging: string | undefined;
-    useClusterBalancerAsBackend: boolean | undefined;
-    getMonitoringLink?: GetMonitoringLink;
-    getLogsLink?: GetLogsLink;
-}
-
-const getAdditionalTenantsProps = ({
-    clusterName,
-    monitoring,
-    balancer,
-    logging,
-    useClusterBalancerAsBackend,
-    getMonitoringLink,
-    getLogsLink,
-}: GetAdditionalTenantsProps) => {
-    const additionalTenantsProps: AdditionalTenantsProps = {};
-
-    additionalTenantsProps.prepareTenantBackend = (nodeId) => {
-        // Balancer value is used to create path, so it's necessary
-        if (!balancer) {
-            return undefined;
-        }
-
-        if (useClusterBalancerAsBackend) {
-            return prepareBackendFromBalancer(balancer);
-        }
-
-        if (isNil(nodeId)) {
-            return undefined;
-        }
-
-        return getBackendFromBalancerAndNodeId(nodeId, balancer) ?? undefined;
-    };
-
-    if (monitoring && getMonitoringLink) {
-        additionalTenantsProps.getMonitoringLink = (dbName?: string, dbType?: ETenantType) => {
-            if (dbName && dbType) {
-                return getMonitoringLink({monitoring, dbName, dbType, clusterName});
-            }
-
-            return null;
-        };
-    }
-
-    if (logging && getLogsLink) {
-        additionalTenantsProps.getLogsLink = (dbName?: string) => {
-            if (dbName) {
-                return getLogsLink({
-                    dbName,
-                    logging,
-                });
-            }
-
-            return null;
-        };
-    }
-
-    return additionalTenantsProps;
-};
-
 interface ExtendedClusterProps {
     component: typeof Cluster;
     getMonitoringLink?: GetMonitoringLink;
     getMonitoringClusterLink?: GetMonitoringClusterLink;
     getLogsLink?: GetLogsLink;
+    getDatabaseLinks?: GetDatabaseLinks;
+    getClusterLinks?: GetClusterLinks;
 }
 export function ExtendedCluster({
     component: ClusterComponent,
     getMonitoringLink,
     getMonitoringClusterLink,
     getLogsLink,
+    getDatabaseLinks,
+    getClusterLinks,
 }: ExtendedClusterProps) {
     const additionalNodesProps = useAdditionalNodesProps();
-    const {name, balancer, monitoring, logging} = useClusterBaseInfo();
-
-    const [useClusterBalancerAsBackend] = useSetting<boolean>(USE_CLUSTER_BALANCER_AS_BACKEND_KEY);
 
     return (
         <div className={b()}>
             <ClusterComponent
-                additionalClusterProps={getAdditionalClusterProps({
-                    clusterName: name,
-                    monitoring,
-                    balancer,
+                additionalClusterProps={useAdditionalClusterProps({
                     getMonitoringClusterLink,
+                    getClusterLinks,
                 })}
-                additionalTenantsProps={getAdditionalTenantsProps({
-                    clusterName: name,
-                    monitoring,
-                    balancer,
-                    logging,
-                    useClusterBalancerAsBackend,
+                additionalTenantsProps={useAdditionalTenantsProps({
                     getMonitoringLink,
                     getLogsLink,
+                    getDatabaseLinks,
                 })}
                 additionalNodesProps={additionalNodesProps}
             />

src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx

@@ -1,47 +1,29 @@
-import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster';
-import type {ETenantType} from '../../../types/api/tenant';
+import type {GetDatabaseLinks} from '../../../uiFactory/types';
 import {useAdditionalNodesProps} from '../../../utils/hooks/useAdditionalNodesProps';
 import type {GetLogsLink} from '../../../utils/logs';
 import type {GetMonitoringLink} from '../../../utils/monitoring';
 import type {Tenant} from '../../Tenant/Tenant';
+import {useAdditionalTenantsProps} from '../utils/useAdditionalTenantsProps';
 
 export interface ExtendedTenantProps {
     component: typeof Tenant;
     getMonitoringLink?: GetMonitoringLink;
     getLogsLink?: GetLogsLink;
+    getDatabaseLinks?: GetDatabaseLinks;
 }
 
 export function ExtendedTenant({
     component: TenantComponent,
     getMonitoringLink,
     getLogsLink,
+    getDatabaseLinks,
 }: ExtendedTenantProps) {
-    const {monitoring, logging} = useClusterBaseInfo();
     const additionalNodesProps = useAdditionalNodesProps();
-
-    const additionalTenantProps = {
-        getMonitoringLink: (dbName?: string, dbType?: ETenantType) => {
-            if (monitoring && dbName && dbType && getMonitoringLink) {
-                return getMonitoringLink({
-                    monitoring,
-                    dbName,
-                    dbType,
-                });
-            }
-
-            return null;
-        },
-        getLogsLink: (dbName?: string) => {
-            if (logging && dbName && getLogsLink) {
-                return getLogsLink({
-                    dbName,
-                    logging,
-                });
-            }
-
-            return null;
-        },
-    };
+    const additionalTenantProps = useAdditionalTenantsProps({
+        getMonitoringLink,
+        getLogsLink,
+        getDatabaseLinks,
+    });
 
     return (
         <TenantComponent