ydb-embedded-ui 21.1.0 → 22.1.0

package/src/components/TenantNameWrapper/TenantNameWrapper.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import {Pencil, PlugConnection, TrashBin} from '@gravity-ui/icons';
 import {ClipboardButton, Flex, Link, Text} from '@gravity-ui/uikit';
 
-import {getTenantPath} from '../../routes';
 import {useEmMetaAvailable} from '../../store/reducers/capabilities/hooks';
 import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster';
 import type {PreparedTenant} from '../../store/reducers/tenants/types';
@@ -23,7 +22,7 @@ import {EntityStatus} from '../EntityStatus/EntityStatus';
 import {InternalLink} from '../InternalLink/InternalLink';
 
 import i18n from './i18n';
-import {getTenantBackend} from './utils';
+import {getTenantLink} from './utils';
 
 import './TenantNameWrapper.scss';
 
@@ -34,6 +33,7 @@ interface TenantNameWrapperProps {
     clusterName?: string;
     additionalTenantsProps?: AdditionalTenantsProps;
     externalLink?: boolean;
+    link?: ReturnType<typeof getTenantLink>;
     onStatusClick?: (tenant: PreparedTenant, database: string | undefined) => void;
 }
 
@@ -42,6 +42,7 @@ export function TenantNameWrapper({
     clusterName,
     additionalTenantsProps,
     externalLink,
+    link: tenantLink,
     onStatusClick,
 }: TenantNameWrapperProps) {
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
@@ -51,8 +52,17 @@ export function TenantNameWrapper({
 
     const {settings} = useClusterBaseInfo();
 
-    const backend = getTenantBackend(tenant, additionalTenantsProps);
-    const isExternalLink = externalLink || Boolean(backend);
+    const {
+        href: dbUrl,
+        database,
+        isExternalLink,
+    } = tenantLink ??
+    getTenantLink({
+        tenant,
+        additionalTenantsProps,
+        externalLink,
+        useDatabaseId: uiFactory.useDatabaseId && settings?.use_meta_proxy !== false,
+    });
     const useMetaProxy = uiFactory.useMetaProxy && settings?.use_meta_proxy !== false;
 
     const legacyLinks = React.useMemo(
@@ -74,17 +84,6 @@ export function TenantNameWrapper({
         [allResolvedLinks, showMonitoring],
     );
 
-    const useDatabaseId = uiFactory.useDatabaseId && settings?.use_meta_proxy !== false;
-    const database = useDatabaseId ? tenant.Id : tenant.Name;
-
-    const dbUrl = getTenantPath(
-        {
-            clusterName: tenant.Cluster,
-            database,
-            backend,
-        },
-        {withBasename: isExternalLink},
-    );
     const dbName = tenant.controlPlaneName;
     const dbPath = tenant.Name ?? i18n('context_unknown');
     const dbStatus = tenant.Overall;

package/src/components/TenantNameWrapper/utils.ts

@@ -1,3 +1,4 @@
+import {getTenantPath} from '../../routes';
 import type {PreparedTenant} from '../../store/reducers/tenants/types';
 import type {AdditionalTenantsProps} from '../../types/additionalProps';
 
@@ -17,3 +18,28 @@ export function getTenantBackend(
     }
     return additionalTenantsProps.prepareTenantBackend(nodeId);
 }
+
+export function getTenantLink({
+    tenant,
+    additionalTenantsProps,
+    externalLink,
+    useDatabaseId,
+}: {
+    tenant: PreparedTenant;
+    additionalTenantsProps?: AdditionalTenantsProps;
+    externalLink?: boolean;
+    useDatabaseId?: boolean;
+}) {
+    const backend = getTenantBackend(tenant, additionalTenantsProps);
+    const isExternalLink = Boolean(externalLink || backend);
+    const database = useDatabaseId ? tenant.Id : tenant.Name;
+
+    return {
+        database,
+        isExternalLink,
+        href: getTenantPath(
+            {clusterName: tenant.Cluster, database, backend},
+            {withBasename: isExternalLink},
+        ),
+    };
+}

package/src/components/VDisk/VDisk.tsx

@@ -3,11 +3,12 @@ import React from 'react';
 import type {PopupPlacement, PopupProps} from '@gravity-ui/uikit';
 
 import {useVDiskPagePath} from '../../routes';
+import {EFlag, isCapacityAlert} from '../../types/api/enums';
 import {cn} from '../../utils/cn';
 import {NOT_AVAILABLE_SEVERITY} from '../../utils/disks/constants';
 import type {
-    AllModeIndicatorsState,
     DiskIndicatorValue,
+    VDiskDisplayState,
     VDiskDisplayStateGetter,
 } from '../../utils/disks/displayState';
 import {getDefaultDiskDisplayState} from '../../utils/disks/displayState';
@@ -35,7 +36,6 @@ const EMPTY_ALL_MODE_INDICATORS = {};
 interface GetVDiskBarContentParams {
     allocatedPercent?: number;
     compact?: boolean;
-    hidden: boolean;
     noDataPlaceholder?: React.ReactNode;
     severity: number;
     showAllocatedPercentLabel?: boolean;
@@ -45,16 +45,11 @@ interface GetVDiskBarContentParams {
 function getVDiskBarContent({
     allocatedPercent,
     compact,
-    hidden,
     noDataPlaceholder,
     severity,
     showAllocatedPercentLabel,
     showNoDataPlaceholder,
 }: GetVDiskBarContentParams) {
-    if (hidden) {
-        return null;
-    }
-
     const hasAllocatedPercent = isNumeric(allocatedPercent) && allocatedPercent >= 0;
     if (!compact && hasAllocatedPercent && showAllocatedPercentLabel !== false) {
         return <DiskBarLabel>{`${Math.floor(allocatedPercent)}%`}</DiskBarLabel>;
@@ -74,6 +69,9 @@ function getVDiskBarContent({
 interface GetVDiskBarIndicatorParams {
     hidden: boolean;
     icon?: DiskIndicatorValue;
+    indicatorClassName?: string;
+    iconGroupSize?: number;
+    iconSize?: number;
     isDonor?: boolean;
     placement: 'inline' | 'overlap';
     severity: number;
@@ -83,6 +81,9 @@ interface GetVDiskBarIndicatorParams {
 function getVDiskBarIndicator({
     hidden,
     icon,
+    indicatorClassName,
+    iconGroupSize,
+    iconSize,
     isDonor,
     placement,
     severity,
@@ -94,33 +95,49 @@ function getVDiskBarIndicator({
     }
 
     return {
-        leading: <DiskIndicator value={resolvedIndicator} placement={placement} />,
+        leading: (
+            <DiskIndicator
+                value={resolvedIndicator}
+                placement={placement}
+                iconSize={iconSize}
+                iconGroupSize={iconGroupSize}
+                className={indicatorClassName}
+            />
+        ),
         overflowVisible: placement === 'overlap',
         showIndicator: true,
     };
 }
 
-function getAllModeOverlay(
-    compact: boolean | undefined,
-    isAllMode: boolean,
-    indicators: AllModeIndicatorsState | undefined,
-) {
-    if (compact || !isAllMode) {
-        return null;
+function getFlagAccessibleName(flag: EFlag | undefined) {
+    switch (flag) {
+        case EFlag.Green:
+        case EFlag.Blue:
+            return i18n('value_ok');
+        case EFlag.Yellow:
+            return i18n('value_notice');
+        case EFlag.Orange:
+            return i18n('value_warning');
+        case EFlag.Red:
+            return i18n('value_impaired');
+        default:
+            return i18n('context_no-data');
     }
-
-    return <AllModeIndicators indicators={indicators ?? EMPTY_ALL_MODE_INDICATORS} />;
 }
 
-function getAccessibleName(
-    data: PreparedVDisk,
-    hasIssues: boolean | undefined,
-    isAllMode: boolean,
-) {
-    if (!isAllMode) {
-        return undefined;
+function getReplicationAccessibleName(replicated: boolean | undefined) {
+    if (replicated === undefined) {
+        return i18n('context_no-data');
     }
 
+    return i18n(
+        replicated
+            ? 'context_all-mode-replication-complete'
+            : 'context_all-mode-replication-in-progress',
+    );
+}
+
+function getAllModeAccessibleName(data: PreparedVDisk, hasIssues: boolean | undefined) {
     const noData = i18n('context_no-data');
     const health =
         hasIssues === undefined
@@ -132,20 +149,11 @@ function getAccessibleName(
         Number.isFinite(data.AllocatedPercent) && Number(data.AllocatedPercent) >= 0
             ? `${data.AllocatedPercent}%`
             : noData;
-    const replication =
-        data.Replicated === undefined
-            ? noData
-            : i18n(
-                  data.Replicated
-                      ? 'context_all-mode-replication-complete'
-                      : 'context_all-mode-replication-in-progress',
-              );
-
     return i18n('context_all-mode-accessible-name', {
         vdiskId: data.StringifiedId || noData,
         health,
-        state: data.VDiskState || noData,
-        replication,
+        state: data.VDiskState || data.Status || noData,
+        replication: getReplicationAccessibleName(data.Replicated),
         capacityAlert: data.CapacityAlert || noData,
         frontQueues: data.FrontQueues || noData,
         freshCompaction: data.SatisfactionRank?.FreshRank?.Flag || noData,
@@ -154,9 +162,58 @@ function getAccessibleName(
     });
 }
 
+function getAccessibleName(data: PreparedVDisk, {mode, allMode, isNoData}: VDiskDisplayState) {
+    if (!mode) {
+        return undefined;
+    }
+    if (mode === 'all') {
+        return getAllModeAccessibleName(data, allMode?.hasIssues);
+    }
+
+    const noData = i18n('context_no-data');
+    let diskName = i18n(data.DonorMode ? 'context_donor-vdisk' : 'context_vdisk', {
+        vdiskId: data.StringifiedId || noData,
+        nodeId: data.NodeId ?? noData,
+    });
+    if (isNoData) {
+        diskName = i18n('context_vdisk-no-whiteboard', {disk: diskName, noData});
+    }
+
+    const {CapacityAlert, FrontQueues, SatisfactionRank, Replicated} = isNoData ? {} : data;
+    const {FreshRank, LevelRank} = SatisfactionRank ?? {};
+
+    switch (mode) {
+        case 'state':
+            return i18n('context_state-accessible-name', {
+                disk: diskName,
+                state: data.VDiskState || data.Status || noData,
+                replication: getReplicationAccessibleName(Replicated),
+            });
+        case 'space':
+            return i18n('context_space-accessible-name', {
+                disk: diskName,
+                capacityAlert: isCapacityAlert(CapacityAlert) ? CapacityAlert : noData,
+            });
+        case 'frontQueues':
+            return i18n('context_front-queues-accessible-name', {
+                disk: diskName,
+                frontQueues: getFlagAccessibleName(FrontQueues),
+            });
+        case 'compaction':
+            return i18n('context_compaction-accessible-name', {
+                disk: diskName,
+                freshCompaction: getFlagAccessibleName(FreshRank?.Flag),
+                levelCompaction: getFlagAccessibleName(LevelRank?.Flag),
+            });
+        default:
+            return undefined;
+    }
+}
+
 export interface VDiskProps {
     data?: PreparedVDisk;
     compact?: boolean;
+    allModeSize?: 's' | 'm';
     inactive?: boolean;
     showPopup?: boolean;
     onShowPopup?: VoidFunction;
@@ -165,6 +222,9 @@ export interface VDiskProps {
     delayOpen?: number;
     delayClose?: number;
     withIcon?: boolean;
+    iconSize?: number;
+    iconGroupSize?: number;
+    indicatorClassName?: string;
     highlighted?: boolean;
     placement?: PopupPlacement;
     popupOffset?: PopupProps['offset'];
@@ -175,6 +235,7 @@ export interface VDiskProps {
 export const VDisk = ({
     data = {},
     compact,
+    allModeSize,
     inactive,
     showPopup,
     onShowPopup,
@@ -183,6 +244,9 @@ export const VDisk = ({
     delayClose,
     delayOpen,
     withIcon,
+    iconSize,
+    iconGroupSize,
+    indicatorClassName,
     highlighted,
     placement = ['top', 'bottom', 'left', 'right'],
     popupOffset = DEFAULT_POPUP_OFFSET,
@@ -203,20 +267,24 @@ export const VDisk = ({
         icon,
         mode,
         isLegendInactive,
+        borderless,
         showNoDataPlaceholder,
         allocatedPercent,
         showAllocatedPercentLabel,
         striped,
         iconPlacement,
         allMode,
+        isNoData,
     } = displayState;
 
     const isAllMode = mode === 'all';
-    const accessibleName = getAccessibleName(data, allMode?.hasIssues, isAllMode);
-    const hideBarContent = Boolean(isLegendInactive && !isDonor);
+    const accessibleName = getAccessibleName(data, displayState);
     const {leading, overflowVisible, showIndicator} = getVDiskBarIndicator({
-        hidden: hideBarContent,
+        hidden: Boolean(isLegendInactive && !isDonor),
         icon,
+        indicatorClassName,
+        iconGroupSize,
+        iconSize,
         isDonor,
         placement: iconPlacement,
         severity,
@@ -226,18 +294,24 @@ export const VDisk = ({
     const barContent = getVDiskBarContent({
         allocatedPercent,
         compact,
-        hidden: hideBarContent,
         noDataPlaceholder,
         severity,
         showAllocatedPercentLabel,
         showNoDataPlaceholder,
     });
-    const overlay = getAllModeOverlay(compact, isAllMode, allMode?.indicators);
+    const overlay =
+        !compact && isAllMode && !isNoData ? (
+            <AllModeIndicators
+                indicators={allMode?.indicators ?? EMPTY_ALL_MODE_INDICATORS}
+                size={allModeSize}
+            />
+        ) : null;
     const tone = getDiskBarTone({
         severity,
         isDonor,
         showIndicator,
         indicator: icon,
+        isNoData,
     });
 
     return (
@@ -275,7 +349,7 @@ export const VDisk = ({
                         overlay={overlay}
                         highlighted={highlighted}
                         strongFill={allMode?.hasIssues}
-                        borderless={isLegendInactive}
+                        borderless={borderless}
                         overflowVisible={overflowVisible}
                     />
                 </InternalLink>

package/src/components/VDisk/VDiskWithDonorsStack.tsx

@@ -15,6 +15,8 @@ interface VDiskWithDonorsStackProps extends Omit<VDiskProps, 'withOpaqueBackgrou
     highlightedVDisk?: string;
     setHighlightedVDisk?: (id?: string) => void;
     progressBarClassName?: string;
+    renderContent?: boolean;
+    placeholderProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 
 const diskInStackPlacement: PopupPlacement = ['left', 'right'];
@@ -33,6 +35,8 @@ export function VDiskWithDonorsStack({
     onShowPopup: _onShowPopup,
     onHidePopup: _onHidePopup,
     highlighted: _highlighted,
+    renderContent = true,
+    placeholderProps,
     ...restProps
 }: VDiskWithDonorsStackProps) {
     const donors = data?.Donors ?? EMPTY_DONORS;
@@ -44,7 +48,7 @@ export function VDiskWithDonorsStack({
     const [internalHighlightedVDisk, setInternalHighlightedVDisk] = React.useState<string>();
 
     const donorIds = React.useMemo(
-        () => new Set(donors?.map((donor) => donor.StringifiedId) ?? []),
+        () => new Set(donors.map((donor) => donor.StringifiedId)),
         [donors],
     );
 
@@ -65,6 +69,13 @@ export function VDiskWithDonorsStack({
         setHighlightedVDisk?.(undefined);
     }, [setHighlightedVDisk]);
 
+    // Keep the stack's state and popup anchors until a main/donor interaction finishes.
+    if (!renderContent && !isHighlighted && !highlightedVDiskInStack) {
+        return (
+            <div className={className} data-disk-id={stackId} tabIndex={-1} {...placeholderProps} />
+        );
+    }
+
     // Spread restProps first, then explicitly override critical fields to prevent
     // external code from breaking the stack's highlight/popup coordination.
     const mainVDiskProps: Partial<VDiskProps> = {
@@ -107,7 +118,7 @@ export function VDiskWithDonorsStack({
                     highlighted={donor.StringifiedId === internalHighlightedVDisk}
                     onShowPopup={() => {
                         if (donor.StringifiedId) {
-                            setInternalHighlightedVDisk?.(donor.StringifiedId);
+                            setInternalHighlightedVDisk(donor.StringifiedId);
                         }
                     }}
                     onHidePopup={() => {
@@ -121,5 +132,9 @@ export function VDiskWithDonorsStack({
         <VDisk data={data} withIcon={withIcon} {...mainVDiskProps} />
     );
 
-    return <div className={className}>{content}</div>;
+    return (
+        <div className={className} data-disk-id={stackId} tabIndex={-1}>
+            {content}
+        </div>
+    );
 }

package/src/components/VDisk/i18n/en.json

@@ -1,5 +1,16 @@
 {
   "context_no-data": "N/D",
+  "context_vdisk": "VDisk {{vdiskId}} on node {{nodeId}}",
+  "context_donor-vdisk": "Donor VDisk {{vdiskId}} on node {{nodeId}}",
+  "context_vdisk-no-whiteboard": "{{disk}}. Whiteboard: {{noData}}",
+  "context_state-accessible-name": "{{disk}}. State: {{state}}. Replication: {{replication}}.",
+  "context_space-accessible-name": "{{disk}}. Capacity alert: {{capacityAlert}}.",
+  "context_front-queues-accessible-name": "{{disk}}. Front queues: {{frontQueues}}.",
+  "context_compaction-accessible-name": "{{disk}}. Fresh compaction: {{freshCompaction}}. Level compaction: {{levelCompaction}}.",
+  "value_ok": "OK",
+  "value_notice": "Notice",
+  "value_warning": "Warning",
+  "value_impaired": "Impaired",
   "context_all-mode-health-healthy": "healthy",
   "context_all-mode-health-issues": "issues detected",
   "context_all-mode-replication-complete": "complete",

package/src/components/nodesColumns/columns.tsx

@@ -2,7 +2,7 @@ import DataTable from '@gravity-ui/react-data-table';
 import {DefinitionList, Tooltip} from '@gravity-ui/uikit';
 
 import type {PreparedStorageNode} from '../../store/reducers/storage/types';
-import type {TMemoryStats, TPoolStats} from '../../types/api/nodes';
+import type {TEndpoint, TMemoryStats, TPoolStats} from '../../types/api/nodes';
 import type {TTabletStateInfo} from '../../types/api/tablet';
 import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
@@ -59,6 +59,18 @@ export function getHostColumn<T extends PreparedStorageNode>({
     };
 }
 
+export function getICPortColumn<T extends {Endpoints?: TEndpoint[]}>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.ICPort,
+        header: NODES_COLUMNS_TITLES.ICPort,
+        render: ({row}) =>
+            row.Endpoints?.find(({Name}) => Name === 'ic')?.Address?.replace(/^:/, '') ||
+            EMPTY_DATA_PLACEHOLDER,
+        width: 100,
+        align: DataTable.RIGHT,
+    };
+}
+
 // Different column for different set of required fields
 // ConnectStatus is required here, it makes handler to return network stats
 // On versions before 25-1-2 ConnectStatus also makes handler to return peers - it can significantly increase response size

package/src/components/nodesColumns/constants.ts

@@ -12,6 +12,7 @@ export const NODES_COLUMNS_WIDTH_LS_KEY = 'nodesTableColumnsWidth';
 export const NODES_COLUMNS_IDS = {
     NodeId: 'NodeId',
     Host: 'Host',
+    ICPort: 'ICPort',
     NetworkHost: 'NetworkHost',
     Database: 'Database',
     NodeName: 'NodeName',
@@ -67,6 +68,9 @@ export const NODES_COLUMNS_TITLES = {
     get Host() {
         return i18n('host');
     },
+    get ICPort() {
+        return i18n('field_ic-port');
+    },
     get NetworkHost() {
         return i18n('host');
     },
@@ -219,6 +223,7 @@ export function getNodesGroupByFieldTitle(groupByField: NodesGroupByField) {
 export const NODES_COLUMNS_TO_DATA_FIELDS: Record<NodesColumnId, NodesRequiredField[]> = {
     NodeId: ['NodeId'],
     Host: ['Host', 'Rack', 'Database', 'SystemState'],
+    ICPort: ['SystemState'],
     NetworkHost: ['Host', 'Rack', 'Database', 'SystemState', 'ConnectStatus'],
     Database: ['Database'],
     NodeName: ['NodeName'],
@@ -253,6 +258,7 @@ export const NODES_COLUMNS_TO_DATA_FIELDS: Record<NodesColumnId, NodesRequiredFi
 const NODES_COLUMNS_TO_SORT_FIELDS: Record<NodesColumnId, NodesSortValue | undefined> = {
     NodeId: 'NodeId',
     Host: 'Host',
+    ICPort: undefined,
     NetworkHost: 'Host',
     Database: 'Database',
     NodeName: 'NodeName',

package/src/components/nodesColumns/i18n/en.json

@@ -1,6 +1,7 @@
 {
   "node-id": "Node ID",
   "host": "Host",
+  "field_ic-port": "IC port",
   "database": "Database",
   "node-name": "Node Name",
   "dc": "DC",
@@ -17,7 +18,7 @@
   "load": "Load",
   "sessions": "Sessions",
   "missing": "Missing",
-  "pdisks": "PDisks",
+  "pdisks": "PDisks & VDisks",
   "field_memory-used": "Memory used",
   "field_memory-limit": "Memory limit",
   "field_pile-name": "Pile Name",

package/src/containers/App/App.tsx

@@ -4,9 +4,9 @@ import type {Store} from '@reduxjs/toolkit';
 import type {History} from 'history';
 import {Helmet} from 'react-helmet-async';
 
-import {componentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
 import {FullscreenProvider} from '../../components/Fullscreen/FullscreenContext';
-import {useTypedSelector} from '../../utils/hooks';
+import {uiFactory} from '../../uiFactory/uiFactory';
+import {useTypedSelector} from '../../utils/hooks/useTypedSelector';
 import type {YDBEmbeddedUISettings} from '../UserSettings/settings';
 
 import {useAppTitle} from './AppTitleContext';
@@ -27,7 +27,7 @@ export interface AppProps {
 }
 
 function App({store, history, children, userSettings, appTitle = defaultAppTitle}: AppProps) {
-    const ChatPanel = componentsRegistry.get('ChatPanel');
+    const ChatPanel = uiFactory.renderChatPanel;
 
     return (
         <Providers store={store} history={history} appTitle={appTitle}>

package/src/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -53,6 +53,14 @@
 
     &__storage-section {
         --g-card-border-radius: var(--g-border-radius-s);
+
+        width: 100%;
+
+        @container overview-wrapper (min-width: 804px) {
+            width: var(--cluster-overview-section);
+            min-width: var(--cluster-overview-section);
+        }
+
         @container overview-wrapper (min-width: 1104px) {
             grid-area: storage;
         }

package/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx

@@ -15,6 +15,7 @@ import {BridgeInfoTable} from '../ClusterOverview/components/BridgeInfoTable';
 import i18n from '../i18n';
 
 import {StorageGroupStats} from './components/DiskGroupsStatsBars/DiskGroupsStats';
+import {prepareClusterGroupsStats} from './components/DiskGroupsStatsBars/utils';
 import {b} from './shared';
 
 import './ClusterInfo.scss';
@@ -35,12 +36,16 @@ export const ClusterInfo = ({
     loading,
     error,
     additionalClusterProps = {},
-    groupStats = {},
+    groupStats,
     bridgePiles,
 }: ClusterInfoProps) => {
     const {info = [], links = []} = additionalClusterProps;
 
     const clusterLinks = useClusterLinks(links);
+    const preparedGroupStats = React.useMemo(
+        () => prepareClusterGroupsStats(groupStats ?? {}),
+        [groupStats],
+    );
 
     const noDetails = (error && !cluster) || (!info.length && !clusterLinks.length);
 
@@ -106,17 +111,12 @@ export const ClusterInfo = ({
     };
 
     const renderStorageGroupsSection = () => {
-        if (loading || Object.keys(groupStats).length === 0) {
+        if (loading || preparedGroupStats.disks.length === 0) {
             return null;
         }
         return (
-            <InfoSection className={b('storage-section')}>
-                <Text as="div" variant="subheader-2" className={b('section-title')}>
-                    {i18n('title_storage-groups')}
-                </Text>
-                <Card view="filled" className={b('section', {compact: true})}>
-                    <StorageGroupStats groupStats={groupStats} />
-                </Card>
+            <InfoSection className={b('storage-section')} dataQa="cluster-storage-groups">
+                <StorageGroupStats stats={preparedGroupStats} />
             </InfoSection>
         );
     };
@@ -157,11 +157,12 @@ export const ClusterInfo = ({
 interface InfoSectionProps {
     children: React.ReactNode;
     className?: string;
+    dataQa?: string;
 }
 
-function InfoSection({children, className}: InfoSectionProps) {
+function InfoSection({children, className, dataQa}: InfoSectionProps) {
     return (
-        <Flex direction="column" gap={2} className={className}>
+        <Flex direction="column" gap={2} className={className} qa={dataQa}>
             {children}
         </Flex>
     );

package/src/containers/Cluster/ClusterInfo/components/DiskGroupsStatsBars/DiskGroupsStats.scss

@@ -0,0 +1,18 @@
+.ydb-disk-groups-stats {
+    &__card {
+        padding: var(--g-spacing-3) var(--g-spacing-4);
+    }
+
+    &__available-help {
+        color: inherit;
+    }
+
+    &__legend-dot {
+        flex: 0 0 8px;
+
+        width: 8px;
+        height: 8px;
+
+        border-radius: 50%;
+    }
+}