ydb-embedded-ui 22.4.0 → 22.6.0

package/src/components/EntityStatus/EntityStatus.tsx

@@ -44,31 +44,64 @@ const EFlagToStatusName: Record<EFlag, string> = {
     },
 };
 
-interface EntityStatusLabelProps {
+interface EntityStatusLabelBaseProps {
     status: EFlag;
+    className?: string;
+    size?: LabelProps['size'];
+    iconSize?: number;
+    qa?: string;
+}
+
+interface DefaultEntityStatusLabelProps {
+    view?: 'default';
     note?: React.ReactNode;
     children?: React.ReactNode;
-    className?: string;
     endContent?: React.ReactNode;
     withStatusName?: boolean;
-    size?: LabelProps['size'];
-    iconSize?: number;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    qa?: string;
 }
 
+interface CompactEntityStatusLabelProps {
+    view: 'compact';
+    note?: never;
+    children?: never;
+    endContent?: never;
+    withStatusName?: never;
+    onClick?: never;
+}
+
+type EntityStatusLabelProps = EntityStatusLabelBaseProps &
+    (DefaultEntityStatusLabelProps | CompactEntityStatusLabelProps);
+
 function EntityStatusLabel({
     children,
     className,
     endContent,
     status,
     withStatusName = true,
+    view = 'default',
     note,
     size = 'm',
     iconSize = 14,
     onClick,
     qa,
 }: EntityStatusLabelProps) {
+    if (view === 'compact') {
+        const statusName = EFlagToStatusName[status];
+        return (
+            <ActionTooltip title={statusName}>
+                <span className={b('compact')} role="img" aria-label={statusName}>
+                    <Label
+                        theme={status === EFlag.Blue ? 'info' : EFlagToLabelTheme[status]}
+                        icon={<StatusIcon size={iconSize} status={status} />}
+                        size={size}
+                        className={b(null, className)}
+                        qa={qa}
+                    />
+                </span>
+            </ActionTooltip>
+        );
+    }
     const theme = EFlagToLabelTheme[status];
     const isClickable = Boolean(onClick);
     return (

package/src/components/EvictVDiskButton/EvictVDiskButton.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {ArrowsOppositeToDots} from '@gravity-ui/icons';
 import {Icon} from '@gravity-ui/uikit';
+import type {ButtonProps} from '@gravity-ui/uikit';
 import {isNil} from 'lodash';
 
 import {
@@ -10,6 +11,7 @@ import {
 } from '../../store/reducers/capabilities/hooks';
 import type {ModifyDiskResponse} from '../../types/api/modifyDisk';
 import type {TVDiskID} from '../../types/api/vdisk';
+import {BRAND_BUTTON_CLASS} from '../../utils/constants';
 import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {ButtonWithConfirmDialog} from '../ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 
@@ -19,7 +21,9 @@ interface EvictVDiskButtonProps {
     vDiskId: Required<TVDiskID>;
     donorMode?: boolean;
     fullWidth?: boolean;
-    onSuccess?: () => void;
+    view?: ButtonProps['view'];
+    onSuccess?: (isDialogOpen: boolean) => void;
+    onDialogOpen?: () => VoidFunction;
 }
 
 export function isAllVdiskParamsDefined(vDiskId?: TVDiskID): vDiskId is Required<TVDiskID> {
@@ -36,7 +40,9 @@ export const EvictVDiskButton = ({
     vDiskId,
     donorMode,
     fullWidth,
+    view = 'normal',
     onSuccess,
+    onDialogOpen,
 }: EvictVDiskButtonProps) => {
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
     const newDiskApiAvailable = useDiskPagesAvailable();
@@ -79,8 +85,10 @@ export const EvictVDiskButton = ({
         <ButtonWithConfirmDialog
             onConfirmAction={handleEvictVDisk}
             onConfirmActionSuccess={onSuccess}
+            onDialogOpen={onDialogOpen}
             buttonDisabled={!isUserAllowedToMakeChanges || donorMode}
-            buttonView="normal"
+            buttonView={view}
+            buttonClassName={view === 'action' ? BRAND_BUTTON_CLASS : undefined}
             buttonWidth={fullWidth ? 'max' : undefined}
             dialogHeader={evictVDiskButtonKeyset('title_evict-dialog')}
             dialogText={evictVDiskButtonKeyset('confirm_evict')}

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

@@ -3,8 +3,8 @@
   "action_evict-short": "Evict",
   "action_force-evict": "Evict anyway",
   "title_evict-dialog": "Evict VDisk?",
-  "confirm_evict": "The VDisk will be evicted from the PDisk. This VDisk will be replaced by a new one in the group. Data will be replicated to the new disk. The old VDisk will serve as a donor until replication is complete, and then it will be removed.",
-  "alert_evict": "This operation cannot be cancelled.",
+  "confirm_evict": "The VDisk will be evicted from the PDisk.",
+  "alert_evict": "This VDisk will be replaced by a new one in the group. Data will be replicated to the new disk. The old VDisk will serve as\u00a0a\u00a0donor until replication is complete, and then it will be\u00a0removed.",
   "alert_not-allowed": "You don't have enough rights to evict VDisk",
   "alert_donor-mode-impossible": "Evicting a donor VDisk is not possible"
 }

package/src/components/FullNodeViewer/FullNodeViewer.tsx

@@ -5,7 +5,7 @@ import {cn} from '../../utils/cn';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {formatStorageValues} from '../../utils/dataFormatters/dataFormatters';
 import {useNodeDeveloperUIHref} from '../../utils/hooks/useNodeDeveloperUIHref';
-import {isNumeric} from '../../utils/utils';
+import {getNodeMemory} from '../../utils/memory';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
 import {PoolUsage} from '../PoolUsage/PoolUsage';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
@@ -90,18 +90,13 @@ export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
         return <div className="error">{i18n('no-data')}</div>;
     }
 
-    const memoryUsed = isNumeric(node.MemoryUsed) ? Number(node.MemoryUsed) : undefined;
-    const memoryLimit = isNumeric(node.MemoryLimit) ? Number(node.MemoryLimit) : undefined;
-    const hasMemoryUsed =
-        memoryUsed !== undefined && Number.isFinite(memoryUsed) && memoryUsed >= 0;
-    const hasMemoryLimit =
-        memoryLimit !== undefined && Number.isFinite(memoryLimit) && memoryLimit > 0;
+    const {memoryUsed, memoryLimit} = getNodeMemory(node);
 
     const renderMemory = () => {
-        if (!hasMemoryUsed) {
+        if (memoryUsed === undefined) {
             return EMPTY_DATA_PLACEHOLDER;
         }
-        if (!hasMemoryLimit) {
+        if (memoryLimit === undefined) {
             return formatMemoryValues(memoryUsed)[0];
         }
 

package/src/components/HideUnavailableNodesSwitch/HideUnavailableNodesSwitch.tsx

@@ -0,0 +1,24 @@
+import {Switch} from '@gravity-ui/uikit';
+
+import {useHideUnavailableNodes} from '../../utils/hooks/useHideUnavailableNodes';
+
+import i18n from './i18n';
+
+export function HideUnavailableNodesSwitch({className}: {className?: string}) {
+    const {available, hideUnavailable, handleHideUnavailableChange} = useHideUnavailableNodes();
+
+    if (!available) {
+        return null;
+    }
+
+    return (
+        <Switch
+            className={className}
+            size="m"
+            checked={hideUnavailable}
+            onUpdate={handleHideUnavailableChange}
+            content={i18n('action_hide-unavailable')}
+            qa="hide-unavailable-nodes"
+        />
+    );
+}

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

@@ -0,0 +1,3 @@
+{
+  "action_hide-unavailable": "Hide unavailable"
+}

package/src/components/HideUnavailableNodesSwitch/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+// Switch for excluding disconnected nodes from node lists.
+export default registerKeysets('ydb-hide-unavailable-nodes-switch', {en, ru});

package/src/components/HideUnavailableNodesSwitch/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "action_hide-unavailable": "Скрыть недоступные"
+}

package/src/components/HoverPopup/HoverPopup.tsx

@@ -44,7 +44,10 @@ function useVisibleAnchor(
 
 type HoverPopupProps = {
     children: React.ReactNode;
-    renderPopupContent: (controls: {onClose: VoidFunction}) => React.ReactNode;
+    renderPopupContent: (controls: {
+        onClose: VoidFunction;
+        holdOpen: () => VoidFunction;
+    }) => React.ReactNode;
     showPopup?: boolean;
     anchorRef?: React.RefObject<HTMLElement>;
     onShowPopup?: VoidFunction;
@@ -72,8 +75,11 @@ export const HoverPopup = ({
     const [isPopupVisible, setIsPopupVisible] = React.useState(false);
     const [isPopupContentHovered, setIsPopupContentHovered] = React.useState(false);
     const [isFocused, setIsFocused] = React.useState(false);
+    const [hoverClosing, setHoverClosing] = React.useState(false);
+    const dialogHoldRef = React.useRef<object | null>(null);
 
     const anchor = React.useRef<HTMLSpanElement>(null);
+    const popupContent = React.useRef<HTMLDivElement>(null);
     const {activate, zIndex} = usePopupPriority();
     const bringToFront = useEventHandler(() => activate(anchorRef?.current || anchor.current));
 
@@ -102,32 +108,36 @@ export const HoverPopup = ({
         [delayOpen, reportOpen],
     );
 
-    const hidePopup = React.useCallback(() => {
+    const hidePopup = useEventHandler(() => {
+        if (dialogHoldRef.current || isFocused) {
+            return;
+        }
+        setHoverClosing(open && visibleAnchorRef.current === anchorElement);
         setIsPopupVisible(false);
-    }, []);
+        reportOpen(false);
+    });
 
     const debouncedHandleHidePopup = React.useMemo(
-        () =>
-            debounce(() => {
-                hidePopup();
-                reportOpen(false);
-            }, delayClose),
-        [delayClose, reportOpen, hidePopup],
+        () => debounce(hidePopup, delayClose),
+        [delayClose, hidePopup],
     );
 
     React.useEffect(() => {
         return () => {
             debouncedHandleShowPopup.cancel();
             debouncedHandleHidePopup.cancel();
+            dialogHoldRef.current = null;
         };
     }, [debouncedHandleShowPopup, debouncedHandleHidePopup]);
 
     const closePopup = React.useCallback(() => {
         debouncedHandleShowPopup.cancel();
         debouncedHandleHidePopup.cancel();
+        dialogHoldRef.current = null;
         setIsPopupVisible(false);
         setIsPopupContentHovered(false);
         setIsFocused(false);
+        setHoverClosing(false);
         reportOpen(false, true);
         onClosePopup?.();
     }, [debouncedHandleHidePopup, debouncedHandleShowPopup, onClosePopup, reportOpen]);
@@ -136,6 +146,7 @@ export const HoverPopup = ({
         debouncedHandleShowPopup.cancel();
         setIsPopupContentHovered(false);
         setIsFocused(false);
+        setHoverClosing(false);
         debouncedHandleHidePopup();
     });
 
@@ -146,11 +157,59 @@ export const HoverPopup = ({
     // Release only this popup's hover source; a hovered peer can keep the pair open.
     const [isAnchorVisible, visibleAnchorRef] = useVisibleAnchor(
         anchorElement,
-        open,
+        open || hoverClosing,
         hideClippedPopup,
     );
     const container = getPopupScrollContainer(anchorElement);
 
+    React.useEffect(() => {
+        if (!hoverClosing || !anchorElement) {
+            return undefined;
+        }
+        // Escape may close this popup through its paired sibling's handler.
+        const preventHoverReturn = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                setHoverClosing(false);
+            }
+        };
+        const doc = anchorElement.ownerDocument;
+        doc.addEventListener('keydown', preventHoverReturn, true);
+        return () => doc.removeEventListener('keydown', preventHoverReturn, true);
+    }, [anchorElement, hoverClosing]);
+
+    const resumeHover = useEventHandler(() => {
+        const contentHovered = Boolean(popupContent.current?.matches(':hover'));
+        const hovered =
+            visibleAnchorRef.current === anchorElement &&
+            (anchorElement?.matches(':hover') || contentHovered);
+        debouncedHandleShowPopup.cancel();
+        debouncedHandleHidePopup.cancel();
+        setIsFocused(false);
+        setIsPopupContentHovered(Boolean(hovered && contentHovered));
+        if (hovered) {
+            setIsPopupVisible(true);
+            reportOpen(true);
+        } else {
+            debouncedHandleHidePopup();
+        }
+    });
+
+    const holdOpen = () => {
+        const interaction = {};
+        dialogHoldRef.current = interaction;
+        debouncedHandleShowPopup.cancel();
+        debouncedHandleHidePopup.cancel();
+        setIsFocused(false);
+        setIsPopupVisible(true);
+        reportOpen(true);
+        return () => {
+            if (dialogHoldRef.current === interaction) {
+                dialogHoldRef.current = null;
+                resumeHover();
+            }
+        };
+    };
+
     const onMouseEnter = (event: React.MouseEvent<HTMLSpanElement>) => {
         if (event.buttons !== 0) {
             return;
@@ -167,18 +226,27 @@ export const HoverPopup = ({
 
     const onPopupMouseEnter = React.useCallback(
         (event: React.MouseEvent<HTMLDivElement>) => {
-            // An exiting popup can still receive events during its close animation.
-            if (!open || visibleAnchorRef.current !== anchorElement) {
+            if ((!open && !hoverClosing) || visibleAnchorRef.current !== anchorElement) {
                 return;
             }
             if (event.buttons === 0) {
                 bringToFront();
             }
             debouncedHandleHidePopup.cancel();
+            setHoverClosing(false);
+            setIsPopupVisible(true);
             setIsPopupContentHovered(true);
             reportOpen(true);
         },
-        [bringToFront, reportOpen, debouncedHandleHidePopup, open, visibleAnchorRef, anchorElement],
+        [
+            bringToFront,
+            reportOpen,
+            debouncedHandleHidePopup,
+            open,
+            hoverClosing,
+            visibleAnchorRef,
+            anchorElement,
+        ],
     );
 
     const onPopupMouseLeave = React.useCallback(() => {
@@ -187,7 +255,7 @@ export const HoverPopup = ({
     }, [debouncedHandleHidePopup]);
 
     const onPopupContextMenu = React.useCallback(() => {
-        if (!open || visibleAnchorRef.current !== anchorElement) {
+        if (dialogHoldRef.current || !open || visibleAnchorRef.current !== anchorElement) {
             return;
         }
         bringToFront();
@@ -195,12 +263,16 @@ export const HoverPopup = ({
         reportOpen(true);
     }, [bringToFront, reportOpen, open, visibleAnchorRef, anchorElement]);
 
-    const onPopupBlur = React.useCallback(() => {
-        setIsFocused(false);
-    }, []);
+    const onPopupBlur = useEventHandler(() => {
+        if (isFocused && !dialogHoldRef.current) {
+            resumeHover();
+        }
+    });
 
     const onPopupEscapeKeyDown = React.useCallback(() => {
-        closePopup();
+        if (!dialogHoldRef.current) {
+            closePopup();
+        }
     }, [closePopup]);
 
     return (
@@ -218,6 +290,8 @@ export const HoverPopup = ({
                     onOpenChange={(_open, _event, reason) => {
                         if (reason === 'escape-key') {
                             onPopupEscapeKeyDown();
+                        } else if (reason === 'outside-press') {
+                            onPopupBlur();
                         }
                     }}
                     placement={placement}
@@ -226,11 +300,13 @@ export const HoverPopup = ({
                     returnFocus={false}
                     hasArrow
                     open={open && isAnchorVisible}
+                    onTransitionOutComplete={() => setHoverClosing(false)}
                     // bigger offset for easier switching to neighbour nodes
                     // matches the default offset for popup with arrow out of a sense of beauty
                     offset={offset || {mainAxis: 12, crossAxis: 0}}
                 >
                     <div
+                        ref={popupContent}
                         className={contentClassName}
                         onContextMenu={onPopupContextMenu}
                         onMouseEnter={onPopupMouseEnter}
@@ -238,7 +314,7 @@ export const HoverPopup = ({
                         onBlur={onPopupBlur}
                     >
                         <div className={YDB_POPOVER_CLASS_NAME}>
-                            {renderPopupContent({onClose: closePopup})}
+                            {renderPopupContent({onClose: closePopup, holdOpen})}
                         </div>
                     </div>
                 </Popup>

package/src/components/MemoryViewer/MemoryViewer.tsx

@@ -3,14 +3,15 @@ import {DefinitionList, Flex, useTheme} from '@gravity-ui/uikit';
 import type {TMemoryStats} from '../../types/api/nodes';
 import {formatBytes} from '../../utils/bytesParsers';
 import {cn} from '../../utils/cn';
-import {GIGABYTE} from '../../utils/constants';
+import {EMPTY_DATA_PLACEHOLDER, GIGABYTE} from '../../utils/constants';
+import {getNodeMemory} from '../../utils/memory';
 import type {FormatProgressViewerValues} from '../../utils/progress';
 import {calculateProgressStatus} from '../../utils/progress';
-import {isNumeric} from '../../utils/utils';
+import {isNumeric, parseOptionalNonNegativeNumber} from '../../utils/utils';
 import {HoverPopup} from '../HoverPopup/HoverPopup';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
 
-import {calculateAllocatedMemory, getMemorySegments} from './utils';
+import {getMemorySegments} from './utils';
 
 import './MemoryViewer.scss';
 
@@ -38,6 +39,8 @@ const formatDetailedValues: FormatProgressViewerValues = (value, total) => {
 
 export interface MemoryProgressViewerProps {
     stats: TMemoryStats;
+    memoryUsed?: string;
+    memoryLimit?: string;
     className?: string;
     warningThreshold?: number;
     dangerThreshold?: number;
@@ -47,29 +50,35 @@ export interface MemoryProgressViewerProps {
 
 export function MemoryViewer({
     stats,
+    memoryUsed,
+    memoryLimit,
     percents,
     formatValues,
     className,
     warningThreshold,
     dangerThreshold,
 }: MemoryProgressViewerProps) {
-    const memoryUsage = stats.AnonRss ?? calculateAllocatedMemory(stats);
-
-    const capacity = stats.HardLimit;
-
+    const {memoryUsed: memoryUsage, memoryLimit: capacity} = getNodeMemory({
+        MemoryStats: stats,
+        MemoryUsed: memoryUsed,
+        MemoryLimit: memoryLimit,
+    });
     const theme = useTheme();
-    let fillWidth =
-        Math.floor((parseFloat(String(memoryUsage)) / parseFloat(String(capacity))) * 100) || 0;
-    fillWidth = fillWidth > 100 ? 100 : fillWidth;
+
+    if (memoryUsage === undefined) {
+        return EMPTY_DATA_PLACEHOLDER;
+    }
+    const fillWidth =
+        capacity === undefined ? 0 : Math.min(100, Math.floor((memoryUsage / capacity) * 100));
     let valueText: number | string | undefined = memoryUsage,
         capacityText: number | string | undefined = capacity,
         divider = '/';
-    if (percents) {
+    if (percents && capacity !== undefined) {
         valueText = fillWidth + '%';
         capacityText = '';
         divider = '';
     } else if (formatValues) {
-        [valueText, capacityText] = formatValues(Number(memoryUsage), Number(capacity));
+        [valueText, capacityText] = formatValues(memoryUsage, capacity);
     }
 
     const renderContent = () => {
@@ -81,13 +90,17 @@ export function MemoryViewer({
     };
 
     const calculateMemoryShare = (segmentSize: number) => {
-        if (!memoryUsage) {
+        if (!memoryUsage || capacity === undefined) {
             return 0;
         }
-        return (segmentSize / parseFloat(String(capacity))) * 100;
+        return (segmentSize / capacity) * 100;
     };
 
-    const memorySegments = getMemorySegments(stats, Number(memoryUsage));
+    // Without anonymous RSS, the backend's MemoryUsed excludes allocator caches.
+    const memorySegments = getMemorySegments(stats, memoryUsage, {
+        allocatorCachesIncludedInUsage: parseOptionalNonNegativeNumber(stats.AnonRss) !== undefined,
+        memoryLimit: capacity,
+    });
 
     const status = calculateProgressStatus({
         fillWidth,
@@ -135,9 +148,9 @@ export function MemoryViewer({
             )}
         >
             <div className={b({theme, status}, className)}>
-                <div className={b('progress-container')}>
+                <div className={capacity === undefined ? undefined : b('progress-container')}>
                     {memorySegments
-                        .filter(({isInfo}) => !isInfo)
+                        .filter(({isInfo}) => !isInfo && capacity !== undefined)
                         .map((segment) => {
                             if (segment.value < MIN_VISIBLE_MEMORY_VALUE) {
                                 return null;

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

@@ -5,8 +5,9 @@
   "text_memtable": "MemTable",
   "text_query-execution": "Query Execution",
   "text_usage": "Usage",
-  "text_soft-limit": "Soft Limit",
-  "text_hard-limit": "Hard Limit",
+  "text_soft-limit": "Memory Controller Soft Limit",
+  "text_hard-limit": "Memory Controller Hard Limit",
   "text_other": "Other",
-  "text_memory-details": "Memory Details"
+  "text_memory-details": "Memory Details",
+  "text_memory-limit": "Memory Limit"
 }

package/src/components/MemoryViewer/utils.ts

@@ -1,14 +1,8 @@
 import type {TMemoryStats} from '../../types/api/nodes';
-import {isNumeric} from '../../utils/utils';
+import {isNumeric, parseOptionalNonNegativeNumber} from '../../utils/utils';
 
 import i18n from './i18n';
 
-export function calculateAllocatedMemory(stats: TMemoryStats) {
-    const allocatedMemory = getMaybeNumber(stats.AllocatedMemory) || 0;
-    const allocatorCaches = getMaybeNumber(stats.AllocatorCachesMemory) || 0;
-    return String(allocatedMemory + allocatorCaches);
-}
-
 function getMaybeNumber(value: string | number | undefined): number | undefined {
     return isNumeric(value) ? parseFloat(String(value)) : undefined;
 }
@@ -34,7 +28,14 @@ export function getMemorySegmentColor(key: string): string {
     return MEMORY_SEGMENT_COLORS[key] || MEMORY_SEGMENT_COLORS['Other'];
 }
 
-export function getMemorySegments(stats: TMemoryStats, memoryUsage: number): MemorySegment[] {
+export function getMemorySegments(
+    stats: TMemoryStats,
+    memoryUsage: number,
+    {
+        allocatorCachesIncludedInUsage = true,
+        memoryLimit,
+    }: {allocatorCachesIncludedInUsage?: boolean; memoryLimit?: number} = {},
+): MemorySegment[] {
     const segments = [
         {
             label: i18n('text_shared-cache'),
@@ -61,12 +62,12 @@ export function getMemorySegments(stats: TMemoryStats, memoryUsage: number): Mem
             label: i18n('text_allocator-caches'),
             key: 'AllocatorCachesMemory',
             value: getMaybeNumber(stats.AllocatorCachesMemory),
-            isInfo: false,
+            isInfo: !allocatorCachesIncludedInUsage,
         },
     ];
 
     const nonInfoSegments = segments.filter(
-        (segment) => segment.value !== undefined,
+        (segment) => !segment.isInfo && segment.value !== undefined,
     ) as MemorySegment[];
     const sumNonInfoSegments = nonInfoSegments.reduce((acc, segment) => acc + segment.value, 0);
 
@@ -92,16 +93,22 @@ export function getMemorySegments(stats: TMemoryStats, memoryUsage: number): Mem
             value: memoryUsage,
             isInfo: true,
         },
+        {
+            label: i18n('text_memory-limit'),
+            key: 'MemoryLimit',
+            value: memoryLimit,
+            isInfo: true,
+        },
         {
             label: i18n('text_soft-limit'),
             key: 'SoftLimit',
-            value: getMaybeNumber(stats.SoftLimit),
+            value: parseOptionalNonNegativeNumber(stats.SoftLimit) || undefined,
             isInfo: true,
         },
         {
             label: i18n('text_hard-limit'),
             key: 'HardLimit',
-            value: getMaybeNumber(stats.HardLimit),
+            value: parseOptionalNonNegativeNumber(stats.HardLimit) || undefined,
             isInfo: true,
         },
     );

package/src/components/PDiskInfo/PDiskInfo.scss

@@ -0,0 +1,15 @@
+.ydb-pdisk-info {
+    --g-definition-list-item-gap: var(--g-spacing-3);
+
+    &__column {
+        flex: 1 1 400px;
+
+        min-width: 0;
+        max-width: 500px;
+    }
+
+    &__identity-value {
+        min-width: 0;
+        overflow-wrap: anywhere;
+    }
+}