ydb-embedded-ui 4.22.0 → 4.24.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [4.24.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.23.0...v4.24.0) (2023-12-07)
+
+
+### Features
+
+* always use localStorage if no settingsApi ([#603](https://github.com/ydb-platform/ydb-embedded-ui/issues/603)) ([ff692df](https://github.com/ydb-platform/ydb-embedded-ui/commit/ff692dffa99d278f6b261bbf1aac0ee24c661a6d))
+
+## [4.23.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.22.0...v4.23.0) (2023-12-06)
+
+
+### Features
+
+* **ClusterInfo:** display groups stats ([#598](https://github.com/ydb-platform/ydb-embedded-ui/issues/598)) ([c31d048](https://github.com/ydb-platform/ydb-embedded-ui/commit/c31d0480a1b91cf01a660fd1d9726c6708f7c252))
+* **TenantOverview:** add links to sections titles ([#599](https://github.com/ydb-platform/ydb-embedded-ui/issues/599)) ([30401fa](https://github.com/ydb-platform/ydb-embedded-ui/commit/30401fa354d90943bc4af4ddbf65466ce10381f9))
+
+
+### Bug Fixes
+
+* **Schema:** display keys in right order ([#596](https://github.com/ydb-platform/ydb-embedded-ui/issues/596)) ([c99b7e2](https://github.com/ydb-platform/ydb-embedded-ui/commit/c99b7e2e97acffc1cab450dfbf758c38b8b6e4d5))
+
 ## [4.22.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.21.1...v4.22.0) (2023-11-27)
 
 

package/dist/components/ProgressViewer/ProgressViewer.tsx

@@ -44,7 +44,7 @@ Props description:
 interface ProgressViewerProps {
     value?: number | string;
     capacity?: number | string;
-    formatValues?: (value?: number, capacity?: number) => (string | undefined)[];
+    formatValues?: (value?: number, capacity?: number) => (string | number | undefined)[];
     percents?: boolean;
     className?: string;
     size?: ProgressViewerSize;

package/dist/containers/Cluster/Cluster.tsx

@@ -68,6 +68,7 @@ function Cluster({
         loading: clusterLoading,
         wasLoaded: clusterWasLoaded,
         error: clusterError,
+        groupsStats,
     } = useTypedSelector((state) => state.cluster);
     const {
         nodes,
@@ -135,6 +136,7 @@ function Cluster({
         <div className={b()} ref={container}>
             <ClusterInfo
                 cluster={cluster}
+                groupsStats={groupsStats}
                 versionsValues={versionsValues}
                 loading={infoLoading}
                 error={clusterError}

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -49,10 +49,6 @@
         }
     }
 
-    &__metric-field {
-        margin-top: -8px;
-    }
-
     &__system-tablets {
         display: flex;
         flex-wrap: wrap;
@@ -83,7 +79,6 @@
         margin-left: 15px;
         padding: 0 !important;
     }
-
     &__links {
         display: flex;
         flex-flow: row wrap;
@@ -91,6 +86,20 @@
         gap: 12px;
     }
 
+    &__storage-groups-stats {
+        display: flex;
+        flex-direction: column;
+        gap: 11px;
+    }
+
+    &__groups-stats-bar {
+        cursor: pointer;
+    }
+
+    &__groups-stats-popup-content {
+        padding: 12px;
+    }
+
     &__clipboard-button {
         display: flex;
         align-items: center;

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.tsx

@@ -10,6 +10,7 @@ import {Tablet} from '../../../components/Tablet';
 import {ResponseError} from '../../../components/Errors/ResponseError';
 import {ExternalLinkWithIcon} from '../../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
 import {IconWrapper as Icon} from '../../../components/Icon/Icon';
+import {ContentWithPopup} from '../../../components/ContentWithPopup/ContentWithPopup';
 
 import type {IResponseError} from '../../../types/api/error';
 import type {AdditionalClusterProps, ClusterLink} from '../../../types/additionalProps';
@@ -18,14 +19,21 @@ import type {TClusterInfo} from '../../../types/api/cluster';
 import {backend, customBackend} from '../../../store';
 import {formatStorageValues} from '../../../utils/dataFormatters/dataFormatters';
 import {useSetting, useTypedSelector} from '../../../utils/hooks';
+import {formatBytes, getSizeWithSignificantDigits} from '../../../utils/bytesParsers';
 import {
     CLUSTER_DEFAULT_TITLE,
     CLUSTER_INFO_HIDDEN_KEY,
     DEVELOPER_UI_TITLE,
 } from '../../../utils/constants';
+import type {
+    ClusterGroupsStats,
+    DiskErasureGroupsStats,
+    DiskGroupsStats,
+} from '../../../store/reducers/cluster/types';
 
 import {VersionsBar} from '../VersionsBar/VersionsBar';
 import {ClusterInfoSkeleton} from '../ClusterInfoSkeleton/ClusterInfoSkeleton';
+import i18n from '../i18n';
 
 import {compareTablets} from './utils';
 
@@ -33,9 +41,85 @@ import './ClusterInfo.scss';
 
 const b = block('cluster-info');
 
+interface GroupsStatsPopupContentProps {
+    stats: DiskErasureGroupsStats;
+}
+
+const GroupsStatsPopupContent = ({stats}: GroupsStatsPopupContentProps) => {
+    const {diskType, erasure, allocatedSize, availableSize} = stats;
+
+    const sizeToConvert = getSizeWithSignificantDigits(Math.max(allocatedSize, availableSize), 2);
+
+    const convertedAllocatedSize = formatBytes({value: allocatedSize, size: sizeToConvert});
+    const convertedAvailableSize = formatBytes({value: availableSize, size: sizeToConvert});
+
+    const usage = Math.round((allocatedSize / (allocatedSize + availableSize)) * 100);
+
+    const info = [
+        {
+            label: i18n('disk-type'),
+            value: diskType,
+        },
+        {
+            label: i18n('erasure'),
+            value: erasure,
+        },
+        {
+            label: i18n('allocated'),
+            value: convertedAllocatedSize,
+        },
+        {
+            label: i18n('available'),
+            value: convertedAvailableSize,
+        },
+        {
+            label: i18n('usage'),
+            value: usage + '%',
+        },
+    ];
+
+    return (
+        <InfoViewer dots={true} info={info} className={b('groups-stats-popup-content')} size="s" />
+    );
+};
+
+interface DiskGroupsStatsProps {
+    stats: DiskGroupsStats;
+}
+
+const DiskGroupsStatsBars = ({stats}: DiskGroupsStatsProps) => {
+    return (
+        <div className={b('storage-groups-stats')}>
+            {Object.values(stats).map((erasureStats) => (
+                <ContentWithPopup
+                    placement={['right']}
+                    key={erasureStats.erasure}
+                    content={<GroupsStatsPopupContent stats={erasureStats} />}
+                >
+                    <ProgressViewer
+                        className={b('groups-stats-bar')}
+                        value={erasureStats.createdGroups}
+                        capacity={erasureStats.totalGroups}
+                    />
+                </ContentWithPopup>
+            ))}
+        </div>
+    );
+};
+
+const getGroupsStatsFields = (groupsStats: ClusterGroupsStats) => {
+    return Object.keys(groupsStats).map((diskType) => {
+        return {
+            label: i18n('storage-groups', {diskType}),
+            value: <DiskGroupsStatsBars stats={groupsStats[diskType]} />,
+        };
+    });
+};
+
 const getInfo = (
     cluster: TClusterInfo,
     versionsValues: VersionValue[],
+    groupsStats: ClusterGroupsStats,
     additionalInfo: InfoViewerItem[],
     links: ClusterLink[],
 ) => {
@@ -43,14 +127,14 @@ const getInfo = (
 
     if (cluster.DataCenters) {
         info.push({
-            label: 'DC',
+            label: i18n('dc'),
             value: <Tags tags={cluster.DataCenters} />,
         });
     }
 
     if (cluster.SystemTablets) {
         info.push({
-            label: 'Tablets',
+            label: i18n('tablets'),
             value: (
                 <div className={b('system-tablets')}>
                     {cluster.SystemTablets.sort(compareTablets).map((tablet, tabletIndex) => (
@@ -63,46 +147,40 @@ const getInfo = (
 
     if (cluster.Tenants) {
         info.push({
-            label: 'Databases',
+            label: i18n('databases'),
             value: cluster.Tenants,
         });
     }
 
     info.push(
         {
-            label: 'Nodes',
-            value: (
-                <ProgressViewer
-                    className={b('metric-field')}
-                    value={cluster?.NodesAlive}
-                    capacity={cluster?.NodesTotal}
-                />
-            ),
+            label: i18n('nodes'),
+            value: <ProgressViewer value={cluster?.NodesAlive} capacity={cluster?.NodesTotal} />,
         },
         {
-            label: 'Load',
-            value: (
-                <ProgressViewer
-                    className={b('metric-field')}
-                    value={cluster?.LoadAverage}
-                    capacity={cluster?.NumberOfCpus}
-                />
-            ),
+            label: i18n('load'),
+            value: <ProgressViewer value={cluster?.LoadAverage} capacity={cluster?.NumberOfCpus} />,
         },
         {
-            label: 'Storage',
+            label: i18n('storage-size'),
             value: (
                 <ProgressViewer
-                    className={b('metric-field')}
                     value={cluster?.StorageUsed}
                     capacity={cluster?.StorageTotal}
                     formatValues={formatStorageValues}
                 />
             ),
         },
+    );
+
+    if (Object.keys(groupsStats).length) {
+        info.push(...getGroupsStatsFields(groupsStats));
+    }
+
+    info.push(
         ...additionalInfo,
         {
-            label: 'Links',
+            label: i18n('links'),
             value: (
                 <div className={b('links')}>
                     {links.map(({title, url}) => (
@@ -112,7 +190,7 @@ const getInfo = (
             ),
         },
         {
-            label: 'Versions',
+            label: i18n('versions'),
             value: <VersionsBar versionsValues={versionsValues} />,
         },
     );
@@ -123,6 +201,7 @@ const getInfo = (
 interface ClusterInfoProps {
     cluster?: TClusterInfo;
     versionsValues?: VersionValue[];
+    groupsStats?: ClusterGroupsStats;
     loading?: boolean;
     error?: IResponseError;
     additionalClusterProps?: AdditionalClusterProps;
@@ -131,6 +210,7 @@ interface ClusterInfoProps {
 export const ClusterInfo = ({
     cluster = {},
     versionsValues = [],
+    groupsStats = {},
     loading,
     error,
     additionalClusterProps = {},
@@ -151,7 +231,7 @@ export const ClusterInfo = ({
 
     const {info = [], links = []} = additionalClusterProps;
 
-    const clusterInfo = getInfo(cluster, versionsValues, info, [
+    const clusterInfo = getInfo(cluster, versionsValues, groupsStats, info, [
         {title: DEVELOPER_UI_TITLE, url: internalLink},
         ...links,
     ]);

package/dist/containers/Cluster/ClusterInfoSkeleton/ClusterInfoSkeleton.tsx

@@ -18,7 +18,7 @@ interface ClusterInfoSkeletonProps {
     rows?: number;
 }
 
-export const ClusterInfoSkeleton = ({rows = 7, className}: ClusterInfoSkeletonProps) => (
+export const ClusterInfoSkeleton = ({rows = 8, className}: ClusterInfoSkeletonProps) => (
     <div className={b(null, className)}>
         {[...new Array(rows)].map((_, index) => (
             <div className={b('row')} key={`skeleton-row-${index}`}>

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

@@ -0,0 +1,16 @@
+{
+  "disk-type": "Disk Type",
+  "erasure": "Erasure",
+  "allocated": "Allocated",
+  "available": "Available",
+  "usage": "Usage",
+  "dc": "DC",
+  "tablets": "Tablets",
+  "databases": "Databases",
+  "nodes": "Nodes",
+  "load": "Load",
+  "storage-size": "Storage size",
+  "storage-groups": "Storage groups, {{diskType}}",
+  "links": "Links",
+  "versions": "Versions"
+}

package/dist/containers/Cluster/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-cluster';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

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

@@ -0,0 +1,16 @@
+{
+  "disk-type": "Тип диска",
+  "erasure": "Режим",
+  "allocated": "Использовано",
+  "available": "Доступно",
+  "usage": "Потребление",
+  "dc": "ДЦ",
+  "tablets": "Таблетки",
+  "databases": "Базы данных",
+  "nodes": "Узлы",
+  "load": "Нагрузка",
+  "storage-size": "Размер хранилища",
+  "storage-groups": "Группы хранения, {{diskType}}",
+  "links": "Ссылки",
+  "versions": "Версии"
+}

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

@@ -1,16 +1,20 @@
 import {useDispatch} from 'react-redux';
 import {useCallback} from 'react';
 
-import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {useAutofetcher, useSearchQuery, useTypedSelector} from '../../../../../utils/hooks';
 import {
     getTopNodesByCpu,
     selectTopNodesByCpu,
     setDataWasNotLoaded,
 } from '../../../../../store/reducers/tenantOverview/topNodesByCpu/topNodesByCpu';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
 import {getTopNodesByCpuColumns} from '../../../../Nodes/getNodesColumns';
-import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
 
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
+
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
 import i18n from '../i18n';
 
 interface TopNodesByCpuProps {
@@ -21,6 +25,8 @@ interface TopNodesByCpuProps {
 export function TopNodesByCpu({path, additionalNodesProps}: TopNodesByCpuProps) {
     const dispatch = useDispatch();
 
+    const query = useSearchQuery();
+
     const {wasLoaded, loading, error} = useTypedSelector((state) => state.topNodesByCpu);
     const {autorefresh} = useTypedSelector((state) => state.schema);
     const topNodes = useTypedSelector(selectTopNodesByCpu);
@@ -39,11 +45,20 @@ export function TopNodesByCpu({path, additionalNodesProps}: TopNodesByCpuProps)
 
     useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
 
+    const title = getSectionTitle({
+        entity: i18n('nodes'),
+        postfix: i18n('by-pools-usage'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={topNodes || []}
             columns={columns}
-            title="Top nodes by pools usage"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}

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

@@ -1,16 +1,20 @@
 import {useDispatch} from 'react-redux';
 import {useCallback} from 'react';
 
-import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {useAutofetcher, useSearchQuery, useTypedSelector} from '../../../../../utils/hooks';
 import {
     getTopNodesByLoad,
     selectTopNodesByLoad,
     setDataWasNotLoaded,
 } from '../../../../../store/reducers/tenantOverview/topNodesByLoad/topNodesByLoad';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
 import {getTopNodesByLoadColumns} from '../../../../Nodes/getNodesColumns';
-import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
 
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
+
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
 import i18n from '../i18n';
 
 interface TopNodesByLoadProps {
@@ -21,6 +25,8 @@ interface TopNodesByLoadProps {
 export function TopNodesByLoad({path, additionalNodesProps}: TopNodesByLoadProps) {
     const dispatch = useDispatch();
 
+    const query = useSearchQuery();
+
     const {wasLoaded, loading, error} = useTypedSelector((state) => state.topNodesByLoad);
     const {autorefresh} = useTypedSelector((state) => state.schema);
     const topNodes = useTypedSelector(selectTopNodesByLoad);
@@ -39,11 +45,20 @@ export function TopNodesByLoad({path, additionalNodesProps}: TopNodesByLoadProps
 
     useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
 
+    const title = getSectionTitle({
+        entity: i18n('nodes'),
+        postfix: i18n('by-load'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={topNodes || []}
             columns={columns}
-            title="Top nodes by load"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}

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

@@ -3,6 +3,7 @@ import {useHistory, useLocation} from 'react-router';
 import {useCallback} from 'react';
 
 import {
+    TENANT_DIAGNOSTICS_TABS_IDS,
     TENANT_PAGE,
     TENANT_PAGES_IDS,
     TENANT_QUERY_TABS_ID,
@@ -14,9 +15,13 @@ import {
 import {changeUserInput} from '../../../../../store/reducers/executeQuery';
 import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
 import {parseQuery} from '../../../../../routes';
+
 import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
 import {getTenantOverviewTopQueriesColumns} from '../../TopQueries/getTopQueriesColumns';
+
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
+import i18n from '../i18n';
 
 interface TopQueriesProps {
     path: string;
@@ -27,6 +32,8 @@ export function TopQueries({path}: TopQueriesProps) {
     const location = useLocation();
     const history = useHistory();
 
+    const query = parseQuery(location);
+
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
     const {
@@ -68,12 +75,21 @@ export function TopQueries({path}: TopQueriesProps) {
         [dispatch, history, location],
     );
 
+    const title = getSectionTitle({
+        entity: i18n('queries'),
+        postfix: i18n('by-cpu-time'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topQueries,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={data || []}
             columns={columns}
             onRowClick={handleRowClick}
-            title="Top queries by cpu time"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}

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

@@ -2,12 +2,20 @@ import {useDispatch} from 'react-redux';
 import {useLocation} from 'react-router';
 
 import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {parseQuery} from '../../../../../routes';
+
 import {
     sendTenantOverviewTopShardsQuery,
     setDataWasNotLoaded,
 } from '../../../../../store/reducers/tenantOverview/topShards/tenantOverviewTopShards';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import {getTopShardsColumns} from '../../TopShards/getTopShardsColumns';
+
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
+
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
+import i18n from '../i18n';
 
 interface TopShardsProps {
     path: string;
@@ -17,6 +25,8 @@ export const TopShards = ({path}: TopShardsProps) => {
     const dispatch = useDispatch();
     const location = useLocation();
 
+    const query = parseQuery(location);
+
     const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
 
     const {
@@ -39,11 +49,20 @@ export const TopShards = ({path}: TopShardsProps) => {
 
     const columns = getTopShardsColumns(path, location);
 
+    const title = getSectionTitle({
+        entity: i18n('shards'),
+        postfix: i18n('by-cpu-usage'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topShards,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={data || []}
             columns={columns}
-            title="Top shards by cpu usage"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}

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

@@ -1,16 +1,20 @@
 import {useDispatch} from 'react-redux';
 import {useCallback} from 'react';
 
-import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {useAutofetcher, useTypedSelector, useSearchQuery} from '../../../../../utils/hooks';
 import {
     getTopNodesByMemory,
     selectTopNodesByMemory,
     setDataWasNotLoaded,
 } from '../../../../../store/reducers/tenantOverview/topNodesByMemory/topNodesByMemory';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
 import {getTopNodesByMemoryColumns} from '../../../../Nodes/getNodesColumns';
-import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
 
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
+
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
 import i18n from '../i18n';
 
 interface TopNodesByMemoryProps {
@@ -21,6 +25,8 @@ interface TopNodesByMemoryProps {
 export function TopNodesByMemory({path, additionalNodesProps}: TopNodesByMemoryProps) {
     const dispatch = useDispatch();
 
+    const query = useSearchQuery();
+
     const {wasLoaded, loading, error} = useTypedSelector((state) => state.topNodesByMemory);
     const {autorefresh} = useTypedSelector((state) => state.schema);
     const topNodes = useTypedSelector(selectTopNodesByMemory);
@@ -41,11 +47,20 @@ export function TopNodesByMemory({path, additionalNodesProps}: TopNodesByMemoryP
 
     useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
 
+    const title = getSectionTitle({
+        entity: i18n('nodes'),
+        postfix: i18n('by-memory'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={topNodes || []}
             columns={columns}
-            title="Top nodes by memory"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}

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

@@ -1,3 +1,4 @@
+import type {ReactNode} from 'react';
 import cn from 'bem-cn-lite';
 
 import DataTable from '@gravity-ui/react-data-table';
@@ -14,7 +15,7 @@ import {ResponseError} from '../../../../components/Errors/ResponseError';
 const b = cn('tenant-overview');
 
 interface TenantOverviewTableLayoutProps<T> extends Omit<DataTableProps<T>, 'theme'> {
-    title: string;
+    title: ReactNode;
     loading?: boolean;
     wasLoaded?: boolean;
     error?: IResponseError;