From 6c578b476f4d4805712a174ae239f8c269012793 Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Wed, 13 May 2026 19:24:14 +0300 Subject: [PATCH 1/4] fix(PDiskSpaceDistribution): slot height calculation --- .../PDiskSpaceDistribution.scss | 7 +-- .../PDiskSpaceDistribution.tsx | 50 +++++++++++++++---- 2 files changed, 41 insertions(+), 16 deletions(-) diff --git a/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.scss b/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.scss index 8b520ad141..1542c5faed 100644 --- a/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.scss +++ b/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.scss @@ -9,18 +9,14 @@ --disk-border-radius: var(--g-border-radius-xs); - .storage-disk-progress-bar { - height: 100%; - } - &__pdisk-bar { display: flex; - flex-grow: 1; flex-direction: column; gap: var(--g-spacing-2); min-width: 500px; max-width: 800px; + height: auto; padding: var(--g-spacing-2); } @@ -37,6 +33,7 @@ display: flex; width: 100%; + height: 100%; } &__slot-content { diff --git a/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx b/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx index 4907728965..3fbf72d61f 100644 --- a/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx +++ b/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import {DiskStateProgressBar} from '../../../components/DiskStateProgressBar/DiskStateProgressBar'; import {HoverPopup} from '../../../components/HoverPopup/HoverPopup'; import {InternalLink} from '../../../components/InternalLink'; @@ -26,7 +28,7 @@ import './PDiskSpaceDistribution.scss'; const b = cn('ydb-pdisk-space-distribution'); -const SLOT_HEIGHT = 40; +const BASE_SLOT_HEIGHT = 40; interface PDiskSpaceDistributionProps { data: PDiskData; @@ -38,13 +40,33 @@ export function PDiskSpaceDistribution({data}: PDiskSpaceDistributionProps) { const {PDiskId, NodeId} = data; - const containerHeight = SLOT_HEIGHT * (SlotItems?.length || 1); + // Find the minimum Total among non-log slots to use as the base unit for height scaling + const minNonLogTotal = React.useMemo(() => { + if (!SlotItems?.length) { + return 1; + } + + let minTotal = Infinity; + + for (const item of SlotItems) { + if (item.SlotType === 'log') { + continue; + } + const value = Number(item.Total) || 1; + if (value < minTotal) { + minTotal = value; + } + } + + return minTotal === Infinity ? 1 : minTotal; + }, [SlotItems]); const renderSlots = () => { return SlotItems?.map((item, index) => { return ( +
{ item: SlotItem; + minNonLogTotal: number; pDiskId?: string | number; nodeId?: string | number; @@ -89,7 +106,12 @@ interface SlotProps { ) => string | undefined; } -function Slot({item, nodeId, getVDiskPagePath}: SlotProps) { +function Slot({ + item, + minNonLogTotal, + nodeId, + getVDiskPagePath, +}: SlotProps) { const renderContent = () => { if (isVDiskSlot(item)) { const vDiskPagePath = getVDiskPagePath?.({ @@ -175,8 +197,14 @@ function Slot({item, nodeId, getVDiskPagePath}: SlotProp return null; }; + // Log slots get half the base height; others scale proportionally to the smallest non-log slot + const slotHeight = + item.SlotType === 'log' + ? BASE_SLOT_HEIGHT / 2 + : ((Number(item.Total) || 1) / minNonLogTotal) * BASE_SLOT_HEIGHT; + return ( -
+
{renderContent()}
); From 83df3935ab034e525df123f3b9d04b6ef79fa213 Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Mon, 18 May 2026 17:48:08 +0300 Subject: [PATCH 2/4] fix --- .../PDiskSpaceDistribution/PDiskSpaceDistribution.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx b/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx index 3fbf72d61f..f27ea42455 100644 --- a/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx +++ b/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx @@ -40,7 +40,9 @@ export function PDiskSpaceDistribution({data}: PDiskSpaceDistributionProps) { const {PDiskId, NodeId} = data; - // Find the minimum Total among non-log slots to use as the base unit for height scaling + // Find the minimum Total among non-log slots to use as the base unit for height scaling. + // Slots with missing/zero Total are skipped so that they don't collapse the base unit to 1 + // and inflate every other slot's computed height to an unrenderable value. const minNonLogTotal = React.useMemo(() => { if (!SlotItems?.length) { return 1; @@ -52,7 +54,10 @@ export function PDiskSpaceDistribution({data}: PDiskSpaceDistributionProps) { if (item.SlotType === 'log') { continue; } - const value = Number(item.Total) || 1; + const value = Number(item.Total); + if (!value || value <= 0) { + continue; + } if (value < minTotal) { minTotal = value; } From 5c200c16ab3ee8dcaebdf43ae73a440675416fd1 Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Mon, 18 May 2026 18:16:57 +0300 Subject: [PATCH 3/4] fix --- .../PDiskSpaceDistribution.tsx | 27 +++++++++++++++---- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx b/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx index f27ea42455..e7e620814b 100644 --- a/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx +++ b/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx @@ -29,6 +29,11 @@ import './PDiskSpaceDistribution.scss'; const b = cn('ydb-pdisk-space-distribution'); const BASE_SLOT_HEIGHT = 40; +// Upper bound for how much a single slot can be scaled relative to the smallest one. +// Protects layout from degenerate cases where a VDisk reports an implausibly small Total +// (e.g. a mostly empty disk where Total falls back to AllocatedSize), which would otherwise +// blow up other slots' heights to thousands of pixels. +const MAX_SLOT_HEIGHT_MULTIPLIER = 10; interface PDiskSpaceDistributionProps { data: PDiskData; @@ -111,6 +116,22 @@ interface SlotProps { ) => string | undefined; } +function getSlotHeight(item: SlotItem, minNonLogTotal: number) { + // Log slots get a fixed half-height. + if (item.SlotType === 'log') { + return BASE_SLOT_HEIGHT / 2; + } + // Slots with a missing/zero Total fall back to BASE_SLOT_HEIGHT so they stay visible. + const totalValue = Number(item.Total); + if (totalValue <= 0) { + return BASE_SLOT_HEIGHT; + } + // Others scale proportionally to the smallest non-log slot, clamped from above so an + // implausibly small Total can't blow up other slots' heights. + const multiplier = Math.min(totalValue / minNonLogTotal, MAX_SLOT_HEIGHT_MULTIPLIER); + return multiplier * BASE_SLOT_HEIGHT; +} + function Slot({ item, minNonLogTotal, @@ -202,11 +223,7 @@ function Slot({ return null; }; - // Log slots get half the base height; others scale proportionally to the smallest non-log slot - const slotHeight = - item.SlotType === 'log' - ? BASE_SLOT_HEIGHT / 2 - : ((Number(item.Total) || 1) / minNonLogTotal) * BASE_SLOT_HEIGHT; + const slotHeight = getSlotHeight(item, minNonLogTotal); return (
From b6c24bb719f25953236eed5d5d941f29c646438a Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Mon, 18 May 2026 18:24:48 +0300 Subject: [PATCH 4/4] fix --- .../PDiskSpaceDistribution/PDiskSpaceDistribution.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx b/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx index e7e620814b..40f5669490 100644 --- a/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx +++ b/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx @@ -121,9 +121,11 @@ function getSlotHeight(item: SlotItem, minNonLogTotal if (item.SlotType === 'log') { return BASE_SLOT_HEIGHT / 2; } - // Slots with a missing/zero Total fall back to BASE_SLOT_HEIGHT so they stay visible. + // Slots with a missing/non-numeric/zero Total fall back to BASE_SLOT_HEIGHT so they + // stay visible and never produce NaN in the inline style. + // Same falsy-check pattern as in minNonLogTotal: catches NaN, 0, undefined, null. const totalValue = Number(item.Total); - if (totalValue <= 0) { + if (!totalValue || totalValue < 0) { return BASE_SLOT_HEIGHT; } // Others scale proportionally to the smallest non-log slot, clamped from above so an