fix: gaps

Author: astandrik

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';
@@ -49,15 +49,17 @@ export function TenantNameWrapper({tenant, additionalTenantsProps}: TenantNameWr
                 monitoringLink || logsLink ? (
                     <DefinitionList responsive>
                         <DefinitionList.Item name={i18n('field_links')}>
-                            {monitoringLink && (
-                                <LinkWithIcon
-                                    title={i18n('field_monitoring-link')}
-                                    url={monitoringLink}
-                                />
-                            )}
-                            {logsLink && (
-                                <LinkWithIcon title={i18n('field_logs-link')} url={logsLink} />
-                            )}
+                            <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/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

@@ -106,11 +106,10 @@ const getAdditionalTenantsProps = (
 
     if (monitoring && getLogsLink) {
         additionalTenantsProps.getLogsLink = (dbName?: string) => {
-            if (dbName) {
+            if (dbName && clusterName) {
                 return getLogsLink({
                     dbName,
                     clusterName,
-                    monitoring,
                 });
             }
 

src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx

@@ -15,7 +15,7 @@ export function ExtendedTenant({
     getMonitoringLink,
     getLogsLink,
 }: ExtendedTenantProps) {
-    const {monitoring} = useClusterBaseInfo();
+    const {monitoring, name: clusterName} = useClusterBaseInfo();
     const additionalNodesProps = useAdditionalNodesProps();
 
     const additionalTenantProps = {
@@ -31,10 +31,10 @@ export function ExtendedTenant({
             return null;
         },
         getLogsLink: (dbName?: string) => {
-            if (monitoring && dbName && getLogsLink) {
+            if (clusterName && dbName && getLogsLink) {
                 return getLogsLink({
                     dbName,
-                    monitoring,
+                    clusterName,
                 });
             }
 

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,4 +1,4 @@
-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';
@@ -157,11 +157,13 @@ export function TenantOverview({
         <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} />}
-                    {logsLink && <LogsButton href={logsLink} />}
-                </div>
+                    <Flex gap="2">
+                        {monitoringLink && <MonitoringButton href={monitoringLink} />}
+                        {logsLink && <LogsButton href={logsLink} />}
+                    </Flex>
+                </Flex>
                 <MetricsCards
                     poolsCpuStats={poolsStats}
                     memoryStats={memoryStats}

src/utils/monitoring.ts

@@ -102,78 +102,7 @@ export function parseMonitoringData(monitoring: string): ParsedMonitoringData |
 
 interface GetLogsLinkProps {
     dbName: string;
-    clusterName?: string;
-    monitoring: string;
-    project?: string;
-    service?: string;
-    level?: string;
-    from?: string;
-    to?: string;
-    columns?: string[];
-    groupByField?: string;
-    chartType?: string;
-    linesMode?: string;
+    clusterName: string;
 }
 
-export type GetLogsLink = typeof getLogsLink;
-
-export function getLogsLink({
-    dbName,
-    clusterName,
-    monitoring,
-    project = 'kikimr',
-    service = 'ydb',
-    level = 'ERROR',
-    from = 'now-1h',
-    to = 'now',
-    columns = ['level', 'time', 'message', 'host'],
-    groupByField = 'level',
-    chartType = 'line',
-    linesMode = 'single',
-}: GetLogsLinkProps): string {
-    try {
-        const data = parseMonitoringData(monitoring);
-
-        if (data) {
-            const finalClusterName = data.cluster_name || clusterName || '';
-
-            const url = new URL(data.monitoring_url);
-
-            url.pathname += '/_______/';
-
-            const queryFilter = {
-                project,
-                service,
-                cluster: finalClusterName,
-                database: dbName,
-                level,
-            };
-
-            url.searchParams.set('from', from);
-            url.searchParams.set('to', to);
-
-            const queryString = Object.entries(queryFilter)
-                .map(([key, value]) => `${key} = "${value}"`)
-                .join(', ');
-            url.searchParams.set('query', `{${queryString}}`);
-
-            url.searchParams.set('columns', columns.join(','));
-
-            if (groupByField) {
-                url.searchParams.set('groupByField', groupByField);
-            }
-
-            if (chartType) {
-                url.searchParams.set('chartType', chartType);
-            }
-
-            if (linesMode) {
-                url.searchParams.set('linesMode', linesMode);
-            }
-
-            return url.toString();
-        }
-    } catch {}
-
-    return '';
-}
+export type GetLogsLink = (props: GetLogsLinkProps) => string;