ydb-embedded-ui 22.2.0 → 22.4.0

package/src/components/PDiskInfo/PDiskLogSize.tsx

@@ -0,0 +1,37 @@
+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()}>
+            <Progress
+                className={b('progress')}
+                value={percentage}
+                theme="success"
+                size="s"
+                aria-label={i18n('log-size')}
+            />
+            <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'),
+        },
+    ];
+}

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

@@ -4,23 +4,79 @@
   "guid": "GUID",
   "serial-number": "Serial Number",
   "shared-with-os": "SharedWithOs",
-
   "drive-status": "Drive Status",
   "state": "State",
   "device": "Device",
   "realtime": "Realtime",
-
-  "value_no-data": "No data",
-
+  "value_no-data": "Not Available",
   "space": "Space",
   "usage": "Usage",
   "slots": "Slots",
   "log-size": "Log Size",
   "system-size": "System Size",
-
   "links": "Links",
-
   "developer-ui": "Developer UI",
-
-  "yes": "Yes"
+  "yes": "Yes",
+  "context_slots": "The number of VDisks residing on this PDisk",
+  "context_log-size": "The size of the Common Log shared by the residing VDisks",
+  "context_system-size": "The size reserved for the PDisk system components. Includes SysLog",
+  "value_unknown": "Unknown",
+  "value_ok": "Ok",
+  "value_initial": "Initial",
+  "value_initial-format-read": "Initial Format Read",
+  "value_initial-sys-log-read": "Initial Sys Log Read",
+  "value_initial-common-log-read": "Initial Common Log Read",
+  "value_open-file-error": "Open File Error",
+  "value_device-io-error": "Device Io Error",
+  "value_stopped": "Stopped",
+  "value_initial-format-read-error": "Initial Format Read Error",
+  "value_initial-sys-log-read-error": "Initial Sys Log Read Error",
+  "value_initial-sys-log-parse-error": "Initial Sys Log Parse Error",
+  "value_common-logger-init-error": "Common Logger Init Error",
+  "value_initial-common-log-read-error": "Initial Common Log Read Error",
+  "value_initial-common-log-parse-error": "Initial Common Log Parse Error",
+  "value_chunk-quota-error": "Chunk Quota Error",
+  "value_active": "Active",
+  "value_inactive": "Inactive",
+  "value_to-be-removed": "To be removed",
+  "value_faulty": "Faulty",
+  "value_broken": "Broken",
+  "value_decommit-none": "No decommission",
+  "value_decommit-pending": "Decommission pending",
+  "value_decommit-rejected": "Decommission rejected",
+  "value_decommit-imminent": "Decommission imminent",
+  "label_maintenance": "Maintenance",
+  "value_maintenance-none": "None",
+  "value_maintenance-unset": "Unset",
+  "value_maintenance-no-new-vdisks": "No new VDisks",
+  "value_maintenance-long-term": "Long term",
+  "context_unknown": "Value of status is unknown (default)",
+  "context_state-normal": "The PDisk is operating normally",
+  "context_state-initial": "The PDisk actor is starting and has not yet begun reading disk metadata",
+  "context_initial-format-read": "The PDisk is reading and validating its format record",
+  "context_initial-sys-log-read": "The PDisk is reading its system log during startup",
+  "context_initial-common-log-read": "The PDisk is reading VDisk common log during startup",
+  "context_open-file-error": "The PDisk could not open its backing device",
+  "context_device-io-error": "The PDisk encountered a fatal physical device I/O error",
+  "context_stopped": "The PDisk was explicitly stopped by a control request",
+  "context_initial-format-read-error": "The format record could not be read or validated",
+  "context_initial-sys-log-read-error": "The system log could not be read",
+  "context_initial-sys-log-parse-error": "The system log was read but could not be parsed",
+  "context_common-logger-init-error": "The PDisk failed to initialize the VDisk common log writer",
+  "context_initial-common-log-read-error": "VDisk common log could not be read",
+  "context_initial-common-log-parse-error": "VDisk common log was read but could not be parsed",
+  "context_chunk-quota-error": "The PDisk failed to calculate or initialize chunk quotas",
+  "context_active": "Working as expected",
+  "context_inactive": "New groups are not created over this drive, but existing ones continue to work as expected",
+  "context_to-be-removed": "Same as INACTIVE, but drive is counted in fault model as not working",
+  "context_faulty": "Drive is expected to become BROKEN soon, new groups are not created, old groups are asynchronously moved out from this drive",
+  "context_broken": "Drive is not working, groups are automatically moved out of this drive upon reception of this status",
+  "context_decommit-none": "The PDisk is not being decommissioned",
+  "context_decommit-pending": "Decommissioning is planned; allocation of new VDisks is blocked, existing VDisks are not moved",
+  "context_decommit-rejected": "The PDisk is operational but cannot receive VDisks moved from the other decommitted PDisks",
+  "context_decommit-imminent": "Active phase of decommissioning, existing VDisks are moved from the PDisk asynchronously",
+  "context_maintenance-none": "There is no active maintenance request for this PDisk",
+  "context_maintenance-unset": "No maintenance status has been explicitly provided",
+  "context_maintenance-no-new-vdisks": "Allocation of new VDisks is blocked, existing VDisks are not moved",
+  "context_maintenance-long-term": "Device is requested for a long-term maintenance, existing VDisks are moved from the PDisk asynchronously"
 }

package/src/components/PDiskInfo/statuses.ts

@@ -0,0 +1,209 @@
+import {Ban, Check, CircleQuestionFill, CircleXmarkFill} from '@gravity-ui/icons';
+
+import type {EDecommitStatus, EDriveStatus, EMaintenanceStatus} from '../../types/api/pdisk';
+import {TPDiskState} from '../../types/api/pdisk';
+import {NOT_AVAILABLE_SEVERITY, NUMERIC_SEVERITY_TO_LABEL_VIEW} from '../../utils/disks/constants';
+import {
+    getPDiskDecommitDisplayState,
+    getPDiskDriveDisplayState,
+    getPDiskMaintenanceDisplayState,
+    getPDiskStateDisplayState,
+} from '../../utils/disks/pdiskState';
+import type {DiskStatusLabelData} from '../DiskStatus/DiskStatus';
+
+import {pDiskInfoKeyset as i18n} from './i18n';
+
+type StatusText = Pick<DiskStatusLabelData, 'value' | 'tooltip'>;
+
+function unknownLabel(): DiskStatusLabelData {
+    return {
+        value: i18n('value_unknown'),
+        tooltip: i18n('context_unknown'),
+        theme: 'unknown',
+        icon: CircleQuestionFill,
+    };
+}
+
+function getLabelView({
+    severity,
+    icon,
+}: ReturnType<typeof getPDiskStateDisplayState>): Pick<
+    DiskStatusLabelData,
+    'theme' | 'icon' | 'dangerHeavy'
+> {
+    const labelView = NUMERIC_SEVERITY_TO_LABEL_VIEW[severity];
+
+    return {
+        theme: severity === NOT_AVAILABLE_SEVERITY ? 'unknown' : labelView?.theme,
+        icon,
+        dangerHeavy: Boolean(labelView?.dangerHeavy),
+    };
+}
+
+export function getPDiskStateLabel(state?: TPDiskState): DiskStatusLabelData {
+    const labels: Partial<Record<TPDiskState, StatusText>> = {
+        [TPDiskState.Normal]: {value: i18n('value_ok'), tooltip: i18n('context_state-normal')},
+        [TPDiskState.Initial]: {
+            value: i18n('value_initial'),
+            tooltip: i18n('context_state-initial'),
+        },
+        [TPDiskState.InitialFormatRead]: {
+            value: i18n('value_initial-format-read'),
+            tooltip: i18n('context_initial-format-read'),
+        },
+        [TPDiskState.InitialSysLogRead]: {
+            value: i18n('value_initial-sys-log-read'),
+            tooltip: i18n('context_initial-sys-log-read'),
+        },
+        [TPDiskState.InitialCommonLogRead]: {
+            value: i18n('value_initial-common-log-read'),
+            tooltip: i18n('context_initial-common-log-read'),
+        },
+        [TPDiskState.OpenFileError]: {
+            value: i18n('value_open-file-error'),
+            tooltip: i18n('context_open-file-error'),
+        },
+        [TPDiskState.DeviceIoError]: {
+            value: i18n('value_device-io-error'),
+            tooltip: i18n('context_device-io-error'),
+        },
+        [TPDiskState.Stopped]: {value: i18n('value_stopped'), tooltip: i18n('context_stopped')},
+        [TPDiskState.InitialFormatReadError]: {
+            value: i18n('value_initial-format-read-error'),
+            tooltip: i18n('context_initial-format-read-error'),
+        },
+        [TPDiskState.InitialSysLogReadError]: {
+            value: i18n('value_initial-sys-log-read-error'),
+            tooltip: i18n('context_initial-sys-log-read-error'),
+        },
+        [TPDiskState.InitialSysLogParseError]: {
+            value: i18n('value_initial-sys-log-parse-error'),
+            tooltip: i18n('context_initial-sys-log-parse-error'),
+        },
+        [TPDiskState.CommonLoggerInitError]: {
+            value: i18n('value_common-logger-init-error'),
+            tooltip: i18n('context_common-logger-init-error'),
+        },
+        [TPDiskState.InitialCommonLogReadError]: {
+            value: i18n('value_initial-common-log-read-error'),
+            tooltip: i18n('context_initial-common-log-read-error'),
+        },
+        [TPDiskState.InitialCommonLogParseError]: {
+            value: i18n('value_initial-common-log-parse-error'),
+            tooltip: i18n('context_initial-common-log-parse-error'),
+        },
+        [TPDiskState.ChunkQuotaError]: {
+            value: i18n('value_chunk-quota-error'),
+            tooltip: i18n('context_chunk-quota-error'),
+        },
+    };
+    const label = state && Object.hasOwn(labels, state) ? labels[state] : undefined;
+    if (!label) {
+        return unknownLabel();
+    }
+    const {theme, icon, dangerHeavy} = getLabelView(getPDiskStateDisplayState(state));
+    return {
+        ...label,
+        theme,
+        icon: state === TPDiskState.Normal ? Check : icon,
+        dangerHeavy,
+    };
+}
+
+export function getPDiskDriveLabel(status?: EDriveStatus): DiskStatusLabelData | undefined {
+    if (!status || status === 'UNKNOWN') {
+        return undefined;
+    }
+    const labels: Record<Exclude<EDriveStatus, 'UNKNOWN'>, StatusText> = {
+        ACTIVE: {value: i18n('value_active'), tooltip: i18n('context_active')},
+        INACTIVE: {value: i18n('value_inactive'), tooltip: i18n('context_inactive')},
+        TO_BE_REMOVED: {value: i18n('value_to-be-removed'), tooltip: i18n('context_to-be-removed')},
+        FAULTY: {value: i18n('value_faulty'), tooltip: i18n('context_faulty')},
+        BROKEN: {value: i18n('value_broken'), tooltip: i18n('context_broken')},
+    };
+    if (!Object.hasOwn(labels, status)) {
+        return undefined;
+    }
+    const {theme, icon: defaultIcon} = getLabelView(getPDiskDriveDisplayState(status));
+    let icon = defaultIcon;
+    if (status === 'ACTIVE') {
+        icon = Check;
+    } else if (status === 'BROKEN') {
+        icon = CircleXmarkFill;
+    }
+    return {
+        ...labels[status],
+        theme,
+        icon,
+        dangerHeavy: status === 'BROKEN',
+    };
+}
+
+export function getPDiskDecommitLabel(status?: EDecommitStatus): DiskStatusLabelData | undefined {
+    if (!status || status === 'DECOMMIT_UNSET') {
+        return undefined;
+    }
+    const labels: Record<Exclude<EDecommitStatus, 'DECOMMIT_UNSET'>, StatusText> = {
+        DECOMMIT_NONE: {value: i18n('value_decommit-none'), tooltip: i18n('context_decommit-none')},
+        DECOMMIT_PENDING: {
+            value: i18n('value_decommit-pending'),
+            tooltip: i18n('context_decommit-pending'),
+        },
+        DECOMMIT_REJECTED: {
+            value: i18n('value_decommit-rejected'),
+            tooltip: i18n('context_decommit-rejected'),
+        },
+        DECOMMIT_IMMINENT: {
+            value: i18n('value_decommit-imminent'),
+            tooltip: i18n('context_decommit-imminent'),
+        },
+    };
+    if (!Object.hasOwn(labels, status)) {
+        return undefined;
+    }
+    const {theme, icon, dangerHeavy} = getLabelView(getPDiskDecommitDisplayState(status));
+    return {
+        ...labels[status],
+        theme,
+        icon: status === 'DECOMMIT_NONE' ? Ban : icon,
+        dangerHeavy,
+    };
+}
+
+export function getPDiskMaintenanceLabel(
+    status?: EMaintenanceStatus,
+): DiskStatusLabelData | undefined {
+    if (!status) {
+        return undefined;
+    }
+    const labels: Record<EMaintenanceStatus, StatusText> = {
+        NO_REQUEST: {
+            value: i18n('value_maintenance-none'),
+            tooltip: i18n('context_maintenance-none'),
+        },
+        NOT_SET: {
+            value: i18n('value_maintenance-unset'),
+            tooltip: i18n('context_maintenance-unset'),
+        },
+        NO_NEW_VDISKS: {
+            value: i18n('value_maintenance-no-new-vdisks'),
+            tooltip: i18n('context_maintenance-no-new-vdisks'),
+        },
+        LONG_TERM_MAINTENANCE_PLANNED: {
+            value: i18n('value_maintenance-long-term'),
+            tooltip: i18n('context_maintenance-long-term'),
+        },
+    };
+    if (!Object.hasOwn(labels, status)) {
+        return undefined;
+    }
+    const {theme, icon, dangerHeavy} = getLabelView(getPDiskMaintenanceDisplayState(status));
+    return {
+        ...labels[status],
+        title: i18n('label_maintenance'),
+        // An explicitly unset status is shown as a normal state in the popup design.
+        theme: status === 'NOT_SET' ? 'success' : theme,
+        icon: status === 'NOT_SET' ? undefined : icon,
+        dangerHeavy,
+    };
+}

package/src/components/PDiskPopup/PDiskPopup.tsx

@@ -1,137 +1,45 @@
 import React from 'react';
 
 import {Wrench} from '@gravity-ui/icons';
-import {Flex, Label} from '@gravity-ui/uikit';
+import {Divider, Flex} from '@gravity-ui/uikit';
 import {isNil} from 'lodash';
 
 import {getPDiskPagePath} from '../../routes';
 import {useBlobStorageCapacityMetricsEnabled} from '../../store/reducers/capabilities/hooks';
-import {selectNodesMap} from '../../store/reducers/nodesList';
-import {EFlag} from '../../types/api/enums';
-import {BRAND_BUTTON_CLASS, EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import type {NodeMetadata} from '../../types/store/nodesList';
+import {BRAND_BUTTON_CLASS} from '../../utils/constants';
 import {createPDiskDeveloperUILink, useHasDeveloperUi} from '../../utils/developerUI/developerUI';
-import {getStateSeverity} from '../../utils/disks/calculatePDiskSeverity';
-import {NUMERIC_SEVERITY_TO_LABEL_VIEW} from '../../utils/disks/constants';
-import {formatPDiskType} from '../../utils/disks/getPDiskType';
+import type {DiskDetailItem} from '../../utils/disks/diskInfo/getDiskLocationItems';
+import {getDiskLocationItems} from '../../utils/disks/diskInfo/getDiskLocationItems';
 import type {PreparedPDisk} from '../../utils/disks/types';
-import {useTypedSelector} from '../../utils/hooks';
-import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
-import {bytesToGB, isNumeric} from '../../utils/utils';
+import {useNodeMetadata} from '../../utils/hooks/useNodeMetadata';
+import {getPDiskCapacityItems} from '../DiskCapacityInfo/DiskCapacityInfo';
 import {
-    getPDiskCapacityInfoItems,
-    toDefinitionListItems,
-} from '../DiskCapacityInfo/DiskCapacityInfo';
+    DiskPopup,
+    DiskPopupHeader,
+    DiskPopupLocation,
+    DiskPopupPanel,
+} from '../DiskPopup/DiskPopup';
+import {DiskStatusLabel} from '../DiskStatus/DiskStatus';
 import {InternalLinkButton} from '../InternalLinkButton';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
-import {StatusIcon} from '../StatusIcon/StatusIcon';
-import type {
-    YDBDefinitionListHeaderLabel,
-    YDBDefinitionListItem,
-} from '../YDBDefinitionList/YDBDefinitionList';
+import {getPDiskLogItems, getPDiskRuntimeItems} from '../PDiskInfo/getPDiskDetails';
+import {
+    getPDiskDecommitLabel,
+    getPDiskDriveLabel,
+    getPDiskMaintenanceLabel,
+    getPDiskStateLabel,
+} from '../PDiskInfo/statuses';
 import {YDBDefinitionList} from '../YDBDefinitionList/YDBDefinitionList';
 
 import {pDiskPopupKeyset} from './i18n';
 
-const errorColors = [EFlag.Orange, EFlag.Red, EFlag.Yellow];
-
-export const preparePDiskData = (
-    data: PreparedPDisk,
-    nodeData?: {Host?: string; DC?: string},
-    capacityMetricsEnabled = false,
-) => {
-    const {AvailableSize, TotalSize, NodeId, Path, Realtime, Type, Device} = data;
-
-    const pdiskData: YDBDefinitionListItem[] = [
-        {
-            name: pDiskPopupKeyset('label_type'),
-            content: formatPDiskType(Type) || pDiskPopupKeyset('value_unknown'),
-        },
-    ];
-
-    if (NodeId) {
-        pdiskData.push({
-            name: pDiskPopupKeyset('label_node-id'),
-            content: NodeId,
-            copyText: NodeId,
-        });
-    }
-
-    if (nodeData?.Host) {
-        pdiskData.push({
-            name: pDiskPopupKeyset('label_host'),
-            content: nodeData.Host,
-            copyText: nodeData.Host,
-        });
-    }
-
-    if (nodeData?.DC) {
-        pdiskData.push({name: pDiskPopupKeyset('label_dc'), content: <Label>{nodeData.DC}</Label>});
-    }
-
-    if (Path) {
-        pdiskData.push({name: pDiskPopupKeyset('label_path'), content: Path, copyText: Path});
-    }
-
-    if (capacityMetricsEnabled) {
-        pdiskData.push(
-            ...toDefinitionListItems(
-                getPDiskCapacityInfoItems(data, {
-                    withUsage: true,
-                    withCapacityAlert: true,
-                }),
-            ),
-        );
-    } else if (isNumeric(TotalSize) && isNumeric(AvailableSize)) {
-        pdiskData.push({
-            name: pDiskPopupKeyset('label_available'),
-            content: `${bytesToGB(AvailableSize)} ${pDiskPopupKeyset('value_of')} ${bytesToGB(TotalSize)}`,
-        });
-    }
-
-    if (Realtime && errorColors.includes(Realtime)) {
-        pdiskData.push({
-            name: pDiskPopupKeyset('label_realtime'),
-            content: <StatusIcon mode="icons" status={Realtime} />,
-        });
-    }
-
-    if (Device && errorColors.includes(Device)) {
-        pdiskData.push({
-            name: pDiskPopupKeyset('label_device'),
-            content: <StatusIcon mode="icons" status={Device} />,
-        });
-    }
-
-    return pdiskData;
-};
-
-export const preparePDiskHeaderLabels = (data: PreparedPDisk): YDBDefinitionListHeaderLabel[] => {
-    const labels: YDBDefinitionListHeaderLabel[] = [];
-    const {State} = data;
-
-    if (!State) {
-        labels.push({
-            id: 'state',
-            value: pDiskPopupKeyset('context_not-available'),
-        });
-
-        return labels;
-    }
-
-    if (State) {
-        const severity = getStateSeverity(State);
-        const {theme, icon} = NUMERIC_SEVERITY_TO_LABEL_VIEW[severity];
-
-        labels.push({
-            id: 'state',
-            value: State,
-            theme: theme,
-            icon: icon,
-        });
-    }
-
-    return labels;
-};
+function getStorageItems(data: PreparedPDisk, capacityMetricsEnabled: boolean): DiskDetailItem[] {
+    const items = getPDiskCapacityItems(data, {useWhiteboardSize: capacityMetricsEnabled}).filter(
+        ({id}) => capacityMetricsEnabled || id === 'space',
+    );
+    return [...items, ...getPDiskLogItems(data)];
+}
 
 export const buildPDiskFooter = (
     data: PreparedPDisk,
@@ -175,41 +83,48 @@ export const buildPDiskFooter = (
 
 interface PDiskPopupProps {
     data: PreparedPDisk;
+    nodeData?: NodeMetadata;
 }
 
-export const PDiskPopup = ({data}: PDiskPopupProps) => {
-    const database = useDatabaseFromQuery();
+export function PDiskPopupContent({data, nodeData: parentNodeData}: PDiskPopupProps) {
+    const nodeData = useNodeMetadata(data.NodeId, parentNodeData);
     const hasDeveloperUi = useHasDeveloperUi();
     const capacityMetricsEnabled = useBlobStorageCapacityMetricsEnabled();
-    const nodesMap = useTypedSelector((state) => selectNodesMap(state, database));
-    const nodeData = isNil(data.NodeId) ? undefined : nodesMap?.get(data.NodeId);
-
-    const info = React.useMemo(
-        () => preparePDiskData(data, nodeData, capacityMetricsEnabled),
-        [data, nodeData, capacityMetricsEnabled],
-    );
-
-    const headerLabels = React.useMemo<YDBDefinitionListHeaderLabel[]>(
-        () => preparePDiskHeaderLabels(data),
-        [data],
-    );
+    const storageItems = getStorageItems(data, capacityMetricsEnabled);
+    const locationItems = getDiskLocationItems(data, nodeData);
+    const statusLabels = [
+        {id: 'state', label: getPDiskStateLabel(data.State)},
+        {id: 'drive', label: getPDiskDriveLabel(data.DriveStatus)},
+        {id: 'decommit', label: getPDiskDecommitLabel(data.DecommitStatus)},
+        {id: 'maintenance', label: getPDiskMaintenanceLabel(data.MaintenanceStatus)},
+    ];
 
-    const footer = React.useMemo(
-        () => buildPDiskFooter(data, hasDeveloperUi),
-        [data, hasDeveloperUi],
+    return (
+        <DiskPopupPanel footer={buildPDiskFooter(data, hasDeveloperUi)}>
+            <DiskPopupHeader
+                title={pDiskPopupKeyset('label_pdisk')}
+                id={data.StringifiedId}
+                type={data.Type}
+                statuses={statusLabels.map(({id, label}) =>
+                    label ? <DiskStatusLabel key={id} {...label} size="xs" /> : null,
+                )}
+            />
+            <DiskPopupLocation items={locationItems} />
+            <YDBDefinitionList items={getPDiskRuntimeItems(data)} nameMaxWidth={150} />
+            {storageItems.length > 0 && (
+                <React.Fragment>
+                    <Divider />
+                    <YDBDefinitionList items={storageItems} nameMaxWidth={150} />
+                </React.Fragment>
+            )}
+        </DiskPopupPanel>
     );
+}
 
-    const pdiskId = data.StringifiedId;
-
+export function PDiskPopup(props: PDiskPopupProps) {
     return (
-        <YDBDefinitionList
-            compact
-            title="PDisk"
-            titleSuffix={{title: pdiskId ?? EMPTY_DATA_PLACEHOLDER, copyText: pdiskId}}
-            items={info}
-            headerLabels={headerLabels}
-            footer={footer}
-            nameMaxWidth={capacityMetricsEnabled ? 220 : 100}
-        />
+        <DiskPopup>
+            <PDiskPopupContent {...props} />
+        </DiskPopup>
     );
-};
+}

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

@@ -1,15 +1,5 @@
 {
-  "context_not-available": "Not available",
-  "label_type": "Type",
-  "label_node-id": "Node Id",
-  "label_host": "Host",
-  "label_dc": "DC",
-  "label_path": "Path",
-  "label_available": "Available",
-  "label_realtime": "Realtime",
-  "label_device": "Device",
-  "value_unknown": "unknown",
-  "value_of": "of",
   "action_open-in-developer-ui": "Open in Developer UI",
-  "action_go-to-pdisk": "Go to PDisk"
+  "action_go-to-pdisk": "Go to PDisk",
+  "label_pdisk": "PDisk"
 }