fix(Storage): prevent duplicating vdisks when no whiteboard

src/components/VDisk/VDisk.tsx

@@ -5,7 +5,6 @@ import routes, {createHref, getVDiskPagePath} from '../../routes';
 import {useDiskPagesAvailable} from '../../store/reducers/capabilities/hooks';
 import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
-import {stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters';
 import {isFullVDiskData} from '../../utils/disks/helpers';
 import type {PreparedVDisk} from '../../utils/disks/types';
 import {DiskStateProgressBar} from '../DiskStateProgressBar/DiskStateProgressBar';
@@ -68,7 +67,7 @@ export const VDisk = ({
             {id: data.NodeId, activeTab: STRUCTURE},
             {
                 pdiskId: data.PDiskId,
-                vdiskId: stringifyVdiskId(data.VDiskId),
+                vdiskId: data.StringifiedId,
             },
         );
     }

src/components/VDiskInfo/VDiskInfo.tsx

@@ -4,7 +4,7 @@ import {getVDiskPagePath} from '../../routes';
 import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
 import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
-import {formatStorageValuesToGb, stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters';
+import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
 import {createVDiskDeveloperUILink} from '../../utils/developerUI/developerUI';
 import {getSeverityColor} from '../../utils/disks/helpers';
 import type {PreparedVDisk} from '../../utils/disks/types';
@@ -201,10 +201,7 @@ function VDiskTitle<T extends PreparedVDisk>({data}: VDiskTitleProps<T>) {
     return (
         <div className={b('title')}>
             {vDiskInfoKeyset('vdiks-title')}
-            <EntityStatus
-                status={getSeverityColor(data.Severity)}
-                name={stringifyVdiskId(data.VDiskId)}
-            />
+            <EntityStatus status={getSeverityColor(data.Severity)} name={data.StringifiedId} />
         </div>
     );
 }

src/components/VDiskPopup/VDiskPopup.tsx

@@ -5,13 +5,11 @@ import {Label, Popup} from '@gravity-ui/uikit';
 
 import {selectNodeHostsMap} from '../../store/reducers/nodesList';
 import {EFlag} from '../../types/api/enums';
-import type {TVDiskStateInfo} from '../../types/api/vdisk';
 import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
-import {stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters';
 import {isFullVDiskData} from '../../utils/disks/helpers';
-import type {UnavailableDonor} from '../../utils/disks/types';
+import type {PreparedVDisk, UnavailableDonor} from '../../utils/disks/types';
 import {useTypedSelector} from '../../utils/hooks';
 import {bytesToGB, bytesToSpeed} from '../../utils/utils';
 import type {InfoViewerItem} from '../InfoViewer';
@@ -40,9 +38,9 @@ const prepareUnavailableVDiskData = (data: UnavailableDonor) => {
     return vdiskData;
 };
 
-const prepareVDiskData = (data: TVDiskStateInfo) => {
+const prepareVDiskData = (data: PreparedVDisk) => {
     const {
-        VDiskId,
+        StringifiedId,
         VDiskState,
         SatisfactionRank,
         DiskSpace,
@@ -56,7 +54,7 @@ const prepareVDiskData = (data: TVDiskStateInfo) => {
     } = data;
 
     const vdiskData: InfoViewerItem[] = [
-        {label: 'VDisk', value: stringifyVdiskId(VDiskId)},
+        {label: 'VDisk', value: StringifiedId},
         {label: 'State', value: VDiskState ?? 'not available'},
     ];
 
@@ -130,7 +128,7 @@ const prepareVDiskData = (data: TVDiskStateInfo) => {
 };
 
 interface VDiskPopupProps extends PopupProps {
-    data: TVDiskStateInfo | UnavailableDonor;
+    data: PreparedVDisk | UnavailableDonor;
 }
 
 export const VDiskPopup = ({data, ...props}: VDiskPopupProps) => {

src/containers/Storage/Disks/Disks.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import {VDiskWithDonorsStack} from '../../../components/VDisk/VDiskWithDonorsStack';
 import {cn} from '../../../utils/cn';
-import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import {getPDiskId} from '../../../utils/disks/helpers';
 import type {PreparedVDisk} from '../../../utils/disks/types';
 import {PDisk} from '../PDisk';
@@ -30,7 +29,7 @@ export function Disks({vDisks = [], viewContext}: DisksProps) {
             <div className={b('vdisks-wrapper')}>
                 {vDisks?.map((vDisk) => (
                     <VDiskItem
-                        key={stringifyVdiskId(vDisk.VDiskId)}
+                        key={vDisk.StringifiedId}
                         vDisk={vDisk}
                         inactive={!isVdiskActive(vDisk, viewContext)}
                         highlightedVDisk={highlightedVDisk}
@@ -64,7 +63,7 @@ function VDiskItem({vDisk, highlightedVDisk, inactive, setHighlightedVDisk}: Dis
     // Do not show PDisk popup for VDisk
     const vDiskToShow = {...vDisk, PDisk: undefined};
 
-    const vDiskId = stringifyVdiskId(vDisk.VDiskId);
+    const vDiskId = vDisk.StringifiedId;
 
     return (
         <div
@@ -87,7 +86,7 @@ function VDiskItem({vDisk, highlightedVDisk, inactive, setHighlightedVDisk}: Dis
 }
 
 function PDiskItem({vDisk, highlightedVDisk, setHighlightedVDisk}: DisksItemProps) {
-    const vDiskId = stringifyVdiskId(vDisk.VDiskId);
+    const vDiskId = vDisk.StringifiedId;
 
     if (!vDisk.PDisk) {
         return null;

src/containers/Storage/PDisk/PDisk.tsx

@@ -8,7 +8,6 @@ import routes, {createHref, getPDiskPagePath} from '../../../routes';
 import {useDiskPagesAvailable} from '../../../store/reducers/capabilities/hooks';
 import {valueIsDefined} from '../../../utils';
 import {cn} from '../../../utils/cn';
-import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import type {PreparedPDisk, PreparedVDisk} from '../../../utils/disks/types';
 import {STRUCTURE} from '../../Node/NodePages';
 import type {StorageViewContext} from '../types';
@@ -68,7 +67,7 @@ export const PDisk = ({
                 {vDisks.map((vdisk) => {
                     return (
                         <div
-                            key={stringifyVdiskId(vdisk.VDiskId)}
+                            key={vdisk.StringifiedId}
                             className={b('vdisks-item')}
                             style={{
                                 // 1 is small enough for empty disks to be of the minimum width

src/containers/Storage/StorageGroups/columns/columns.tsx

@@ -13,7 +13,7 @@ import {getStorageGroupPath} from '../../../../routes';
 import {valueIsDefined} from '../../../../utils';
 import {cn} from '../../../../utils/cn';
 import {EMPTY_DATA_PLACEHOLDER} from '../../../../utils/constants';
-import {formatNumber, stringifyVdiskId} from '../../../../utils/dataFormatters/dataFormatters';
+import {formatNumber} from '../../../../utils/dataFormatters/dataFormatters';
 import {isSortableStorageProperty} from '../../../../utils/storage';
 import {formatToMs} from '../../../../utils/timeParsers';
 import {bytesToGB, bytesToSpeed} from '../../../../utils/utils';
@@ -217,7 +217,7 @@ const getVDisksColumn = (data?: GetStorageColumnsData): StorageGroupsColumn => (
         <div className={b('vdisks-wrapper')}>
             {row.VDisks?.map((vDisk) => (
                 <VDiskWithDonorsStack
-                    key={stringifyVdiskId(vDisk.VDiskId)}
+                    key={vDisk.StringifiedId}
                     data={vDisk}
                     inactive={!isVdiskActive(vDisk, data?.viewContext)}
                     className={b('vdisks-item')}

src/containers/VDiskPage/VDiskPage.tsx

@@ -19,7 +19,6 @@ import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {vDiskApi} from '../../store/reducers/vdisk/vdisk';
 import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
-import {stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters';
 import {getSeverityColor, getVDiskSlotBasedId} from '../../utils/disks/helpers';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
 import {StorageWrapper} from '../Storage/StorageWrapper';
@@ -142,7 +141,7 @@ export function VDiskPage() {
                 className={vDiskPageCn('title')}
                 entityName={vDiskPageKeyset('vdisk')}
                 status={getSeverityColor(Severity)}
-                id={stringifyVdiskId(vDiskData?.VDiskId)}
+                id={vDiskData?.StringifiedId}
             />
         );
     };

src/store/reducers/storage/utils.ts

@@ -263,20 +263,40 @@ export function prepareGroupsResponse(data: StorageGroupsResponse): PreparedStor
         } = group;
 
         const vDisks = VDisks.map((disk) => {
-            const whiteboardVDisk = disk.Whiteboard;
-            const whiteboardPDisk = disk.PDisk?.Whiteboard;
+            const {
+                Whiteboard: whiteboardVDisk,
+                PDisk,
+                VDiskId,
+                NodeId,
+                AllocatedSize,
+                AvailableSize,
+                DiskSpace,
+                Status,
+            } = disk;
+            const whiteboardPDisk = PDisk?.Whiteboard;
 
-            const NodeId = disk.NodeId;
             const PDiskId = whiteboardPDisk?.PDiskId;
 
             const whiteboardVDiskData = {
                 ...whiteboardVDisk,
                 PDiskId,
                 NodeId,
+                AllocatedSize,
+                AvailableSize,
+                DiskSpace,
+                Status,
                 PDisk: {...whiteboardPDisk, NodeId},
             };
 
-            return prepareVDiskData(whiteboardVDiskData);
+            const preparedVDiskData = prepareVDiskData(whiteboardVDiskData);
+
+            return {
+                ...preparedVDiskData,
+                // There might be no Whiteboard data if cluster is not healthy
+                // StringifiedId is formed from Whiteboard.VDiskId object
+                // Use VDiskId string from backend in such case
+                StringifiedId: preparedVDiskData.StringifiedId || VDiskId,
+            };
         });
 
         const diskSpaceStatus = getGroupDiskSpaceStatus(group);

src/utils/disks/prepareDisks.ts

@@ -1,5 +1,6 @@
 import type {TPDiskInfo, TPDiskStateInfo} from '../../types/api/pdisk';
 import type {TVDiskStateInfo} from '../../types/api/vdisk';
+import {stringifyVdiskId} from '../dataFormatters/dataFormatters';
 
 import {calculatePDiskSeverity} from './calculatePDiskSeverity';
 import {calculateVDiskSeverity} from './calculateVDiskSeverity';
@@ -28,12 +29,15 @@ export function prepareVDiskData(vdiskState: TVDiskStateInfo = {}): PreparedVDis
 
     const Severity = calculateVDiskSeverity(vdiskState);
 
+    const StringifiedId = stringifyVdiskId(vdiskState.VDiskId);
+
     return {
         ...vdiskState,
         PDisk,
         PDiskId,
         Donors,
         Severity,
+        StringifiedId,
 
         TotalSize: total,
         AllocatedPercent: allocatedPercent,

src/utils/disks/types.ts

@@ -16,6 +16,7 @@ export type PreparedPDisk = TPDiskStateInfo &
 export interface PreparedVDisk extends TVDiskStateInfo {
     PDisk?: PreparedPDisk;
     Severity?: number;
+    StringifiedId?: string;
 
     TotalSize?: number;
     AllocatedPercent?: number;