ydb-embedded-ui 22.0.0 → 22.2.0

package/dist/containers/Storage/Disks/Disks.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Flex, useLayoutContext } from '@gravity-ui/uikit';
+import { isNil } from 'lodash';
 import { VDiskWithDonorsStack } from '../../../components/VDisk/VDiskWithDonorsStack';
 import { cn } from '../../../utils/cn';
 import { PDisk } from '../PDisk';
@@ -8,15 +9,42 @@ import { DISKS_POPUP_DEBOUNCE_TIMEOUT } from '../shared';
 import { useStoragePDiskDisplayStateGetter } from '../useStoragePDiskDisplayStateGetter';
 import { useStorageVDiskDisplayStateGetter } from '../useStorageVDiskDisplayStateGetter';
 import { isPdiskActive, isVdiskActive, useVDisksWithDCMargins } from '../utils';
+import { useVirtualizedDiskList } from '../utils/useVirtualizedDiskList';
 import { calculateCompactVDiskWidths } from './calculateCompactVDiskWidths';
-import { ALL_VDISK_WIDTH, VDISKS_CONTAINER_WIDTH, getAllVDisksContainerWidth } from './constants';
+import { ALL_VDISK_WIDTH, EXPERT_MODE_PDISK_WIDTH, VDISKS_CONTAINER_WIDTH, getAllVDisksContainerWidth, } from './constants';
 import './Disks.scss';
 const b = cn('ydb-storage-disks');
-export function Disks({ vDisks = [], viewContext, erasure, withIcon, isAllVDisksLayout, }) {
+const VDiskItem = React.memo(function VDiskItem({ vDisk, highlighted, inactive, setHighlightedVDisk, compactVDiskWidth, withIcon, getDisplayState, isAllVDisksLayout, renderContent, placeholderProps, }) {
+    const style = isAllVDisksLayout
+        ? { width: ALL_VDISK_WIDTH, flexBasis: ALL_VDISK_WIDTH }
+        : { width: compactVDiskWidth, flexBasis: compactVDiskWidth };
+    return (_jsxs("div", { style: style, className: b('vdisk-item', { all: isAllVDisksLayout }), "data-disk-id": vDisk.StringifiedId, children: [isAllVDisksLayout ? (_jsx("div", { "aria-hidden": true, className: b('vdisk-size-indicator'), style: {
+                    width: compactVDiskWidth,
+                    visibility: renderContent ? undefined : 'hidden',
+                } })) : null, _jsx(VDiskWithDonorsStack, { renderContent: renderContent, placeholderProps: placeholderProps, data: vDisk, hideMainPDiskInPopup: true, compact: !isAllVDisksLayout, withIcon: withIcon, inactive: inactive, delayOpen: DISKS_POPUP_DEBOUNCE_TIMEOUT, delayClose: DISKS_POPUP_DEBOUNCE_TIMEOUT, highlightedVDisk: highlighted ? vDisk.StringifiedId : undefined, setHighlightedVDisk: setHighlightedVDisk, progressBarClassName: b('vdisk-progress-bar'), getDisplayState: getDisplayState })] }));
+});
+const PDiskItem = React.memo(function PDiskItem({ vDisk, viewContext, highlighted, setHighlightedVDisk, withDCMargin, withIcon, getDisplayState, renderContent, placeholderProps, }) {
+    var _a;
+    const vDiskId = vDisk.StringifiedId;
+    const onShowPopup = React.useCallback(() => setHighlightedVDisk === null || setHighlightedVDisk === void 0 ? void 0 : setHighlightedVDisk(vDiskId), [setHighlightedVDisk, vDiskId]);
+    const onHidePopup = React.useCallback(() => setHighlightedVDisk === null || setHighlightedVDisk === void 0 ? void 0 : setHighlightedVDisk(undefined), [setHighlightedVDisk]);
+    if (!vDisk.PDisk) {
+        // Preserve disk indices for focus tracking while virtualization is disabled.
+        return _jsx("div", { "data-disk-id": vDiskId, hidden: true });
+    }
+    return (_jsx("div", { className: b('pdisk-item', { ['with-dc-margin']: withDCMargin }), "data-disk-id": vDiskId, style: { width: (_a = getDisplayState === null || getDisplayState === void 0 ? void 0 : getDisplayState(vDisk.PDisk).width) !== null && _a !== void 0 ? _a : EXPERT_MODE_PDISK_WIDTH }, tabIndex: -1, ...(renderContent || highlighted ? undefined : placeholderProps), children: (renderContent || highlighted) && (_jsx(PDisk, { progressBarClassName: b('pdisk-progress-bar'), data: vDisk.PDisk, inactive: !isPdiskActive(vDisk.PDisk, viewContext), showPopup: highlighted, delayOpen: DISKS_POPUP_DEBOUNCE_TIMEOUT, delayClose: DISKS_POPUP_DEBOUNCE_TIMEOUT, onShowPopup: onShowPopup, onHidePopup: onHidePopup, withIcon: withIcon, highlighted: highlighted, getDisplayState: getDisplayState })) }));
+});
+export const Disks = React.memo(function Disks({ vDisks = [], viewContext, erasure, withIcon, isAllVDisksLayout, }) {
     const vDisksWithDCMargins = useVDisksWithDCMargins(vDisks, erasure);
     const getVDiskDisplayState = useStorageVDiskDisplayStateGetter();
     const getPDiskDisplayState = useStoragePDiskDisplayStateGetter();
     const [highlightedVDisk, setHighlightedVDisk] = React.useState();
+    const vDiskList = useVirtualizedDiskList(vDisks, vDisks.every((disk) => Boolean(disk.StringifiedId)));
+    // Missing disk identities produce non-focusable placeholders; keep all links reachable.
+    const pDiskList = useVirtualizedDiskList(vDisks, vDisks.every(({ PDisk: pDisk }) => !isNil(pDisk === null || pDisk === void 0 ? void 0 : pDisk.NodeId) && !isNil(pDisk === null || pDisk === void 0 ? void 0 : pDisk.PDiskId)));
+    React.useEffect(() => {
+        setHighlightedVDisk((id) => vDisks.some((disk) => disk.StringifiedId === id) ? id : undefined);
+    }, [vDisks]);
     const { theme: { spaceBaseSize }, } = useLayoutContext();
     const compactVDiskWidths = React.useMemo(() => calculateCompactVDiskWidths(vDisks, spaceBaseSize), [spaceBaseSize, vDisks]);
     if (!vDisks.length) {
@@ -25,25 +53,6 @@ export function Disks({ vDisks = [], viewContext, erasure, withIcon, isAllVDisks
     const vDisksContainerWidth = isAllVDisksLayout
         ? getAllVDisksContainerWidth()
         : VDISKS_CONTAINER_WIDTH;
-    return (_jsxs("div", { className: b(null), children: [_jsx(Flex, { direction: "row", gap: 1, grow: true, style: { width: vDisksContainerWidth }, children: vDisks === null || vDisks === void 0 ? void 0 : vDisks.map((vDisk, index) => (_jsx(VDiskItem, { vDisk: vDisk, inactive: !isVdiskActive(vDisk, viewContext), highlightedVDisk: highlightedVDisk, setHighlightedVDisk: setHighlightedVDisk, compactVDiskWidth: compactVDiskWidths[index], withIcon: withIcon, getDisplayState: getVDiskDisplayState, isAllVDisksLayout: isAllVDisksLayout }, vDisk.StringifiedId || index))) }), _jsx("div", { className: b('pdisks-wrapper'), children: vDisks === null || vDisks === void 0 ? void 0 : vDisks.map((vDisk, index) => {
-                    var _a;
-                    return (_jsx(PDiskItem, { vDisk: vDisk, viewContext: viewContext, highlightedVDisk: highlightedVDisk, setHighlightedVDisk: setHighlightedVDisk, withDCMargin: vDisksWithDCMargins.includes(index), withIcon: withIcon, getDisplayState: getPDiskDisplayState }, ((_a = vDisk === null || vDisk === void 0 ? void 0 : vDisk.PDisk) === null || _a === void 0 ? void 0 : _a.StringifiedId) || index));
-                }) })] }));
-}
-function VDiskItem({ vDisk, highlightedVDisk, inactive, setHighlightedVDisk, compactVDiskWidth, withIcon, getDisplayState, isAllVDisksLayout, }) {
-    // Do not show PDisk popup for VDisk
-    const vDiskToShow = { ...vDisk, PDisk: undefined };
-    const style = isAllVDisksLayout
-        ? { width: ALL_VDISK_WIDTH, flexBasis: ALL_VDISK_WIDTH }
-        : { width: compactVDiskWidth, flexBasis: compactVDiskWidth };
-    return (_jsxs("div", { style: style, className: b('vdisk-item', { all: isAllVDisksLayout }), children: [isAllVDisksLayout ? (_jsx("div", { "aria-hidden": true, className: b('vdisk-size-indicator'), style: { width: compactVDiskWidth } })) : null, _jsx(VDiskWithDonorsStack, { data: vDiskToShow, compact: !isAllVDisksLayout, withIcon: withIcon, inactive: inactive, delayOpen: DISKS_POPUP_DEBOUNCE_TIMEOUT, delayClose: DISKS_POPUP_DEBOUNCE_TIMEOUT, highlightedVDisk: highlightedVDisk, setHighlightedVDisk: setHighlightedVDisk, progressBarClassName: b('vdisk-progress-bar'), getDisplayState: getDisplayState })] }));
-}
-function PDiskItem({ vDisk, viewContext, highlightedVDisk, setHighlightedVDisk, withDCMargin, withIcon, getDisplayState, }) {
-    const vDiskId = vDisk.StringifiedId;
-    const isHighlighted = highlightedVDisk === vDiskId;
-    if (!vDisk.PDisk) {
-        return null;
-    }
-    return (_jsx(PDisk, { className: b('pdisk-item', { ['with-dc-margin']: withDCMargin }), progressBarClassName: b('pdisk-progress-bar'), data: vDisk.PDisk, inactive: !isPdiskActive(vDisk.PDisk, viewContext), showPopup: isHighlighted, delayOpen: DISKS_POPUP_DEBOUNCE_TIMEOUT, delayClose: DISKS_POPUP_DEBOUNCE_TIMEOUT, onShowPopup: () => setHighlightedVDisk === null || setHighlightedVDisk === void 0 ? void 0 : setHighlightedVDisk(vDiskId), onHidePopup: () => setHighlightedVDisk === null || setHighlightedVDisk === void 0 ? void 0 : setHighlightedVDisk(undefined), withIcon: withIcon, highlighted: isHighlighted, getDisplayState: getDisplayState }));
-}
+    return (_jsxs("div", { className: b(null), children: [_jsx(Flex, { direction: "row", gap: 1, grow: true, style: { width: vDisksContainerWidth }, ref: vDiskList.containerRef, children: vDisks.map((vDisk, index) => (_jsx(VDiskItem, { vDisk: vDisk, inactive: !isVdiskActive(vDisk, viewContext), highlighted: highlightedVDisk === vDisk.StringifiedId, setHighlightedVDisk: setHighlightedVDisk, compactVDiskWidth: compactVDiskWidths[index], withIcon: withIcon, getDisplayState: getVDiskDisplayState, isAllVDisksLayout: isAllVDisksLayout, renderContent: vDiskList.shouldRenderDisk(index), placeholderProps: vDiskList.getPlaceholderProps(index) }, vDisk.StringifiedId || index))) }), _jsx("div", { className: b('pdisks-wrapper'), ref: pDiskList.containerRef, children: vDisks.map((vDisk, index) => (_jsx(PDiskItem, { vDisk: vDisk, viewContext: viewContext, highlighted: highlightedVDisk === vDisk.StringifiedId, setHighlightedVDisk: setHighlightedVDisk, withDCMargin: vDisksWithDCMargins.includes(index), withIcon: withIcon, getDisplayState: getPDiskDisplayState, renderContent: pDiskList.shouldRenderDisk(index), placeholderProps: pDiskList.getPlaceholderProps(index) }, vDisk.StringifiedId || index))) })] }));
+});
 //# sourceMappingURL=Disks.js.map

package/dist/containers/Storage/Disks/Disks.js.map

@@ -1 +1 @@
-{"version":3,"file":"Disks.js","sourceRoot":"","sources":["../../../../src/containers/Storage/Disks/Disks.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Disks.js","sourceRoot":"","sources":["../../../../src/containers/Storage/Disks/Disks.tsx"],"names":[],"mappings":"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"}

package/dist/containers/Storage/Disks/Disks.scss

@@ -19,6 +19,7 @@
         flex-shrink: 0;
 
         min-width: 24px;
+        min-height: 20px;
 
         &_all {
             position: relative;
@@ -30,6 +31,7 @@
 
             width: 65px;
             min-width: 65px;
+            min-height: 24px;
         }
     }
     &__vdisk-size-indicator {
@@ -48,7 +50,10 @@
     }
 
     &__pdisk-item {
+        flex-shrink: 0;
+
         min-width: 55px;
+        min-height: 20px;
         margin-right: var(--g-spacing-1);
 
         &_with-dc-margin {

package/dist/containers/Storage/PDisk/PDisk.d.ts

@@ -1,25 +1,22 @@
+import React from 'react';
 import type { PDiskDisplayStateGetter } from '../../../utils/disks/displayState';
-import type { PreparedPDisk, PreparedVDisk } from '../../../utils/disks/types';
-import type { StorageViewContext } from '../types';
+import type { PreparedPDisk } from '../../../utils/disks/types';
 import './PDisk.scss';
-interface PDiskProps {
+export interface PDiskProps {
     data?: PreparedPDisk;
-    vDisks?: PreparedVDisk[];
     showPopup?: boolean;
     onShowPopup?: VoidFunction;
     onHidePopup?: VoidFunction;
     className?: string;
     progressBarClassName?: string;
-    viewContext?: StorageViewContext;
     width?: number;
     delayOpen?: number;
     delayClose?: number;
     withIcon?: boolean;
+    showTypeLabel?: boolean;
     inactive?: boolean;
     highlighted?: boolean;
-    highlightedDisk?: string;
-    setHighlightedDisk?: (id?: string) => void;
     getDisplayState?: PDiskDisplayStateGetter;
+    topContent?: React.ReactNode;
 }
-export declare const PDisk: ({ data, vDisks, showPopup, onShowPopup, onHidePopup, className, progressBarClassName, viewContext, width, delayOpen, delayClose, withIcon, inactive, highlighted, highlightedDisk, setHighlightedDisk, getDisplayState, }: PDiskProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const PDisk: ({ data, showPopup, onShowPopup, onHidePopup, className, progressBarClassName, width, delayOpen, delayClose, withIcon, showTypeLabel, inactive, highlighted, getDisplayState, topContent, }: PDiskProps) => import("react/jsx-runtime").JSX.Element;

package/dist/containers/Storage/PDisk/PDisk.js

@@ -9,21 +9,30 @@ import { HoverPopup } from '../../../components/HoverPopup/HoverPopup';
 import { InternalLink } from '../../../components/InternalLink';
 import { PDiskPopup } from '../../../components/PDiskPopup/PDiskPopup';
 import { getPDiskPagePath } from '../../../routes';
+import { isCapacityAlert } from '../../../types/api/enums';
 import { cn } from '../../../utils/cn';
+import { EMPTY_DATA_PLACEHOLDER } from '../../../utils/constants';
 import { getDefaultPDiskDisplayState } from '../../../utils/disks/displayState';
 import { getDiskBarTone } from '../../../utils/disks/getDiskBarTone';
+import { formatPDiskType } from '../../../utils/disks/getPDiskType';
 import { getPDiskId, getVDiskStatusIcon } from '../../../utils/disks/helpers';
 import { isNumeric } from '../../../utils/utils';
 import { DISKS_POPUP_DEBOUNCE_TIMEOUT } from '../shared';
-import { PDiskVDisks } from './PDiskVDisks';
 import { i18n } from './i18n';
 import './PDisk.scss';
 const b = cn('pdisk-storage');
 const EMPTY_ALL_MODE_INDICATORS = {};
-function getPDiskBarContent({ allocatedPercent, hidden, isAllMode, noDataPlaceholder, showAllocatedPercentLabel, showNoDataPlaceholder, }) {
-    if (hidden) {
-        return null;
+function PDiskNodeBarContent({ left, center, type }) {
+    return (_jsxs("div", { className: b('node-bar-content'), children: [_jsx("div", { className: b('node-bar-left'), children: left }), _jsx("div", { className: b('node-bar-center'), children: center }), _jsx("div", { className: b('node-bar-type'), children: type })] }));
+}
+function getPDiskContent({ barContent, data, hasIndicators, showAllocatedPercentLabel, showTypeLabel, isNoData, }) {
+    if (!showTypeLabel) {
+        return barContent;
     }
+    const showNoDataLabel = isNoData && !showAllocatedPercentLabel;
+    return (_jsx(PDiskNodeBarContent, { left: hasIndicators || showAllocatedPercentLabel || showNoDataLabel ? null : barContent, center: showAllocatedPercentLabel ? barContent : null, type: _jsxs(React.Fragment, { children: [showNoDataLabel ? barContent : null, _jsx(DiskBarLabel, { children: formatPDiskType(data.Type) || EMPTY_DATA_PLACEHOLDER })] }) }));
+}
+function getPDiskBarContent({ allocatedPercent, isAllMode, noDataPlaceholder, showAllocatedPercentLabel, showNoDataPlaceholder, }) {
     const hasAllocatedPercent = isNumeric(allocatedPercent) && allocatedPercent >= 0;
     if (hasAllocatedPercent && showAllocatedPercentLabel !== false) {
         return _jsx(DiskBarLabel, { children: `${Math.floor(allocatedPercent)}%` });
@@ -49,36 +58,24 @@ function getPDiskBarIndicator({ hidden, icon, placement, severity, withIcon, })
         showIndicator: true,
     };
 }
-function getAllModeOverlay(mode, indicators) {
-    if (mode !== 'all') {
-        return null;
-    }
-    return _jsx(PDiskAllModeIndicators, { indicators: indicators !== null && indicators !== void 0 ? indicators : EMPTY_ALL_MODE_INDICATORS });
+function getAccessiblePDiskId(data) {
+    return (data.StringifiedId ||
+        getPDiskId({ nodeId: data.NodeId, pDiskId: data.PDiskId }) ||
+        i18n('context_no-data'));
 }
-function getAccessibleName(data, allocatedPercent, hasIssues, isAllMode, showNoDataPlaceholder) {
-    var _a, _b;
-    if (!isAllMode) {
-        return undefined;
-    }
+function getAllocatedPercentAccessibleName(allocatedPercent) {
+    const hasAllocatedPercent = typeof allocatedPercent === 'number' &&
+        Number.isFinite(allocatedPercent) &&
+        allocatedPercent >= 0;
+    return hasAllocatedPercent ? `${Math.floor(allocatedPercent)}%` : i18n('context_no-data');
+}
+function getAllModeAccessibleName(data, allocatedPercent, hasIssues) {
     const noData = i18n('context_no-data');
-    let allocated = noData;
-    if (showNoDataPlaceholder !== true) {
-        const hasAllocatedPercent = typeof allocatedPercent === 'number' &&
-            Number.isFinite(allocatedPercent) &&
-            allocatedPercent >= 0;
-        if (hasAllocatedPercent) {
-            allocated = `${Math.floor(allocatedPercent)}%`;
-        }
-    }
     const health = hasIssues === undefined
         ? noData
         : i18n(hasIssues ? 'context_all-mode-health-issues' : 'context_all-mode-health-healthy');
-    const pDiskId = (_b = (_a = data.StringifiedId) !== null && _a !== void 0 ? _a : getPDiskId({
-        nodeId: data.NodeId,
-        pDiskId: data.PDiskId,
-    })) !== null && _b !== void 0 ? _b : noData;
     return i18n('context_all-mode-accessible-name', {
-        pdiskId: pDiskId,
+        pdiskId: getAccessiblePDiskId(data),
         health,
         state: data.State || noData,
         capacityAlert: data.PDiskCapacityAlert || noData,
@@ -87,24 +84,77 @@ function getAccessibleName(data, allocatedPercent, hasIssues, isAllMode, showNoD
         maintenance: data.MaintenanceStatus || noData,
         device: data.Device || noData,
         realtime: data.Realtime || noData,
-        allocatedPercent: allocated,
+        allocatedPercent: getAllocatedPercentAccessibleName(allocatedPercent),
     });
 }
-export const PDisk = ({ data = {}, vDisks, showPopup, onShowPopup, onHidePopup, className, progressBarClassName, viewContext, width, delayOpen = DISKS_POPUP_DEBOUNCE_TIMEOUT, delayClose = DISKS_POPUP_DEBOUNCE_TIMEOUT, withIcon, inactive, highlighted, highlightedDisk, setHighlightedDisk, getDisplayState, }) => {
-    var _a, _b, _c, _d, _e;
+function getAccessibleName(data, { mode, allMode, isNoData, allocatedPercent, driveType }) {
+    if (!mode) {
+        return undefined;
+    }
+    if (mode === 'all') {
+        return getAllModeAccessibleName(data, allocatedPercent, allMode === null || allMode === void 0 ? void 0 : allMode.hasIssues);
+    }
+    const noData = i18n('context_no-data');
+    let diskName = i18n('context_pdisk', { pdiskId: getAccessiblePDiskId(data) });
+    if (isNoData) {
+        diskName = i18n('context_pdisk-no-whiteboard', { disk: diskName, noData });
+    }
+    const { State, Device, Realtime } = isNoData ? {} : data;
+    switch (mode) {
+        case 'driveType':
+            return i18n('context_drive-type-accessible-name', {
+                disk: diskName,
+                driveType: formatPDiskType(driveType) || noData,
+            });
+        case 'state':
+            return i18n('context_state-accessible-name', { disk: diskName, state: State || noData });
+        case 'space':
+            return i18n('context_space-accessible-name', {
+                disk: diskName,
+                capacityAlert: isCapacityAlert(data.PDiskCapacityAlert)
+                    ? data.PDiskCapacityAlert
+                    : noData,
+                allocatedPercent: getAllocatedPercentAccessibleName(allocatedPercent),
+            });
+        case 'drive':
+            return i18n('context_drive-accessible-name', {
+                disk: diskName,
+                drive: data.DriveStatus || noData,
+            });
+        case 'decommit':
+            return i18n('context_decommit-accessible-name', {
+                disk: diskName,
+                decommit: data.DecommitStatus || noData,
+            });
+        case 'maintenance':
+            return i18n('context_maintenance-accessible-name', {
+                disk: diskName,
+                maintenance: data.MaintenanceStatus || noData,
+            });
+        case 'device':
+            return i18n('context_device-accessible-name', {
+                disk: diskName,
+                device: Device || noData,
+                realtime: Realtime || noData,
+            });
+        default:
+            return undefined;
+    }
+}
+export const PDisk = ({ data = {}, showPopup, onShowPopup, onHidePopup, className, progressBarClassName, width, delayOpen = DISKS_POPUP_DEBOUNCE_TIMEOUT, delayClose = DISKS_POPUP_DEBOUNCE_TIMEOUT, withIcon, showTypeLabel, inactive, highlighted, getDisplayState, topContent, }) => {
+    var _a, _b, _c, _d;
     const { NodeId, PDiskId } = data;
     const pDiskIdsDefined = !isNil(NodeId) && !isNil(PDiskId);
     const anchorRef = React.useRef(null);
     const displayState = React.useMemo(() => (getDisplayState !== null && getDisplayState !== void 0 ? getDisplayState : getDefaultPDiskDisplayState)(data), [data, getDisplayState]);
     const isAllMode = displayState.mode === 'all';
     const noDataPlaceholder = displayState.showNoDataPlaceholder === false ? undefined : i18n('context_no-data');
-    const hideBarContent = Boolean(displayState.isLegendInactive);
     const allocatedPercent = displayState.allocatedPercent;
     const hasAllocatedPercent = isNumeric(allocatedPercent) && allocatedPercent >= 0;
     const iconPlacement = (_a = displayState.iconPlacement) !== null && _a !== void 0 ? _a : 'inline';
-    const accessibleName = getAccessibleName(data, allocatedPercent, (_b = displayState.allMode) === null || _b === void 0 ? void 0 : _b.hasIssues, isAllMode, displayState.showNoDataPlaceholder);
+    const accessibleName = getAccessibleName(data, displayState);
     const { leading, overflowVisible, showIndicator } = getPDiskBarIndicator({
-        hidden: hideBarContent,
+        hidden: Boolean(displayState.isLegendInactive),
         icon: displayState.icon,
         placement: iconPlacement,
         severity: displayState.severity,
@@ -112,22 +162,34 @@ export const PDisk = ({ data = {}, vDisks, showPopup, onShowPopup, onHidePopup,
     });
     const barContent = getPDiskBarContent({
         allocatedPercent,
-        hidden: hideBarContent,
         isAllMode,
         noDataPlaceholder,
         showAllocatedPercentLabel: displayState.showAllocatedPercentLabel,
         showNoDataPlaceholder: displayState.showNoDataPlaceholder,
     });
-    const overlay = getAllModeOverlay(displayState.mode, (_c = displayState.allMode) === null || _c === void 0 ? void 0 : _c.indicators);
+    const showAllocatedPercentLabel = hasAllocatedPercent && displayState.showAllocatedPercentLabel !== false;
+    const allModeIndicators = (_c = (_b = displayState.allMode) === null || _b === void 0 ? void 0 : _b.indicators) !== null && _c !== void 0 ? _c : EMPTY_ALL_MODE_INDICATORS;
+    const hasAllModeIndicators = isAllMode && Object.values(allModeIndicators).some(Boolean);
+    const overlay = hasAllModeIndicators ? (_jsx(PDiskAllModeIndicators, { indicators: allModeIndicators })) : null;
+    const content = getPDiskContent({
+        barContent,
+        data,
+        hasIndicators: showIndicator || hasAllModeIndicators,
+        showAllocatedPercentLabel,
+        showTypeLabel,
+        isNoData: displayState.isNoData,
+    });
     const tone = getDiskBarTone({
+        driveType: displayState.driveType,
         severity: displayState.severity,
         showIndicator,
         indicator: displayState.icon,
+        isNoData: displayState.isNoData,
     });
     let pDiskPath;
     if (pDiskIdsDefined) {
         pDiskPath = getPDiskPagePath(PDiskId, NodeId);
     }
-    return (_jsxs("div", { className: b(null, className), ref: anchorRef, style: { width: (_d = displayState.width) !== null && _d !== void 0 ? _d : width }, children: [_jsx(PDiskVDisks, { vDisks: vDisks, viewContext: viewContext, withIcon: withIcon, delayOpen: delayOpen, delayClose: delayClose, highlightedDisk: highlightedDisk, setHighlightedDisk: setHighlightedDisk }), _jsx(HoverPopup, { showPopup: showPopup, offset: { mainAxis: 2, crossAxis: 0 }, anchorRef: anchorRef, onShowPopup: onShowPopup, onHidePopup: onHidePopup, renderPopupContent: () => _jsx(PDiskPopup, { data: data }), delayOpen: delayOpen, delayClose: delayClose, children: _jsx(InternalLink, { to: pDiskPath, "aria-label": accessibleName, className: b('content'), children: _jsx(DiskStateProgressBar, { allocation: allocatedPercent, tone: tone, mode: displayState.mode, leading: leading, content: barContent, overlay: overlay, className: progressBarClassName, inactive: inactive, highlighted: highlighted, filled: hasAllocatedPercent && Number(allocatedPercent) > 0, strongFill: (_e = displayState.allMode) === null || _e === void 0 ? void 0 : _e.hasIssues, borderless: displayState.isLegendInactive, overflowVisible: overflowVisible }) }) })] }));
+    return (_jsxs("div", { className: b(null, className), ref: anchorRef, style: { width: width !== null && width !== void 0 ? width : displayState.width }, children: [topContent, _jsx(HoverPopup, { showPopup: showPopup, offset: { mainAxis: 2, crossAxis: 0 }, anchorRef: anchorRef, onShowPopup: onShowPopup, onHidePopup: onHidePopup, renderPopupContent: () => _jsx(PDiskPopup, { data: data }), delayOpen: delayOpen, delayClose: delayClose, children: _jsx(InternalLink, { to: pDiskPath, "aria-label": accessibleName, className: b('content'), children: _jsx(DiskStateProgressBar, { allocation: allocatedPercent, tone: tone, mode: displayState.mode, leading: leading, content: content, overlay: overlay, className: progressBarClassName, inactive: inactive, highlighted: highlighted, filled: hasAllocatedPercent && Number(allocatedPercent) > 0, strongFill: (_d = displayState.allMode) === null || _d === void 0 ? void 0 : _d.hasIssues, borderless: displayState.borderless, overflowVisible: overflowVisible }) }) })] }));
 };
 //# sourceMappingURL=PDisk.js.map

package/dist/containers/Storage/PDisk/PDisk.js.map

@@ -1 +1 @@
-{"version":3,"file":"PDisk.js","sourceRoot":"","sources":["../../../../src/containers/Storage/PDisk/PDisk.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,KAAK,EAAC,MAAM,QAAQ,CAAC;AAE7B,OAAO,EAAC,YAAY,EAAC,MAAM,uDAAuD,CAAC;AACnF,OAAO,EAAC,aAAa,EAAC,MAAM,wDAAwD,CAAC;AACrF,OAAO,EAAC,oBAAoB,EAAC,MAAM,+DAA+D,CAAC;AACnG,OAAO,EAAC,sBAAsB,EAAC,MAAM,iEAAiE,CAAC;AACvG,OAAO,EAAC,UAAU,EAAC,MAAM,2CAA2C,CAAC;AACrE,OAAO,EAAC,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAC,UAAU,EAAC,MAAM,2CAA2C,CAAC;AACrE,OAAO,EAAC,gBAAgB,EAAC,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAC,EAAE,EAAC,MAAM,mBAAmB,CAAC;AAOrC,OAAO,EAAC,2BAA2B,EAAC,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAC,cAAc,EAAC,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAC,UAAU,EAAE,kBAAkB,EAAC,MAAM,8BAA8B,CAAC;AAE5E,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAC,4BAA4B,EAAC,MAAM,WAAW,CAAC;AAGvD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAE5B,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC;AAC9B,MAAM,yBAAyB,GAAG,EAAE,CAAC;AAWrC,SAAS,kBAAkB,CAAC,EACxB,gBAAgB,EAChB,MAAM,EACN,SAAS,EACT,iBAAiB,EACjB,yBAAyB,EACzB,qBAAqB,GACE;IACvB,IAAI,MAAM,EAAE,CAAC;QACT,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,mBAAmB,GAAG,SAAS,CAAC,gBAAgB,CAAC,IAAI,gBAAgB,IAAI,CAAC,CAAC;IACjF,IAAI,mBAAmB,IAAI,yBAAyB,KAAK,KAAK,EAAE,CAAC;QAC7D,OAAO,KAAC,YAAY,cAAE,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,GAAG,GAAgB,CAAC;IAC7E,CAAC;IAED,IACI,iBAAiB;QACjB,CAAC,CAAC,mBAAmB,IAAI,qBAAqB,KAAK,IAAI,IAAI,SAAS,CAAC,EACvE,CAAC;QACC,OAAO,KAAC,YAAY,IAAC,OAAO,EAAC,aAAa,YAAE,iBAAiB,GAAgB,CAAC;IAClF,CAAC;IAED,OAAO,IAAI,CAAC;AAChB,CAAC;AAUD,SAAS,oBAAoB,CAAC,EAC1B,MAAM,EACN,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,QAAQ,GACiB;IACzB,MAAM,iBAAiB,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,kBAAkB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IACtE,IAAI,CAAC,QAAQ,IAAI,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC5C,OAAO;YACH,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,KAAK;YACtB,aAAa,EAAE,KAAK;SACvB,CAAC;IACN,CAAC;IAED,OAAO;QACH,OAAO,EAAE,KAAC,aAAa,IAAC,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,GAAI;QAC1E,eAAe,EAAE,SAAS,KAAK,SAAS;QACxC,aAAa,EAAE,IAAI;KACtB,CAAC;AACN,CAAC;AAED,SAAS,iBAAiB,CACtB,IAAiC,EACjC,UAAmD;IAEnD,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;QACjB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,KAAC,sBAAsB,IAAC,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,yBAAyB,GAAI,CAAC;AAC3F,CAAC;AAED,SAAS,iBAAiB,CACtB,IAAmB,EACnB,gBAAoC,EACpC,SAA8B,EAC9B,SAAkB,EAClB,qBAA0C;;IAE1C,IAAI,CAAC,SAAS,EAAE,CAAC;QACb,OAAO,SAAS,CAAC;IACrB,CAAC;IAED,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAEvC,IAAI,SAAS,GAAG,MAAM,CAAC;IACvB,IAAI,qBAAqB,KAAK,IAAI,EAAE,CAAC;QACjC,MAAM,mBAAmB,GACrB,OAAO,gBAAgB,KAAK,QAAQ;YACpC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC;YACjC,gBAAgB,IAAI,CAAC,CAAC;QAE1B,IAAI,mBAAmB,EAAE,CAAC;YACtB,SAAS,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC;QACnD,CAAC;IACL,CAAC;IAED,MAAM,MAAM,GACR,SAAS,KAAK,SAAS;QACnB,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,IAAI,CACA,SAAS,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,iCAAiC,CACnF,CAAC;IACZ,MAAM,OAAO,GACT,MAAA,MAAA,IAAI,CAAC,aAAa,mCAClB,UAAU,CAAC;QACP,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,OAAO,EAAE,IAAI,CAAC,OAAO;KACxB,CAAC,mCACF,MAAM,CAAC;IAEX,OAAO,IAAI,CAAC,kCAAkC,EAAE;QAC5C,OAAO,EAAE,OAAO;QAChB,MAAM;QACN,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,MAAM;QAC3B,aAAa,EAAE,IAAI,CAAC,kBAAkB,IAAI,MAAM;QAChD,KAAK,EAAE,IAAI,CAAC,WAAW,IAAI,MAAM;QACjC,QAAQ,EAAE,IAAI,CAAC,cAAc,IAAI,MAAM;QACvC,WAAW,EAAE,IAAI,CAAC,iBAAiB,IAAI,MAAM;QAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,MAAM;QAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,MAAM;QACjC,gBAAgB,EAAE,SAAS;KAC9B,CAAC,CAAC;AACP,CAAC;AAsBD,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAClB,IAAI,GAAG,EAAE,EACT,MAAM,EACN,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,oBAAoB,EACpB,WAAW,EACX,KAAK,EACL,SAAS,GAAG,4BAA4B,EACxC,UAAU,GAAG,4BAA4B,EACzC,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,eAAe,GACN,EAAE,EAAE;;IACb,MAAM,EAAC,MAAM,EAAE,OAAO,EAAC,GAAG,IAAI,CAAC;IAC/B,MAAM,eAAe,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAC9B,GAAG,EAAE,CAAC,CAAC,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,2BAA2B,CAAC,CAAC,IAAI,CAAC,EAC5D,CAAC,IAAI,EAAE,eAAe,CAAC,CAC1B,CAAC;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,KAAK,KAAK,CAAC;IAC9C,MAAM,iBAAiB,GACnB,YAAY,CAAC,qBAAqB,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IACvF,MAAM,cAAc,GAAG,OAAO,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC9D,MAAM,gBAAgB,GAAG,YAAY,CAAC,gBAAgB,CAAC;IACvD,MAAM,mBAAmB,GAAG,SAAS,CAAC,gBAAgB,CAAC,IAAI,gBAAgB,IAAI,CAAC,CAAC;IACjF,MAAM,aAAa,GAAG,MAAA,YAAY,CAAC,aAAa,mCAAI,QAAQ,CAAC;IAC7D,MAAM,cAAc,GAAG,iBAAiB,CACpC,IAAI,EACJ,gBAAgB,EAChB,MAAA,YAAY,CAAC,OAAO,0CAAE,SAAS,EAC/B,SAAS,EACT,YAAY,CAAC,qBAAqB,CACrC,CAAC;IACF,MAAM,EAAC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAC,GAAG,oBAAoB,CAAC;QACnE,MAAM,EAAE,cAAc;QACtB,IAAI,EAAE,YAAY,CAAC,IAAI;QACvB,SAAS,EAAE,aAAa;QACxB,QAAQ,EAAE,YAAY,CAAC,QAAQ;QAC/B,QAAQ;KACX,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,kBAAkB,CAAC;QAClC,gBAAgB;QAChB,MAAM,EAAE,cAAc;QACtB,SAAS;QACT,iBAAiB;QACjB,yBAAyB,EAAE,YAAY,CAAC,yBAAyB;QACjE,qBAAqB,EAAE,YAAY,CAAC,qBAAqB;KAC5D,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,iBAAiB,CAAC,YAAY,CAAC,IAAI,EAAE,MAAA,YAAY,CAAC,OAAO,0CAAE,UAAU,CAAC,CAAC;IAEvF,MAAM,IAAI,GAAG,cAAc,CAAC;QACxB,QAAQ,EAAE,YAAY,CAAC,QAAQ;QAC/B,aAAa;QACb,SAAS,EAAE,YAAY,CAAC,IAAI;KAC/B,CAAC,CAAC;IAEH,IAAI,SAA6B,CAAC;IAElC,IAAI,eAAe,EAAE,CAAC;QAClB,SAAS,GAAG,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAClD,CAAC;IAED,OAAO,CACH,eACI,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,EAAC,KAAK,EAAE,MAAA,YAAY,CAAC,KAAK,mCAAI,KAAK,EAAC,aAE3C,KAAC,WAAW,IACR,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,GACxC,EACF,KAAC,UAAU,IACP,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,EAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAC,EACnC,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,GAAG,EAAE,CAAC,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,GAAI,EACpD,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,YAEtB,KAAC,YAAY,IAAC,EAAE,EAAE,SAAS,gBAAc,cAAc,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YAC5E,KAAC,oBAAoB,IACjB,UAAU,EAAE,gBAAgB,EAC5B,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,YAAY,CAAC,IAAI,EACvB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,oBAAoB,EAC/B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,mBAAmB,IAAI,MAAM,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAC3D,UAAU,EAAE,MAAA,YAAY,CAAC,OAAO,0CAAE,SAAS,EAC3C,UAAU,EAAE,YAAY,CAAC,gBAAgB,EACzC,eAAe,EAAE,eAAe,GAClC,GACS,GACN,IACX,CACT,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"PDisk.js","sourceRoot":"","sources":["../../../../src/containers/Storage/PDisk/PDisk.tsx"],"names":[],"mappings":"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"}

package/dist/containers/Storage/PDisk/PDisk.scss

@@ -24,11 +24,22 @@
     &__vdisks {
         display: flex;
         flex: 0 0 auto;
-        gap: var(--pdisk-gap-width);
+        flex-direction: column;
 
         margin-bottom: 4px;
 
         white-space: nowrap;
+
+        &_expert {
+            gap: var(--g-spacing-half);
+
+            margin-bottom: 6px;
+        }
+    }
+
+    &__vdisks-row {
+        display: flex;
+        gap: var(--pdisk-gap-width);
     }
 
     &__vdisks-item {
@@ -36,10 +47,77 @@
 
         min-width: var(--pdisk-vdisk-width);
 
+        &_all {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+        }
+
         .ydb-stack__item {
             .data-table__row:hover & {
                 background: var(--ydb-data-table-color-hover);
             }
         }
     }
+
+    &__vdisk-size-indicator {
+        flex: none;
+        align-self: center;
+
+        max-width: 100%;
+        height: 2px;
+
+        border-radius: var(--g-border-radius-xs);
+        background: var(--g-color-base-generic-medium);
+    }
+
+    &__vdisk-progress-bar_expert {
+        --progress-bar-full-height: 14px;
+        --progress-bar-compact-height: 14px;
+        --progress-bar-compact-placeholder-margin-left: var(--g-spacing-half);
+    }
+
+    &__vdisk-progress-bar_all {
+        --disk-border-radius: 3px;
+
+        min-width: 0;
+    }
+
+    &__vdisk-indicator {
+        flex-shrink: 0;
+
+        margin: var(--g-spacing-half);
+    }
+
+    &__node-bar-content {
+        position: absolute;
+        z-index: 2;
+        inset: 0;
+
+        display: grid;
+        align-items: center;
+        grid-template-columns: 1fr auto 1fr;
+    }
+
+    &__node-bar-left {
+        justify-self: start;
+    }
+
+    &__node-bar-center {
+        justify-self: center;
+
+        .storage-disk-progress-bar__title {
+            margin-right: 0;
+        }
+    }
+
+    &__node-bar-type {
+        --ydb-progress-bar-font-color: var(--entity-state-font-color);
+
+        display: flex;
+        align-items: center;
+        justify-self: end;
+
+        gap: var(--g-spacing-1);
+    }
 }

package/dist/containers/Storage/PDisk/PDiskWithVDisks.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { VDiskDisplayStateGetter } from '../../../utils/disks/displayState';
+import type { PreparedVDisk } from '../../../utils/disks/types';
+import type { StorageViewContext } from '../types';
+import type { PDiskProps } from './PDisk';
+interface PDiskWithVDisksProps extends Omit<PDiskProps, 'topContent'> {
+    vDisks?: PreparedVDisk[];
+    viewContext?: StorageViewContext;
+    withVDiskIcons?: boolean;
+    getVDiskDisplayState?: VDiskDisplayStateGetter;
+    expertMode?: boolean;
+    isAllVDisksLayout?: boolean;
+    highlightedDisk?: string;
+    setHighlightedDisk?: (id?: string) => void;
+}
+export declare const PDiskWithVDisks: React.NamedExoticComponent<PDiskWithVDisksProps>;
+export {};

package/dist/containers/Storage/PDisk/PDiskWithVDisks.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { chunk } from 'lodash';
+import { VDisk } from '../../../components/VDisk/VDisk';
+import { cn } from '../../../utils/cn';
+import { NODE_EXPERT_ALL_VDISKS_PER_ROW, NODE_EXPERT_ALL_VDISK_WIDTH, calculateNodeExpertVDiskRows, } from '../PaginatedStorageNodes/nodeExpertModeLayout';
+import { DISKS_POPUP_DEBOUNCE_TIMEOUT } from '../shared';
+import { isVdiskActive } from '../utils';
+import { PDisk } from './PDisk';
+const b = cn('pdisk-storage');
+const NODE_EXPERT_VDISK_ICON_SIZE = 10;
+const NODE_EXPERT_VDISK_ICON_GROUP_SIZE = 8;
+const VDiskItem = React.memo(function VDiskItem({ vDisk, vDiskWidth, viewContext, withIcon, getVDiskDisplayState, expertMode, isAllVDisksLayout, delayOpen, delayClose, highlighted, setHighlightedDisk, }) {
+    const id = vDisk.StringifiedId;
+    const onShowPopup = React.useCallback(() => setHighlightedDisk === null || setHighlightedDisk === void 0 ? void 0 : setHighlightedDisk(id), [id, setHighlightedDisk]);
+    const onHidePopup = React.useCallback(() => setHighlightedDisk === null || setHighlightedDisk === void 0 ? void 0 : setHighlightedDisk(undefined), [setHighlightedDisk]);
+    const diskWidth = isAllVDisksLayout ? NODE_EXPERT_ALL_VDISK_WIDTH : vDiskWidth;
+    return (_jsxs("div", { className: b('vdisks-item', { all: isAllVDisksLayout }), style: expertMode
+            ? { width: diskWidth, flexBasis: diskWidth }
+            : {
+                // 1 is small enough for empty disks to be of the minimum width
+                // but if all of them are empty, `flex-grow: 1` would size them evenly
+                flexGrow: Number(vDisk.AllocatedSize) || 1,
+            }, children: [isAllVDisksLayout ? (_jsx("div", { "aria-hidden": true, className: b('vdisk-size-indicator'), style: { width: vDiskWidth } })) : null, _jsx(VDisk, { withIcon: withIcon, data: vDisk, inactive: !isVdiskActive(vDisk, viewContext), compact: !isAllVDisksLayout, allModeSize: isAllVDisksLayout ? 's' : undefined, delayOpen: delayOpen, delayClose: delayClose, showPopup: highlighted, onShowPopup: onShowPopup, onHidePopup: onHidePopup, highlighted: highlighted, getDisplayState: getVDiskDisplayState, iconSize: expertMode ? NODE_EXPERT_VDISK_ICON_SIZE : undefined, iconGroupSize: expertMode ? NODE_EXPERT_VDISK_ICON_GROUP_SIZE : undefined, indicatorClassName: expertMode ? b('vdisk-indicator') : undefined, progressBarClassName: expertMode
+                    ? b('vdisk-progress-bar', {
+                        expert: true,
+                        all: isAllVDisksLayout,
+                    })
+                    : undefined })] }));
+});
+export const PDiskWithVDisks = React.memo(function PDiskWithVDisks({ vDisks, viewContext, withIcon, withVDiskIcons, getVDiskDisplayState, expertMode, isAllVDisksLayout, width, delayOpen = DISKS_POPUP_DEBOUNCE_TIMEOUT, delayClose = DISKS_POPUP_DEBOUNCE_TIMEOUT, highlightedDisk, setHighlightedDisk, ...pDiskProps }) {
+    const vDiskRows = React.useMemo(() => {
+        const compactVDiskRows = expertMode
+            ? calculateNodeExpertVDiskRows(vDisks !== null && vDisks !== void 0 ? vDisks : [], width)
+            : [(vDisks !== null && vDisks !== void 0 ? vDisks : []).map((vDisk) => ({ vDisk, width: undefined }))];
+        // All-mode size markers use the compact allocation scale; only the fixed-width cards
+        // are regrouped into rows of four.
+        return isAllVDisksLayout
+            ? chunk(compactVDiskRows.flat(), NODE_EXPERT_ALL_VDISKS_PER_ROW)
+            : compactVDiskRows;
+    }, [expertMode, isAllVDisksLayout, vDisks, width]);
+    const vDisksContent = (vDisks === null || vDisks === void 0 ? void 0 : vDisks.length) ? (_jsx("div", { className: b('vdisks', { expert: expertMode }), children: vDiskRows.map((row, rowIndex) => {
+            var _a, _b;
+            return (_jsx("div", { className: b('vdisks-row'), children: row.map(({ vDisk, width: vDiskWidth }) => (_jsx(VDiskItem, { vDisk: vDisk, vDiskWidth: vDiskWidth, viewContext: viewContext, withIcon: withVDiskIcons !== null && withVDiskIcons !== void 0 ? withVDiskIcons : withIcon, getVDiskDisplayState: getVDiskDisplayState, expertMode: expertMode, isAllVDisksLayout: isAllVDisksLayout, delayOpen: delayOpen, delayClose: delayClose, highlighted: highlightedDisk === vDisk.StringifiedId, setHighlightedDisk: setHighlightedDisk }, vDisk.StringifiedId))) }, (_b = (_a = row[0]) === null || _a === void 0 ? void 0 : _a.vDisk.StringifiedId) !== null && _b !== void 0 ? _b : rowIndex));
+        }) })) : null;
+    return (_jsx(PDisk, { ...pDiskProps, width: width, withIcon: withIcon, delayOpen: delayOpen, delayClose: delayClose, topContent: vDisksContent }));
+});
+//# sourceMappingURL=PDiskWithVDisks.js.map