feat: implement PDisk & VDisk info tooltips (#4397)

Author: kkdras

src/components/DiskCapacityInfo/DiskCapacityInfo.tsx

@@ -6,15 +6,19 @@ import type {PreparedStorageGroup} from '../../store/reducers/storage/types';
 import {isCapacityAlert} from '../../types/api/enums';
 import {getCapacityAlertTheme, normalizeCapacityAlert} from '../../utils/capacityAlerts';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import type {DiskDetailItem} from '../../utils/disks/diskInfo/getDiskLocationItems';
 import type {PreparedPDisk, PreparedVDisk} from '../../utils/disks/types';
 import {
     formatMetricCountPair,
     formatMetricPercent,
     formatNormalizedMetricPercent,
     formatStorageMetricPair,
 } from '../../utils/storageMetrics';
+import {DiskCapacityAlertLabel} from '../DiskStatus/DiskStatus';
 import type {InfoViewerItem} from '../InfoViewer';
+import {pDiskInfoKeyset} from '../PDiskInfo/i18n';
 import {TitleWithHelpMark} from '../TitleWithHelpmark/TitleWithHelpmark';
+import {vDiskInfoKeyset} from '../VDiskInfo/i18n';
 import type {YDBDefinitionListItem} from '../YDBDefinitionList/YDBDefinitionList';
 import {
     CAPACITY_CONFIGURATION_HELP_TEXT,
@@ -98,22 +102,36 @@ export function getVDiskCapacityInfoItems(
 
 export function getPDiskCapacityInfoItems(
     data: PreparedPDisk | undefined,
-    {withUsage, withCapacityAlert}: {withUsage: boolean; withCapacityAlert: boolean},
+    {
+        withUsage,
+        withCapacityAlert,
+        fixedDecimalPlaces,
+        useWhiteboardSize = true,
+    }: {
+        withUsage: boolean;
+        withCapacityAlert: boolean;
+        fixedDecimalPlaces?: number;
+        useWhiteboardSize?: boolean;
+    },
 ): DiskCapacityInfoItem[] {
-    const sizeData = data?.WhiteboardSize ?? data;
+    const sizeData = useWhiteboardSize ? (data?.WhiteboardSize ?? data) : data;
     const items: DiskCapacityInfoItem[] = [
         {
             id: 'space',
             title: i18n('field_space'),
-            value: formatStorageMetricPair(sizeData?.AllocatedSize, sizeData?.TotalSize),
+            value: formatStorageMetricPair(
+                sizeData?.AllocatedSize,
+                sizeData?.TotalSize,
+                fixedDecimalPlaces,
+            ),
         },
     ];
 
     if (withUsage) {
         items.push({
             id: 'pdisk-usage',
             title: CAPACITY_METRICS_COLUMN_TITLES.MaxPDiskUsage,
-            value: formatMetricPercent(data?.PDiskUsage),
+            value: formatMetricPercent(data?.PDiskUsage, fixedDecimalPlaces),
             note: CAPACITY_METRICS_HELP_TEXT.MaxPDiskUsage,
         });
     }
@@ -144,6 +162,80 @@ export function getPDiskCapacityInfoItems(
     return items;
 }
 
+export function getVDiskCapacityItems(
+    data: PreparedVDisk,
+    {capacityMetricsEnabled}: {capacityMetricsEnabled: boolean},
+): DiskDetailItem[] {
+    const size: Pick<PreparedVDisk, 'AllocatedSize' | 'SizeLimit' | 'HasCompleteSizeData'> =
+        capacityMetricsEnabled ? (data.WhiteboardSize ?? data) : data;
+    const items: DiskDetailItem[] = [
+        {
+            id: 'group-size-in-units',
+            name: vDiskInfoKeyset('field_group-size-in-units'),
+            content: formatCapacityUnitCount(data.GroupSizeInUnits),
+            note: CAPACITY_CONFIGURATION_HELP_TEXT.GroupSizeInUnits,
+        },
+        {
+            id: 'size',
+            name: vDiskInfoKeyset('size'),
+            content:
+                size.HasCompleteSizeData === false
+                    ? EMPTY_DATA_PLACEHOLDER
+                    : formatStorageMetricPair(size.AllocatedSize, size.SizeLimit, 2),
+        },
+        {
+            id: 'capacity-alert',
+            name: vDiskInfoKeyset('field_capacity-alert'),
+            content: <DiskCapacityAlertLabel value={data.CapacityAlert} />,
+            note: CAPACITY_METRICS_HELP_TEXT.CapacityAlert,
+        },
+        {
+            id: 'vdisk-slot-usage',
+            name: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskSlotUsage,
+            content: formatMetricPercent(data.VDiskSlotUsage, 2),
+            note: CAPACITY_METRICS_HELP_TEXT.MaxVDiskSlotUsage,
+        },
+        {
+            id: 'vdisk-raw-usage',
+            name: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskRawUsage,
+            content: formatMetricPercent(data.VDiskRawUsage, 2),
+            note: CAPACITY_METRICS_HELP_TEXT.MaxVDiskRawUsage,
+        },
+    ];
+    return items.filter(({id}) => capacityMetricsEnabled || id === 'size');
+}
+
+export function getPDiskCapacityItems(
+    data: PreparedPDisk,
+    {useWhiteboardSize = true}: {useWhiteboardSize?: boolean} = {},
+): DiskDetailItem[] {
+    const fieldOrder = ['slot-size-in-units', 'space', 'capacity-alert', 'pdisk-usage', 'slots'];
+    const capacityItems = getPDiskCapacityInfoItems(data, {
+        withUsage: true,
+        withCapacityAlert: true,
+        fixedDecimalPlaces: 2,
+        useWhiteboardSize,
+    });
+    const items: DiskDetailItem[] = [];
+    for (const id of fieldOrder) {
+        const field = capacityItems.find((item) => item.id === id);
+        if (field) {
+            items.push({
+                id,
+                name: field.title,
+                content:
+                    id === 'capacity-alert' ? (
+                        <DiskCapacityAlertLabel value={data.PDiskCapacityAlert} />
+                    ) : (
+                        field.value
+                    ),
+                note: id === 'slots' ? pDiskInfoKeyset('context_slots') : field.note,
+            });
+        }
+    }
+    return items;
+}
+
 export function getStorageGroupCapacityInfoItems(
     data: PreparedStorageGroup | undefined,
 ): DiskCapacityInfoItem[] {

src/components/DiskCapacityInfo/__test__/DiskCapacityInfo.test.ts

@@ -344,6 +344,24 @@ describe('DiskCapacityInfo builders', () => {
         expect(spaceItem.value).toBe(EMPTY_DATA_PLACEHOLDER);
     });
 
+    test('uses legacy PDisk size when Whiteboard size is disabled', () => {
+        const [spaceItem] = getPDiskCapacityInfoItems(
+            {
+                AllocatedSize: 40_000_000_000,
+                TotalSize: 100_000_000_000,
+                WhiteboardSize: {TotalSize: 22_000_000_000},
+            },
+            {
+                withUsage: false,
+                withCapacityAlert: false,
+                fixedDecimalPlaces: 2,
+                useWhiteboardSize: false,
+            },
+        );
+
+        expect(spaceItem.value).toBe(`40.00 / 100.00${UNBREAKABLE_GAP}GB`);
+    });
+
     test('formats normalized storage-group scalar values without rendering a component', () => {
         const items = getStorageGroupCapacityInfoItems({
             Degraded: 0,

src/components/DiskPopup/DiskPopup.scss

@@ -0,0 +1,203 @@
+.ydb-disk-popup {
+    --ydb-disk-popup-base-width: 368px;
+    --ydb-disk-popup-width-growth: 50px;
+
+    width: max-content;
+    min-width: min(var(--ydb-disk-popup-base-width), calc(100vw - 64px));
+    max-width: min(
+        calc(var(--ydb-disk-popup-base-width) + var(--ydb-disk-popup-width-growth)),
+        calc(100vw - 64px)
+    );
+
+    font-size: var(--g-text-body-1-font-size);
+    line-height: var(--g-text-body-1-line-height);
+    overflow-wrap: anywhere;
+
+    &_combined {
+        --ydb-disk-popup-base-width: 593px;
+        --ydb-disk-popup-width-growth: 120px;
+        --ydb-pdisk-log-size-progress-width: 50px;
+
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    &__panel {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: var(--g-spacing-2);
+
+        min-width: 0;
+    }
+
+    &_combined &__panel:first-child {
+        padding-right: var(--g-spacing-3);
+
+        border-right: 1px solid var(--g-color-line-generic);
+    }
+
+    &_combined &__panel + &__panel {
+        padding-left: var(--g-spacing-3);
+    }
+
+    &__body,
+    &__footer {
+        display: flex;
+        flex-direction: column;
+        gap: var(--g-spacing-2);
+    }
+
+    // Only Compaction contributes to the intrinsic width; other sections fit the card.
+    &__body > :not(:has(.ydb-vdisk-popup__compaction)),
+    &__footer,
+    .g-definition-list__item:not(:has(.ydb-vdisk-popup__compaction)) {
+        contain: inline-size;
+    }
+
+    .ydb-vdisk-popup__compaction {
+        width: max-content;
+        max-width: 100%;
+    }
+
+    .g-definition-list__item:has(.ydb-vdisk-popup__compaction) {
+        .g-definition-list__term-container {
+            flex-shrink: 1;
+        }
+
+        .g-definition-list__definition {
+            flex-shrink: 0;
+        }
+    }
+
+    &__footer {
+        margin-top: auto;
+    }
+
+    &__id {
+        min-width: 0;
+        overflow-wrap: anywhere;
+    }
+
+    .g-definition-list {
+        --g-definition-list-item-gap: var(--g-spacing-1);
+    }
+
+    .g-definition-list__definition {
+        min-width: 0;
+        overflow-wrap: anywhere;
+    }
+
+    .g-definition-list__copy-container {
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .g-definition-list__dots {
+        flex-basis: 0;
+
+        min-width: 0;
+    }
+
+    .ydb-disk-status__tooltip {
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .ydb-disk-status__label {
+        min-width: 0;
+        max-width: 100%;
+        height: auto;
+        min-height: var(--_--height);
+
+        .g-label__text {
+            display: block;
+            overflow: visible;
+
+            min-width: 0;
+
+            text-align: start;
+            white-space: nowrap;
+        }
+
+        .g-label__content,
+        .g-label__value,
+        .g-label__key,
+        .g-label__separator {
+            display: inline;
+            overflow: visible;
+
+            text-overflow: clip;
+        }
+    }
+
+    .ydb-pdisk-log-size,
+    .ydb-vdisk-status__replication-progress {
+        flex-wrap: wrap;
+
+        max-width: 100%;
+
+        white-space: normal;
+    }
+
+    &__location {
+        contain: inline-size;
+
+        padding: var(--g-spacing-1) var(--g-spacing-2);
+
+        border-radius: var(--g-border-radius-m);
+        background-color: var(--g-color-base-generic);
+
+        .g-definition-list__dots {
+            display: none;
+        }
+
+        .g-definition-list__definition {
+            flex: 1;
+        }
+    }
+
+    &__text {
+        overflow: hidden;
+
+        min-width: 0;
+
+        cursor: default;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        &_with-left-trim {
+            text-align: end;
+            direction: rtl;
+
+            > span {
+                unicode-bidi: plaintext;
+            }
+        }
+    }
+
+    &__text-tooltip {
+        overflow-wrap: anywhere;
+    }
+
+    @media (max-width: 700px) {
+        &_combined {
+            --ydb-disk-popup-base-width: 368px;
+
+            grid-template-columns: minmax(0, 1fr);
+        }
+
+        &_combined &__panel:first-child {
+            padding-right: 0;
+            padding-bottom: var(--g-spacing-3);
+
+            border-right: none;
+            border-bottom: 1px solid var(--g-color-line-generic);
+        }
+
+        &_combined &__panel + &__panel {
+            padding-top: var(--g-spacing-3);
+            padding-left: 0;
+        }
+    }
+}