diff --git a/src/components/LogsButton/LogsButton.tsx b/src/components/LogsButton/LogsButton.tsx new file mode 100644 index 0000000000..e206c74b6d --- /dev/null +++ b/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 ( + + ); +} diff --git a/src/components/TenantNameWrapper/TenantNameWrapper.tsx b/src/components/TenantNameWrapper/TenantNameWrapper.tsx index 757bd13327..65f1799c9f 100644 --- a/src/components/TenantNameWrapper/TenantNameWrapper.tsx +++ b/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 ( - + + {monitoringLink && ( + + )} + {logsLink && ( + + )} + ) : null diff --git a/src/components/TenantNameWrapper/i18n/en.json b/src/components/TenantNameWrapper/i18n/en.json index f3032a1b3b..5fdaeccafa 100644 --- a/src/components/TenantNameWrapper/i18n/en.json +++ b/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" } diff --git a/src/containers/AppWithClusters/AppWithClusters.tsx b/src/containers/AppWithClusters/AppWithClusters.tsx index 3dcafb028d..3275d8d575 100644 --- a/src/containers/AppWithClusters/AppWithClusters.tsx +++ b/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 ( @@ -49,6 +56,7 @@ export function AppWithClusters({ return ( ); diff --git a/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx b/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx index 5d99cc0495..c7fdfa6179 100644 --- a/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx +++ b/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,6 +104,19 @@ const getAdditionalTenantsProps = ( }; } + if (clusterName && getLogsLink) { + additionalTenantsProps.getLogsLink = (dbName?: string) => { + if (dbName) { + return getLogsLink({ + dbName, + clusterName, + }); + } + + return null; + }; + } + return additionalTenantsProps; }; @@ -106,11 +124,13 @@ 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} /> diff --git a/src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx b/src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx index e6a39d95be..0b8205ffe3 100644 --- a/src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx +++ b/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; }, }; diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss index dcc5d35992..c12c761f05 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss +++ b/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; diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx index 1a13040579..6c0a981fbb 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx +++ b/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 (
{tenantType}
-
+ {renderName()} - {monitoringLink && } -
+ + {monitoringLink && } + {logsLink && } + + string | undefined; getMonitoringLink?: (name?: string, type?: ETenantType) => string | null; + getLogsLink?: (name?: string) => string | null; } export type NodeAddress = Pick; diff --git a/src/utils/monitoring.ts b/src/utils/monitoring.ts index 0a69f577d2..62a427ebba 100644 --- a/src/utils/monitoring.ts +++ b/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;