ydb-embedded-ui 4.22.0 → 4.23.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [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;

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

@@ -1,14 +1,20 @@
 import {useCallback} from 'react';
 import {useDispatch} from 'react-redux';
 
-import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {useAutofetcher, useSearchQuery, useTypedSelector} from '../../../../../utils/hooks';
 import {
     setDataWasNotLoaded,
     getTopStorageGroups,
     selectTopStorageGroups,
 } from '../../../../../store/reducers/tenantOverview/topStorageGroups/topStorageGroups';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import {getStorageTopGroupsColumns} from '../../../../Storage/StorageGroups/getStorageGroupsColumns';
+
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
+
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
+import i18n from '../i18n';
 
 interface TopGroupsProps {
     tenant?: string;
@@ -17,6 +23,8 @@ interface TopGroupsProps {
 export function TopGroups({tenant}: TopGroupsProps) {
     const dispatch = useDispatch();
 
+    const query = useSearchQuery();
+
     const {autorefresh} = useTypedSelector((state) => state.schema);
     const {loading, wasLoaded, error} = useTypedSelector((state) => state.topStorageGroups);
     const topGroups = useTypedSelector(selectTopStorageGroups);
@@ -36,11 +44,20 @@ export function TopGroups({tenant}: TopGroupsProps) {
 
     useAutofetcher(fetchData, [fetchData], autorefresh);
 
+    const title = getSectionTitle({
+        entity: i18n('groups'),
+        postfix: i18n('by-usage'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.storage,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={topGroups || []}
             columns={columns}
-            title="Top groups by usage"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}

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

@@ -12,7 +12,10 @@ import type {KeyValueRow} from '../../../../../types/api/query';
 import {formatBytes, getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
 import {LinkToSchemaObject} from '../../../../../components/LinkToSchemaObject/LinkToSchemaObject';
 import {CellWithPopover} from '../../../../../components/CellWithPopover/CellWithPopover';
+
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
+import i18n from '../i18n';
 
 import '../TenantOverview.scss';
 
@@ -72,12 +75,16 @@ export function TopTables({path}: TopTablesProps) {
                 ) : null,
         },
     ];
+    const title = getSectionTitle({
+        entity: i18n('tables'),
+        postfix: i18n('by-size'),
+    });
 
     return (
         <TenantOverviewTableLayout
             data={data || []}
             columns={columns}
-            title="Top tables by size"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}

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

@@ -0,0 +1,28 @@
+import {InternalLink} from '../../../../components/InternalLink/InternalLink';
+
+import i18n from './i18n';
+
+interface GetSectionTitleParams {
+    entity: string;
+    postfix: string;
+    prefix?: string;
+    link?: string;
+}
+
+// Titles are formed by the principle "Top entities by parameter"
+export const getSectionTitle = ({
+    prefix = i18n('top'),
+    entity,
+    postfix,
+    link,
+}: GetSectionTitleParams) => {
+    if (link) {
+        return (
+            <>
+                {prefix} <InternalLink to={link}>{entity}</InternalLink> {postfix}
+            </>
+        );
+    }
+
+    return `${prefix} ${entity} ${postfix}`;
+};

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

@@ -7,5 +7,21 @@
   "title.pools": "Pools",
   "title.metrics": "Metrics",
 
-  "top-groups.empty-data": "No such groups"
+  "top-groups.empty-data": "No such groups",
+
+  "top": "Top",
+
+  "nodes": "nodes",
+  "shards": "shards",
+  "groups": "groups",
+  "queries": "queries",
+  "tables": "tables",
+
+  "by-pools-usage": "by pools usage",
+  "by-cpu-time": "by cpu time",
+  "by-cpu-usage": "by cpu usage",
+  "by-load": "by load",
+  "by-memory": "by memory",
+  "by-usage": "by usage",
+  "by-size": "by size"
 }

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

@@ -7,5 +7,21 @@
   "title.pools": "Пулы",
   "title.metrics": "Метрики",
 
-  "top-groups.empty-data": "Нет групп"
+  "top-groups.empty-data": "Нет групп",
+
+  "top": "Топ",
+
+  "nodes": "узлов",
+  "shards": "шардов",
+  "groups": "групп",
+  "queries": "запросов",
+  "tables": "таблиц",
+
+  "by-pools-usage": "по использованию пулов",
+  "by-cpu-time": "по времени cpu",
+  "by-cpu-usage": "по использованию cpu",
+  "by-load": "по нагрузке",
+  "by-memory": "по памяти",
+  "by-usage": "по потреблению",
+  "by-size": "по размеру"
 }

package/dist/containers/Tenant/Schema/SchemaViewer/SchemaViewer.tsx

@@ -1,3 +1,4 @@
+import {useMemo} from 'react';
 import cn from 'bem-cn-lite';
 
 import DataTable, {Column} from '@gravity-ui/react-data-table';
@@ -28,6 +29,16 @@ interface SchemaViewerProps {
 }
 
 export const SchemaViewer = ({keyColumnIds = [], columns = [], type}: SchemaViewerProps) => {
+    // Keys should be displayd by their order in keyColumnIds (Primary Key)
+    const keyColumnsOrderValues = useMemo(() => {
+        return keyColumnIds.reduce<Record<number, number>>((result, keyColumnId, index) => {
+            // Put columns with negative values, so they will be the first with ascending sort
+            // Minus keyColumnIds.length for the first key, -1 for the last
+            result[keyColumnId] = index - keyColumnIds.length;
+            return result;
+        }, {});
+    }, [keyColumnIds]);
+
     let dataTableColumns: Column<TColumnDescription>[] = [
         {
             name: SchemaViewerColumns.id,
@@ -36,8 +47,11 @@ export const SchemaViewer = ({keyColumnIds = [], columns = [], type}: SchemaView
         {
             name: SchemaViewerColumns.key,
             width: 40,
+            // Table should start with key columns on sort click
+            defaultOrder: DataTable.ASCENDING,
             sortAccessor: (row) => {
-                return row.Id && keyColumnIds.includes(row.Id) ? 1 : 0;
+                // Values in keyColumnsOrderValues are always negative, so it will be 1 for not key columns
+                return (row.Id && keyColumnsOrderValues[row.Id]) || 1;
             },
             render: ({row}) => {
                 return row.Id && keyColumnIds.includes(row.Id) ? (
@@ -58,6 +72,8 @@ export const SchemaViewer = ({keyColumnIds = [], columns = [], type}: SchemaView
         {
             name: SchemaViewerColumns.notNull,
             width: 100,
+            // Table should start with notNull columns on sort click
+            defaultOrder: DataTable.DESCENDING,
             render: ({row}) => {
                 if (row.NotNull) {
                     return '\u2713';
@@ -75,22 +91,14 @@ export const SchemaViewer = ({keyColumnIds = [], columns = [], type}: SchemaView
         );
     }
 
-    // Display key columns first
-    const tableData = columns.sort((column) => {
-        if (column.Id && keyColumnIds.includes(column.Id)) {
-            return 1;
-        }
-        return -1;
-    });
-
     return (
         <div className={b()}>
             <DataTable
                 theme="yandex-cloud"
-                data={tableData}
+                data={columns}
                 columns={dataTableColumns}
                 settings={DEFAULT_TABLE_SETTINGS}
-                initialSortOrder={{columnId: SchemaViewerColumns.key, order: DataTable.DESCENDING}}
+                initialSortOrder={{columnId: SchemaViewerColumns.key, order: DataTable.ASCENDING}}
             />
         </div>
     );

package/dist/store/reducers/cluster/__test__/parseGroupsStatsQueryResponse.test.ts

@@ -0,0 +1,121 @@
+import {parseGroupsStatsQueryResponse} from '../utils';
+
+describe('parseGroupsStatsQueryResponse', () => {
+    const columns = [
+        {
+            name: 'PDiskFilter',
+            type: 'Utf8?',
+        },
+        {
+            name: 'ErasureSpecies',
+            type: 'Utf8?',
+        },
+        {
+            name: 'CurrentAvailableSize',
+            type: 'Uint64?',
+        },
+        {
+            name: 'CurrentAllocatedSize',
+            type: 'Uint64?',
+        },
+        {
+            name: 'CurrentGroupsCreated',
+            type: 'Uint32?',
+        },
+        {
+            name: 'AvailableGroupsToCreate',
+            type: 'Uint32?',
+        },
+    ];
+
+    // 2 disk types and 2 erasure types
+    const dataSet1 = {
+        columns,
+        result: [
+            ['Type:SSD', 'block-4-2', '1000', '2000', 100, 50],
+            ['Type:ROT', 'block-4-2', '2000', '1000', 50, 0],
+            ['Type:ROT', 'mirror-3of4', '1000', '0', 15, 0],
+            ['Type:SSD', 'mirror-3of4', '1000', '0', 5, 50],
+            ['Type:ROT', 'mirror-3-dc', null, null, null, 0],
+            ['Type:SSD', 'mirror-3-dc', null, null, null, 0],
+        ],
+    };
+
+    // 2 disk types and 1 erasure types, but with additional disks params
+    const dataSet2 = {
+        columns,
+        result: [
+            ['Type:ROT,SharedWithOs:0,ReadCentric:0,Kind:0', 'mirror-3-dc', '1000', '500', 16, 16],
+            ['Type:ROT,SharedWithOs:1,ReadCentric:0,Kind:0', 'mirror-3-dc', '2000', '1000', 8, 24],
+            ['Type:SSD', 'mirror-3-dc', '3000', '400', 2, 10],
+            ['Type:ROT', 'mirror-3-dc', null, null, null, 32],
+            ['Type:ROT', 'block-4-2', null, null, null, 20],
+            ['Type:SSD', 'block-4-2', null, null, null, 0],
+        ],
+    };
+    const parsedDataSet1 = {
+        SSD: {
+            'block-4-2': {
+                diskType: 'SSD',
+                erasure: 'block-4-2',
+                createdGroups: 100,
+                totalGroups: 150,
+                allocatedSize: 2000,
+                availableSize: 1000,
+            },
+            'mirror-3of4': {
+                diskType: 'SSD',
+                erasure: 'mirror-3of4',
+                createdGroups: 5,
+                totalGroups: 55,
+                allocatedSize: 0,
+                availableSize: 1000,
+            },
+        },
+        HDD: {
+            'block-4-2': {
+                diskType: 'HDD',
+                erasure: 'block-4-2',
+                createdGroups: 50,
+                totalGroups: 50,
+                allocatedSize: 1000,
+                availableSize: 2000,
+            },
+            'mirror-3of4': {
+                diskType: 'HDD',
+                erasure: 'mirror-3of4',
+                createdGroups: 15,
+                totalGroups: 15,
+                allocatedSize: 0,
+                availableSize: 1000,
+            },
+        },
+    };
+
+    const parsedDataSet2 = {
+        HDD: {
+            'mirror-3-dc': {
+                diskType: 'HDD',
+                erasure: 'mirror-3-dc',
+                createdGroups: 24,
+                totalGroups: 64,
+                allocatedSize: 1500,
+                availableSize: 3000,
+            },
+        },
+        SSD: {
+            'mirror-3-dc': {
+                diskType: 'SSD',
+                erasure: 'mirror-3-dc',
+                createdGroups: 2,
+                totalGroups: 12,
+                allocatedSize: 400,
+                availableSize: 3000,
+            },
+        },
+    };
+    it('should correctly parse data', () => {
+        expect(parseGroupsStatsQueryResponse(dataSet1)).toEqual(parsedDataSet1);
+        expect(parseGroupsStatsQueryResponse(dataSet2)).toEqual(parsedDataSet2);
+    });
+});

package/dist/store/reducers/cluster/cluster.ts

@@ -3,6 +3,7 @@ import type {Reducer} from 'redux';
 import '../../../services/api';
 import {createRequestActionTypes, createApiRequest} from '../../utils';
 import type {ClusterAction, ClusterState} from './types';
+import {createSelectClusterGroupsQuery, parseGroupsStatsQueryResponse} from './utils';
 
 export const FETCH_CLUSTER = createRequestActionTypes('cluster', 'FETCH_CLUSTER');
 
@@ -17,9 +18,12 @@ const cluster: Reducer<ClusterState, ClusterAction> = (state = initialState, act
             };
         }
         case FETCH_CLUSTER.SUCCESS: {
+            const {clusterData, groupsStats} = action.data;
+
             return {
                 ...state,
-                data: action.data,
+                data: clusterData,
+                groupsStats,
                 loading: false,
                 wasLoaded: true,
                 error: undefined,
@@ -42,8 +46,48 @@ const cluster: Reducer<ClusterState, ClusterAction> = (state = initialState, act
 };
 
 export function getClusterInfo(clusterName?: string) {
+    async function requestClusterData() {
+        // Error here is handled by createApiRequest
+        const clusterData = await window.api.getClusterInfo(clusterName);
+
+        try {
+            const clusterRoot = clusterData.Domain;
+
+            // Without domain we cannot get stats from system tables
+            if (!clusterRoot) {
+                return {
+                    clusterData,
+                };
+            }
+
+            const query = createSelectClusterGroupsQuery(clusterRoot);
+
+            // Normally query request should be fulfilled within 300-400ms even on very big clusters
+            // Table with stats is supposed to be very small (less than 10 rows)
+            // So we batch this request with cluster request to prevent possible layout shifts, if data is missing
+            const groupsStatsResponse = await window.api.sendQuery({
+                schema: 'modern',
+                query: query,
+                database: clusterRoot,
+                action: 'execute-scan',
+            });
+
+            return {
+                clusterData,
+                groupsStats: parseGroupsStatsQueryResponse(groupsStatsResponse),
+            };
+        } catch {
+            // Doesn't return groups stats on error
+            // It could happen if user doesn't have access rights
+            // Or there are no system tables in cluster root
+            return {
+                clusterData,
+            };
+        }
+    }
+
     return createApiRequest({
-        request: window.api.getClusterInfo(clusterName),
+        request: requestClusterData(),
         actions: FETCH_CLUSTER,
     });
 }

package/dist/store/reducers/cluster/types.ts

@@ -1,14 +1,39 @@
-import {FETCH_CLUSTER} from './cluster';
-
 import type {TClusterInfo} from '../../../types/api/cluster';
-import type {ApiRequestAction} from '../../utils';
 import type {IResponseError} from '../../../types/api/error';
+import type {ApiRequestAction} from '../../utils';
+
+import {FETCH_CLUSTER} from './cluster';
+
+export interface DiskErasureGroupsStats {
+    diskType: string;
+    erasure: string;
+    createdGroups: number;
+    totalGroups: number;
+    allocatedSize: number;
+    availableSize: number;
+}
+
+/** Keys - erasure types */
+export type DiskGroupsStats = Record<string, DiskErasureGroupsStats>;
+
+/** Keys - PDisks types */
+export type ClusterGroupsStats = Record<string, DiskGroupsStats>;
 
 export interface ClusterState {
     loading: boolean;
     wasLoaded: boolean;
     data?: TClusterInfo;
     error?: IResponseError;
+    groupsStats?: ClusterGroupsStats;
+}
+
+export interface HandledClusterResponse {
+    clusterData: TClusterInfo;
+    groupsStats: ClusterGroupsStats;
 }
 
-export type ClusterAction = ApiRequestAction<typeof FETCH_CLUSTER, TClusterInfo, IResponseError>;
+export type ClusterAction = ApiRequestAction<
+    typeof FETCH_CLUSTER,
+    HandledClusterResponse,
+    IResponseError
+>;

package/dist/store/reducers/cluster/utils.ts

@@ -0,0 +1,88 @@
+import type {ExecuteQueryResponse} from '../../../types/api/query';
+import {parseQueryAPIExecuteResponse} from '../../../utils/query';
+
+import type {ClusterGroupsStats} from './types';
+
+export const createSelectClusterGroupsQuery = (clusterRoot: string) => {
+    return `
+SELECT 
+    PDiskFilter,
+    ErasureSpecies,
+    CurrentAvailableSize,
+    CurrentAllocatedSize,
+    CurrentGroupsCreated,
+    AvailableGroupsToCreate
+    FROM \`${clusterRoot}/.sys/ds_storage_stats\`
+    ORDER BY CurrentGroupsCreated DESC;
+`;
+};
+
+const getDiskType = (rawTypeString: string) => {
+    // Check if value math regexp and put disk type in type group
+    const diskTypeRe = /^Type:(?<type>[A-Za-z]+)/;
+
+    const diskType = rawTypeString.match(diskTypeRe)?.groups?.['type'];
+
+    if (diskType === 'ROT') {
+        // Display ROT as HDD
+        return 'HDD';
+    }
+
+    return diskType;
+};
+
+export const parseGroupsStatsQueryResponse = (
+    data: ExecuteQueryResponse<'modern'>,
+): ClusterGroupsStats => {
+    const parsedData = parseQueryAPIExecuteResponse(data).result;
+    const result: ClusterGroupsStats = {};
+
+    parsedData?.forEach((stats) => {
+        const {
+            PDiskFilter,
+            ErasureSpecies: erasure,
+            CurrentAvailableSize,
+            CurrentAllocatedSize,
+            CurrentGroupsCreated,
+            AvailableGroupsToCreate,
+        } = stats;
+
+        const createdGroups = Number(CurrentGroupsCreated) || 0;
+        const availableGroupsToCreate = Number(AvailableGroupsToCreate) || 0;
+        const totalGroups = createdGroups + availableGroupsToCreate;
+        const allocatedSize = Number(CurrentAllocatedSize) || 0;
+        const availableSize = Number(CurrentAvailableSize) || 0;
+        const diskType = PDiskFilter && typeof PDiskFilter === 'string' && getDiskType(PDiskFilter);
+
+        if (diskType && erasure && typeof erasure === 'string' && createdGroups) {
+            const preparedStats = {
+                diskType,
+                erasure,
+                createdGroups,
+                totalGroups,
+                allocatedSize,
+                availableSize,
+            };
+
+            if (result[diskType]) {
+                if (result[diskType][erasure]) {
+                    const currentValue = {...result[diskType][erasure]};
+                    result[diskType][erasure] = {
+                        diskType,
+                        erasure,
+                        createdGroups: currentValue.createdGroups + createdGroups,
+                        totalGroups: currentValue.totalGroups + totalGroups,
+                        allocatedSize: currentValue.allocatedSize + allocatedSize,
+                        availableSize: currentValue.availableSize + availableSize,
+                    };
+                } else {
+                    result[diskType][erasure] = preparedStats;
+                }
+            } else {
+                result[diskType] = {[erasure]: preparedStats};
+            }
+        }
+    });
+
+    return result;
+};

package/dist/types/api/cluster.ts

@@ -32,6 +32,9 @@ export interface TClusterInfo {
     /** uint64 */
     Tablets?: string;
 
+    /** Cluster root database */
+    Domain?: string;
+
     Balancer?: string; // additional
     Solomon?: string; // additional
 }

package/dist/utils/hooks/index.ts

@@ -3,6 +3,7 @@ export * from './useTypedSelector';
 export * from './useSetting';
 export * from './useQueryModes';
 export * from './useTableSort';
+export * from './useSearchQuery';
 
 export * from './useNodesRequestParams';
 export * from './useStorageRequestParams';

package/dist/utils/hooks/useSearchQuery.ts

@@ -0,0 +1,9 @@
+import {useLocation} from 'react-router';
+
+import {parseQuery} from '../../routes';
+
+export const useSearchQuery = () => {
+    const location = useLocation();
+
+    return parseQuery(location);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.22.0",
+  "version": "4.23.0",
   "files": [
     "dist"
   ],