ydb-embedded-ui 22.2.0 → 22.4.0

package/src/components/PaginatedTable/rowLookup.ts

@@ -33,15 +33,11 @@ function hasChunkAdvanced(
         return false;
     }
 
-    if (!previous.has(offset)) {
-        return true;
-    }
-
     const previousFulfilledTimeStamp = previous.get(offset);
     return (
-        previousFulfilledTimeStamp === null ||
-        (previousFulfilledTimeStamp !== undefined &&
-            fulfilledTimeStamp > previousFulfilledTimeStamp)
+        previousFulfilledTimeStamp !== null &&
+        previousFulfilledTimeStamp !== undefined &&
+        fulfilledTimeStamp > previousFulfilledTimeStamp
     );
 }
 
@@ -49,15 +45,44 @@ export function getChunkLookupRevision(states: ChunkLookupState[], revision?: st
     if (!revision) {
         return serializeChunkLookupRevision(states);
     }
+    if (states.length === 0) {
+        return revision;
+    }
 
     const previous = parseChunkLookupRevision(revision);
-    return states.length > 0 && states.every((state) => hasChunkAdvanced(state, previous))
-        ? serializeChunkLookupRevision(states)
+    if (states.every((state) => hasChunkAdvanced(state, previous))) {
+        return serializeChunkLookupRevision(states);
+    }
+
+    let changed = false;
+    const activeOffsets = new Set(states.map(({offset}) => offset));
+    for (const offset of previous.keys()) {
+        if (!activeOffsets.has(offset)) {
+            previous.delete(offset);
+            changed = true;
+        }
+    }
+    for (const {offset, status, fulfilledTimeStamp} of states) {
+        const previousFulfilledTimeStamp = previous.get(offset);
+        if (
+            (previousFulfilledTimeStamp === null || previousFulfilledTimeStamp === undefined) &&
+            status === QueryStatus.fulfilled &&
+            fulfilledTimeStamp !== undefined
+        ) {
+            // Initial loading establishes a baseline, not a completed polling cycle.
+            previous.set(offset, fulfilledTimeStamp);
+            changed = true;
+        }
+    }
+    return changed
+        ? JSON.stringify(
+              Array.from(previous).sort(([leftOffset], [rightOffset]) => leftOffset - rightOffset),
+          )
         : revision;
 }
 
 export function isChunkLookupPending(states: ChunkLookupState[], revision?: string) {
     const previous = parseChunkLookupRevision(revision);
 
-    return states.some((state) => !hasChunkAdvanced(state, previous));
+    return states.length === 0 || states.some((state) => !hasChunkAdvanced(state, previous));
 }

package/src/components/StorageGroupInfo/StorageGroupInfo.scss

@@ -0,0 +1,21 @@
+.ydb-storage-group-info {
+    gap: var(--g-spacing-4) var(--g-spacing-6);
+
+    &__configuration {
+        width: 400px;
+        max-width: 100%;
+    }
+
+    &__capacity {
+        width: 500px;
+        max-width: 100%;
+    }
+
+    .g-definition-list {
+        --g-definition-list-item-gap: var(--g-spacing-3);
+    }
+
+    .g-definition-list__definition {
+        min-width: 0;
+    }
+}

package/src/components/StorageGroupInfo/StorageGroupInfo.tsx

@@ -1,297 +1,158 @@
-import {Flex} from '@gravity-ui/uikit';
+import {Flex, Text, Tooltip} from '@gravity-ui/uikit';
 
 import {useBlobStorageCapacityMetricsEnabled} from '../../store/reducers/capabilities/hooks';
 import type {PreparedStorageGroup} from '../../store/reducers/storage/types';
-import {valueIsDefined} from '../../utils';
-import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
-import {getDocsLink} from '../../utils/docs';
+import {isNonEmptyValue} from '../../utils';
+import {formatBytes} from '../../utils/bytesParsers';
+import {cn} from '../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import {formatMetricPercent, formatStorageMetricPair} from '../../utils/storageMetrics';
 import {formatToMs} from '../../utils/timeParsers';
-import {bytesToSpeed} from '../../utils/utils';
+import {parseOptionalNonNegativeNumber} from '../../utils/utils';
 import {
     getStorageGroupCapacityInfoItems,
-    toInfoViewerItems,
+    toDefinitionListItems,
 } from '../DiskCapacityInfo/DiskCapacityInfo';
 import diskCapacityInfoKeyset from '../DiskCapacityInfo/i18n';
-import type {InfoViewerItem} from '../InfoViewer';
-import {InfoViewer} from '../InfoViewer';
-import type {InfoViewerProps} from '../InfoViewer/InfoViewer';
 import {StatusIcon} from '../StatusIcon/StatusIcon';
-import {TitleWithHelpMark} from '../TitleWithHelpmark/TitleWithHelpmark';
+import type {YDBDefinitionListItem} from '../YDBDefinitionList/YDBDefinitionList';
+import {YDBDefinitionList} from '../YDBDefinitionList/YDBDefinitionList';
 import {CAPACITY_CONFIGURATION_HELP_TEXT} from '../capacityMetricsColumns/constants';
 import {formatCapacityUnitCount} from '../capacityMetricsColumns/formatters';
 
 import {storageGroupInfoKeyset} from './i18n';
 
-interface StorageGroupInfoProps extends Omit<InfoViewerProps, 'info'> {
+import './StorageGroupInfo.scss';
+
+const b = cn('ydb-storage-group-info');
+
+interface StorageGroupInfoProps {
     data?: PreparedStorageGroup;
     className?: string;
 }
 
-// eslint-disable-next-line complexity
-export function StorageGroupInfo({data, className, ...infoViewerProps}: StorageGroupInfoProps) {
+export function StorageGroupInfo({data, className}: StorageGroupInfoProps) {
     const capacityMetricsEnabled = useBlobStorageCapacityMetricsEnabled();
-
     const {
-        Encryption,
-        Overall,
-        DiskSpace,
-        MediaType,
-        ErasureSpecies,
-        Used,
-        Limit,
-        Usage,
-        Read,
-        Write,
+        PoolName,
         GroupGeneration,
-        AllocationUnits,
-        State,
+        ErasureSpecies,
         MissingDisks,
-        Available,
         LatencyPutTabletLogMs,
         LatencyPutUserDataMs,
         LatencyGetFastMs,
+        Read,
+        Write,
         GroupSizeInUnits,
+        Used,
+        Limit,
+        Available,
+        Usage,
+        DiskSpace,
     } = data || {};
+    const configurationItems: YDBDefinitionListItem[] = [
+        {
+            name: storageGroupInfoKeyset('field_pool-name'),
+            content: PoolName ? (
+                <Tooltip content={PoolName}>
+                    <Text ellipsisLines={2} wordBreak="break-word">
+                        {PoolName}
+                    </Text>
+                </Tooltip>
+            ) : (
+                EMPTY_DATA_PLACEHOLDER
+            ),
+        },
+        ...(
+            [
+                [storageGroupInfoKeyset('group-generation'), GroupGeneration],
+                [storageGroupInfoKeyset('erasure-species'), ErasureSpecies],
+                [storageGroupInfoKeyset('missing-disks'), MissingDisks],
+            ] as const
+        ).map(([name, value]) => ({
+            name,
+            content: isNonEmptyValue(value) ? value : EMPTY_DATA_PLACEHOLDER,
+        })),
+    ];
+    const latencyItems: YDBDefinitionListItem[] = (
+        [
+            [storageGroupInfoKeyset('latency-put-tablet-log'), LatencyPutTabletLogMs],
+            [storageGroupInfoKeyset('latency-put-user-data'), LatencyPutUserDataMs],
+            [storageGroupInfoKeyset('latency-get-fast'), LatencyGetFastMs],
+        ] as const
+    ).map(([name, value]) => {
+        const latency = parseOptionalNonNegativeNumber(value);
+        return {
+            name,
+            content: latency === undefined ? EMPTY_DATA_PLACEHOLDER : formatToMs(latency),
+        };
+    });
+    const throughputItems: YDBDefinitionListItem[] = (
+        [
+            [storageGroupInfoKeyset('read-throughput'), Read],
+            [storageGroupInfoKeyset('write-throughput'), Write],
+        ] as const
+    ).map(([name, value]) => ({
+        name,
+        content:
+            formatBytes({
+                value: parseOptionalNonNegativeNumber(value),
+                size: 'mb',
+                fixedDecimalPlaces: 2,
+                withSpeedLabel: true,
+            }) || EMPTY_DATA_PLACEHOLDER,
+    }));
+    const capacityItems: YDBDefinitionListItem[] = [];
 
-    const distributedStorageChannelDocsLink = getDocsLink('distributedStorageChannel');
-    const allocationUnitsLabel = (
-        <TitleWithHelpMark
-            header={storageGroupInfoKeyset('allocation-units')}
-            note={storageGroupInfoKeyset('context_allocation-units')}
-            docsLink={distributedStorageChannelDocsLink}
-        />
+    if (capacityMetricsEnabled) {
+        capacityItems.push({
+            name: diskCapacityInfoKeyset('field_group-size-in-units'),
+            content: formatCapacityUnitCount(GroupSizeInUnits),
+            note: CAPACITY_CONFIGURATION_HELP_TEXT.GroupSizeInUnits,
+        });
+    }
+    capacityItems.push(
+        {
+            name: storageGroupInfoKeyset('used-space'),
+            content: formatStorageMetricPair(Used, Limit, 2),
+        },
+        {
+            name: storageGroupInfoKeyset('available'),
+            content:
+                formatBytes({
+                    value: parseOptionalNonNegativeNumber(Available),
+                    size: 'gb',
+                    fixedDecimalPlaces: 2,
+                }) || EMPTY_DATA_PLACEHOLDER,
+        },
     );
-
     if (capacityMetricsEnabled) {
-        const configurationInfo: InfoViewerItem[] = [];
-        const runtimeInfo: InfoViewerItem[] = [];
-
-        if (valueIsDefined(GroupGeneration)) {
-            configurationInfo.push({
-                label: storageGroupInfoKeyset('group-generation'),
-                value: GroupGeneration,
-            });
-        }
-        if (valueIsDefined(ErasureSpecies)) {
-            configurationInfo.push({
-                label: storageGroupInfoKeyset('erasure-species'),
-                value: ErasureSpecies,
-            });
-        }
-        if (valueIsDefined(MediaType)) {
-            configurationInfo.push({
-                label: storageGroupInfoKeyset('media-type'),
-                value: MediaType,
-            });
-        }
-        if (valueIsDefined(Encryption)) {
-            configurationInfo.push({
-                label: storageGroupInfoKeyset('encryption'),
-                value: Encryption ? storageGroupInfoKeyset('yes') : storageGroupInfoKeyset('no'),
-            });
-        }
-        configurationInfo.push({
-            label: (
-                <TitleWithHelpMark
-                    header={diskCapacityInfoKeyset('field_group-size-in-units')}
-                    note={CAPACITY_CONFIGURATION_HELP_TEXT.GroupSizeInUnits}
-                />
-            ),
-            value: formatCapacityUnitCount(GroupSizeInUnits),
-        });
-
-        if (valueIsDefined(Overall)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('overall'),
-                value: <StatusIcon status={Overall} />,
-            });
-        }
-        if (valueIsDefined(State)) {
-            runtimeInfo.push({label: storageGroupInfoKeyset('state'), value: State});
-        }
-        if (valueIsDefined(MissingDisks)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('missing-disks'),
-                value: MissingDisks,
-            });
-        }
-        if (valueIsDefined(Used) && valueIsDefined(Limit)) {
-            const usedNum = Number(Used);
-            const limitNum = Number(Limit);
-            const hasSpaceData = Number.isFinite(usedNum) && Number.isFinite(limitNum);
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('used-space'),
-                value: hasSpaceData
-                    ? formatStorageValuesToGb(usedNum, limitNum).join(' / ')
-                    : storageGroupInfoKeyset('no-data'),
-            });
-        }
-        if (valueIsDefined(Available)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('available'),
-                value: formatStorageValuesToGb(Number(Available)),
-            });
-        }
-        if (valueIsDefined(AllocationUnits)) {
-            runtimeInfo.push({
-                label: allocationUnitsLabel,
-                value: AllocationUnits,
-            });
-        }
-        runtimeInfo.push(...toInfoViewerItems(getStorageGroupCapacityInfoItems(data)));
-        if (valueIsDefined(LatencyPutTabletLogMs)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('latency-put-tablet-log'),
-                value: formatToMs(LatencyPutTabletLogMs),
-            });
-        }
-        if (valueIsDefined(LatencyPutUserDataMs)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('latency-put-user-data'),
-                value: formatToMs(LatencyPutUserDataMs),
-            });
-        }
-        if (valueIsDefined(LatencyGetFastMs)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('latency-get-fast'),
-                value: formatToMs(LatencyGetFastMs),
-            });
-        }
-        if (valueIsDefined(Read)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('read-throughput'),
-                value: bytesToSpeed(Number(Read)),
-            });
-        }
-        if (valueIsDefined(Write)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('write-throughput'),
-                value: bytesToSpeed(Number(Write)),
-            });
-        }
-
-        return (
-            <Flex className={className} gap={2} direction="row" wrap>
-                <InfoViewer info={configurationInfo} {...infoViewerProps} />
-                <InfoViewer info={runtimeInfo} {...infoViewerProps} />
-            </Flex>
+        capacityItems.push(...toDefinitionListItems(getStorageGroupCapacityInfoItems(data)));
+    } else {
+        capacityItems.push(
+            {
+                name: storageGroupInfoKeyset('usage'),
+                content: formatMetricPercent(Usage, 2),
+            },
+            {
+                name: storageGroupInfoKeyset('disk-space'),
+                content: DiskSpace ? <StatusIcon status={DiskSpace} /> : EMPTY_DATA_PLACEHOLDER,
+            },
         );
     }
 
-    const storageGroupInfoFirstColumn = [];
-
-    if (valueIsDefined(GroupGeneration)) {
-        storageGroupInfoFirstColumn.push({
-            label: storageGroupInfoKeyset('group-generation'),
-            value: GroupGeneration,
-        });
-    }
-    if (valueIsDefined(ErasureSpecies)) {
-        storageGroupInfoFirstColumn.push({
-            label: storageGroupInfoKeyset('erasure-species'),
-            value: ErasureSpecies,
-        });
-    }
-    if (valueIsDefined(MediaType)) {
-        storageGroupInfoFirstColumn.push({
-            label: storageGroupInfoKeyset('media-type'),
-            value: MediaType,
-        });
-    }
-    if (valueIsDefined(Encryption)) {
-        storageGroupInfoFirstColumn.push({
-            label: storageGroupInfoKeyset('encryption'),
-            value: Encryption ? storageGroupInfoKeyset('yes') : storageGroupInfoKeyset('no'),
-        });
-    }
-    if (valueIsDefined(Overall)) {
-        storageGroupInfoFirstColumn.push({
-            label: storageGroupInfoKeyset('overall'),
-            value: <StatusIcon status={Overall} />,
-        });
-    }
-    if (valueIsDefined(State)) {
-        storageGroupInfoFirstColumn.push({label: storageGroupInfoKeyset('state'), value: State});
-    }
-    if (valueIsDefined(MissingDisks)) {
-        storageGroupInfoFirstColumn.push({
-            label: storageGroupInfoKeyset('missing-disks'),
-            value: MissingDisks,
-        });
-    }
-
-    const storageGroupInfoSecondColumn = [];
-
-    if (valueIsDefined(Used) && valueIsDefined(Limit)) {
-        const usedNum = Number(Used);
-        const limitNum = Number(Limit);
-        const hasSpaceData = Number.isFinite(usedNum) && Number.isFinite(limitNum);
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('used-space'),
-            value: hasSpaceData
-                ? formatStorageValuesToGb(usedNum, limitNum).join(' / ')
-                : storageGroupInfoKeyset('no-data'),
-        });
-    }
-    if (valueIsDefined(Available)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('available'),
-            value: formatStorageValuesToGb(Number(Available)),
-        });
-    }
-    if (valueIsDefined(Usage)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('usage'),
-            value: `${Usage.toFixed(2)}%`,
-        });
-    }
-    if (valueIsDefined(DiskSpace)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('disk-space'),
-            value: <StatusIcon status={DiskSpace} />,
-        });
-    }
-    if (valueIsDefined(LatencyPutTabletLogMs)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('latency-put-tablet-log'),
-            value: formatToMs(LatencyPutTabletLogMs),
-        });
-    }
-    if (valueIsDefined(LatencyPutUserDataMs)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('latency-put-user-data'),
-            value: formatToMs(LatencyPutUserDataMs),
-        });
-    }
-    if (valueIsDefined(LatencyGetFastMs)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('latency-get-fast'),
-            value: formatToMs(LatencyGetFastMs),
-        });
-    }
-    if (valueIsDefined(AllocationUnits)) {
-        storageGroupInfoSecondColumn.push({
-            label: allocationUnitsLabel,
-            value: AllocationUnits,
-        });
-    }
-    if (valueIsDefined(Read)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('read-throughput'),
-            value: bytesToSpeed(Number(Read)),
-        });
-    }
-    if (valueIsDefined(Write)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('write-throughput'),
-            value: bytesToSpeed(Number(Write)),
-        });
-    }
-
     return (
-        <Flex className={className} gap={2} direction="row" wrap>
-            <InfoViewer info={storageGroupInfoFirstColumn} {...infoViewerProps} />
-            <InfoViewer info={storageGroupInfoSecondColumn} {...infoViewerProps} />
+        <Flex className={b(null, className)} wrap="wrap">
+            <Flex direction="column" gap={4} className={b('configuration')}>
+                <YDBDefinitionList items={configurationItems} nameMaxWidth={200} />
+                <YDBDefinitionList items={latencyItems} nameMaxWidth={200} />
+                <YDBDefinitionList items={throughputItems} nameMaxWidth={200} />
+            </Flex>
+            <YDBDefinitionList
+                items={capacityItems}
+                nameMaxWidth={200}
+                wrapperClassName={b('capacity')}
+            />
         </Flex>
     );
 }

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

@@ -1,20 +1,12 @@
 {
-  "encryption": "Encryption",
-  "overall": "Overall",
   "disk-space": "Disk Space",
-  "media-type": "Media Type",
+  "field_pool-name": "Pool Name",
   "erasure-species": "Erasure Species",
   "used-space": "Used Space",
-  "no-data": "No data",
   "usage": "Usage",
   "read-throughput": "Read Throughput",
   "write-throughput": "Write Throughput",
-  "yes": "Yes",
-  "no": "No",
   "group-generation": "Group Generation",
-  "allocation-units": "Allocation Units",
-  "context_allocation-units": "The number of channels used by tablets to write data to the storage group.",
-  "state": "State",
   "missing-disks": "Missing Disks",
   "available": "Available Space",
   "latency-put-tablet-log": "Latency (Put Tablet Log)",

package/src/components/TableKeyboardNavigation/TableKeyboardNavigation.tsx

@@ -338,7 +338,11 @@ export function useTableKeyboardAdapter(options: AdapterOptions) {
                     ? findRowIndex(current.key, current.index)
                     : current.index;
             if (matchedIndex === undefined && isRowLookupPending?.(current.lookupRevision)) {
-                next = {...current, pending: true};
+                next = {
+                    ...current,
+                    lookupRevision: getRowLookupRevision?.(current.lookupRevision),
+                    pending: true,
+                };
             } else {
                 const position = matchedIndex ?? current.index;
                 const index = isValidIndex?.(position) === false ? getLast() : position;

package/src/components/VDisk/VDisk.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type {PopupPlacement, PopupProps} from '@gravity-ui/uikit';
 
 import {useVDiskPagePath} from '../../routes';
-import {EFlag, isCapacityAlert} from '../../types/api/enums';
+import {isCapacityAlert} from '../../types/api/enums';
 import {cn} from '../../utils/cn';
 import {NOT_AVAILABLE_SEVERITY} from '../../utils/disks/constants';
 import type {
@@ -25,6 +25,7 @@ import {HoverPopup} from '../HoverPopup/HoverPopup';
 import {InternalLink} from '../InternalLink';
 import {VDiskPopup} from '../VDiskPopup/VDiskPopup';
 
+import {getFlagStatusText} from './getFlagStatusText';
 import {i18n} from './i18n';
 
 import './VDisk.scss';
@@ -110,22 +111,6 @@ function getVDiskBarIndicator({
     };
 }
 
-function getFlagAccessibleName(flag: EFlag | undefined) {
-    switch (flag) {
-        case EFlag.Green:
-        case EFlag.Blue:
-            return i18n('value_ok');
-        case EFlag.Yellow:
-            return i18n('value_notice');
-        case EFlag.Orange:
-            return i18n('value_warning');
-        case EFlag.Red:
-            return i18n('value_impaired');
-        default:
-            return i18n('context_no-data');
-    }
-}
-
 function getReplicationAccessibleName(replicated: boolean | undefined) {
     if (replicated === undefined) {
         return i18n('context_no-data');
@@ -163,6 +148,28 @@ function getAllModeAccessibleName(data: PreparedVDisk, hasIssues: boolean | unde
     });
 }
 
+function getAccessibleDiskName(
+    data: PreparedVDisk,
+    {mode, isNoData}: Pick<VDiskDisplayState, 'mode' | 'isNoData'>,
+) {
+    const noData = i18n('context_no-data');
+    const diskName = i18n(data.DonorMode ? 'context_donor-vdisk' : 'context_vdisk', {
+        vdiskId: data.StringifiedId || noData,
+        nodeId: data.NodeId ?? noData,
+    });
+    if (!isNoData) {
+        return diskName;
+    }
+
+    const hasVDiskWhiteboardData = data.HasWhiteboardData ?? Boolean(data.VDiskId);
+    return i18n(
+        mode === 'driveType' && hasVDiskWhiteboardData
+            ? 'context_pdisk-no-whiteboard'
+            : 'context_vdisk-no-whiteboard',
+        {disk: diskName, noData},
+    );
+}
+
 function getAccessibleName(
     data: PreparedVDisk,
     {mode, allMode, isNoData, driveType}: VDiskDisplayState,
@@ -175,20 +182,7 @@ function getAccessibleName(
     }
 
     const noData = i18n('context_no-data');
-    let diskName = i18n(data.DonorMode ? 'context_donor-vdisk' : 'context_vdisk', {
-        vdiskId: data.StringifiedId || noData,
-        nodeId: data.NodeId ?? noData,
-    });
-    if (isNoData) {
-        const hasVDiskWhiteboardData = data.HasWhiteboardData ?? Boolean(data.VDiskId);
-        diskName = i18n(
-            mode === 'driveType' && hasVDiskWhiteboardData
-                ? 'context_pdisk-no-whiteboard'
-                : 'context_vdisk-no-whiteboard',
-            {disk: diskName, noData},
-        );
-    }
-
+    const diskName = getAccessibleDiskName(data, {mode, isNoData});
     const {CapacityAlert, FrontQueues, SatisfactionRank, Replicated} = isNoData ? {} : data;
     const {FreshRank, LevelRank} = SatisfactionRank ?? {};
 
@@ -212,13 +206,13 @@ function getAccessibleName(
         case 'frontQueues':
             return i18n('context_front-queues-accessible-name', {
                 disk: diskName,
-                frontQueues: getFlagAccessibleName(FrontQueues),
+                frontQueues: getFlagStatusText(FrontQueues),
             });
         case 'compaction':
             return i18n('context_compaction-accessible-name', {
                 disk: diskName,
-                freshCompaction: getFlagAccessibleName(FreshRank?.Flag),
-                levelCompaction: getFlagAccessibleName(LevelRank?.Flag),
+                freshCompaction: getFlagStatusText(FreshRank?.Flag),
+                levelCompaction: getFlagStatusText(LevelRank?.Flag),
             });
         default:
             return undefined;
@@ -233,6 +227,7 @@ export interface VDiskProps {
     showPopup?: boolean;
     onShowPopup?: VoidFunction;
     onHidePopup?: VoidFunction;
+    onClosePopup?: VoidFunction;
     progressBarClassName?: string;
     delayOpen?: number;
     delayClose?: number;
@@ -256,6 +251,7 @@ export const VDisk = ({
     showPopup,
     onShowPopup,
     onHidePopup,
+    onClosePopup,
     progressBarClassName,
     delayClose,
     delayOpen,
@@ -337,6 +333,7 @@ export const VDisk = ({
             showPopup={showPopup}
             onShowPopup={onShowPopup}
             onHidePopup={onHidePopup}
+            onClosePopup={onClosePopup}
             renderPopupContent={({onClose}) => (
                 <VDiskPopup
                     data={hidePDiskInPopup ? {...data, PDisk: undefined} : data}