ydb-embedded-ui 22.0.0 → 22.2.0

package/src/containers/Storage/VDisks/VDisks.tsx

@@ -7,10 +7,13 @@ import type {PreparedVDisk} from '../../../utils/disks/types';
 import {DISKS_POPUP_DEBOUNCE_TIMEOUT} from '../shared';
 import type {StorageViewContext} from '../types';
 import {isVdiskActive, useVDisksWithDCMargins} from '../utils';
+import {useVirtualizedDiskList} from '../utils/useVirtualizedDiskList';
 
 import './VDisks.scss';
 
 const b = cn('ydb-storage-vdisks');
+const EMPTY_VDISKS: PreparedVDisk[] = [];
+const VDiskItem = React.memo(VDiskWithDonorsStack);
 
 interface VDisksProps {
     vDisks?: PreparedVDisk[];
@@ -19,17 +22,34 @@ interface VDisksProps {
     withIcon?: boolean;
 }
 
-export function VDisks({vDisks, viewContext, erasure, withIcon}: VDisksProps) {
+export const VDisks = React.memo(function VDisks({
+    vDisks = EMPTY_VDISKS,
+    viewContext,
+    erasure,
+    withIcon,
+}: VDisksProps) {
     const vDisksWithDCMargins = useVDisksWithDCMargins(vDisks, erasure);
 
     const [highlightedVDisk, setHighlightedVDisk] = React.useState<string | undefined>();
+    const {containerRef, shouldRenderDisk, getPlaceholderProps} = useVirtualizedDiskList(
+        vDisks,
+        vDisks.every((disk) => Boolean(disk.StringifiedId)),
+    );
+
+    React.useEffect(() => {
+        setHighlightedVDisk((id) =>
+            vDisks.some((disk) => disk.StringifiedId === id) ? id : undefined,
+        );
+    }, [vDisks]);
 
     return (
-        <div className={b('wrapper')}>
-            {vDisks?.map((vDisk, index) => (
-                <VDiskWithDonorsStack
+        <div className={b('wrapper')} ref={containerRef}>
+            {vDisks.map((vDisk, index) => (
+                <VDiskItem
                     withIcon={withIcon}
-                    key={vDisk.StringifiedId}
+                    renderContent={shouldRenderDisk(index)}
+                    placeholderProps={getPlaceholderProps(index)}
+                    key={vDisk.StringifiedId || index}
                     data={vDisk}
                     inactive={!isVdiskActive(vDisk, viewContext)}
                     delayOpen={DISKS_POPUP_DEBOUNCE_TIMEOUT}
@@ -37,11 +57,13 @@ export function VDisks({vDisks, viewContext, erasure, withIcon}: VDisksProps) {
                     className={b('item', {
                         'with-dc-margin': vDisksWithDCMargins.includes(index),
                     })}
-                    highlightedVDisk={highlightedVDisk}
+                    highlightedVDisk={
+                        highlightedVDisk === vDisk.StringifiedId ? highlightedVDisk : undefined
+                    }
                     setHighlightedVDisk={setHighlightedVDisk}
                     progressBarClassName={b('vdisks-progress-bar')}
                 />
             ))}
         </div>
     );
-}
+});

package/src/containers/Storage/useStoragePDiskDisplayStateGetter.ts

@@ -12,6 +12,7 @@ import type {
     PDiskDisplayStateGetter,
 } from '../../utils/disks/displayState';
 import {getDefaultPDiskDisplayState} from '../../utils/disks/displayState';
+import {getDriveTypeDisplayState} from '../../utils/disks/driveType';
 import {calculateFlagPairIcon, calculateSpaceIcon} from '../../utils/disks/iconCalculators';
 import {
     getPDiskDecommitDisplayState,
@@ -25,10 +26,15 @@ import {
 } from '../../utils/disks/severityCalculators';
 
 import {EXPERT_MODE_ALL_PDISK_WIDTH, EXPERT_MODE_PDISK_WIDTH} from './Disks/constants';
+import type {SpaceLegendSelectionScope} from './StorageExpertModePanel/components/getSpaceLegendSelection';
 import {useSpaceLegendSelection} from './StorageExpertModePanel/components/useSpaceLegendSelection';
 import {PDisksGroupBy} from './StorageExpertModePanel/constants';
 import type {PDisksGroupByValue} from './StorageExpertModePanel/constants';
-import {useIsStorageExpertMode, usePDisksGroupByParam} from './useStorageQueryParams';
+import {
+    useIsStorageExpertMode,
+    useNodesPDisksGroupByParam,
+    usePDisksGroupByParam,
+} from './useStorageQueryParams';
 
 function getMode(groupBy: PDisksGroupByValue): DiskDisplayMode | undefined {
     switch (groupBy) {
@@ -51,18 +57,6 @@ function getMode(groupBy: PDisksGroupByValue): DiskDisplayMode | undefined {
     }
 }
 
-function requiresWhiteboardData(groupBy: PDisksGroupByValue) {
-    return groupBy === PDisksGroupBy.State || groupBy === PDisksGroupBy.Device;
-}
-
-function hasBSCStatusData(pDisk: Parameters<PDiskDisplayStateGetter>[0]) {
-    return (
-        pDisk.DriveStatus !== undefined ||
-        pDisk.DecommitStatus !== undefined ||
-        pDisk.MaintenanceStatus !== undefined
-    );
-}
-
 function getAllocatedPercent(pDisk: Parameters<PDiskDisplayStateGetter>[0]) {
     const whiteboardAllocatedPercent = pDisk.WhiteboardSize?.AllocatedPercent;
 
@@ -87,43 +81,54 @@ function isAllModeHealthy(pDisk: Parameters<PDiskDisplayStateGetter>[0]) {
 function getAllModeIndicators(
     pDisk: Parameters<PDiskDisplayStateGetter>[0],
     isCapacityAlertInactive: boolean,
+    hasWhiteboardData = true,
 ): PDiskAllModeIndicatorsState {
     const capacityAlertIcon = isCapacityAlertInactive
         ? undefined
         : calculateSpaceIcon({CapacityAlert: pDisk.PDiskCapacityAlert});
-    const driveDisplayState = getPDiskDriveDisplayState(pDisk.DriveStatus);
-    const decommitDisplayState = getPDiskDecommitDisplayState(pDisk.DecommitStatus);
-    const maintenanceDisplayState = getPDiskMaintenanceDisplayState(pDisk.MaintenanceStatus);
+    const driveIcon = getBSCStatusDisplayState(pDisk, 'drive', hasWhiteboardData)?.icon;
+    const decommitIcon = getBSCStatusDisplayState(pDisk, 'decommit', hasWhiteboardData)?.icon;
+    const maintenanceIcon = getBSCStatusDisplayState(pDisk, 'maintenance', hasWhiteboardData)?.icon;
     const deviceIcon = calculateFlagPairIcon(pDisk.Device, pDisk.Realtime);
-    const driveIcon = pDisk.DriveStatus === undefined ? CircleQuestionFill : driveDisplayState.icon;
-    const decommitIcon =
-        pDisk.DecommitStatus === undefined ? CircleQuestionFill : decommitDisplayState.icon;
-    const maintenanceIcon =
-        pDisk.MaintenanceStatus === undefined ? CircleQuestionFill : maintenanceDisplayState.icon;
 
     return {
-        ...(capacityAlertIcon ? {capacityAlert: capacityAlertIcon} : {}),
+        ...(capacityAlertIcon && (hasWhiteboardData || isCapacityAlert(pDisk.PDiskCapacityAlert))
+            ? {capacityAlert: capacityAlertIcon}
+            : {}),
         ...(driveIcon ? {drive: driveIcon} : {}),
         ...(decommitIcon ? {decommit: decommitIcon} : {}),
         ...(maintenanceIcon ? {maintenance: maintenanceIcon} : {}),
-        ...(deviceIcon ? {device: deviceIcon} : {}),
+        ...(deviceIcon && hasWhiteboardData ? {device: deviceIcon} : {}),
     };
 }
 
-function getMissingAllModeDisplayState(
+function getMissingPDiskDisplayState(
     pDisk: Parameters<PDiskDisplayStateGetter>[0],
+    mode: DiskDisplayMode | undefined,
+    inactiveAlerts: Set<ECapacityAlert>,
 ): PDiskDisplayState {
+    const isCapacityAlertInactive =
+        isCapacityAlert(pDisk.PDiskCapacityAlert) && inactiveAlerts.has(pDisk.PDiskCapacityAlert);
+    let icon: PDiskDisplayState['icon'] = getBSCStatusDisplayState(pDisk, mode, false)?.icon;
+    if (mode === 'space' && isCapacityAlert(pDisk.PDiskCapacityAlert) && !isCapacityAlertInactive) {
+        icon = calculateSpaceIcon({CapacityAlert: pDisk.PDiskCapacityAlert});
+    }
+
     return {
         severity: NOT_AVAILABLE_SEVERITY,
-        icon: undefined,
-        mode: 'all',
+        icon,
+        mode,
+        isNoData: true,
         isLegendInactive: false,
         showNoDataPlaceholder: true,
-        allocatedPercent: getAllocatedPercent(pDisk),
-        showAllocatedPercentLabel: false,
+        allocatedPercent:
+            mode === 'all' || mode === 'space' ? getAllocatedPercent(pDisk) : undefined,
+        showAllocatedPercentLabel: mode !== 'all',
         iconPlacement: 'inline',
-        width: EXPERT_MODE_ALL_PDISK_WIDTH,
-        allMode: {indicators: {}},
+        width: mode === 'all' ? EXPERT_MODE_ALL_PDISK_WIDTH : EXPERT_MODE_PDISK_WIDTH,
+        ...(mode === 'all'
+            ? {allMode: {indicators: getAllModeIndicators(pDisk, isCapacityAlertInactive, false)}}
+            : {}),
     };
 }
 
@@ -157,96 +162,43 @@ function getAllModeDisplayState(
     };
 }
 
-function getMissingStatusDisplayState(mode: DiskDisplayMode | undefined): PDiskDisplayState {
-    return {
-        severity: NOT_AVAILABLE_SEVERITY,
-        icon: undefined,
-        mode,
-        isLegendInactive: false,
-        showNoDataPlaceholder: true,
-        allocatedPercent: undefined,
-        width: mode ? EXPERT_MODE_PDISK_WIDTH : undefined,
-    };
-}
-
-interface GetStatusModeDisplayStateParams {
-    hasWhiteboardData: boolean;
-    mode: DiskDisplayMode | undefined;
-    pDisk: Parameters<PDiskDisplayStateGetter>[0];
-    pdisksGroupBy: PDisksGroupByValue;
-}
-
-function getStatusModeDisplayState({
-    hasWhiteboardData,
-    mode,
-    pDisk,
-    pdisksGroupBy,
-}: GetStatusModeDisplayStateParams): PDiskDisplayState | undefined {
-    if (pdisksGroupBy === PDisksGroupBy.Drive) {
-        if (!hasWhiteboardData && pDisk.DriveStatus === undefined) {
-            return getMissingStatusDisplayState(mode);
-        }
-
-        const driveDisplayState = getPDiskDriveDisplayState(pDisk.DriveStatus);
-
-        return {
-            ...driveDisplayState,
-            icon: pDisk.DriveStatus === undefined ? CircleQuestionFill : driveDisplayState.icon,
-            mode,
-            isLegendInactive: false,
-            showNoDataPlaceholder: false,
-            allocatedPercent: undefined,
-            width: EXPERT_MODE_PDISK_WIDTH,
-        };
-    }
-
-    if (pdisksGroupBy === PDisksGroupBy.Decommit) {
-        if (!hasWhiteboardData && pDisk.DecommitStatus === undefined) {
-            return getMissingStatusDisplayState(mode);
-        }
-
-        const decommitDisplayState = getPDiskDecommitDisplayState(pDisk.DecommitStatus);
-
-        return {
-            ...decommitDisplayState,
-            icon:
-                pDisk.DecommitStatus === undefined ? CircleQuestionFill : decommitDisplayState.icon,
-            mode,
-            isLegendInactive: false,
-            showNoDataPlaceholder: false,
-            allocatedPercent: undefined,
-            width: EXPERT_MODE_PDISK_WIDTH,
-        };
-    }
-
-    if (pdisksGroupBy === PDisksGroupBy.Maintenance) {
-        if (!hasWhiteboardData && pDisk.MaintenanceStatus === undefined) {
-            return getMissingStatusDisplayState(mode);
-        }
-
-        const maintenanceDisplayState = getPDiskMaintenanceDisplayState(pDisk.MaintenanceStatus);
-
-        return {
-            ...maintenanceDisplayState,
-            icon:
-                pDisk.MaintenanceStatus === undefined
-                    ? CircleQuestionFill
-                    : maintenanceDisplayState.icon,
-            mode,
-            isLegendInactive: false,
-            showNoDataPlaceholder: false,
-            allocatedPercent: undefined,
-            width: EXPERT_MODE_PDISK_WIDTH,
-        };
+function getBSCStatusDisplayState(
+    pDisk: Parameters<PDiskDisplayStateGetter>[0],
+    mode: DiskDisplayMode | undefined,
+    hasWhiteboardData: boolean,
+) {
+    let status: string | undefined;
+    let displayState: ReturnType<typeof getPDiskDriveDisplayState>;
+
+    switch (mode) {
+        case 'drive':
+            status = pDisk.DriveStatus;
+            displayState = getPDiskDriveDisplayState(pDisk.DriveStatus);
+            break;
+        case 'decommit':
+            status = pDisk.DecommitStatus;
+            displayState = getPDiskDecommitDisplayState(pDisk.DecommitStatus);
+            break;
+        case 'maintenance':
+            status = pDisk.MaintenanceStatus;
+            displayState = getPDiskMaintenanceDisplayState(pDisk.MaintenanceStatus);
+            break;
+        default:
+            return undefined;
     }
 
-    return undefined;
+    return {
+        ...displayState,
+        icon: status === undefined && hasWhiteboardData ? CircleQuestionFill : displayState.icon,
+    };
 }
 
-export function useStoragePDiskDisplayStateGetter(): PDiskDisplayStateGetter {
+function usePDiskDisplayStateGetter(
+    pdisksGroupBy: PDisksGroupByValue,
+    selectionScope: SpaceLegendSelectionScope,
+): PDiskDisplayStateGetter {
     const isExpertMode = useIsStorageExpertMode();
-    const pdisksGroupBy = usePDisksGroupByParam();
-    const inactiveAlerts = useSpaceLegendSelection('pdisks');
+    const inactiveAlerts = useSpaceLegendSelection(selectionScope);
 
     return React.useCallback(
         (pDisk) => {
@@ -254,32 +206,33 @@ export function useStoragePDiskDisplayStateGetter(): PDiskDisplayStateGetter {
                 return getDefaultPDiskDisplayState(pDisk);
             }
 
-            const mode = getMode(pdisksGroupBy);
-            const hasWhiteboardData = pDisk.WhiteboardSize !== undefined;
-
-            if (
-                pdisksGroupBy === PDisksGroupBy.All &&
-                !hasWhiteboardData &&
-                !hasBSCStatusData(pDisk)
-            ) {
-                return getMissingAllModeDisplayState(pDisk);
+            if (pdisksGroupBy === PDisksGroupBy.DriveType) {
+                return {
+                    ...getDriveTypeDisplayState(pDisk),
+                    width: EXPERT_MODE_PDISK_WIDTH,
+                };
             }
 
-            if (!hasWhiteboardData && requiresWhiteboardData(pdisksGroupBy)) {
-                return getMissingStatusDisplayState(mode);
+            const mode = getMode(pdisksGroupBy);
+            const hasWhiteboardData = pDisk.HasWhiteboardData ?? pDisk.WhiteboardSize !== undefined;
+
+            if (!hasWhiteboardData) {
+                return getMissingPDiskDisplayState(pDisk, mode, inactiveAlerts);
             }
 
             const allocatedPercent = getAllocatedPercent(pDisk);
 
             if (pdisksGroupBy === PDisksGroupBy.Space) {
                 const capacityAlert = pDisk.PDiskCapacityAlert;
+                const isCapacityAlertInactive =
+                    isCapacityAlert(capacityAlert) && inactiveAlerts.has(capacityAlert);
 
                 return {
                     severity: calculateSpaceSeverity({CapacityAlert: capacityAlert}),
                     icon: calculateSpaceIcon({CapacityAlert: capacityAlert}),
                     mode,
-                    isLegendInactive:
-                        isCapacityAlert(capacityAlert) && inactiveAlerts.has(capacityAlert),
+                    isLegendInactive: isCapacityAlertInactive,
+                    borderless: isCapacityAlertInactive,
                     showNoDataPlaceholder: false,
                     allocatedPercent,
                     width: EXPERT_MODE_PDISK_WIDTH,
@@ -290,15 +243,17 @@ export function useStoragePDiskDisplayStateGetter(): PDiskDisplayStateGetter {
                 return getAllModeDisplayState(pDisk, inactiveAlerts);
             }
 
-            const statusDisplayState = getStatusModeDisplayState({
-                hasWhiteboardData,
-                mode,
-                pDisk,
-                pdisksGroupBy,
-            });
+            const statusDisplayState = getBSCStatusDisplayState(pDisk, mode, hasWhiteboardData);
 
             if (statusDisplayState) {
-                return statusDisplayState;
+                return {
+                    ...statusDisplayState,
+                    mode,
+                    isLegendInactive: false,
+                    showNoDataPlaceholder: false,
+                    allocatedPercent: undefined,
+                    width: EXPERT_MODE_PDISK_WIDTH,
+                };
             }
 
             if (pdisksGroupBy === PDisksGroupBy.Device) {
@@ -335,3 +290,15 @@ export function useStoragePDiskDisplayStateGetter(): PDiskDisplayStateGetter {
         [inactiveAlerts, isExpertMode, pdisksGroupBy],
     );
 }
+
+export function useStoragePDiskDisplayStateGetter(): PDiskDisplayStateGetter {
+    const pdisksGroupBy = usePDisksGroupByParam();
+
+    return usePDiskDisplayStateGetter(pdisksGroupBy, 'pdisks');
+}
+
+export function useStorageNodesPDiskDisplayStateGetter(): PDiskDisplayStateGetter {
+    const pdisksGroupBy = useNodesPDisksGroupByParam();
+
+    return usePDiskDisplayStateGetter(pdisksGroupBy, 'nodes-pdisks');
+}

package/src/containers/Storage/useStorageQueryParams.ts

@@ -22,10 +22,17 @@ import {storageNodesGroupByParamSchema} from './PaginatedStorageNodesTable/colum
 import {
     PDisksGroupBy,
     VDisksGroupBy,
+    nodesPdisksGroupBySchema,
+    nodesVdisksGroupBySchema,
     pdisksGroupBySchema,
     vdisksGroupBySchema,
 } from './StorageExpertModePanel/constants';
-import type {PDisksGroupByValue, VDisksGroupByValue} from './StorageExpertModePanel/constants';
+import type {
+    NodesPDisksGroupByValue,
+    NodesVDisksGroupByValue,
+    PDisksGroupByValue,
+    VDisksGroupByValue,
+} from './StorageExpertModePanel/constants';
 import {STORAGE_SEARCH_PARAM_BY_TYPE} from './constants';
 
 interface StorageGroupByCleanupParams {
@@ -81,6 +88,8 @@ export function useStorageQueryParams() {
         storageExpertMode: BooleanParam,
         vdisksGroupBy: StringParam,
         pdisksGroupBy: StringParam,
+        nodesVdisksGroupBy: StringParam,
+        nodesPdisksGroupBy: StringParam,
     });
 
     const [savedStorageType, setSavedStorageType] = useSetting<StorageType>(
@@ -128,6 +137,26 @@ export function useStorageQueryParams() {
         queryParams.pdisksGroupBy ?? savedPDisksGroupBy,
     );
 
+    const [savedNodesVDisksGroupBy, setSavedNodesVDisksGroupBy] =
+        useSetting<NodesVDisksGroupByValue>(
+            SETTING_KEYS.STORAGE_NODES_VDISKS_GROUP_BY,
+            VDisksGroupBy.State,
+        );
+
+    const nodesVdisksGroupBy = nodesVdisksGroupBySchema.parse(
+        queryParams.nodesVdisksGroupBy ?? savedNodesVDisksGroupBy,
+    );
+
+    const [savedNodesPDisksGroupBy, setSavedNodesPDisksGroupBy] =
+        useSetting<NodesPDisksGroupByValue>(
+            SETTING_KEYS.STORAGE_NODES_PDISKS_GROUP_BY,
+            PDisksGroupBy.State,
+        );
+
+    const nodesPdisksGroupBy = nodesPdisksGroupBySchema.parse(
+        queryParams.nodesPdisksGroupBy ?? savedNodesPDisksGroupBy,
+    );
+
     React.useEffect(() => {
         if (queryParams.search) {
             const patch: Record<string, string | undefined> = {search: undefined};
@@ -198,6 +227,22 @@ export function useStorageQueryParams() {
         [setQueryParams, setSavedPDisksGroupBy],
     );
 
+    const handleNodesVDisksGroupByChange = React.useCallback(
+        (value: NodesVDisksGroupByValue) => {
+            setQueryParams({nodesVdisksGroupBy: value}, 'replaceIn');
+            setSavedNodesVDisksGroupBy(value);
+        },
+        [setQueryParams, setSavedNodesVDisksGroupBy],
+    );
+
+    const handleNodesPDisksGroupByChange = React.useCallback(
+        (value: NodesPDisksGroupByValue) => {
+            setQueryParams({nodesPdisksGroupBy: value}, 'replaceIn');
+            setSavedNodesPDisksGroupBy(value);
+        },
+        [setQueryParams, setSavedNodesPDisksGroupBy],
+    );
+
     const handleShowAllGroups = () => {
         handleVisibleEntitiesChange('all');
     };
@@ -235,6 +280,8 @@ export function useStorageQueryParams() {
         storageExpertMode,
         vdisksGroupBy,
         pdisksGroupBy,
+        nodesVdisksGroupBy,
+        nodesPdisksGroupBy,
 
         handleTextFilterGroupsChange,
         handleTextFilterNodesChange,
@@ -247,6 +294,8 @@ export function useStorageQueryParams() {
         handleStorageExpertModeChange,
         handleVDisksGroupByChange,
         handlePDisksGroupByChange,
+        handleNodesVDisksGroupByChange,
+        handleNodesPDisksGroupByChange,
 
         handleShowAllGroups,
         handleShowAllNodes,
@@ -296,6 +345,32 @@ export function usePDisksGroupByParam() {
     );
 }
 
+export function useNodesVDisksGroupByParam() {
+    const [queryNodesVDisksGroupBy] = useQueryParam('nodesVdisksGroupBy', StringParam);
+    const [savedNodesVDisksGroupBy] = useSetting<NodesVDisksGroupByValue>(
+        SETTING_KEYS.STORAGE_NODES_VDISKS_GROUP_BY,
+        VDisksGroupBy.State,
+    );
+
+    return React.useMemo(
+        () => nodesVdisksGroupBySchema.parse(queryNodesVDisksGroupBy ?? savedNodesVDisksGroupBy),
+        [queryNodesVDisksGroupBy, savedNodesVDisksGroupBy],
+    );
+}
+
+export function useNodesPDisksGroupByParam() {
+    const [queryNodesPDisksGroupBy] = useQueryParam('nodesPdisksGroupBy', StringParam);
+    const [savedNodesPDisksGroupBy] = useSetting<NodesPDisksGroupByValue>(
+        SETTING_KEYS.STORAGE_NODES_PDISKS_GROUP_BY,
+        PDisksGroupBy.State,
+    );
+
+    return React.useMemo(
+        () => nodesPdisksGroupBySchema.parse(queryNodesPDisksGroupBy ?? savedNodesPDisksGroupBy),
+        [queryNodesPDisksGroupBy, savedNodesPDisksGroupBy],
+    );
+}
+
 export function useSaveVDisksGroupBy() {
     const [queryVDisksGroupBy, setQueryVDisksGroupBy] = useQueryParam('vdisksGroupBy', StringParam);
     const [savedVDisksGroupBy] = useSetting<VDisksGroupByValue>(
@@ -334,6 +409,50 @@ export function useSavePDisksGroupBy() {
     }, [normalizedPDisksGroupBy, queryPDisksGroupBy, setQueryPDisksGroupBy]);
 }
 
+export function useSaveNodesVDisksGroupBy() {
+    const [queryNodesVDisksGroupBy, setQueryNodesVDisksGroupBy] = useQueryParam(
+        'nodesVdisksGroupBy',
+        StringParam,
+    );
+    const [savedNodesVDisksGroupBy] = useSetting<NodesVDisksGroupByValue>(
+        SETTING_KEYS.STORAGE_NODES_VDISKS_GROUP_BY,
+        VDisksGroupBy.State,
+    );
+
+    const normalizedNodesVDisksGroupBy = React.useMemo(
+        () => nodesVdisksGroupBySchema.parse(queryNodesVDisksGroupBy ?? savedNodesVDisksGroupBy),
+        [queryNodesVDisksGroupBy, savedNodesVDisksGroupBy],
+    );
+
+    React.useEffect(() => {
+        if (normalizedNodesVDisksGroupBy !== queryNodesVDisksGroupBy) {
+            setQueryNodesVDisksGroupBy(normalizedNodesVDisksGroupBy, 'replaceIn');
+        }
+    }, [normalizedNodesVDisksGroupBy, queryNodesVDisksGroupBy, setQueryNodesVDisksGroupBy]);
+}
+
+export function useSaveNodesPDisksGroupBy() {
+    const [queryNodesPDisksGroupBy, setQueryNodesPDisksGroupBy] = useQueryParam(
+        'nodesPdisksGroupBy',
+        StringParam,
+    );
+    const [savedNodesPDisksGroupBy] = useSetting<NodesPDisksGroupByValue>(
+        SETTING_KEYS.STORAGE_NODES_PDISKS_GROUP_BY,
+        PDisksGroupBy.State,
+    );
+
+    const normalizedNodesPDisksGroupBy = React.useMemo(
+        () => nodesPdisksGroupBySchema.parse(queryNodesPDisksGroupBy ?? savedNodesPDisksGroupBy),
+        [queryNodesPDisksGroupBy, savedNodesPDisksGroupBy],
+    );
+
+    React.useEffect(() => {
+        if (normalizedNodesPDisksGroupBy !== queryNodesPDisksGroupBy) {
+            setQueryNodesPDisksGroupBy(normalizedNodesPDisksGroupBy, 'replaceIn');
+        }
+    }, [normalizedNodesPDisksGroupBy, queryNodesPDisksGroupBy, setQueryNodesPDisksGroupBy]);
+}
+
 export function useSaveStorageExpertMode() {
     const [queryStorageExpertMode, setQueryStorageExpertMode] = useQueryParam(
         'storageExpertMode',