ydb-embedded-ui 21.1.0 → 22.1.0

package/src/containers/Storage/PaginatedStorageNodes/StorageNodesControls.tsx

@@ -1,18 +1,26 @@
 import React from 'react';
 
-import {Select, Text} from '@gravity-ui/uikit';
+import {ChartTreemap} from '@gravity-ui/icons';
+import {Button, Flex, Icon, Select, Text} from '@gravity-ui/uikit';
 
 import {EntitiesCount} from '../../../components/EntitiesCount/EntitiesCount';
 import {usePaginatedTableState} from '../../../components/PaginatedTable/PaginatedTableContext';
 import {Search} from '../../../components/Search/Search';
 import {UptimeFilter} from '../../../components/UptimeFIlter';
-import {useBlobStorageCapacityMetricsEnabled} from '../../../store/reducers/capabilities/hooks';
+import {
+    useBlobStorageCapacityMetricsAvailable,
+    useBlobStorageCapacityMetricsEnabled,
+} from '../../../store/reducers/capabilities/hooks';
+import {SETTING_KEYS} from '../../../store/reducers/settings/constants';
+import {useSetting} from '../../../utils/hooks';
+import {useIsUserAllowedToMakeChanges} from '../../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {getStorageNodesGroupByOptions} from '../PaginatedStorageNodesTable/columns/constants';
+import {StorageNodesExpertModePanel} from '../StorageExpertModePanel/StorageNodesExpertModePanel';
 import {StorageTypeFilter} from '../StorageTypeFilter/StorageTypeFilter';
 import {StorageVisibleEntitiesFilter} from '../StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter';
 import i18n from '../i18n';
 import {b} from '../shared';
-import {useStorageQueryParams} from '../useStorageQueryParams';
+import {useIsStorageExpertMode, useStorageQueryParams} from '../useStorageQueryParams';
 
 interface StorageControlsProps {
     withTypeSelector?: boolean;
@@ -42,8 +50,15 @@ export function StorageNodesControls({
         handleVisibleEntitiesChange,
         handleUptimeFilterChange,
         handleStorageNodesGroupByParamChange,
+        handleStorageExpertModeChange,
     } = useStorageQueryParams();
 
+    const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
+    const [storageExpertModeSettingEnabled] = useSetting<boolean>(
+        SETTING_KEYS.ENABLE_STORAGE_EXPERT_MODE,
+    );
+    const isStorageExpertMode = useIsStorageExpertMode();
+    const storageExpertModeAvailable = useBlobStorageCapacityMetricsAvailable();
     const blobMetricsEnabled = useBlobStorageCapacityMetricsEnabled();
 
     const nodesGroupByOptions = React.useMemo(
@@ -55,48 +70,68 @@ export function StorageNodesControls({
         handleStorageNodesGroupByParamChange(value[0]);
     };
 
+    const canUseStorageExpertMode =
+        storageExpertModeAvailable &&
+        storageExpertModeSettingEnabled &&
+        Boolean(isUserAllowedToMakeChanges);
+
     return (
-        <React.Fragment>
-            <Search
-                value={nodesSearchValue}
-                onChange={handleTextFilterNodesChange}
-                placeholder={i18n('controls_nodes-search-placeholder')}
-                className={b('search')}
-            />
-            {withTypeSelector && (
-                <StorageTypeFilter value={storageType} onChange={handleStorageTypeChange} />
-            )}
-            {withGroupBySelect ? null : (
-                <StorageVisibleEntitiesFilter
-                    value={visibleEntities}
-                    onChange={handleVisibleEntitiesChange}
+        <Flex direction="column" gap={2} width="100%">
+            <Flex gap={2} alignItems="center" wrap className={b('controls-row')}>
+                <Search
+                    tableFilter
+                    value={nodesSearchValue}
+                    onChange={handleTextFilterNodesChange}
+                    placeholder={i18n('controls_nodes-search-placeholder')}
+                    className={b('search')}
                 />
-            )}
-            {withGroupBySelect ? null : (
-                <UptimeFilter value={nodesUptimeFilter} onChange={handleUptimeFilterChange} />
-            )}
-            {withGroupBySelect ? (
-                <React.Fragment>
-                    <Text variant="body-2">{i18n('controls_group-by-placeholder')}</Text>
-                    <Select
-                        hasClear
-                        placeholder={'-'}
-                        width={150}
-                        defaultValue={
-                            storageNodesGroupByParam ? [storageNodesGroupByParam] : undefined
-                        }
-                        onUpdate={handleGroupBySelectUpdate}
-                        options={nodesGroupByOptions}
+                {withTypeSelector && (
+                    <StorageTypeFilter value={storageType} onChange={handleStorageTypeChange} />
+                )}
+                {withGroupBySelect ? null : (
+                    <StorageVisibleEntitiesFilter
+                        value={visibleEntities}
+                        onChange={handleVisibleEntitiesChange}
                     />
-                </React.Fragment>
+                )}
+                {withGroupBySelect ? null : (
+                    <UptimeFilter value={nodesUptimeFilter} onChange={handleUptimeFilterChange} />
+                )}
+                {withGroupBySelect ? (
+                    <React.Fragment>
+                        <Text variant="body-2">{i18n('controls_group-by-placeholder')}</Text>
+                        <Select
+                            hasClear
+                            placeholder={'-'}
+                            width={150}
+                            defaultValue={
+                                storageNodesGroupByParam ? [storageNodesGroupByParam] : undefined
+                            }
+                            onUpdate={handleGroupBySelectUpdate}
+                            options={nodesGroupByOptions}
+                        />
+                    </React.Fragment>
+                ) : null}
+                <EntitiesCount
+                    label={i18n('nodes')}
+                    loading={entitiesLoading}
+                    total={entitiesCountTotal}
+                    current={entitiesCountCurrent}
+                />
+                {canUseStorageExpertMode ? (
+                    <Button
+                        selected={isStorageExpertMode}
+                        onClick={() => handleStorageExpertModeChange(!isStorageExpertMode)}
+                    >
+                        <Icon data={ChartTreemap} />
+                        {i18n('controls_expert-mode')}
+                    </Button>
+                ) : null}
+            </Flex>
+            {canUseStorageExpertMode && isStorageExpertMode ? (
+                <StorageNodesExpertModePanel />
             ) : null}
-            <EntitiesCount
-                label={i18n('nodes')}
-                loading={entitiesLoading}
-                total={entitiesCountTotal}
-                current={entitiesCountCurrent}
-            />
-        </React.Fragment>
+        </Flex>
     );
 }
 

package/src/containers/Storage/PaginatedStorageNodes/nodeExpertModeLayout.ts

@@ -0,0 +1,103 @@
+import type {PreparedVDisk} from '../../../utils/disks/types';
+
+export const NODE_EXPERT_PDISK_WIDTH = 165;
+export const NODE_EXPERT_VDISKS_PER_ROW = 8;
+export const NODE_EXPERT_ALL_VDISKS_PER_ROW = 4;
+export const NODE_EXPERT_ALL_VDISK_WIDTH = 45;
+
+const NODE_EXPERT_VDISK_MIN_WIDTH = 10;
+const NODE_EXPERT_VDISK_GAP = 2;
+const NODE_EXPERT_VDISK_HEIGHT = 14;
+const NODE_EXPERT_VDISK_ROW_GAP = 2;
+const NODE_EXPERT_VDISK_PDISK_GAP = 6;
+const NODE_EXPERT_VDISK_SIZE_INDICATOR_HEIGHT = 2;
+const NODE_EXPERT_VDISK_SIZE_INDICATOR_GAP = 2;
+const PDISK_HEIGHT = 20;
+const TABLE_CELL_VERTICAL_PADDING = 10;
+const TABLE_ROW_BORDER = 1;
+
+export const STORAGE_NODES_DEFAULT_ROW_HEIGHT = 51;
+export const STORAGE_NODES_DEFAULT_PDISK_HEIGHT = 40;
+export const NODE_EXPERT_ALL_PDISK_WIDTH =
+    NODE_EXPERT_ALL_VDISKS_PER_ROW * NODE_EXPERT_ALL_VDISK_WIDTH +
+    (NODE_EXPERT_ALL_VDISKS_PER_ROW - 1) * NODE_EXPERT_VDISK_GAP;
+
+export interface NodeExpertVDiskLayoutItem {
+    vDisk: PreparedVDisk;
+    width: number;
+}
+
+function getVDiskWeight(vDisk: PreparedVDisk) {
+    const allocatedSize = Number(vDisk.AllocatedSize);
+
+    return Number.isFinite(allocatedSize) && allocatedSize > 0 ? allocatedSize : 1;
+}
+
+export function calculateNodeExpertVDiskRows(
+    vDisks: PreparedVDisk[],
+    pDiskWidth = NODE_EXPERT_PDISK_WIDTH,
+): NodeExpertVDiskLayoutItem[][] {
+    const rows: PreparedVDisk[][] = [];
+
+    for (let index = 0; index < vDisks.length; index += NODE_EXPERT_VDISKS_PER_ROW) {
+        rows.push(vDisks.slice(index, index + NODE_EXPERT_VDISKS_PER_ROW));
+    }
+
+    if (rows.length === 0) {
+        return [];
+    }
+
+    // The densest row constrains one shared scale so VDisk widths stay comparable across rows.
+    const scale = Math.min(
+        ...rows.map((row) => {
+            const gapsWidth = NODE_EXPERT_VDISK_GAP * Math.max(row.length - 1, 0);
+            const minimumItemsWidth = NODE_EXPERT_VDISK_MIN_WIDTH * row.length;
+            const availableGrowth = Math.max(pDiskWidth - gapsWidth - minimumItemsWidth, 0);
+            const totalWeight = row.reduce((sum, vDisk) => sum + getVDiskWeight(vDisk), 0);
+
+            return availableGrowth / totalWeight;
+        }),
+    );
+
+    return rows.map((row) =>
+        row.map((vDisk) => ({
+            vDisk,
+            width: NODE_EXPERT_VDISK_MIN_WIDTH + getVDiskWeight(vDisk) * scale,
+        })),
+    );
+}
+
+export function getNodeExpertVDiskRowsCount(maximumSlotsPerDisk: number, isAllMode = false) {
+    const slotsCount =
+        Number.isFinite(maximumSlotsPerDisk) && maximumSlotsPerDisk > 0
+            ? Math.ceil(maximumSlotsPerDisk)
+            : 1;
+
+    const disksPerRow = isAllMode ? NODE_EXPERT_ALL_VDISKS_PER_ROW : NODE_EXPERT_VDISKS_PER_ROW;
+
+    return Math.max(1, Math.ceil(slotsCount / disksPerRow));
+}
+
+export function getNodeExpertPDiskHeight(maximumSlotsPerDisk: number, isAllMode = false) {
+    const rowsCount = getNodeExpertVDiskRowsCount(maximumSlotsPerDisk, isAllMode);
+    const vDiskHeight = isAllMode
+        ? NODE_EXPERT_VDISK_HEIGHT +
+          NODE_EXPERT_VDISK_SIZE_INDICATOR_HEIGHT +
+          NODE_EXPERT_VDISK_SIZE_INDICATOR_GAP
+        : NODE_EXPERT_VDISK_HEIGHT;
+
+    return (
+        rowsCount * vDiskHeight +
+        (rowsCount - 1) * NODE_EXPERT_VDISK_ROW_GAP +
+        NODE_EXPERT_VDISK_PDISK_GAP +
+        PDISK_HEIGHT
+    );
+}
+
+export function getStorageNodesExpertRowHeight(maximumSlotsPerDisk: number, isAllMode = false) {
+    return (
+        getNodeExpertPDiskHeight(maximumSlotsPerDisk, isAllMode) +
+        TABLE_CELL_VERTICAL_PADDING +
+        TABLE_ROW_BORDER
+    );
+}

package/src/containers/Storage/PaginatedStorageNodesTable/PaginatedStorageNodesTable.tsx

@@ -1,13 +1,21 @@
 import React from 'react';
 
+import {useHistory} from 'react-router-dom';
+
+import {
+    getNodeHostLabel,
+    getNodeHostPath,
+} from '../../../components/NodeHostWrapper/NodeHostWrapper';
 import type {PaginatedTableData, RenderErrorMessage} from '../../../components/PaginatedTable';
 import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../../components/PaginatedTable';
+import {NODES_COLUMNS_IDS} from '../../../components/nodesColumns/constants';
 import type {NodesColumn} from '../../../components/nodesColumns/types';
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
 import type {NodesGroupByField} from '../../../types/api/nodes';
 import {cn} from '../../../utils/cn';
 import {NodesUptimeFilterValues, isUnavailableNode} from '../../../utils/nodes';
+import {STORAGE_NODES_DEFAULT_ROW_HEIGHT} from '../PaginatedStorageNodes/nodeExpertModeLayout';
 
 import {StorageNodesEmptyDataMessage} from './StorageNodesEmptyDataMessage';
 import {STORAGE_NODES_COLUMNS_WIDTH_LS_KEY} from './columns/constants';
@@ -39,6 +47,7 @@ interface PaginatedStorageNodesTableProps {
     scrollContainerRef: React.RefObject<HTMLElement>;
     renderErrorMessage: RenderErrorMessage;
     initialEntitiesCount?: number;
+    rowHeight?: number;
     onDataFetched?: (data: PaginatedTableData<PreparedStorageNode>) => void;
 }
 
@@ -56,8 +65,10 @@ export const PaginatedStorageNodesTable = ({
     scrollContainerRef,
     renderErrorMessage,
     initialEntitiesCount,
+    rowHeight = STORAGE_NODES_DEFAULT_ROW_HEIGHT,
     onDataFetched,
 }: PaginatedStorageNodesTableProps) => {
+    const history = useHistory();
     const tableFilters = React.useMemo(() => {
         return {
             searchValue,
@@ -99,11 +110,23 @@ export const PaginatedStorageNodesTable = ({
 
     return (
         <ResizeablePaginatedTable
+            getKeyboardRowKey={(node) => node.NodeId}
+            getKeyboardRowLabel={getNodeHostLabel}
+            onKeyboardActivate={(node) => {
+                const nodePath = getNodeHostPath(node, database);
+                if (nodePath) {
+                    history.push(nodePath);
+                }
+            }}
             columnsWidthLSKey={STORAGE_NODES_COLUMNS_WIDTH_LS_KEY}
             scrollContainerRef={scrollContainerRef}
             columns={columns}
             fetchData={getStorageNodes}
-            rowHeight={51}
+            rowHeight={
+                columns.some((column) => column.name === NODES_COLUMNS_IDS.PDisks)
+                    ? rowHeight
+                    : undefined
+            }
             initialEntitiesCount={initialEntitiesCount}
             renderErrorMessage={renderErrorMessage}
             renderEmptyDataMessage={renderEmptyDataMessage}

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

@@ -54,10 +54,12 @@ export const getPDisksColumn = ({
                     vDisks={row.VDisks}
                     viewContext={viewContext}
                     pDiskWidth={columnsSettings?.pDiskWidth}
+                    pDiskHeight={columnsSettings?.pDiskHeight}
+                    expertMode={columnsSettings?.expertMode}
                 />
             );
         },
-        align: DataTable.CENTER,
+        align: DataTable.LEFT,
         sortable: false,
         resizeable: false,
     };

package/src/containers/Storage/PaginatedStorageNodesTable/columns/hooks.ts

@@ -51,13 +51,19 @@ export function useStorageNodesSelectedColumns({
         return allColumns.filter((column) => !skippedColumnIds.some((id) => id === column.name));
     }, [database, viewContext, columnsSettings, skippedColumnIds]);
 
-    const requiredColumns = React.useMemo(() => {
+    const stickyColumns = React.useMemo(() => {
         if (visibleEntities === VISIBLE_ENTITIES.missing) {
             return [...REQUIRED_STORAGE_NODES_COLUMNS, NODES_COLUMNS_IDS.Missing];
         }
         return REQUIRED_STORAGE_NODES_COLUMNS;
     }, [visibleEntities]);
 
+    const requiredColumns = React.useMemo(() => {
+        return columnsSettings?.expertMode
+            ? [...stickyColumns, NODES_COLUMNS_IDS.PDisks]
+            : stickyColumns;
+    }, [columnsSettings?.expertMode, stickyColumns]);
+
     const defaultColumns = React.useMemo(() => {
         if (!bridgeModeEnabled) {
             return DEFAULT_STORAGE_NODES_COLUMNS;
@@ -73,6 +79,7 @@ export function useStorageNodesSelectedColumns({
         NODES_COLUMNS_TITLES,
         defaultColumns,
         requiredColumns,
+        stickyColumns,
     );
 
     const hiddenCapacityColumnIds = blobMetricsEnabled

package/src/containers/Storage/PaginatedStorageNodesTable/columns/types.ts

@@ -4,6 +4,8 @@ import type {StorageViewContext} from '../../types';
 export interface StorageNodesColumnsSettings {
     pDiskWidth?: number;
     pDiskContainerWidth?: number;
+    pDiskHeight?: number;
+    expertMode?: boolean;
 }
 
 export interface GetStorageNodesColumnsParams {

package/src/containers/Storage/StorageExpertModePanel/StorageGroupsExpertModePanel.tsx

@@ -0,0 +1,63 @@
+import {useStorageQueryParams} from '../useStorageQueryParams';
+
+import {ExpertModePanelLayout, ExpertModeRow} from './components/ExpertModePanelLayout';
+import type {ExpertModeOption} from './components/ExpertModePanelLayout';
+import {renderPDiskLegend, renderVDiskLegend} from './components/renderExpertModeLegend';
+import {PDisksGroupBy, VDisksGroupBy} from './constants';
+import type {PDisksGroupByValue, VDisksGroupByValue} from './constants';
+import i18n from './i18n';
+
+interface StorageGroupsExpertModePanelProps {
+    className?: string;
+}
+
+function getVDiskOptions(): ExpertModeOption<VDisksGroupByValue>[] {
+    return [
+        {value: VDisksGroupBy.State, content: i18n('value_state')},
+        {value: VDisksGroupBy.Space, content: i18n('value_space')},
+        {value: VDisksGroupBy.FrontQueues, content: i18n('value_front-queues')},
+        {value: VDisksGroupBy.Compaction, content: i18n('value_compaction')},
+        {value: VDisksGroupBy.All, content: i18n('value_all')},
+    ];
+}
+
+function getPDiskOptions(): ExpertModeOption<PDisksGroupByValue>[] {
+    return [
+        {value: PDisksGroupBy.State, content: i18n('value_pdisks-state')},
+        {value: PDisksGroupBy.Space, content: i18n('value_pdisks-space')},
+        {value: PDisksGroupBy.Drive, content: i18n('value_pdisks-drive')},
+        {value: PDisksGroupBy.Decommit, content: i18n('value_pdisks-decommit')},
+        {value: PDisksGroupBy.Maintenance, content: i18n('value_pdisks-maintenance')},
+        {value: PDisksGroupBy.Device, content: i18n('value_pdisks-device')},
+        {value: PDisksGroupBy.All, content: i18n('value_pdisks-all')},
+    ];
+}
+
+export function StorageGroupsExpertModePanel({className}: StorageGroupsExpertModePanelProps) {
+    const {vdisksGroupBy, pdisksGroupBy, handleVDisksGroupByChange, handlePDisksGroupByChange} =
+        useStorageQueryParams();
+
+    return (
+        <ExpertModePanelLayout className={className}>
+            <ExpertModeRow
+                label={i18n('label_vdisks')}
+                value={vdisksGroupBy}
+                onUpdate={handleVDisksGroupByChange}
+                options={getVDiskOptions()}
+                legend={renderVDiskLegend(vdisksGroupBy, 'vdisks')}
+            />
+            <ExpertModeRow
+                qa="storage-pdisks-expert-mode"
+                label={i18n('label_pdisks')}
+                value={pdisksGroupBy}
+                onUpdate={handlePDisksGroupByChange}
+                options={getPDiskOptions()}
+                legend={
+                    <div data-qa="storage-pdisks-expert-mode-legend">
+                        {renderPDiskLegend(pdisksGroupBy, 'pdisks')}
+                    </div>
+                }
+            />
+        </ExpertModePanelLayout>
+    );
+}

package/src/containers/Storage/StorageExpertModePanel/StorageNodesExpertModePanel.tsx

@@ -0,0 +1,67 @@
+import {useStorageQueryParams} from '../useStorageQueryParams';
+
+import {ExpertModePanelLayout, ExpertModeRow} from './components/ExpertModePanelLayout';
+import type {ExpertModeOption} from './components/ExpertModePanelLayout';
+import {renderPDiskLegend, renderVDiskLegend} from './components/renderExpertModeLegend';
+import {PDisksGroupBy, VDisksGroupBy} from './constants';
+import type {NodesPDisksGroupByValue, NodesVDisksGroupByValue} from './constants';
+import i18n from './i18n';
+
+interface StorageNodesExpertModePanelProps {
+    className?: string;
+}
+
+function getVDiskOptions(): ExpertModeOption<NodesVDisksGroupByValue>[] {
+    return [
+        {value: VDisksGroupBy.State, content: i18n('value_state')},
+        {value: VDisksGroupBy.Space, content: i18n('value_space')},
+        {value: VDisksGroupBy.FrontQueues, content: i18n('value_front-queues')},
+        {value: VDisksGroupBy.Compaction, content: i18n('value_compaction')},
+        {value: VDisksGroupBy.All, content: i18n('value_all')},
+    ];
+}
+
+function getPDiskOptions(): ExpertModeOption<NodesPDisksGroupByValue>[] {
+    return [
+        {value: PDisksGroupBy.State, content: i18n('value_pdisks-state')},
+        {value: PDisksGroupBy.Space, content: i18n('value_pdisks-space')},
+        {value: PDisksGroupBy.Drive, content: i18n('value_pdisks-drive')},
+        {value: PDisksGroupBy.Decommit, content: i18n('value_pdisks-decommit')},
+        {value: PDisksGroupBy.Maintenance, content: i18n('value_pdisks-maintenance')},
+        {value: PDisksGroupBy.Device, content: i18n('value_pdisks-device')},
+        {value: PDisksGroupBy.All, content: i18n('value_pdisks-all')},
+    ];
+}
+
+export function StorageNodesExpertModePanel({className}: StorageNodesExpertModePanelProps) {
+    const {
+        nodesVdisksGroupBy,
+        nodesPdisksGroupBy,
+        handleNodesVDisksGroupByChange,
+        handleNodesPDisksGroupByChange,
+    } = useStorageQueryParams();
+
+    return (
+        <ExpertModePanelLayout className={className}>
+            <ExpertModeRow
+                label={i18n('label_vdisks')}
+                value={nodesVdisksGroupBy}
+                onUpdate={handleNodesVDisksGroupByChange}
+                options={getVDiskOptions()}
+                legend={renderVDiskLegend(nodesVdisksGroupBy, 'nodes-vdisks')}
+            />
+            <ExpertModeRow
+                qa="storage-nodes-pdisks-expert-mode"
+                label={i18n('label_pdisks')}
+                value={nodesPdisksGroupBy}
+                onUpdate={handleNodesPDisksGroupByChange}
+                options={getPDiskOptions()}
+                legend={
+                    <div data-qa="storage-nodes-pdisks-expert-mode-legend">
+                        {renderPDiskLegend(nodesPdisksGroupBy, 'nodes-pdisks')}
+                    </div>
+                }
+            />
+        </ExpertModePanelLayout>
+    );
+}

package/src/containers/Storage/StorageExpertModePanel/components/ExpertModePanelLayout.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import {Flex, SegmentedRadioGroup, Text} from '@gravity-ui/uikit';
+
+import {b} from '../constants';
+
+import '../StorageExpertModePanel.scss';
+
+export interface ExpertModeOption<T extends string> {
+    value: T;
+    content: React.ReactNode;
+}
+
+interface ExpertModePanelLayoutProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function ExpertModePanelLayout({children, className}: ExpertModePanelLayoutProps) {
+    return <div className={b(null, className)}>{children}</div>;
+}
+
+interface ExpertModeRowProps<T extends string> {
+    label: React.ReactNode;
+    value: T;
+    onUpdate: (value: T) => void;
+    options: readonly ExpertModeOption<T>[];
+    legend: React.ReactNode;
+    qa?: string;
+}
+
+export function ExpertModeRow<T extends string>({
+    label,
+    value,
+    onUpdate,
+    options,
+    legend,
+    qa,
+}: ExpertModeRowProps<T>) {
+    const labelId = React.useId();
+
+    return (
+        <Flex gap={3} alignItems="center">
+            <Text id={labelId} variant="subheader-1">
+                {label}
+            </Text>
+            <SegmentedRadioGroup
+                aria-labelledby={labelId}
+                qa={qa}
+                value={value}
+                onUpdate={(nextValue) => onUpdate(nextValue as T)}
+                size="s"
+            >
+                {options.map((option) => (
+                    <SegmentedRadioGroup.Option key={option.value} value={option.value}>
+                        {option.content}
+                    </SegmentedRadioGroup.Option>
+                ))}
+            </SegmentedRadioGroup>
+            {legend}
+        </Flex>
+    );
+}

package/src/containers/Storage/StorageExpertModePanel/components/FrontQueuesLegend.tsx

@@ -28,6 +28,7 @@ const legendItems: FrontQueuesLegendItem[] = [
         icon: Dots9,
         className: b('label-danger-heavy'),
     },
+    {text: i18n('value_no-data'), theme: 'unknown'},
 ];
 
 export function FrontQueuesLegend({className}: FrontQueuesLegendProps) {

package/src/containers/Storage/StorageExpertModePanel/components/PDiskDecommitLegend.tsx

@@ -22,6 +22,7 @@ const legendItems: PDiskDecommitLegendItem[] = [
     {text: i18n('value_decommit-rejected'), theme: 'warning', icon: Xmark},
     {text: i18n('value_decommit-pending'), theme: 'info', icon: HourglassStart},
     {text: i18n('value_decommit-none'), theme: 'success'},
+    {text: i18n('value_no-data'), theme: 'unknown'},
 ];
 
 export function PDiskDecommitLegend({className}: PDiskDecommitLegendProps) {

package/src/containers/Storage/StorageExpertModePanel/components/PDiskDriveLegend.tsx

@@ -1,4 +1,4 @@
-import {CircleExclamation, CircleXmark, Clock, TrashBin} from '@gravity-ui/icons';
+import {CircleXmark, Clock, TrashBin, TriangleExclamation} from '@gravity-ui/icons';
 import type {IconData, LabelProps} from '@gravity-ui/uikit';
 import {Flex, Icon, Label, Text} from '@gravity-ui/uikit';
 
@@ -21,8 +21,9 @@ const legendItems: PDiskDriveLegendItem[] = [
     {text: i18n('drive_active'), theme: 'success'},
     {text: i18n('drive_inactive'), theme: 'warning', icon: Clock},
     {text: i18n('drive_to-be-removed'), theme: 'warning', icon: TrashBin},
-    {text: i18n('drive_faulty'), theme: 'danger', icon: CircleExclamation},
+    {text: i18n('drive_faulty'), theme: 'danger', icon: TriangleExclamation},
     {text: i18n('drive_broken'), theme: 'danger', icon: CircleXmark},
+    {text: i18n('value_no-data'), theme: 'unknown'},
 ];
 
 export function PDiskDriveLegend({className}: PDiskDriveLegendProps) {

package/src/containers/Storage/StorageExpertModePanel/components/PDiskMaintenanceLegend.tsx

@@ -29,6 +29,7 @@ const legendItems: PDiskMaintenanceLegendItem[] = [
         icon: Ban,
     },
     {text: i18n('value_maintenance-no-request'), theme: 'success'},
+    {text: i18n('value_no-data'), theme: 'unknown'},
 ];
 
 export function PDiskMaintenanceLegend({className}: PDiskMaintenanceLegendProps) {

package/src/containers/Storage/StorageExpertModePanel/components/SpaceLegend.tsx

@@ -102,6 +102,9 @@ export function SpaceLegend({className, selectionScope = 'vdisks'}: SpaceLegendP
                         </Label>
                     );
                 })}
+                <Label size="xs" theme="unknown">
+                    {i18n('value_no-data')}
+                </Label>
             </Flex>
             <Text className={b('empty-statistics')} color="secondary">
                 {i18n('context_no-statistics')}

package/src/containers/Storage/StorageExpertModePanel/components/StatusPairLegend.tsx

@@ -1,9 +1,4 @@
-import {
-    CircleCheckFill,
-    CircleExclamationFill,
-    CircleXmarkFill,
-    TriangleExclamationFill,
-} from '@gravity-ui/icons';
+import {CircleExclamationFill, CircleXmarkFill, TriangleExclamationFill} from '@gravity-ui/icons';
 import type {IconData, LabelProps} from '@gravity-ui/uikit';
 import {Flex, Icon, Label, Text} from '@gravity-ui/uikit';
 
@@ -18,14 +13,14 @@ interface StatusPairLegendProps {
 interface StatusPairLegendItem {
     text: string;
     theme: LabelProps['theme'];
-    icon: IconData;
+    icon?: IconData;
     className?: string;
 }
 
 const iconSize = 12;
 
 const legendItems: StatusPairLegendItem[] = [
-    {text: i18n('compaction_ok'), theme: 'success', icon: CircleCheckFill},
+    {text: i18n('compaction_ok'), theme: 'success'},
     {text: i18n('compaction_notice'), theme: 'warning', icon: TriangleExclamationFill},
     {text: i18n('compaction_warning'), theme: 'danger', icon: CircleExclamationFill},
     {
@@ -47,11 +42,14 @@ export function StatusPairLegend({className, label}: StatusPairLegendProps) {
                         size="xs"
                         theme={theme}
                         className={labelClassName}
-                        icon={<Icon data={icon} size={iconSize} />}
+                        icon={icon ? <Icon data={icon} size={iconSize} /> : undefined}
                     >
                         {text}
                     </Label>
                 ))}
+                <Label size="xs" theme="unknown">
+                    {i18n('value_no-data')}
+                </Label>
             </Flex>
             <Text className={b('empty-statistics')} color="secondary">
                 {i18n('context_no-statistics')}