diff --git a/src/containers/Storage/Disks/Disks.scss b/src/containers/Storage/Disks/Disks.scss index 8a7e1187d6..128c13d7f7 100644 --- a/src/containers/Storage/Disks/Disks.scss +++ b/src/containers/Storage/Disks/Disks.scss @@ -6,15 +6,6 @@ width: max-content; - &__vdisks-wrapper { - display: flex; - flex-grow: 1; - flex-direction: row; - gap: 4px; - - width: 300px; - } - &__pdisks-wrapper { display: flex; flex-direction: row; diff --git a/src/containers/Storage/Disks/Disks.tsx b/src/containers/Storage/Disks/Disks.tsx index fa0dbc7c30..c4e6ce509d 100644 --- a/src/containers/Storage/Disks/Disks.tsx +++ b/src/containers/Storage/Disks/Disks.tsx @@ -1,6 +1,9 @@ import React from 'react'; +import {Flex, useLayoutContext} from '@gravity-ui/uikit'; + import {VDisk} from '../../../components/VDisk/VDisk'; +import {valueIsDefined} from '../../../utils'; import {cn} from '../../../utils/cn'; import {getPDiskId} from '../../../utils/disks/helpers'; import type {PreparedVDisk} from '../../../utils/disks/types'; @@ -12,6 +15,8 @@ import './Disks.scss'; const b = cn('ydb-storage-disks'); +const VDISKS_CONTAINER_WIDTH = 300; + interface DisksProps { vDisks?: PreparedVDisk[]; viewContext?: StorageViewContext; @@ -20,13 +25,20 @@ interface DisksProps { export function Disks({vDisks = [], viewContext}: DisksProps) { const [highlightedVDisk, setHighlightedVDisk] = React.useState(); + const { + theme: {spaceBaseSize}, + } = useLayoutContext(); + if (!vDisks.length) { return null; } + const unavailableVDiskWidth = + (VDISKS_CONTAINER_WIDTH - spaceBaseSize * (vDisks.length - 1)) / vDisks.length; + return (
-
+ {vDisks?.map((vDisk) => ( ))} -
+
{vDisks?.map((vDisk) => ( @@ -57,21 +70,27 @@ interface DisksItemProps { inactive?: boolean; highlightedVDisk: string | undefined; setHighlightedVDisk: (id: string | undefined) => void; + unavailableVDiskWidth?: number; } -function VDiskItem({vDisk, highlightedVDisk, inactive, setHighlightedVDisk}: DisksItemProps) { +function VDiskItem({ + vDisk, + highlightedVDisk, + inactive, + setHighlightedVDisk, + unavailableVDiskWidth, +}: DisksItemProps) { // Do not show PDisk popup for VDisk const vDiskToShow = {...vDisk, PDisk: undefined}; const vDiskId = vDisk.StringifiedId; + // show vdisks without AllocatedSize as having average width (#1433) + const minWidth = valueIsDefined(vDiskToShow.AllocatedSize) ? undefined : unavailableVDiskWidth; + const flexGrow = Number(vDiskToShow.AllocatedSize) || 1; + return ( -
+