ydb-embedded-ui 22.3.0 → 22.5.0

package/src/components/StorageGroupInfo/StorageGroupInfo.tsx

@@ -1,297 +1,153 @@
-import {Flex} from '@gravity-ui/uikit';
+import {Flex, Text, Tooltip} from '@gravity-ui/uikit';
 
 import {useBlobStorageCapacityMetricsEnabled} from '../../store/reducers/capabilities/hooks';
 import type {PreparedStorageGroup} from '../../store/reducers/storage/types';
-import {valueIsDefined} from '../../utils';
-import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
-import {getDocsLink} from '../../utils/docs';
-import {formatToMs} from '../../utils/timeParsers';
-import {bytesToSpeed} from '../../utils/utils';
+import {isNonEmptyValue} from '../../utils';
+import {formatBytes} from '../../utils/bytesParsers';
+import {cn} from '../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {
-    getStorageGroupCapacityInfoItems,
-    toInfoViewerItems,
-} from '../DiskCapacityInfo/DiskCapacityInfo';
+    formatMetricPercent,
+    formatStorageMetricPair,
+    formatStorageThroughput,
+} from '../../utils/storageMetrics';
+import {formatToMs} from '../../utils/timeParsers';
+import {parseOptionalNonNegativeNumber} from '../../utils/utils';
+import {getStorageGroupCapacityInfoItems} from '../DiskCapacityInfo/DiskCapacityInfo';
 import diskCapacityInfoKeyset from '../DiskCapacityInfo/i18n';
-import type {InfoViewerItem} from '../InfoViewer';
-import {InfoViewer} from '../InfoViewer';
-import type {InfoViewerProps} from '../InfoViewer/InfoViewer';
 import {StatusIcon} from '../StatusIcon/StatusIcon';
-import {TitleWithHelpMark} from '../TitleWithHelpmark/TitleWithHelpmark';
+import type {YDBDefinitionListItem} from '../YDBDefinitionList/YDBDefinitionList';
+import {YDBDefinitionList} from '../YDBDefinitionList/YDBDefinitionList';
 import {CAPACITY_CONFIGURATION_HELP_TEXT} from '../capacityMetricsColumns/constants';
 import {formatCapacityUnitCount} from '../capacityMetricsColumns/formatters';
 
 import {storageGroupInfoKeyset} from './i18n';
 
-interface StorageGroupInfoProps extends Omit<InfoViewerProps, 'info'> {
+import './StorageGroupInfo.scss';
+
+const b = cn('ydb-storage-group-info');
+
+interface StorageGroupInfoProps {
     data?: PreparedStorageGroup;
     className?: string;
 }
 
-// eslint-disable-next-line complexity
-export function StorageGroupInfo({data, className, ...infoViewerProps}: StorageGroupInfoProps) {
+export function StorageGroupInfo({data, className}: StorageGroupInfoProps) {
     const capacityMetricsEnabled = useBlobStorageCapacityMetricsEnabled();
-
     const {
-        Encryption,
-        Overall,
-        DiskSpace,
-        MediaType,
-        ErasureSpecies,
-        Used,
-        Limit,
-        Usage,
-        Read,
-        Write,
+        PoolName,
         GroupGeneration,
-        AllocationUnits,
-        State,
+        ErasureSpecies,
         MissingDisks,
-        Available,
         LatencyPutTabletLogMs,
         LatencyPutUserDataMs,
         LatencyGetFastMs,
+        Read,
+        Write,
         GroupSizeInUnits,
+        Used,
+        Limit,
+        Available,
+        Usage,
+        DiskSpace,
     } = data || {};
+    const configurationItems: YDBDefinitionListItem[] = [
+        {
+            name: storageGroupInfoKeyset('field_pool-name'),
+            content: PoolName ? (
+                <Tooltip content={PoolName}>
+                    <Text ellipsisLines={2} wordBreak="break-word">
+                        {PoolName}
+                    </Text>
+                </Tooltip>
+            ) : (
+                EMPTY_DATA_PLACEHOLDER
+            ),
+        },
+        ...(
+            [
+                [storageGroupInfoKeyset('group-generation'), GroupGeneration],
+                [storageGroupInfoKeyset('erasure-species'), ErasureSpecies],
+                [storageGroupInfoKeyset('missing-disks'), MissingDisks],
+            ] as const
+        ).map(([name, value]) => ({
+            name,
+            content: isNonEmptyValue(value) ? value : EMPTY_DATA_PLACEHOLDER,
+        })),
+    ];
+    const latencyItems: YDBDefinitionListItem[] = (
+        [
+            [storageGroupInfoKeyset('latency-put-tablet-log'), LatencyPutTabletLogMs],
+            [storageGroupInfoKeyset('latency-put-user-data'), LatencyPutUserDataMs],
+            [storageGroupInfoKeyset('latency-get-fast'), LatencyGetFastMs],
+        ] as const
+    ).map(([name, value]) => {
+        const latency = parseOptionalNonNegativeNumber(value);
+        return {
+            name,
+            content: latency === undefined ? EMPTY_DATA_PLACEHOLDER : formatToMs(latency),
+        };
+    });
+    const throughputItems: YDBDefinitionListItem[] = (
+        [
+            [storageGroupInfoKeyset('read-throughput'), Read],
+            [storageGroupInfoKeyset('write-throughput'), Write],
+        ] as const
+    ).map(([name, value]) => ({
+        name,
+        content: formatStorageThroughput(value),
+    }));
+    const capacityItems: YDBDefinitionListItem[] = [];
 
-    const distributedStorageChannelDocsLink = getDocsLink('distributedStorageChannel');
-    const allocationUnitsLabel = (
-        <TitleWithHelpMark
-            header={storageGroupInfoKeyset('allocation-units')}
-            note={storageGroupInfoKeyset('context_allocation-units')}
-            docsLink={distributedStorageChannelDocsLink}
-        />
+    if (capacityMetricsEnabled) {
+        capacityItems.push({
+            name: diskCapacityInfoKeyset('field_group-size-in-units'),
+            content: formatCapacityUnitCount(GroupSizeInUnits),
+            note: CAPACITY_CONFIGURATION_HELP_TEXT.GroupSizeInUnits,
+        });
+    }
+    capacityItems.push(
+        {
+            name: storageGroupInfoKeyset('used-space'),
+            content: formatStorageMetricPair(Used, Limit, 2),
+        },
+        {
+            name: storageGroupInfoKeyset('available'),
+            content:
+                formatBytes({
+                    value: parseOptionalNonNegativeNumber(Available),
+                    size: 'gb',
+                    fixedDecimalPlaces: 2,
+                }) || EMPTY_DATA_PLACEHOLDER,
+        },
     );
-
     if (capacityMetricsEnabled) {
-        const configurationInfo: InfoViewerItem[] = [];
-        const runtimeInfo: InfoViewerItem[] = [];
-
-        if (valueIsDefined(GroupGeneration)) {
-            configurationInfo.push({
-                label: storageGroupInfoKeyset('group-generation'),
-                value: GroupGeneration,
-            });
-        }
-        if (valueIsDefined(ErasureSpecies)) {
-            configurationInfo.push({
-                label: storageGroupInfoKeyset('erasure-species'),
-                value: ErasureSpecies,
-            });
-        }
-        if (valueIsDefined(MediaType)) {
-            configurationInfo.push({
-                label: storageGroupInfoKeyset('media-type'),
-                value: MediaType,
-            });
-        }
-        if (valueIsDefined(Encryption)) {
-            configurationInfo.push({
-                label: storageGroupInfoKeyset('encryption'),
-                value: Encryption ? storageGroupInfoKeyset('yes') : storageGroupInfoKeyset('no'),
-            });
-        }
-        configurationInfo.push({
-            label: (
-                <TitleWithHelpMark
-                    header={diskCapacityInfoKeyset('field_group-size-in-units')}
-                    note={CAPACITY_CONFIGURATION_HELP_TEXT.GroupSizeInUnits}
-                />
-            ),
-            value: formatCapacityUnitCount(GroupSizeInUnits),
-        });
-
-        if (valueIsDefined(Overall)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('overall'),
-                value: <StatusIcon status={Overall} />,
-            });
-        }
-        if (valueIsDefined(State)) {
-            runtimeInfo.push({label: storageGroupInfoKeyset('state'), value: State});
-        }
-        if (valueIsDefined(MissingDisks)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('missing-disks'),
-                value: MissingDisks,
-            });
-        }
-        if (valueIsDefined(Used) && valueIsDefined(Limit)) {
-            const usedNum = Number(Used);
-            const limitNum = Number(Limit);
-            const hasSpaceData = Number.isFinite(usedNum) && Number.isFinite(limitNum);
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('used-space'),
-                value: hasSpaceData
-                    ? formatStorageValuesToGb(usedNum, limitNum).join(' / ')
-                    : storageGroupInfoKeyset('no-data'),
-            });
-        }
-        if (valueIsDefined(Available)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('available'),
-                value: formatStorageValuesToGb(Number(Available)),
-            });
-        }
-        if (valueIsDefined(AllocationUnits)) {
-            runtimeInfo.push({
-                label: allocationUnitsLabel,
-                value: AllocationUnits,
-            });
-        }
-        runtimeInfo.push(...toInfoViewerItems(getStorageGroupCapacityInfoItems(data)));
-        if (valueIsDefined(LatencyPutTabletLogMs)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('latency-put-tablet-log'),
-                value: formatToMs(LatencyPutTabletLogMs),
-            });
-        }
-        if (valueIsDefined(LatencyPutUserDataMs)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('latency-put-user-data'),
-                value: formatToMs(LatencyPutUserDataMs),
-            });
-        }
-        if (valueIsDefined(LatencyGetFastMs)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('latency-get-fast'),
-                value: formatToMs(LatencyGetFastMs),
-            });
-        }
-        if (valueIsDefined(Read)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('read-throughput'),
-                value: bytesToSpeed(Number(Read)),
-            });
-        }
-        if (valueIsDefined(Write)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('write-throughput'),
-                value: bytesToSpeed(Number(Write)),
-            });
-        }
-
-        return (
-            <Flex className={className} gap={2} direction="row" wrap>
-                <InfoViewer info={configurationInfo} {...infoViewerProps} />
-                <InfoViewer info={runtimeInfo} {...infoViewerProps} />
-            </Flex>
+        capacityItems.push(...getStorageGroupCapacityInfoItems(data));
+    } else {
+        capacityItems.push(
+            {
+                name: storageGroupInfoKeyset('usage'),
+                content: formatMetricPercent(Usage, 2),
+            },
+            {
+                name: storageGroupInfoKeyset('disk-space'),
+                content: DiskSpace ? <StatusIcon status={DiskSpace} /> : EMPTY_DATA_PLACEHOLDER,
+            },
         );
     }
 
-    const storageGroupInfoFirstColumn = [];
-
-    if (valueIsDefined(GroupGeneration)) {
-        storageGroupInfoFirstColumn.push({
-            label: storageGroupInfoKeyset('group-generation'),
-            value: GroupGeneration,
-        });
-    }
-    if (valueIsDefined(ErasureSpecies)) {
-        storageGroupInfoFirstColumn.push({
-            label: storageGroupInfoKeyset('erasure-species'),
-            value: ErasureSpecies,
-        });
-    }
-    if (valueIsDefined(MediaType)) {
-        storageGroupInfoFirstColumn.push({
-            label: storageGroupInfoKeyset('media-type'),
-            value: MediaType,
-        });
-    }
-    if (valueIsDefined(Encryption)) {
-        storageGroupInfoFirstColumn.push({
-            label: storageGroupInfoKeyset('encryption'),
-            value: Encryption ? storageGroupInfoKeyset('yes') : storageGroupInfoKeyset('no'),
-        });
-    }
-    if (valueIsDefined(Overall)) {
-        storageGroupInfoFirstColumn.push({
-            label: storageGroupInfoKeyset('overall'),
-            value: <StatusIcon status={Overall} />,
-        });
-    }
-    if (valueIsDefined(State)) {
-        storageGroupInfoFirstColumn.push({label: storageGroupInfoKeyset('state'), value: State});
-    }
-    if (valueIsDefined(MissingDisks)) {
-        storageGroupInfoFirstColumn.push({
-            label: storageGroupInfoKeyset('missing-disks'),
-            value: MissingDisks,
-        });
-    }
-
-    const storageGroupInfoSecondColumn = [];
-
-    if (valueIsDefined(Used) && valueIsDefined(Limit)) {
-        const usedNum = Number(Used);
-        const limitNum = Number(Limit);
-        const hasSpaceData = Number.isFinite(usedNum) && Number.isFinite(limitNum);
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('used-space'),
-            value: hasSpaceData
-                ? formatStorageValuesToGb(usedNum, limitNum).join(' / ')
-                : storageGroupInfoKeyset('no-data'),
-        });
-    }
-    if (valueIsDefined(Available)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('available'),
-            value: formatStorageValuesToGb(Number(Available)),
-        });
-    }
-    if (valueIsDefined(Usage)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('usage'),
-            value: `${Usage.toFixed(2)}%`,
-        });
-    }
-    if (valueIsDefined(DiskSpace)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('disk-space'),
-            value: <StatusIcon status={DiskSpace} />,
-        });
-    }
-    if (valueIsDefined(LatencyPutTabletLogMs)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('latency-put-tablet-log'),
-            value: formatToMs(LatencyPutTabletLogMs),
-        });
-    }
-    if (valueIsDefined(LatencyPutUserDataMs)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('latency-put-user-data'),
-            value: formatToMs(LatencyPutUserDataMs),
-        });
-    }
-    if (valueIsDefined(LatencyGetFastMs)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('latency-get-fast'),
-            value: formatToMs(LatencyGetFastMs),
-        });
-    }
-    if (valueIsDefined(AllocationUnits)) {
-        storageGroupInfoSecondColumn.push({
-            label: allocationUnitsLabel,
-            value: AllocationUnits,
-        });
-    }
-    if (valueIsDefined(Read)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('read-throughput'),
-            value: bytesToSpeed(Number(Read)),
-        });
-    }
-    if (valueIsDefined(Write)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('write-throughput'),
-            value: bytesToSpeed(Number(Write)),
-        });
-    }
-
     return (
-        <Flex className={className} gap={2} direction="row" wrap>
-            <InfoViewer info={storageGroupInfoFirstColumn} {...infoViewerProps} />
-            <InfoViewer info={storageGroupInfoSecondColumn} {...infoViewerProps} />
+        <Flex className={b(null, className)} wrap="wrap">
+            <Flex direction="column" gap={4} className={b('configuration')}>
+                <YDBDefinitionList items={configurationItems} nameMaxWidth={200} />
+                <YDBDefinitionList items={latencyItems} nameMaxWidth={200} />
+                <YDBDefinitionList items={throughputItems} nameMaxWidth={200} />
+            </Flex>
+            <YDBDefinitionList
+                items={capacityItems}
+                nameMaxWidth={200}
+                wrapperClassName={b('capacity')}
+            />
         </Flex>
     );
 }

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

@@ -1,20 +1,12 @@
 {
-  "encryption": "Encryption",
-  "overall": "Overall",
   "disk-space": "Disk Space",
-  "media-type": "Media Type",
+  "field_pool-name": "Pool Name",
   "erasure-species": "Erasure Species",
   "used-space": "Used Space",
-  "no-data": "No data",
   "usage": "Usage",
   "read-throughput": "Read Throughput",
   "write-throughput": "Write Throughput",
-  "yes": "Yes",
-  "no": "No",
   "group-generation": "Group Generation",
-  "allocation-units": "Allocation Units",
-  "context_allocation-units": "The number of channels used by tablets to write data to the storage group.",
-  "state": "State",
   "missing-disks": "Missing Disks",
   "available": "Available Space",
   "latency-put-tablet-log": "Latency (Put Tablet Log)",

package/src/components/VDisk/VDisk.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type {PopupPlacement, PopupProps} from '@gravity-ui/uikit';
 
 import {useVDiskPagePath} from '../../routes';
-import {EFlag, isCapacityAlert} from '../../types/api/enums';
+import {isCapacityAlert} from '../../types/api/enums';
 import {cn} from '../../utils/cn';
 import {NOT_AVAILABLE_SEVERITY} from '../../utils/disks/constants';
 import type {
@@ -25,6 +25,7 @@ import {HoverPopup} from '../HoverPopup/HoverPopup';
 import {InternalLink} from '../InternalLink';
 import {VDiskPopup} from '../VDiskPopup/VDiskPopup';
 
+import {getFlagStatusText} from './getFlagStatusText';
 import {i18n} from './i18n';
 
 import './VDisk.scss';
@@ -110,22 +111,6 @@ function getVDiskBarIndicator({
     };
 }
 
-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');
-    }
-}
-
 function getReplicationAccessibleName(replicated: boolean | undefined) {
     if (replicated === undefined) {
         return i18n('context_no-data');
@@ -163,32 +148,41 @@ function getAllModeAccessibleName(data: PreparedVDisk, hasIssues: boolean | unde
     });
 }
 
+function getAccessibleDiskName(
+    data: PreparedVDisk,
+    {mode, isNoData}: Pick<VDiskDisplayState, 'mode' | 'isNoData'>,
+) {
+    const noData = i18n('context_no-data');
+    const diskName = i18n(data.DonorMode ? 'context_donor-vdisk' : 'context_vdisk', {
+        vdiskId: data.StringifiedId || noData,
+        nodeId: data.NodeId ?? noData,
+    });
+    if (!isNoData) {
+        return diskName;
+    }
+
+    const hasVDiskWhiteboardData = data.HasWhiteboardData ?? Boolean(data.VDiskId);
+    return i18n(
+        mode === 'driveType' && hasVDiskWhiteboardData
+            ? 'context_pdisk-no-whiteboard'
+            : 'context_vdisk-no-whiteboard',
+        {disk: diskName, noData},
+    );
+}
+
 function getAccessibleName(
     data: PreparedVDisk,
     {mode, allMode, isNoData, driveType}: VDiskDisplayState,
 ) {
     if (!mode) {
-        return undefined;
+        return getAccessibleDiskName(data, {mode, isNoData});
     }
     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) {
-        const hasVDiskWhiteboardData = data.HasWhiteboardData ?? Boolean(data.VDiskId);
-        diskName = i18n(
-            mode === 'driveType' && hasVDiskWhiteboardData
-                ? 'context_pdisk-no-whiteboard'
-                : 'context_vdisk-no-whiteboard',
-            {disk: diskName, noData},
-        );
-    }
-
+    const diskName = getAccessibleDiskName(data, {mode, isNoData});
     const {CapacityAlert, FrontQueues, SatisfactionRank, Replicated} = isNoData ? {} : data;
     const {FreshRank, LevelRank} = SatisfactionRank ?? {};
 
@@ -212,13 +206,13 @@ function getAccessibleName(
         case 'frontQueues':
             return i18n('context_front-queues-accessible-name', {
                 disk: diskName,
-                frontQueues: getFlagAccessibleName(FrontQueues),
+                frontQueues: getFlagStatusText(FrontQueues),
             });
         case 'compaction':
             return i18n('context_compaction-accessible-name', {
                 disk: diskName,
-                freshCompaction: getFlagAccessibleName(FreshRank?.Flag),
-                levelCompaction: getFlagAccessibleName(LevelRank?.Flag),
+                freshCompaction: getFlagStatusText(FreshRank?.Flag),
+                levelCompaction: getFlagStatusText(LevelRank?.Flag),
             });
         default:
             return undefined;
@@ -233,6 +227,7 @@ export interface VDiskProps {
     showPopup?: boolean;
     onShowPopup?: VoidFunction;
     onHidePopup?: VoidFunction;
+    onClosePopup?: VoidFunction;
     progressBarClassName?: string;
     delayOpen?: number;
     delayClose?: number;
@@ -256,6 +251,7 @@ export const VDisk = ({
     showPopup,
     onShowPopup,
     onHidePopup,
+    onClosePopup,
     progressBarClassName,
     delayClose,
     delayOpen,
@@ -337,10 +333,12 @@ export const VDisk = ({
             showPopup={showPopup}
             onShowPopup={onShowPopup}
             onHidePopup={onHidePopup}
-            renderPopupContent={({onClose}) => (
+            onClosePopup={onClosePopup}
+            renderPopupContent={({onClose, holdOpen}) => (
                 <VDiskPopup
                     data={hidePDiskInPopup ? {...data, PDisk: undefined} : data}
                     onClose={onClose}
+                    onDialogOpen={holdOpen}
                 />
             )}
             offset={popupOffset}

package/src/components/VDisk/VDiskWithDonorsStack.tsx

@@ -37,6 +37,7 @@ export function VDiskWithDonorsStack({
     showPopup: _showPopup,
     onShowPopup: _onShowPopup,
     onHidePopup: _onHidePopup,
+    onClosePopup,
     highlighted: _highlighted,
     renderContent = true,
     placeholderProps,
@@ -90,6 +91,7 @@ export function VDiskWithDonorsStack({
         highlighted: isHighlighted,
         onShowPopup,
         onHidePopup,
+        onClosePopup,
     };
 
     // Donor VDisks intentionally avoid using and changing highlightedVDiskState.

package/src/components/VDisk/getFlagStatusText.ts

@@ -0,0 +1,19 @@
+import {EFlag} from '../../types/api/enums';
+
+import {i18n} from './i18n';
+
+export function getFlagStatusText(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');
+    }
+}

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

@@ -8,7 +8,7 @@
   "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_ok": "Ok",
   "value_notice": "Notice",
   "value_warning": "Warning",
   "value_impaired": "Impaired",

package/src/components/VDiskInfo/VDiskInfo.scss

@@ -1,7 +1,23 @@
 .ydb-vdisk-info {
-    &__info {
-        flex: unset;
+    --g-definition-list-item-gap: var(--g-spacing-3);
 
-        width: 500px;
+    &__metrics {
+        width: 100%;
+    }
+
+    &__column {
+        flex: 1 1 400px;
+
+        min-width: 0;
+        max-width: 500px;
+    }
+
+    &__identity {
+        width: 100%;
+        max-width: 500px;
+    }
+
+    &__disk {
+        width: 55px;
     }
 }