ydb-embedded-ui 4.29.0 → 4.31.0

package/dist/containers/App/Content.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import {Switch, Route, Redirect, Router, useLocation} from 'react-router-dom';
+import {QueryParamProvider} from 'use-query-params';
+import {ReactRouter5Adapter} from 'use-query-params/adapters/react-router-5';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
 
@@ -80,18 +82,20 @@ function ContentWrapper(props) {
         <HistoryContext.Consumer>
             {(history) => (
                 <Router history={history}>
-                    <Switch>
-                        <Route path={routes.auth}>
-                            <Authentication closable />
-                        </Route>
-                        <Route>
-                            <ThemeProvider theme={theme}>
-                                <div className={b({embedded: singleClusterMode})}>
-                                    {isAuthenticated ? props.children : <Authentication />}
-                                </div>
-                            </ThemeProvider>
-                        </Route>
-                    </Switch>
+                    <QueryParamProvider adapter={ReactRouter5Adapter}>
+                        <Switch>
+                            <Route path={routes.auth}>
+                                <Authentication closable />
+                            </Route>
+                            <Route>
+                                <ThemeProvider theme={theme}>
+                                    <div className={b({embedded: singleClusterMode})}>
+                                        {isAuthenticated ? props.children : <Authentication />}
+                                    </div>
+                                </ThemeProvider>
+                            </Route>
+                        </Switch>
+                    </QueryParamProvider>
                 </Router>
             )}
         </HistoryContext.Consumer>

package/dist/containers/Tenant/Diagnostics/TenantOverview/DefaultDashboard.tsx

@@ -0,0 +1,50 @@
+import {type ChartConfig, TenantDashboard} from './TenantDashboard/TenantDashboard';
+import i18n from './i18n';
+
+const defaultDashboardConfig: ChartConfig[] = [
+    {
+        title: i18n('charts.queries-per-second'),
+        metrics: [
+            {
+                target: 'queries.requests',
+                title: i18n('charts.queries-per-second'),
+            },
+        ],
+    },
+    {
+        title: i18n('charts.transaction-latency', {percentile: ''}),
+        metrics: [
+            {
+                target: 'queries.latencies.p50',
+                title: i18n('charts.transaction-latency', {
+                    percentile: 'p50',
+                }),
+            },
+            {
+                target: 'queries.latencies.p75',
+                title: i18n('charts.transaction-latency', {
+                    percentile: 'p75',
+                }),
+            },
+            {
+                target: 'queries.latencies.p90',
+                title: i18n('charts.transaction-latency', {
+                    percentile: 'p90',
+                }),
+            },
+            {
+                target: 'queries.latencies.p99',
+                title: i18n('charts.transaction-latency', {
+                    percentile: 'p99',
+                }),
+            },
+        ],
+        options: {
+            dataType: 'ms',
+        },
+    },
+];
+
+export const DefaultDashboard = () => {
+    return <TenantDashboard charts={defaultDashboardConfig} />;
+};

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricsCards.tsx

@@ -72,22 +72,31 @@ export function MetricsCards({
 
     const queryParams = parseQuery(location);
 
+    // Allow tabs untoggle behaviour
+    const getTabIfNotActive = (tab: TenantMetricsTab) => {
+        if (tab === metricsTab) {
+            return '';
+        }
+
+        return tab;
+    };
+
     const tabLinks: Record<TenantMetricsTab, string> = {
         [TENANT_METRICS_TABS_IDS.cpu]: getTenantPath({
             ...queryParams,
-            [TenantTabsGroups.metricsTab]: TENANT_METRICS_TABS_IDS.cpu,
+            [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.cpu),
         }),
         [TENANT_METRICS_TABS_IDS.storage]: getTenantPath({
             ...queryParams,
-            [TenantTabsGroups.metricsTab]: TENANT_METRICS_TABS_IDS.storage,
+            [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.storage),
         }),
         [TENANT_METRICS_TABS_IDS.memory]: getTenantPath({
             ...queryParams,
-            [TenantTabsGroups.metricsTab]: TENANT_METRICS_TABS_IDS.memory,
+            [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.memory),
         }),
         [TENANT_METRICS_TABS_IDS.healthcheck]: getTenantPath({
             ...queryParams,
-            [TenantTabsGroups.metricsTab]: TENANT_METRICS_TABS_IDS.healthcheck,
+            [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.healthcheck),
         }),
     };
 

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/CpuDashboard.tsx

@@ -0,0 +1,18 @@
+import {type ChartConfig, TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import i18n from '../i18n';
+
+const cpuDashboardConfig: ChartConfig[] = [
+    {
+        title: i18n('charts.cpu-usage'),
+        metrics: [
+            {
+                target: 'resources.cpu.usage',
+                title: i18n('charts.cpu-usage'),
+            },
+        ],
+    },
+];
+
+export const CpuDashboard = () => {
+    return <TenantDashboard charts={cpuDashboardConfig} />;
+};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx

@@ -1,4 +1,5 @@
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
+import {CpuDashboard} from './CpuDashboard';
 import {TopNodesByLoad} from './TopNodesByLoad';
 import {TopNodesByCpu} from './TopNodesByCpu';
 import {TopShards} from './TopShards';
@@ -12,6 +13,7 @@ interface TenantCpuProps {
 export function TenantCpu({path, additionalNodesProps}: TenantCpuProps) {
     return (
         <>
+            <CpuDashboard />
             <TopNodesByLoad path={path} additionalNodesProps={additionalNodesProps} />
             <TopNodesByCpu path={path} additionalNodesProps={additionalNodesProps} />
             <TopShards path={path} />

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.scss

@@ -0,0 +1,14 @@
+.ydb-tenant-dashboard {
+    width: var(--diagnostics-section-table-width);
+    margin-bottom: var(--diagnostics-section-margin);
+
+    &__controls {
+        margin-bottom: 10px;
+    }
+
+    &__charts {
+        display: flex;
+        flex-flow: row wrap;
+        gap: 16px;
+    }
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx

@@ -0,0 +1,71 @@
+import {StringParam, useQueryParam} from 'use-query-params';
+
+import {cn} from '../../../../../utils/cn';
+import type {TimeFrame} from '../../../../../utils/timeframes';
+import {useSetting, useTypedSelector} from '../../../../../utils/hooks';
+import {DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY} from '../../../../../utils/constants';
+import {TimeFrameSelector} from '../../../../../components/TimeFrameSelector/TimeFrameSelector';
+import {
+    type ChartOptions,
+    MetricChart,
+    type MetricDescription,
+} from '../../../../../components/MetricChart';
+
+import './TenantDashboard.scss';
+
+const CHART_WIDTH = 428;
+const CHART_WIDTH_FULL = 872;
+
+const b = cn('ydb-tenant-dashboard');
+
+export interface ChartConfig {
+    metrics: MetricDescription[];
+    title: string;
+    options?: ChartOptions;
+}
+
+interface TenantDashboardProps {
+    charts: ChartConfig[];
+}
+
+export const TenantDashboard = ({charts}: TenantDashboardProps) => {
+    const [timeFrame = '1h', setTimeframe] = useQueryParam('timeframe', StringParam);
+
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+
+    const [chartsEnabled] = useSetting(DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY);
+
+    if (!chartsEnabled) {
+        return null;
+    }
+
+    // If there is only one chart, display it with full width
+    const chartWidth = charts.length === 1 ? CHART_WIDTH_FULL : CHART_WIDTH;
+    const chartHeight = CHART_WIDTH / 1.5;
+
+    const renderContent = () => {
+        return charts.map((chartConfig) => {
+            return (
+                <MetricChart
+                    key={chartConfig.metrics.map(({target}) => target).join('&')}
+                    title={chartConfig.title}
+                    metrics={chartConfig.metrics}
+                    timeFrame={timeFrame as TimeFrame}
+                    chartOptions={chartConfig.options}
+                    autorefresh={autorefresh}
+                    width={chartWidth}
+                    height={chartHeight}
+                />
+            );
+        });
+    };
+
+    return (
+        <div className={b(null)}>
+            <div className={b('controls')}>
+                <TimeFrameSelector value={timeFrame as TimeFrame} onChange={setTimeframe} />
+            </div>
+            <div className={b('charts')}>{renderContent()}</div>
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/MemoryDashboard.tsx

@@ -0,0 +1,21 @@
+import {type ChartConfig, TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import i18n from '../i18n';
+
+const memoryDashboardConfig: ChartConfig[] = [
+    {
+        title: i18n('charts.memory-usage'),
+        metrics: [
+            {
+                target: 'resources.memory.used_bytes',
+                title: i18n('charts.memory-usage'),
+            },
+        ],
+        options: {
+            dataType: 'size',
+        },
+    },
+];
+
+export const MemoryDashboard = () => {
+    return <TenantDashboard charts={memoryDashboardConfig} />;
+};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.tsx

@@ -1,3 +1,4 @@
+import {MemoryDashboard} from './MemoryDashboard';
 import {TopNodesByMemory} from './TopNodesByMemory';
 
 interface TenantMemoryProps {
@@ -5,5 +6,10 @@ interface TenantMemoryProps {
 }
 
 export function TenantMemory({path}: TenantMemoryProps) {
-    return <TopNodesByMemory path={path} />;
+    return (
+        <>
+            <MemoryDashboard />
+            <TopNodesByMemory path={path} />
+        </>
+    );
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx

@@ -17,6 +17,7 @@ import {HealthcheckDetails} from './Healthcheck/HealthcheckDetails';
 import {MetricsCards, type TenantMetrics} from './MetricsCards/MetricsCards';
 import {TenantStorage} from './TenantStorage/TenantStorage';
 import {TenantMemory} from './TenantMemory/TenantMemory';
+import {DefaultDashboard} from './DefaultDashboard';
 import {useHealthcheck} from './useHealthcheck';
 
 import './TenantOverview.scss';
@@ -140,7 +141,7 @@ export function TenantOverview({
                 );
             }
             default: {
-                return undefined;
+                return <DefaultDashboard />;
             }
         }
     };

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/StorageDashboard.tsx

@@ -0,0 +1,21 @@
+import {type ChartConfig, TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import i18n from '../i18n';
+
+const storageDashboardConfig: ChartConfig[] = [
+    {
+        title: i18n('charts.storage-usage'),
+        metrics: [
+            {
+                target: 'resources.storage.used_bytes',
+                title: i18n('charts.storage-usage'),
+            },
+        ],
+        options: {
+            dataType: 'size',
+        },
+    },
+];
+
+export const StorageDashboard = () => {
+    return <TenantDashboard charts={storageDashboardConfig} />;
+};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.tsx

@@ -7,6 +7,7 @@ import {getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
 
 import '../TenantOverview.scss';
 
+import {StorageDashboard} from './StorageDashboard';
 import {TopTables} from './TopTables';
 import {TopGroups} from './TopGroups';
 
@@ -62,6 +63,7 @@ export function TenantStorage({tenantName, metrics}: TenantStorageProps) {
     ];
     return (
         <>
+            <StorageDashboard />
             <InfoViewer className={b('storage-info')} title="Storage details" info={info} />
             <TopTables path={tenantName} />
             <TopGroups tenant={tenantName} />

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json

@@ -23,5 +23,11 @@
   "by-load": "by load",
   "by-memory": "by memory",
   "by-usage": "by usage",
-  "by-size": "by size"
+  "by-size": "by size",
+
+  "charts.queries-per-second": "Queries per second",
+  "charts.transaction-latency": "Transactions latencies {{percentile}}",
+  "charts.cpu-usage": "CPU usage",
+  "charts.storage-usage": "Storage usage",
+  "charts.memory-usage": "Memory usage"
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/ru.json

@@ -23,5 +23,11 @@
   "by-load": "по нагрузке",
   "by-memory": "по памяти",
   "by-usage": "по потреблению",
-  "by-size": "по размеру"
+  "by-size": "по размеру",
+
+  "charts.queries-per-second": "Количество запросов в секунду",
+  "charts.transaction-latency": "Задержка транзакций {{percentile}}",
+  "charts.cpu-usage": "Использование CPU",
+  "charts.storage-usage": "Использование хранилища",
+  "charts.memory-usage": "Использование памяти"
 }

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -1,60 +1,53 @@
+import {HelpPopover} from '@gravity-ui/components';
+import {Button, Tabs} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import qs from 'qs';
 import React, {ReactNode, useEffect, useReducer} from 'react';
 import {useDispatch} from 'react-redux';
 import {useLocation} from 'react-router';
 import {Link} from 'react-router-dom';
-import qs from 'qs';
-import cn from 'bem-cn-lite';
-
-import {Button, Tabs} from '@gravity-ui/uikit';
-import {HelpPopover} from '@gravity-ui/components';
-
-import SplitPane from '../../../components/SplitPane';
-import CopyToClipboard from '../../../components/CopyToClipboard/CopyToClipboard';
+import {ClipboardButton} from '../../../components/ClipboardButton';
+import {Icon} from '../../../components/Icon';
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
 import {
     CDCStreamOverview,
     PersQueueGroupOverview,
 } from '../../../components/InfoViewer/schemaOverview';
-import {Icon} from '../../../components/Icon';
 import {Loader} from '../../../components/Loader';
-
+import SplitPane from '../../../components/SplitPane';
+import routes, {createHref} from '../../../routes';
+import {setShowPreview} from '../../../store/reducers/schema/schema';
+import {
+    TENANT_PAGES_IDS,
+    TENANT_QUERY_TABS_ID,
+    TENANT_SUMMARY_TABS_IDS,
+} from '../../../store/reducers/tenant/constants';
+import {setQueryTab, setSummaryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
 import {
     EPathSubType,
     EPathType,
     TColumnDescription,
     TColumnTableDescription,
 } from '../../../types/api/schema';
-import routes, {createHref} from '../../../routes';
-import {formatDateTime} from '../../../utils/dataFormatters/dataFormatters';
-import {useTypedSelector} from '../../../utils/hooks';
 import {
     DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED,
     DEFAULT_SIZE_TENANT_SUMMARY_KEY,
 } from '../../../utils/constants';
-import {setShowPreview} from '../../../store/reducers/schema/schema';
-import {setQueryTab, setSummaryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
-import {
-    TENANT_PAGES_IDS,
-    TENANT_QUERY_TABS_ID,
-    TENANT_SUMMARY_TABS_IDS,
-} from '../../../store/reducers/tenant/constants';
-
-import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
-import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
+import {formatDateTime} from '../../../utils/dataFormatters/dataFormatters';
+import {useTypedSelector} from '../../../utils/hooks';
 import {Acl} from '../Acl/Acl';
-import {ExternalTableSummary} from '../Info/ExternalTable/ExternalTable';
+import i18n from '../i18n';
 import {ExternalDataSourceSummary} from '../Info/ExternalDataSource/ExternalDataSource';
-
+import {ExternalTableSummary} from '../Info/ExternalTable/ExternalTable';
+import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
+import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
 import {TenantTabsGroups, TENANT_INFO_TABS, TENANT_SCHEMA_TAB} from '../TenantPages';
 import {
     PaneVisibilityActionTypes,
-    paneVisibilityToggleReducerCreator,
     PaneVisibilityToggleButtons,
+    paneVisibilityToggleReducerCreator,
 } from '../utils/paneVisibilityToggleHelpers';
 import {isColumnEntityType, isExternalTable, isIndexTable, isTableType} from '../utils/schema';
-
-import i18n from '../i18n';
-
 import './ObjectSummary.scss';
 
 const b = cn('object-summary');
@@ -306,8 +299,9 @@ export function ObjectSummary({
                     </Button>
                 )}
                 {currentSchemaPath && (
-                    <CopyToClipboard
+                    <ClipboardButton
                         text={currentSchemaPath}
+                        view="flat-secondary"
                         title={i18n('summary.copySchemaPath')}
                     />
                 )}

package/dist/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx

@@ -1,31 +1,25 @@
-import React, {useEffect, useState} from 'react';
-import {useDispatch} from 'react-redux';
+import {RadioButton, Tabs} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
+import React, {useEffect, useState} from 'react';
 import JSONTree from 'react-json-inspector';
-
-import {RadioButton, Tabs} from '@gravity-ui/uikit';
-
-import CopyToClipboard from '../../../../components/CopyToClipboard/CopyToClipboard';
+import {useDispatch} from 'react-redux';
+import {ClipboardButton} from '../../../../components/ClipboardButton';
 import Divider from '../../../../components/Divider/Divider';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
 import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus';
 import {QueryResultTable} from '../../../../components/QueryResultTable/QueryResultTable';
-
+import {disableFullscreen} from '../../../../store/reducers/fullscreen';
+import type {ColumnType, KeyValueRow} from '../../../../types/api/query';
 import type {ValueOf} from '../../../../types/common';
 import type {IQueryResult, QueryErrorResponse} from '../../../../types/store/query';
-import type {ColumnType, KeyValueRow} from '../../../../types/api/query';
-import {disableFullscreen} from '../../../../store/reducers/fullscreen';
-import {prepareQueryError} from '../../../../utils/query';
-import {useTypedSelector} from '../../../../utils/hooks';
 import {getArray} from '../../../../utils';
-
+import {useTypedSelector} from '../../../../utils/hooks';
+import {prepareQueryError} from '../../../../utils/query';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
-
 import {ResultIssues} from '../Issues/Issues';
 import {QueryDuration} from '../QueryDuration/QueryDuration';
 import {getPreparedResult} from '../utils/getPreparedResult';
-
 import './ExecuteResult.scss';
 
 const b = cn('ydb-query-execute-result');
@@ -115,10 +109,10 @@ export function ExecuteResult({
 
     const renderClipboardButton = () => {
         return (
-            <CopyToClipboard
+            <ClipboardButton
                 text={textResults}
+                view="flat-secondary"
                 title="Copy results"
-                toastText="Results were copied to clipboard successfully"
                 disabled={copyDisabled}
             />
         );

package/dist/containers/UserSettings/i18n/en.json

@@ -23,5 +23,8 @@
   "settings.useVirtualTables.popover": "It will increase performance, but could work unstable",
 
   "settings.queryUseMultiSchema.title": "Allow queries with multiple result sets",
-  "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries that enables queries with multiple result sets. Returns nothing on versions 23-3 and older"
+  "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries that enables queries with multiple result sets. Returns nothing on versions 23-3 and older",
+
+  "settings.displayChartsInDbDiagnostics.title": "Display charts in database diagnostics",
+  "settings.displayChartsInDbDiagnostics.popover": "Incorrect data may be displayed (shows data only for the database related to the current node), does not work well on static nodes"
 }

package/dist/containers/UserSettings/i18n/ru.json

@@ -23,5 +23,8 @@
   "settings.useVirtualTables.popover": "Это улучшит производительность, но может работать нестабильно",
 
   "settings.queryUseMultiSchema.title": "Разрешить запросы с несколькими результатами",
-  "settings.queryUseMultiSchema.popover": "Использовать для запросов схему 'multi', которая позволяет выполнять запросы с несколькими результатами. На версиях 23-3 и старше результат не возвращается вообще"
+  "settings.queryUseMultiSchema.popover": "Использовать для запросов схему 'multi', которая позволяет выполнять запросы с несколькими результатами. На версиях 23-3 и старше результат не возвращается вообще",
+
+  "settings.displayChartsInDbDiagnostics.title": "Показывать графики в диагностике базы данных",
+  "settings.displayChartsInDbDiagnostics.popover": "Могут отображаться неправильные данные (показывает данные только для базы, относящейся к текущей ноде), плохо работает на статических нодах"
 }

package/dist/containers/UserSettings/settings.ts

@@ -10,6 +10,7 @@ import {
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
     QUERY_USE_MULTI_SCHEMA_KEY,
+    DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY,
 } from '../../utils/constants';
 import {Lang, defaultLang} from '../../utils/i18n';
 
@@ -94,6 +95,11 @@ export const queryUseMultiSchemaSetting: SettingProps = {
     title: i18n('settings.queryUseMultiSchema.title'),
     helpPopoverContent: i18n('settings.queryUseMultiSchema.popover'),
 };
+export const displayChartsInDbDiagnosticsSetting: SettingProps = {
+    settingKey: DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY,
+    title: i18n('settings.displayChartsInDbDiagnostics.title'),
+    helpPopoverContent: i18n('settings.displayChartsInDbDiagnostics.popover'),
+};
 
 export const appearanceSection: SettingsSection = {
     id: 'appearanceSection',
@@ -103,7 +109,12 @@ export const appearanceSection: SettingsSection = {
 export const experimentsSection: SettingsSection = {
     id: 'experimentsSection',
     title: i18n('section.experiments'),
-    settings: [useNodesEndpointSetting, useVirtualTables, queryUseMultiSchemaSetting],
+    settings: [
+        useNodesEndpointSetting,
+        useVirtualTables,
+        queryUseMultiSchemaSetting,
+        displayChartsInDbDiagnosticsSetting,
+    ],
 };
 
 export const generalPage: SettingsPage = {

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.scss

@@ -17,10 +17,12 @@
             margin-left: 30px;
         }
     }
+
     &__overview-container {
         display: flex;
         align-items: center;
     }
+
     &__info-label {
         font-weight: 200;
 
@@ -52,4 +54,17 @@
             width: 200px;
         }
     }
+
+    &__overview-title {
+        display: flex;
+        align-items: center;
+    }
+
+    &__clipboard-button {
+        visibility: hidden;
+
+        margin-left: 8px;
+
+        color: var(--yc-color-text-secondary);
+    }
 }

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.tsx

@@ -1,11 +1,9 @@
-import block from 'bem-cn-lite';
-
 import {Progress} from '@gravity-ui/uikit';
-
-import type {VersionValue} from '../../../types/versions';
+import block from 'bem-cn-lite';
+import {ClipboardButton} from '../../../components/ClipboardButton';
 import type {PreparedClusterNode} from '../../../store/reducers/clusterNodes/types';
+import type {VersionValue} from '../../../types/versions';
 import type {GroupedNodesItem} from '../types';
-
 import './NodesTreeTitle.scss';
 
 const b = block('ydb-versions-nodes-tree-title');
@@ -43,7 +41,12 @@ export const NodesTreeTitle = ({
                 {versionColor ? (
                     <div className={b('version-color')} style={{background: versionColor}} />
                 ) : null}
-                <span className={b('overview-title')}>{title}</span>
+                {title ? (
+                    <span className={b('overview-title')}>
+                        {title}
+                        <ClipboardButton text={title} size="s" className={b('clipboard-button')} />
+                    </span>
+                ) : null}
             </div>
             <div className={b('overview-info')}>
                 <div>