feat: add database hyperlink to logging service

src/components/LogsButton/LogsButton.tsx

@@ -0,0 +1,17 @@
+import {FileText} from '@gravity-ui/icons';
+import type {ButtonSize} from '@gravity-ui/uikit';
+import {Button, Icon} from '@gravity-ui/uikit';
+
+interface LogsButtonProps {
+    className?: string;
+    href: string;
+    size?: ButtonSize;
+}
+
+export function LogsButton({href, className, size = 'xs'}: LogsButtonProps) {
+    return (
+        <Button href={href} target="_blank" className={className} size={size} title="Database logs">
+            <Icon data={FileText} />
+        </Button>
+    );
+}

src/components/TenantNameWrapper/TenantNameWrapper.tsx

@@ -1,4 +1,4 @@
-import {DefinitionList, PopoverBehavior} from '@gravity-ui/uikit';
+import {DefinitionList, Flex, PopoverBehavior} from '@gravity-ui/uikit';
 
 import {getTenantPath} from '../../containers/Tenant/TenantPages';
 import type {PreparedTenant} from '../../store/reducers/tenants/types';
@@ -39,19 +39,27 @@ export function TenantNameWrapper({tenant, additionalTenantsProps}: TenantNameWr
     const isExternalLink = Boolean(backend);
 
     const monitoringLink = additionalTenantsProps?.getMonitoringLink?.(tenant.Name, tenant.Type);
+    const logsLink = additionalTenantsProps?.getLogsLink?.(tenant.Name);
 
     return (
         <CellWithPopover
-            disabled={!isUserAllowedToMakeChanges || !monitoringLink}
+            disabled={!isUserAllowedToMakeChanges || (!monitoringLink && !logsLink)}
             delayClosing={200}
             content={
-                monitoringLink ? (
+                monitoringLink || logsLink ? (
                     <DefinitionList responsive>
                         <DefinitionList.Item name={i18n('field_links')}>
-                            <LinkWithIcon
-                                title={i18n('field_monitoring-link')}
-                                url={monitoringLink}
-                            />
+                            <Flex gap={2} wrap="wrap">
+                                {monitoringLink && (
+                                    <LinkWithIcon
+                                        title={i18n('field_monitoring-link')}
+                                        url={monitoringLink}
+                                    />
+                                )}
+                                {logsLink && (
+                                    <LinkWithIcon title={i18n('field_logs-link')} url={logsLink} />
+                                )}
+                            </Flex>
                         </DefinitionList.Item>
                     </DefinitionList>
                 ) : null

src/components/TenantNameWrapper/i18n/en.json

@@ -1,5 +1,6 @@
 {
   "field_links": "Links",
   "field_monitoring-link": "Monitoring",
+  "field_logs-link": "Logs",
   "context_unknown": "unknown database"
 }

src/containers/AppWithClusters/AppWithClusters.tsx

@@ -3,7 +3,11 @@ import React from 'react';
 import type {Store} from '@reduxjs/toolkit';
 import type {History} from 'history';
 
-import type {GetMonitoringClusterLink, GetMonitoringLink} from '../../utils/monitoring';
+import type {
+    GetLogsLink,
+    GetMonitoringClusterLink,
+    GetMonitoringLink,
+} from '../../utils/monitoring';
 import {
     getMonitoringClusterLink as getMonitoringClusterLinkDefault,
     getMonitoringLink as getMonitoringLinkDefault,
@@ -17,6 +21,7 @@ import {ExtendedTenant} from './ExtendedTenant/ExtendedTenant';
 export interface AppWithClustersProps {
     store: Store;
     history: History;
+    getLogsLink?: GetLogsLink;
     getMonitoringLink?: GetMonitoringLink;
     getMonitoringClusterLink?: GetMonitoringClusterLink;
     userSettings?: YDBEmbeddedUISettings;
@@ -26,6 +31,7 @@ export interface AppWithClustersProps {
 export function AppWithClusters({
     store,
     history,
+    getLogsLink,
     getMonitoringLink = getMonitoringLinkDefault,
     getMonitoringClusterLink = getMonitoringClusterLinkDefault,
     userSettings,
@@ -38,6 +44,7 @@ export function AppWithClusters({
                     return (
                         <ExtendedCluster
                             component={component}
+                            getLogsLink={getLogsLink}
                             getMonitoringLink={getMonitoringLink}
                             getMonitoringClusterLink={getMonitoringClusterLink}
                         />
@@ -49,6 +56,7 @@ export function AppWithClusters({
                     return (
                         <ExtendedTenant
                             component={component}
+                            getLogsLink={getLogsLink}
                             getMonitoringLink={getMonitoringLink}
                         />
                     );

src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx

@@ -11,7 +11,11 @@ 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 {GetMonitoringClusterLink, GetMonitoringLink} from '../../../utils/monitoring';
+import type {
+    GetLogsLink,
+    GetMonitoringClusterLink,
+    GetMonitoringLink,
+} from '../../../utils/monitoring';
 import {getCleanBalancerValue, removeViewerPathname} from '../../../utils/parseBalancer';
 import {getBackendFromNodeHost, getBackendFromRawNodeData} from '../../../utils/prepareBackend';
 import type {Cluster} from '../../Cluster/Cluster';
@@ -63,6 +67,7 @@ const getAdditionalTenantsProps = (
     balancer: string | undefined,
     useClusterBalancerAsBackend: boolean | undefined,
     getMonitoringLink?: GetMonitoringLink,
+    getLogsLink?: GetLogsLink,
 ) => {
     const additionalTenantsProps: AdditionalTenantsProps = {};
 
@@ -99,18 +104,33 @@ const getAdditionalTenantsProps = (
         };
     }
 
+    if (clusterName && getLogsLink) {
+        additionalTenantsProps.getLogsLink = (dbName?: string) => {
+            if (dbName) {
+                return getLogsLink({
+                    dbName,
+                    clusterName,
+                });
+            }
+
+            return null;
+        };
+    }
+
     return additionalTenantsProps;
 };
 
 interface ExtendedClusterProps {
     component: typeof Cluster;
     getMonitoringLink?: GetMonitoringLink;
     getMonitoringClusterLink?: GetMonitoringClusterLink;
+    getLogsLink?: GetLogsLink;
 }
 export function ExtendedCluster({
     component: ClusterComponent,
     getMonitoringLink,
     getMonitoringClusterLink,
+    getLogsLink,
 }: ExtendedClusterProps) {
     const additionalNodesProps = useAdditionalNodesProps();
     const {name, balancer, monitoring} = useClusterBaseInfo();
@@ -132,6 +152,7 @@ export function ExtendedCluster({
                     balancer,
                     useClusterBalancerAsBackend,
                     getMonitoringLink,
+                    getLogsLink,
                 )}
                 additionalNodesProps={additionalNodesProps}
             />

src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx

@@ -1,19 +1,21 @@
 import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster';
 import type {ETenantType} from '../../../types/api/tenant';
 import {useAdditionalNodesProps} from '../../../utils/hooks/useAdditionalNodesProps';
-import type {GetMonitoringLink} from '../../../utils/monitoring';
+import type {GetLogsLink, GetMonitoringLink} from '../../../utils/monitoring';
 import type {Tenant} from '../../Tenant/Tenant';
 
 export interface ExtendedTenantProps {
     component: typeof Tenant;
     getMonitoringLink?: GetMonitoringLink;
+    getLogsLink?: GetLogsLink;
 }
 
 export function ExtendedTenant({
     component: TenantComponent,
     getMonitoringLink,
+    getLogsLink,
 }: ExtendedTenantProps) {
-    const {monitoring} = useClusterBaseInfo();
+    const {monitoring, name: clusterName} = useClusterBaseInfo();
     const additionalNodesProps = useAdditionalNodesProps();
 
     const additionalTenantProps = {
@@ -26,6 +28,16 @@ export function ExtendedTenant({
                 });
             }
 
+            return null;
+        },
+        getLogsLink: (dbName?: string) => {
+            if (clusterName && dbName && getLogsLink) {
+                return getLogsLink({
+                    dbName,
+                    clusterName,
+                });
+            }
+
             return null;
         },
     };

src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss

@@ -17,10 +17,6 @@
     }
 
     &__top {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-
         margin-bottom: 10px;
 
         line-height: 24px;

src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx

@@ -1,6 +1,7 @@
-import {Loader} from '@gravity-ui/uikit';
+import {Flex, Loader} from '@gravity-ui/uikit';
 
 import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
+import {LogsButton} from '../../../../components/LogsButton/LogsButton';
 import {MonitoringButton} from '../../../../components/MonitoringButton/MonitoringButton';
 import {overviewApi} from '../../../../store/reducers/overview/overview';
 import {TENANT_METRICS_TABS_IDS} from '../../../../store/reducers/tenant/constants';
@@ -150,15 +151,19 @@ export function TenantOverview({
     }
 
     const monitoringLink = additionalTenantProps?.getMonitoringLink?.(Name, Type);
+    const logsLink = additionalTenantProps?.getLogsLink?.(Name);
 
     return (
         <div className={b()}>
             <div className={b('info')}>
                 <div className={b('top-label')}>{tenantType}</div>
-                <div className={b('top')}>
+                <Flex alignItems="center" gap="1" className={b('top')}>
                     {renderName()}
-                    {monitoringLink && <MonitoringButton href={monitoringLink} />}
-                </div>
+                    <Flex gap="2">
+                        {monitoringLink && <MonitoringButton href={monitoringLink} />}
+                        {logsLink && <LogsButton href={logsLink} />}
+                    </Flex>
+                </Flex>
                 <MetricsCards
                     poolsCpuStats={poolsStats}
                     memoryStats={memoryStats}

src/types/additionalProps.ts

@@ -15,6 +15,7 @@ export interface AdditionalClusterProps {
 export interface AdditionalTenantsProps {
     prepareTenantBackend?: (backend: string | NodeAddress | undefined) => string | undefined;
     getMonitoringLink?: (name?: string, type?: ETenantType) => string | null;
+    getLogsLink?: (name?: string) => string | null;
 }
 
 export type NodeAddress = Pick<TSystemStateInfo, 'Host' | 'Endpoints' | 'NodeId'>;

src/utils/monitoring.ts

@@ -99,3 +99,10 @@ export function parseMonitoringData(monitoring: string): ParsedMonitoringData |
 
     return undefined;
 }
+
+interface GetLogsLinkProps {
+    dbName: string;
+    clusterName: string;
+}
+
+export type GetLogsLink = (props: GetLogsLinkProps) => string;