ydb-embedded-ui 22.3.0 → 22.5.0

package/src/containers/PDiskPage/PDiskPage.tsx

@@ -1,36 +1,45 @@
 import React from 'react';
 
-import {ArrowRotateLeft} from '@gravity-ui/icons';
-import {Icon, Tab, TabList, TabProvider} from '@gravity-ui/uikit';
+import {ArrowLeft, ArrowRotateLeft, Wrench} from '@gravity-ui/icons';
+import {Button, Flex, Icon, Tab, TabList, TabProvider, Text} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 import {Helmet} from 'react-helmet-async';
+import {useHistory} from 'react-router-dom';
 import {StringParam, useQueryParams} from 'use-query-params';
 import {z} from 'zod';
 
+import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
 import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
-import {EntityPageTitle} from '../../components/EntityPageTitle/EntityPageTitle';
+import {CopyableValue} from '../../components/CopyableValue/CopyableValue';
+import {DiskStatusLabel, DiskTypeLabel} from '../../components/DiskStatus/DiskStatus';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
 import {InternalLink} from '../../components/InternalLink/InternalLink';
+import {LinkWithIcon} from '../../components/LinkWithIcon/LinkWithIcon';
 import {PDiskInfo} from '../../components/PDiskInfo/PDiskInfo';
-import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
+import {
+    getPDiskDecommitLabel,
+    getPDiskDriveLabel,
+    getPDiskMaintenanceLabel,
+    getPDiskStateLabel,
+} from '../../components/PDiskInfo/statuses';
 import {getPDiskPagePath} from '../../routes';
 import {api} from '../../store/reducers/api';
 import {useDiskPagesAvailable} from '../../store/reducers/capabilities/hooks';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {pDiskApi} from '../../store/reducers/pdisk/pdisk';
-import type {EDecommitStatus} from '../../types/api/pdisk';
 import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
-import {getDataSeverityColor, getPDiskId} from '../../utils/disks/helpers';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import {createPDiskDeveloperUILink, useHasDeveloperUi} from '../../utils/developerUI/developerUI';
+import {getPDiskId} from '../../utils/disks/helpers';
 import {useAutoRefreshInterval, useTypedDispatch} from '../../utils/hooks';
 import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {useAppTitle} from '../App/AppTitleContext';
 import {PaginatedStorage} from '../Storage/PaginatedStorage';
 
-import {DecommissionButton} from './DecommissionButton/DecommissionButton';
-import {DecommissionLabel} from './DecommissionLabel/DecommissionLabel';
 import {PDiskSpaceDistribution} from './PDiskSpaceDistribution/PDiskSpaceDistribution';
+import {PDiskStorageDetails} from './PDiskStorageDetails';
 import {pDiskPageKeyset} from './i18n';
 
 import './PDiskPage.scss';
@@ -61,6 +70,9 @@ const pDiskTabSchema = z.nativeEnum(PDISK_TABS_IDS).catch(PDISK_TABS_IDS.spaceDi
 
 export function PDiskPage() {
     const dispatch = useTypedDispatch();
+    const history = useHistory();
+    const showBackButton = history.length > 1;
+    const hasDeveloperUi = useHasDeveloperUi();
 
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
     const newDiskApiAvailable = useDiskPagesAvailable();
@@ -87,7 +99,8 @@ export function PDiskPage() {
     });
     const pDiskLoading = pdiskDataQuery.isFetching && pdiskDataQuery.currentData === undefined;
     const pDiskData = pdiskDataQuery.currentData;
-    const {NodeHost, NodeId, NodeType, NodeDC, Severity, DecommitStatus} = pDiskData || {};
+    const {NodeHost, DecommitStatus} = pDiskData || {};
+    const diskId = getPDiskId({nodeId, pDiskId});
 
     const handleRestart = async (isRetry?: boolean) => {
         if (pDiskParamsDefined) {
@@ -105,27 +118,6 @@ export function PDiskPage() {
         }
     };
 
-    const handleDecommissionChange = async (
-        newDecommissionStatus?: EDecommitStatus,
-        isRetry?: boolean,
-    ) => {
-        if (pDiskParamsDefined) {
-            const response = await window.api.pdisk.changePDiskStatus({
-                nodeId,
-                pDiskId,
-                force: isRetry,
-                decommissionStatus: newDecommissionStatus,
-            });
-            if (response?.result === false) {
-                const err = {
-                    statusText: response.error,
-                    retryPossible: response.forceRetryPossible,
-                };
-                throw err;
-            }
-        }
-    };
-
     const handleAfterAction = () => {
         if (pDiskParamsDefined) {
             dispatch(
@@ -153,39 +145,75 @@ export function PDiskPage() {
     };
 
     const renderPageMeta = () => {
-        const hostItem = NodeHost ? `${pDiskPageKeyset('fqdn')}: ${NodeHost}` : undefined;
-        const nodeIdItem = NodeId ? `${pDiskPageKeyset('node')}: ${NodeId}` : undefined;
-
+        if (!showBackButton) {
+            return null;
+        }
         return (
-            <PageMetaWithAutorefresh
-                loading={pDiskLoading}
-                items={[hostItem, nodeIdItem, NodeType, NodeDC]}
+            <Flex
                 className={pdiskPageCn('meta')}
-            />
+                alignItems="center"
+                justifyContent="space-between"
+                gap={1}
+            >
+                <Button size="m" view="outlined" onClick={() => history.goBack()}>
+                    <Icon data={ArrowLeft} size={16} />
+                    {pDiskPageKeyset('action_back')}
+                </Button>
+                <AutoRefreshControl className={pdiskPageCn('refresh-control')} />
+            </Flex>
         );
     };
 
     const renderPageTitle = () => {
+        const statusLabels = [
+            {id: 'state', label: getPDiskStateLabel(pDiskData?.State)},
+            {id: 'drive', label: getPDiskDriveLabel(pDiskData?.DriveStatus)},
+            {id: 'decommit', label: getPDiskDecommitLabel(DecommitStatus)},
+            {id: 'maintenance', label: getPDiskMaintenanceLabel(pDiskData?.MaintenanceStatus)},
+        ];
         return (
-            <div className={pdiskPageCn('title')}>
-                <EntityPageTitle
-                    entityName={pDiskPageKeyset('pdisk')}
-                    status={getDataSeverityColor(Severity)}
-                    id={getPDiskId({nodeId, pDiskId})}
-                />
-                <DecommissionLabel decommission={DecommitStatus} />
-            </div>
+            <Flex
+                className={pdiskPageCn('title')}
+                gap={2}
+                alignItems="flex-start"
+                qa="pdisk-header"
+            >
+                <Flex
+                    className={pdiskPageCn('title-content')}
+                    gap={3}
+                    alignItems="center"
+                    wrap="wrap"
+                >
+                    <CopyableValue copyText={diskId} fieldName={pDiskPageKeyset('pdisk')}>
+                        <Text as="h1" variant="header-1" className={pdiskPageCn('heading')}>
+                            {pDiskPageKeyset('pdisk')}{' '}
+                            <Text color="hint" variant="header-1">
+                                {diskId || EMPTY_DATA_PLACEHOLDER}
+                            </Text>
+                        </Text>
+                    </CopyableValue>
+                    <Flex gap={2} alignItems="center" wrap="wrap">
+                        {statusLabels.map(({id, label}) =>
+                            label ? <DiskStatusLabel key={id} {...label} iconSize={14} /> : null,
+                        )}
+                        <DiskTypeLabel type={pDiskData?.Type} size="s" />
+                    </Flex>
+                </Flex>
+                {!showBackButton && (
+                    <AutoRefreshControl className={pdiskPageCn('refresh-control')} />
+                )}
+            </Flex>
         );
     };
 
     const renderControls = () => {
         return (
-            <div className={pdiskPageCn('controls')}>
+            <div className={pdiskPageCn('controls')} data-qa="pdisk-controls">
                 <ButtonWithConfirmDialog
                     onConfirmAction={handleRestart}
                     onConfirmActionSuccess={handleAfterAction}
                     buttonDisabled={!pDiskParamsDefined || !isUserAllowedToMakeChanges}
-                    buttonView="normal"
+                    buttonView="action"
                     dialogHeader={pDiskPageKeyset('restart-pdisk-dialog-header')}
                     dialogText={pDiskPageKeyset('restart-pdisk-dialog-text')}
                     applyButtonText={pDiskPageKeyset('restart-pdisk-button')}
@@ -198,15 +226,14 @@ export function PDiskPage() {
                     <Icon data={ArrowRotateLeft} />
                     {pDiskPageKeyset('restart-pdisk-button')}
                 </ButtonWithConfirmDialog>
-                {newDiskApiAvailable ? (
-                    <DecommissionButton
-                        decommission={DecommitStatus}
-                        onConfirmAction={handleDecommissionChange}
-                        onConfirmActionSuccess={handleAfterAction}
-                        buttonDisabled={!pDiskParamsDefined || !isUserAllowedToMakeChanges}
-                        popoverDisabled={isUserAllowedToMakeChanges}
+                {hasDeveloperUi && pDiskParamsDefined && (
+                    <LinkWithIcon
+                        title={pDiskPageKeyset('action_open-in-developer-ui')}
+                        url={createPDiskDeveloperUILink({nodeId, pDiskId})}
+                        icon={Wrench}
+                        hideEndIcon
                     />
-                ) : null}
+                )}
             </div>
         );
     };
@@ -215,7 +242,12 @@ export function PDiskPage() {
         if (pDiskLoading) {
             return <InfoViewerSkeleton className={pdiskPageCn('info')} rows={10} />;
         }
-        return <PDiskInfo pDisk={pDiskData} nodeId={nodeId} className={pdiskPageCn('info')} />;
+        return (
+            <React.Fragment>
+                <PDiskStorageDetails data={pDiskData} className={pdiskPageCn('storage-details')} />
+                <PDiskInfo pDisk={pDiskData} className={pdiskPageCn('info')} />
+            </React.Fragment>
+        );
     };
 
     const renderTabs = () => {

package/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import {DiskStateProgressBar} from '../../../components/DiskStateProgressBar/DiskStateProgressBar';
 import {HoverPopup} from '../../../components/HoverPopup/HoverPopup';
 import {InternalLink} from '../../../components/InternalLink';
-import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
-import {VDiskInfo} from '../../../components/VDiskInfo/VDiskInfo';
+import {PDiskLogSize} from '../../../components/PDiskInfo/PDiskLogSize';
+import {VDiskPopup} from '../../../components/VDiskPopup/VDiskPopup';
 import type {YDBDefinitionListItem} from '../../../components/YDBDefinitionList/YDBDefinitionList';
 import {YDBDefinitionList} from '../../../components/YDBDefinitionList/YDBDefinitionList';
 import {useVDiskPagePath} from '../../../routes';
@@ -15,6 +15,7 @@ import type {
     SlotItem,
     SlotItemType,
 } from '../../../store/reducers/pdisk/types';
+import type {NodeMetadata} from '../../../types/store/nodesList';
 import {valueIsDefined} from '../../../utils';
 import {formatBytes} from '../../../utils/bytesParsers';
 import {cn} from '../../../utils/cn';
@@ -80,6 +81,7 @@ export function PDiskSpaceDistribution({data}: PDiskSpaceDistributionProps) {
                     minNonLogTotal={minNonLogTotal}
                     pDiskId={PDiskId}
                     nodeId={NodeId}
+                    nodeData={{Host: data.NodeHost, DC: data.NodeDC, Rack: data.NodeRack}}
                     getVDiskPagePath={getVDiskPagePath}
                     key={index}
                 />
@@ -110,6 +112,7 @@ interface SlotProps<T extends SlotItemType> {
 
     pDiskId?: string | number;
     nodeId?: string | number;
+    nodeData?: NodeMetadata;
     getVDiskPagePath?: (
         params: {nodeId: string | number | undefined; vDiskId: string | undefined},
         query?: {activeTab?: string},
@@ -138,6 +141,7 @@ function Slot<T extends SlotItemType>({
     item,
     minNonLogTotal,
     nodeId,
+    nodeData,
     getVDiskPagePath,
 }: SlotProps<T>) {
     const renderContent = () => {
@@ -152,7 +156,14 @@ function Slot<T extends SlotItemType>({
 
             return (
                 <HoverPopup
-                    renderPopupContent={() => <VDiskInfo data={item.SlotData} withTitle />}
+                    renderPopupContent={({onClose}) => (
+                        <VDiskPopup
+                            data={item.SlotData}
+                            nodeData={nodeData}
+                            onClose={onClose}
+                            view="space-distribution"
+                        />
+                    )}
                     contentClassName={b('vdisk-popup')}
                     placement={['right', 'top']}
                 >
@@ -275,20 +286,14 @@ function LogInfo({data}: LogInfoProps) {
     const items: YDBDefinitionListItem[] = [
         {
             name: pDiskPageKeyset('label.log-size'),
-            content: (
-                <ProgressViewer
-                    value={LogUsedSize}
-                    capacity={LogTotalSize}
-                    formatValues={formatStorageValuesToGb}
-                />
-            ),
+            content: <PDiskLogSize used={LogUsedSize} total={LogTotalSize} />,
         },
     ];
 
     if (valueIsDefined(SystemSize)) {
         items.push({
             name: pDiskPageKeyset('label.system-size'),
-            content: formatBytes({value: SystemSize}),
+            content: formatBytes({value: SystemSize, fixedDecimalPlaces: 2}),
         });
     }
 

package/src/containers/PDiskPage/PDiskStorageDetails.scss

@@ -0,0 +1,51 @@
+.ydb-pdisk-storage-details {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--g-spacing-5);
+
+    width: fit-content;
+    max-width: 100%;
+    padding: var(--g-spacing-3) var(--g-spacing-5);
+
+    border-radius: var(--g-border-radius-m);
+    background-color: var(--g-color-base-generic);
+
+    &__detail {
+        --g-definition-list-item-gap: 0px;
+
+        min-width: 0;
+        max-width: 200px;
+
+        &_location {
+            min-width: 100px;
+        }
+
+        .g-definition-list__definition {
+            min-width: 0;
+            max-width: 100%;
+        }
+    }
+
+    &__value-popover {
+        flex: 0 1 auto;
+
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    &__value-popover-content {
+        width: auto;
+        min-width: 0;
+        max-width: 100%;
+
+        &_with-left-trim {
+            text-align: end;
+            direction: rtl;
+
+            > span {
+                unicode-bidi: plaintext;
+            }
+        }
+    }
+}

package/src/containers/PDiskPage/PDiskStorageDetails.tsx

@@ -0,0 +1,64 @@
+import {DefinitionList} from '@gravity-ui/uikit';
+
+import {CellWithPopover} from '../../components/CellWithPopover/CellWithPopover';
+import {CopyableValue} from '../../components/CopyableValue/CopyableValue';
+import type {PDiskData} from '../../store/reducers/pdisk/types';
+import {cn} from '../../utils/cn';
+import {getDiskLocationItems} from '../../utils/disks/diskInfo/getDiskLocationItems';
+
+import './PDiskStorageDetails.scss';
+
+const b = cn('ydb-pdisk-storage-details');
+const LOCATION_IDS = ['datacenter', 'rack', 'fqdn', 'pdisk-path'];
+const FIELD_ORDER = [...LOCATION_IDS, 'node-id', 'pdisk-id'];
+
+export function PDiskStorageDetails({
+    data = {},
+    className,
+}: {
+    data?: PDiskData;
+    className?: string;
+}) {
+    const items = getDiskLocationItems(data, {
+        Host: data.NodeHost,
+        Rack: data.NodeRack,
+        DC: data.NodeDC,
+    });
+
+    return (
+        <div className={b(null, className)} data-qa="pdisk-location">
+            {FIELD_ORDER.map((id) => {
+                const item = items.find((entry) => entry.id === id);
+                if (!item) {
+                    return null;
+                }
+                const copyText = item.copyText === undefined ? undefined : String(item.copyText);
+                return (
+                    <DefinitionList
+                        key={id}
+                        direction="vertical"
+                        className={b('detail', {location: LOCATION_IDS.includes(id)})}
+                        qa={`pdisk-location-${id}`}
+                    >
+                        <DefinitionList.Item name={item.name}>
+                            <CopyableValue copyText={copyText} fieldName={item.name}>
+                                <CellWithPopover
+                                    content={copyText}
+                                    disabled={!copyText}
+                                    placement={['top', 'bottom']}
+                                    fullWidth
+                                    wrapperClassName={b('value-popover')}
+                                    className={b('value-popover-content', {
+                                        'with-left-trim': id === 'pdisk-path',
+                                    })}
+                                >
+                                    <span tabIndex={copyText ? 0 : undefined}>{item.content}</span>
+                                </CellWithPopover>
+                            </CopyableValue>
+                        </DefinitionList.Item>
+                    </DefinitionList>
+                );
+            })}
+        </div>
+    );
+}

package/src/containers/PDiskPage/i18n/en.json

@@ -2,6 +2,8 @@
   "fqdn": "FQDN",
   "pdisk": "PDisk",
   "node": "Node",
+  "action_back": "Back",
+  "action_open-in-developer-ui": "Open in Developer UI",
 
   "storage": "Storage",
   "space-distribution": "Space distribution",

package/src/containers/Storage/Disks/Disks.tsx

@@ -31,6 +31,19 @@ import './Disks.scss';
 
 const b = cn('ydb-storage-disks');
 
+interface DiskPopupState {
+    id: string;
+    vdisk: boolean;
+    pdisk: boolean;
+}
+
+type DiskPopupChangeHandler = (
+    id: string | undefined,
+    source: 'vdisk' | 'pdisk',
+    open: boolean,
+    closePair?: boolean,
+) => void;
+
 interface DisksProps {
     vDisks?: PreparedVDisk[];
     viewContext?: StorageViewContext;
@@ -44,7 +57,7 @@ interface DisksItemProps {
     viewContext?: StorageViewContext;
     inactive?: boolean;
     highlighted: boolean;
-    setHighlightedVDisk?: (id?: string) => void;
+    onPopupChange: DiskPopupChangeHandler;
     compactVDiskWidth?: number;
     withDCMargin?: boolean;
     withIcon?: boolean;
@@ -58,7 +71,7 @@ const VDiskItem = React.memo(function VDiskItem({
     vDisk,
     highlighted,
     inactive,
-    setHighlightedVDisk,
+    onPopupChange,
     compactVDiskWidth,
     withIcon,
     getDisplayState,
@@ -66,6 +79,15 @@ const VDiskItem = React.memo(function VDiskItem({
     renderContent,
     placeholderProps,
 }: DisksItemProps) {
+    const vDiskId = vDisk.StringifiedId;
+    const setHighlightedVDisk = React.useCallback(
+        (id?: string) => onPopupChange(vDiskId, 'vdisk', Boolean(id)),
+        [onPopupChange, vDiskId],
+    );
+    const onClosePopup = React.useCallback(
+        () => onPopupChange(vDiskId, 'vdisk', false, true),
+        [onPopupChange, vDiskId],
+    );
     const style: React.CSSProperties = isAllVDisksLayout
         ? {width: ALL_VDISK_WIDTH, flexBasis: ALL_VDISK_WIDTH}
         : {width: compactVDiskWidth, flexBasis: compactVDiskWidth};
@@ -98,6 +120,7 @@ const VDiskItem = React.memo(function VDiskItem({
                 delayClose={DISKS_POPUP_DEBOUNCE_TIMEOUT}
                 highlightedVDisk={highlighted ? vDisk.StringifiedId : undefined}
                 setHighlightedVDisk={setHighlightedVDisk}
+                onClosePopup={onClosePopup}
                 progressBarClassName={b('vdisk-progress-bar')}
                 getDisplayState={getDisplayState}
             />
@@ -109,7 +132,7 @@ const PDiskItem = React.memo(function PDiskItem({
     vDisk,
     viewContext,
     highlighted,
-    setHighlightedVDisk,
+    onPopupChange,
     withDCMargin,
     withIcon,
     getDisplayState,
@@ -119,12 +142,16 @@ const PDiskItem = React.memo(function PDiskItem({
     const vDiskId = vDisk.StringifiedId;
 
     const onShowPopup = React.useCallback(
-        () => setHighlightedVDisk?.(vDiskId),
-        [setHighlightedVDisk, vDiskId],
+        () => onPopupChange(vDiskId, 'pdisk', true),
+        [onPopupChange, vDiskId],
     );
     const onHidePopup = React.useCallback(
-        () => setHighlightedVDisk?.(undefined),
-        [setHighlightedVDisk],
+        () => onPopupChange(vDiskId, 'pdisk', false),
+        [onPopupChange, vDiskId],
+    );
+    const onClosePopup = React.useCallback(
+        () => onPopupChange(vDiskId, 'pdisk', false, true),
+        [onPopupChange, vDiskId],
     );
 
     if (!vDisk.PDisk) {
@@ -150,6 +177,7 @@ const PDiskItem = React.memo(function PDiskItem({
                     delayClose={DISKS_POPUP_DEBOUNCE_TIMEOUT}
                     onShowPopup={onShowPopup}
                     onHidePopup={onHidePopup}
+                    onClosePopup={onClosePopup}
                     withIcon={withIcon}
                     highlighted={highlighted}
                     getDisplayState={getDisplayState}
@@ -170,7 +198,33 @@ export const Disks = React.memo(function Disks({
     const getVDiskDisplayState = useStorageVDiskDisplayStateGetter();
     const getPDiskDisplayState = useStoragePDiskDisplayStateGetter();
 
-    const [highlightedVDisk, setHighlightedVDisk] = React.useState<string | undefined>();
+    const [popupState, setPopupState] = React.useState<DiskPopupState>();
+    const highlightedVDisk = popupState?.id;
+    const onPopupChange = React.useCallback<DiskPopupChangeHandler>(
+        (id, source, open, closePair) => {
+            if (!id) {
+                return;
+            }
+            setPopupState((current) => {
+                // A delayed close from another pair must not clear the current pair.
+                if (!open && current?.id !== id) {
+                    return current;
+                }
+                if (closePair) {
+                    return undefined;
+                }
+                const next = {
+                    id,
+                    vdisk: false,
+                    pdisk: false,
+                    ...(current?.id === id ? current : {}),
+                    [source]: open,
+                };
+                return next.vdisk || next.pdisk ? next : undefined;
+            });
+        },
+        [],
+    );
     const vDiskList = useVirtualizedDiskList(
         vDisks,
         vDisks.every((disk) => Boolean(disk.StringifiedId)),
@@ -182,8 +236,8 @@ export const Disks = React.memo(function Disks({
     );
 
     React.useEffect(() => {
-        setHighlightedVDisk((id) =>
-            vDisks.some((disk) => disk.StringifiedId === id) ? id : undefined,
+        setPopupState((current) =>
+            vDisks.some((disk) => disk.StringifiedId === current?.id) ? current : undefined,
         );
     }, [vDisks]);
 
@@ -218,7 +272,7 @@ export const Disks = React.memo(function Disks({
                         vDisk={vDisk}
                         inactive={!isVdiskActive(vDisk, viewContext)}
                         highlighted={highlightedVDisk === vDisk.StringifiedId}
-                        setHighlightedVDisk={setHighlightedVDisk}
+                        onPopupChange={onPopupChange}
                         compactVDiskWidth={compactVDiskWidths[index]}
                         withIcon={withIcon}
                         getDisplayState={getVDiskDisplayState}
@@ -236,7 +290,7 @@ export const Disks = React.memo(function Disks({
                         vDisk={vDisk}
                         viewContext={viewContext}
                         highlighted={highlightedVDisk === vDisk.StringifiedId}
-                        setHighlightedVDisk={setHighlightedVDisk}
+                        onPopupChange={onPopupChange}
                         withDCMargin={vDisksWithDCMargins.includes(index)}
                         withIcon={withIcon}
                         getDisplayState={getPDiskDisplayState}

package/src/containers/Storage/PDisk/PDisk.tsx

@@ -257,6 +257,7 @@ export interface PDiskProps {
     showPopup?: boolean;
     onShowPopup?: VoidFunction;
     onHidePopup?: VoidFunction;
+    onClosePopup?: VoidFunction;
     className?: string;
     progressBarClassName?: string;
     // Nodes derive this width from their VDisk rows, overriding the Groups mode defaults.
@@ -276,6 +277,7 @@ export const PDisk = ({
     showPopup,
     onShowPopup,
     onHidePopup,
+    onClosePopup,
     className,
     progressBarClassName,
     width,
@@ -359,6 +361,7 @@ export const PDisk = ({
                 anchorRef={anchorRef}
                 onShowPopup={onShowPopup}
                 onHidePopup={onHidePopup}
+                onClosePopup={onClosePopup}
                 renderPopupContent={() => <PDiskPopup data={data} />}
                 delayOpen={delayOpen}
                 delayClose={delayClose}

package/src/containers/Storage/PaginatedStorageGroupsTable/columns/columns.tsx

@@ -6,6 +6,7 @@ import {Flex, Icon, Label, Popover} from '@gravity-ui/uikit';
 import {isNil} from 'lodash';
 
 import {CellWithPopover} from '../../../../components/CellWithPopover/CellWithPopover';
+import {DiskStatusLabel} from '../../../../components/DiskStatus/DiskStatus';
 import {EntityName} from '../../../../components/EntityName/EntityName';
 import {StatusIcon} from '../../../../components/StatusIcon/StatusIcon';
 import {TitleWithHelpMark} from '../../../../components/TitleWithHelpmark/TitleWithHelpmark';
@@ -35,6 +36,7 @@ import {
 } from '../../Disks/constants';
 import {VDisks} from '../../VDisks/VDisks';
 import {getDegradedSeverity} from '../../utils';
+import {getStorageGroupStateLabel} from '../../utils/getStorageGroupStateLabel';
 import i18n from '../i18n';
 
 import {
@@ -122,9 +124,14 @@ const degradedColumn: StorageGroupsColumn = {
     resizeMinWidth: 110,
     render: ({row}) =>
         row.Degraded ? (
-            <Label theme={getDegradedSeverity(row)}>Degraded: {row.Degraded}</Label>
+            <DiskStatusLabel
+                size="xs"
+                title="Degraded"
+                value={String(row.Degraded)}
+                theme={getDegradedSeverity(row)}
+            />
         ) : (
-            '-'
+            EMPTY_DATA_PLACEHOLDER
         ),
     align: DataTable.LEFT,
     defaultOrder: DataTable.DESCENDING,
@@ -133,7 +140,21 @@ const stateColumn: StorageGroupsColumn = {
     name: STORAGE_GROUPS_COLUMNS_IDS.State,
     header: STORAGE_GROUPS_COLUMNS_TITLES.State,
     width: 150,
-    render: ({row}) => row.State ?? EMPTY_DATA_PLACEHOLDER,
+    render: ({row}) => {
+        const state = getStorageGroupStateLabel(row.State);
+
+        return state ? (
+            <DiskStatusLabel
+                size="xs"
+                title={state.title}
+                value={state.value}
+                theme={state.theme}
+                dangerHeavy={state.dangerHeavy}
+            />
+        ) : (
+            EMPTY_DATA_PLACEHOLDER
+        );
+    },
     align: DataTable.LEFT,
     defaultOrder: DataTable.DESCENDING,
 };