ydb-embedded-ui 22.3.0 → 22.5.0

package/src/components/HoverPopup/usePopupPriority.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+
+// Only the previously active popup needs updating when another one is entered.
+const activePopups = new WeakMap<Document, VoidFunction>();
+
+export function usePopupPriority() {
+    const [active, setActive] = React.useState(false);
+    const documentRef = React.useRef<Document>();
+    const deactivate = React.useCallback(() => setActive(false), []);
+    const activate = React.useCallback(
+        (element: HTMLElement | null) => {
+            if (!element) {
+                return;
+            }
+            const doc = element.ownerDocument;
+            const previous = activePopups.get(doc);
+            if (previous !== deactivate) {
+                previous?.();
+                activePopups.set(doc, deactivate);
+            }
+            documentRef.current = doc;
+            setActive(true);
+        },
+        [deactivate],
+    );
+
+    React.useEffect(
+        () => () => {
+            const doc = documentRef.current;
+            if (doc && activePopups.get(doc) === deactivate) {
+                activePopups.delete(doc);
+            }
+        },
+        [deactivate],
+    );
+
+    // Keep tooltips, menus and modal dialogs (Gravity UI's default 1000) above cards.
+    return {activate, zIndex: active ? 999 : 998};
+}

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;
+    }
+}

package/src/components/PDiskInfo/PDiskInfo.tsx

@@ -1,263 +1,71 @@
 import {Flex} from '@gravity-ui/uikit';
 
 import {useBlobStorageCapacityMetricsEnabled} from '../../store/reducers/capabilities/hooks';
-import {valueIsDefined} from '../../utils';
-import {formatBytes} from '../../utils/bytesParsers';
-import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
-import {createPDiskDeveloperUILink, useHasDeveloperUi} from '../../utils/developerUI/developerUI';
-import {formatPDiskType} from '../../utils/disks/getPDiskType';
+import {cn} from '../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import type {PreparedPDisk} from '../../utils/disks/types';
-import {getPDiskCapacityInfoItems, toInfoViewerItems} from '../DiskCapacityInfo/DiskCapacityInfo';
-import type {InfoViewerItem} from '../InfoViewer';
-import {InfoViewer} from '../InfoViewer/InfoViewer';
-import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
-import {PDiskPageLink} from '../PDiskPageLink/PDiskPageLink';
-import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
-import {StatusIcon} from '../StatusIcon/StatusIcon';
+import {formatMetricPercent} from '../../utils/storageMetrics';
+import {CopyableValue} from '../CopyableValue/CopyableValue';
+import {getPDiskCapacityItems} from '../DiskCapacityInfo/DiskCapacityInfo';
+import type {YDBDefinitionListItem} from '../YDBDefinitionList/YDBDefinitionList';
+import {YDBDefinitionList} from '../YDBDefinitionList/YDBDefinitionList';
 
+import {getPDiskLogItems, getPDiskRuntimeItems} from './getPDiskDetails';
 import {pDiskInfoKeyset} from './i18n';
 
-interface GetPDiskInfoOptions<T extends PreparedPDisk> {
-    pDisk?: T;
-    nodeId?: number | string | null;
-    withPDiskPageLink?: boolean;
-    hasDeveloperUi?: boolean;
-    capacityMetricsEnabled?: boolean;
-}
-
-// eslint-disable-next-line complexity
-function getPDiskInfo<T extends PreparedPDisk>({
-    pDisk,
-    nodeId,
-    withPDiskPageLink,
-    hasDeveloperUi,
-    capacityMetricsEnabled,
-}: GetPDiskInfoOptions<T>) {
-    const {
-        PDiskId,
-        Path,
-        Guid,
-        Category,
-        Type,
-        Device,
-        Realtime,
-        State,
-        SerialNumber,
-        TotalSize,
-        AllocatedSize,
-        AllocatedPercent,
-        StatusV2,
-        NumActiveSlots,
-        ExpectedSlotCount,
-        LogUsedSize,
-        LogTotalSize,
-        SystemSize,
-        SharedWithOs,
-    } = pDisk || {};
+import './PDiskInfo.scss';
 
-    const generalInfo: InfoViewerItem[] = [];
-
-    if (valueIsDefined(Category)) {
-        generalInfo.push({label: pDiskInfoKeyset('type'), value: formatPDiskType(Type)});
-    }
-    if (valueIsDefined(Path)) {
-        generalInfo.push({label: pDiskInfoKeyset('path'), value: Path});
-    }
-    if (valueIsDefined(Guid)) {
-        generalInfo.push({label: pDiskInfoKeyset('guid'), value: Guid});
-    }
-    // SerialNumber could be an empty string ""
-    if (SerialNumber) {
-        generalInfo.push({
-            label: pDiskInfoKeyset('serial-number'),
-            value: SerialNumber,
-        });
-    }
-    if (SharedWithOs) {
-        generalInfo.push({
-            label: pDiskInfoKeyset('shared-with-os'),
-            value: pDiskInfoKeyset('yes'),
-        });
-    }
-
-    const statusInfo: InfoViewerItem[] = [];
-
-    if (valueIsDefined(StatusV2)) {
-        statusInfo.push({label: pDiskInfoKeyset('drive-status'), value: StatusV2});
-    }
-    if (valueIsDefined(State)) {
-        statusInfo.push({label: pDiskInfoKeyset('state'), value: State});
-    }
-    if (valueIsDefined(Device)) {
-        statusInfo.push({
-            label: pDiskInfoKeyset('device'),
-            value: <StatusIcon status={Device} />,
-        });
-    }
-    if (valueIsDefined(Realtime)) {
-        statusInfo.push({
-            label: pDiskInfoKeyset('realtime'),
-            value: <StatusIcon status={Realtime} />,
-        });
-    }
-
-    const additionalInfo: InfoViewerItem[] = [];
-
-    const shouldDisplayLinks =
-        (withPDiskPageLink || hasDeveloperUi) && valueIsDefined(PDiskId) && valueIsDefined(nodeId);
-
-    if (shouldDisplayLinks) {
-        const pDiskInternalViewerPath = createPDiskDeveloperUILink({
-            nodeId,
-            pDiskId: PDiskId,
-        });
-
-        additionalInfo.push({
-            label: pDiskInfoKeyset('links'),
-            value: (
-                <Flex wrap="wrap" gap={2}>
-                    {withPDiskPageLink && <PDiskPageLink pDiskId={PDiskId} nodeId={nodeId} />}
-                    {hasDeveloperUi && (
-                        <LinkWithIcon
-                            title={pDiskInfoKeyset('developer-ui')}
-                            url={pDiskInternalViewerPath}
-                        />
-                    )}
-                </Flex>
-            ),
-        });
-    }
+const b = cn('ydb-pdisk-info');
 
-    if (capacityMetricsEnabled) {
-        const configurationInfo = [...generalInfo];
-        const runtimeInfo = [...statusInfo];
-        const capacityItems = getPDiskCapacityInfoItems(pDisk, {
-            withUsage: true,
-            withCapacityAlert: false,
-        });
-        const slotSizeItem = capacityItems.find(({id}) => id === 'slot-size-in-units');
-        const runtimeCapacityItems = capacityItems.filter(({id}) => id !== 'slot-size-in-units');
-
-        if (slotSizeItem) {
-            configurationInfo.push(...toInfoViewerItems([slotSizeItem]));
-        }
-        configurationInfo.push(...additionalInfo);
-        runtimeInfo.push(...toInfoViewerItems(runtimeCapacityItems));
-
-        if (valueIsDefined(LogUsedSize) && valueIsDefined(LogTotalSize)) {
-            runtimeInfo.push({
-                label: pDiskInfoKeyset('log-size'),
-                value: (
-                    <ProgressViewer
-                        value={LogUsedSize}
-                        capacity={LogTotalSize}
-                        formatValues={formatStorageValuesToGb}
-                    />
-                ),
-            });
-        }
-        if (valueIsDefined(SystemSize)) {
-            runtimeInfo.push({
-                label: pDiskInfoKeyset('system-size'),
-                value: formatBytes({value: SystemSize}),
-            });
-        }
-
-        return [configurationInfo, runtimeInfo];
-    }
-
-    const spaceInfo: InfoViewerItem[] = [];
+interface PDiskInfoProps {
+    pDisk?: PreparedPDisk;
+    className?: string;
+}
 
-    const hasSpaceData =
-        Number.isFinite(Number(AllocatedSize)) && Number.isFinite(Number(TotalSize));
-    spaceInfo.push({
-        label: pDiskInfoKeyset('space'),
-        value: hasSpaceData
-            ? formatStorageValuesToGb(Number(AllocatedSize), Number(TotalSize)).join(' / ')
-            : pDiskInfoKeyset('value_no-data'),
-    });
-    if (!isNaN(Number(AllocatedPercent))) {
-        spaceInfo.push({
-            label: pDiskInfoKeyset('usage'),
-            value: `${AllocatedPercent}%`,
-        });
-    }
-    if (valueIsDefined(NumActiveSlots) && valueIsDefined(ExpectedSlotCount)) {
-        spaceInfo.push({
-            label: pDiskInfoKeyset('slots'),
-            value: <ProgressViewer value={NumActiveSlots} capacity={ExpectedSlotCount} />,
-        });
-    }
-    if (valueIsDefined(LogUsedSize) && valueIsDefined(LogTotalSize)) {
-        spaceInfo.push({
-            label: pDiskInfoKeyset('log-size'),
-            value: (
-                <ProgressViewer
-                    value={LogUsedSize}
-                    capacity={LogTotalSize}
-                    formatValues={formatStorageValuesToGb}
-                />
-            ),
-        });
-    }
-    if (valueIsDefined(SystemSize)) {
-        spaceInfo.push({
-            label: pDiskInfoKeyset('system-size'),
-            value: formatBytes({value: SystemSize}),
+function getPageCapacityItems(data: PreparedPDisk, capacityMetricsEnabled: boolean) {
+    const items = getPDiskCapacityItems(data, {useWhiteboardSize: capacityMetricsEnabled}).filter(
+        ({id}) => capacityMetricsEnabled || id === 'space' || id === 'slots',
+    );
+    if (!capacityMetricsEnabled) {
+        items.splice(1, 0, {
+            id: 'usage',
+            name: pDiskInfoKeyset('usage'),
+            content: formatMetricPercent(data.AllocatedPercent, 2),
         });
     }
-
-    return [generalInfo, statusInfo, spaceInfo, additionalInfo];
-}
-
-interface PDiskInfoProps<T extends PreparedPDisk> extends GetPDiskInfoOptions<T> {
-    className?: string;
+    return [...items, ...getPDiskLogItems(data)];
 }
 
-export function PDiskInfo<T extends PreparedPDisk>({
-    pDisk,
-    nodeId,
-    withPDiskPageLink,
-    className,
-}: PDiskInfoProps<T>) {
-    const hasDeveloperUi = useHasDeveloperUi();
+export function PDiskInfo({pDisk = {}, className}: PDiskInfoProps) {
     const capacityMetricsEnabled = useBlobStorageCapacityMetricsEnabled();
-
-    const infoGroups = getPDiskInfo({
-        pDisk,
-        nodeId,
-        withPDiskPageLink,
-        hasDeveloperUi,
-        capacityMetricsEnabled,
-    });
-
-    if (capacityMetricsEnabled) {
-        const [configurationInfo, runtimeInfo] = infoGroups;
-
-        return (
-            <Flex className={className} gap={2} direction="row" wrap>
-                <Flex direction="column" gap={2} width={500}>
-                    <InfoViewer info={configurationInfo} renderEmptyState={() => null} />
-                </Flex>
-                <Flex direction="column" gap={2} width={500}>
-                    <InfoViewer info={runtimeInfo} renderEmptyState={() => null} />
-                </Flex>
-            </Flex>
-        );
-    }
-
-    const [generalInfo, statusInfo, spaceInfo, additionalInfo] = infoGroups;
+    const identityItems = [
+        {name: pDiskInfoKeyset('guid'), value: pDisk.Guid},
+        {name: pDiskInfoKeyset('serial-number'), value: pDisk.SerialNumber},
+    ].map(({name, value}) => ({
+        name,
+        content: (
+            <CopyableValue copyText={value || undefined} fieldName={name}>
+                <span className={b('identity-value')}>{value || EMPTY_DATA_PLACEHOLDER}</span>
+            </CopyableValue>
+        ),
+    }));
+    const runtimeItems: YDBDefinitionListItem[] = [
+        ...getPDiskRuntimeItems(pDisk),
+        ...identityItems,
+    ];
 
     return (
-        <Flex className={className} gap={2} direction="row" wrap>
-            <Flex direction="column" gap={2} width={500}>
-                <InfoViewer info={generalInfo} renderEmptyState={() => null} />
-                <InfoViewer info={spaceInfo} renderEmptyState={() => null} />
-            </Flex>
-            <Flex direction="column" gap={2} width={500}>
-                <InfoViewer info={statusInfo} renderEmptyState={() => null} />
-                <InfoViewer info={additionalInfo} renderEmptyState={() => null} />
-            </Flex>
+        <Flex className={b(null, className)} gap={6} gapRow={3} wrap="wrap" qa="pdisk-page-info">
+            <YDBDefinitionList
+                items={runtimeItems}
+                nameMaxWidth={200}
+                wrapperClassName={b('column')}
+            />
+            <YDBDefinitionList
+                items={getPageCapacityItems(pDisk, capacityMetricsEnabled)}
+                nameMaxWidth={200}
+                wrapperClassName={b('column')}
+            />
         </Flex>
     );
 }

package/src/components/PDiskInfo/PDiskLogSize.scss

@@ -0,0 +1,12 @@
+.ydb-pdisk-log-size {
+    width: 100%;
+
+    white-space: nowrap;
+
+    &__progress {
+        flex: 0 0 auto;
+
+        width: var(--ydb-pdisk-log-size-progress-width, 100px);
+        margin: 0;
+    }
+}

package/src/components/PDiskInfo/PDiskLogSize.tsx

@@ -0,0 +1,41 @@
+import {Flex, Progress} from '@gravity-ui/uikit';
+
+import {cn} from '../../utils/cn';
+import {formatStorageMetricPair} from '../../utils/storageMetrics';
+import {parseOptionalNonNegativeNumber} from '../../utils/utils';
+
+import {pDiskInfoKeyset as i18n} from './i18n';
+
+import './PDiskLogSize.scss';
+
+const b = cn('ydb-pdisk-log-size');
+
+export function PDiskLogSize({used, total}: {used?: string; total?: string}) {
+    const usedSize = parseOptionalNonNegativeNumber(used);
+    const totalSize = parseOptionalNonNegativeNumber(total);
+    const percentage =
+        usedSize !== undefined && totalSize !== undefined && totalSize > 0
+            ? Math.min(100, (usedSize / totalSize) * 100)
+            : undefined;
+
+    if (percentage === undefined) {
+        return formatStorageMetricPair(usedSize, totalSize, 2);
+    }
+
+    return (
+        <Flex
+            gap={1}
+            alignItems="center"
+            className={b()}
+            role="meter"
+            aria-label={i18n('log-size')}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={percentage}
+            aria-valuetext={formatStorageMetricPair(usedSize, totalSize, 2)}
+        >
+            <Progress className={b('progress')} value={percentage} theme="success" size="s" />
+            <span>{formatStorageMetricPair(usedSize, totalSize, 2)}</span>
+        </Flex>
+    );
+}

package/src/components/PDiskInfo/getPDiskDetails.tsx

@@ -0,0 +1,37 @@
+import {formatBytes} from '../../utils/bytesParsers';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import type {DiskDetailItem} from '../../utils/disks/diskInfo/getDiskLocationItems';
+import type {PreparedPDisk} from '../../utils/disks/types';
+import {parseOptionalNonNegativeNumber} from '../../utils/utils';
+import {DiskFlagLabel} from '../DiskStatus/DiskStatus';
+
+import {PDiskLogSize} from './PDiskLogSize';
+import {pDiskInfoKeyset as i18n} from './i18n';
+
+export function getPDiskRuntimeItems(data: PreparedPDisk): DiskDetailItem[] {
+    return [
+        {id: 'device', name: i18n('device'), content: <DiskFlagLabel flag={data.Device} />},
+        {id: 'realtime', name: i18n('realtime'), content: <DiskFlagLabel flag={data.Realtime} />},
+    ];
+}
+
+export function getPDiskLogItems(data: PreparedPDisk): DiskDetailItem[] {
+    const systemSize = parseOptionalNonNegativeNumber(data.SystemSize);
+    return [
+        {
+            id: 'log-size',
+            name: i18n('log-size'),
+            content: <PDiskLogSize used={data.LogUsedSize} total={data.LogTotalSize} />,
+            note: i18n('context_log-size'),
+        },
+        {
+            id: 'system-size',
+            name: i18n('system-size'),
+            content:
+                systemSize === undefined
+                    ? EMPTY_DATA_PLACEHOLDER
+                    : formatBytes({value: systemSize, fixedDecimalPlaces: 2}),
+            note: i18n('context_system-size'),
+        },
+    ];
+}