ydb-embedded-ui 22.0.0 → 22.1.0

package/src/containers/Storage/useStoragePDiskDisplayStateGetter.ts

@@ -25,10 +25,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 +56,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 +80,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 +161,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) => {
@@ -255,31 +206,25 @@ export function useStoragePDiskDisplayStateGetter(): PDiskDisplayStateGetter {
             }
 
             const mode = getMode(pdisksGroupBy);
-            const hasWhiteboardData = pDisk.WhiteboardSize !== undefined;
-
-            if (
-                pdisksGroupBy === PDisksGroupBy.All &&
-                !hasWhiteboardData &&
-                !hasBSCStatusData(pDisk)
-            ) {
-                return getMissingAllModeDisplayState(pDisk);
-            }
+            const hasWhiteboardData = pDisk.HasWhiteboardData ?? pDisk.WhiteboardSize !== undefined;
 
-            if (!hasWhiteboardData && requiresWhiteboardData(pdisksGroupBy)) {
-                return getMissingStatusDisplayState(mode);
+            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 +235,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 +282,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',

package/src/containers/Storage/useStorageVDiskDisplayStateGetter.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {CircleXmarkFill, ClockFill} from '@gravity-ui/icons';
+
 import {ECapacityAlert, EFlag, isCapacityAlert} from '../../types/api/enums';
 import {EVDiskState} from '../../types/api/vdisk';
 import {
@@ -22,11 +24,17 @@ import {
     calculateCompactionIcon,
     calculateFrontQueuesIcon,
     calculateSpaceIcon,
+    calculateStateIcon,
 } from '../../utils/disks/iconCalculators';
 import type {PreparedVDisk} from '../../utils/disks/types';
 
+import type {SpaceLegendSelectionScope} from './StorageExpertModePanel/components/getSpaceLegendSelection';
 import {useSpaceLegendSelection} from './StorageExpertModePanel/components/useSpaceLegendSelection';
-import {useIsStorageExpertMode, useVDisksGroupByParam} from './useStorageQueryParams';
+import {
+    useIsStorageExpertMode,
+    useNodesVDisksGroupByParam,
+    useVDisksGroupByParam,
+} from './useStorageQueryParams';
 
 function getMode(groupBy: VDisksGroupByValue): DiskDisplayMode {
     switch (groupBy) {
@@ -71,7 +79,7 @@ function getAllModeIndicators(
     return {
         ...(capacityAlert ? {capacityAlert} : {}),
         ...(frontQueues ? {frontQueues} : {}),
-        ...(compaction ? {compaction} : {}),
+        ...(compaction?.length ? {compaction} : {}),
     };
 }
 
@@ -103,14 +111,22 @@ function getMissingVDiskDisplayState(
     vDisk: PreparedVDisk,
     isDonor: boolean | undefined,
     mode: DiskDisplayMode,
+    showNoDataPlaceholder: boolean,
 ): VDiskDisplayState {
     const isAllMode = mode === 'all';
+    let icon: VDiskDisplayState['icon'];
+    if (isDonor) {
+        icon = calculateStateIcon(vDisk, isDonor);
+    } else if (mode === 'state' || isAllMode) {
+        icon = getKnownVDiskStateIcon(vDisk);
+    }
     const displayState: VDiskDisplayState = {
         severity: NOT_AVAILABLE_SEVERITY,
-        icon: undefined,
+        icon,
         mode,
+        isNoData: true,
         isLegendInactive: false,
-        showNoDataPlaceholder: true,
+        showNoDataPlaceholder,
         allocatedPercent: isAllMode ? vDisk.AllocatedPercent : undefined,
         showAllocatedPercentLabel: !isAllMode,
         striped: Boolean(isDonor),
@@ -124,9 +140,25 @@ function getMissingVDiskDisplayState(
     return displayState;
 }
 
+function getKnownVDiskStateIcon(vDisk: PreparedVDisk) {
+    if (vDisk.VDiskState !== undefined) {
+        return calculateStateIcon(vDisk);
+    }
+
+    switch (vDisk.Status) {
+        case 'ERROR':
+            return CircleXmarkFill;
+        case 'INIT_PENDING':
+            return ClockFill;
+        default:
+            return undefined;
+    }
+}
+
 interface GetExpertVDiskDisplayStateParams {
     inactiveLegendItems: Set<ECapacityAlert>;
     isDonor?: boolean;
+    selectionScope: SpaceLegendSelectionScope;
     vDisk: PreparedVDisk;
     vdisksGroupBy: VDisksGroupByValue;
 }
@@ -134,12 +166,13 @@ interface GetExpertVDiskDisplayStateParams {
 function getExpertVDiskDisplayState({
     inactiveLegendItems,
     isDonor,
+    selectionScope,
     vDisk,
     vdisksGroupBy,
 }: GetExpertVDiskDisplayStateParams): VDiskDisplayState {
     const mode = getMode(vdisksGroupBy);
-    if (!vDisk.VDiskId) {
-        return getMissingVDiskDisplayState(vDisk, isDonor, mode);
+    if (!(vDisk.HasWhiteboardData ?? Boolean(vDisk.VDiskId))) {
+        return getMissingVDiskDisplayState(vDisk, isDonor, mode, selectionScope !== 'nodes-vdisks');
     }
 
     const severity = getSeverityCalculator(vdisksGroupBy)(vDisk);
@@ -147,11 +180,18 @@ function getExpertVDiskDisplayState({
     const isCapacityAlertInactive =
         isCapacityAlert(vDisk.CapacityAlert) && inactiveLegendItems.has(vDisk.CapacityAlert);
     const allMode = getAllModeDisplayState(mode, vDisk, isDonor, isCapacityAlertInactive);
+    const spaceBorderless = mode === 'space' && isCapacityAlertInactive;
+    const stateBorderless =
+        mode === 'state' &&
+        !isDonor &&
+        (severity === DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Green ||
+            severity === DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Yellow);
     const displayState: VDiskDisplayState = {
         severity,
         icon,
         mode,
         isLegendInactive: mode === 'space' && isCapacityAlertInactive,
+        borderless: spaceBorderless || stateBorderless,
         showNoDataPlaceholder: false,
         allocatedPercent: mode === 'all' ? vDisk.AllocatedPercent : undefined,
         showAllocatedPercentLabel: mode !== 'all',
@@ -166,10 +206,12 @@ function getExpertVDiskDisplayState({
     return displayState;
 }
 
-export function useStorageVDiskDisplayStateGetter(): VDiskDisplayStateGetter {
+function useVDiskDisplayStateGetter(
+    vdisksGroupBy: VDisksGroupByValue,
+    selectionScope: SpaceLegendSelectionScope,
+): VDiskDisplayStateGetter {
     const isExpertMode = useIsStorageExpertMode();
-    const vdisksGroupBy = useVDisksGroupByParam();
-    const inactiveLegendItems = useSpaceLegendSelection();
+    const inactiveLegendItems = useSpaceLegendSelection(selectionScope);
 
     return React.useCallback(
         (vDisk, isDonor) => {
@@ -180,10 +222,23 @@ export function useStorageVDiskDisplayStateGetter(): VDiskDisplayStateGetter {
             return getExpertVDiskDisplayState({
                 inactiveLegendItems,
                 isDonor,
+                selectionScope,
                 vDisk,
                 vdisksGroupBy,
             });
         },
-        [inactiveLegendItems, isExpertMode, vdisksGroupBy],
+        [inactiveLegendItems, isExpertMode, selectionScope, vdisksGroupBy],
     );
 }
+
+export function useStorageVDiskDisplayStateGetter(): VDiskDisplayStateGetter {
+    const vdisksGroupBy = useVDisksGroupByParam();
+
+    return useVDiskDisplayStateGetter(vdisksGroupBy, 'vdisks');
+}
+
+export function useStorageNodesVDiskDisplayStateGetter(): VDiskDisplayStateGetter {
+    const vdisksGroupBy = useNodesVDisksGroupByParam();
+
+    return useVDiskDisplayStateGetter(vdisksGroupBy, 'nodes-vdisks');
+}