fix(Storage): fix disks view for degraded group (#1930)

Author: artemmufazalov

src/containers/Storage/Disks/Disks.tsx

@@ -3,9 +3,10 @@ import React from 'react';
 import {Flex, useLayoutContext} from '@gravity-ui/uikit';
 
 import {VDisk} from '../../../components/VDisk/VDisk';
-import {valueIsDefined} from '../../../utils';
+import type {Erasure} from '../../../types/api/storage';
 import {cn} from '../../../utils/cn';
 import type {PreparedVDisk} from '../../../utils/disks/types';
+import {isNumeric} from '../../../utils/utils';
 import {PDisk} from '../PDisk';
 import type {StorageViewContext} from '../types';
 import {isVdiskActive, useVDisksWithDCMargins} from '../utils';
@@ -19,12 +20,13 @@ const VDISKS_CONTAINER_WIDTH = 300;
 interface DisksProps {
     vDisks?: PreparedVDisk[];
     viewContext?: StorageViewContext;
+    erasure?: Erasure;
 }
 
-export function Disks({vDisks = [], viewContext}: DisksProps) {
+export function Disks({vDisks = [], viewContext, erasure}: DisksProps) {
     const [highlightedVDisk, setHighlightedVDisk] = React.useState<string | undefined>();
 
-    const vDisksWithDCMargins = useVDisksWithDCMargins(vDisks);
+    const vDisksWithDCMargins = useVDisksWithDCMargins(vDisks, erasure);
 
     const {
         theme: {spaceBaseSize},
@@ -40,9 +42,9 @@ export function Disks({vDisks = [], viewContext}: DisksProps) {
     return (
         <div className={b(null)}>
             <Flex direction={'row'} gap={1} grow style={{width: VDISKS_CONTAINER_WIDTH}}>
-                {vDisks?.map((vDisk) => (
+                {vDisks?.map((vDisk, index) => (
                     <VDiskItem
-                        key={vDisk.StringifiedId}
+                        key={vDisk.StringifiedId || index}
                         vDisk={vDisk}
                         inactive={!isVdiskActive(vDisk, viewContext)}
                         highlightedVDisk={highlightedVDisk}
@@ -55,7 +57,7 @@ export function Disks({vDisks = [], viewContext}: DisksProps) {
             <div className={b('pdisks-wrapper')}>
                 {vDisks?.map((vDisk, index) => (
                     <PDiskItem
-                        key={vDisk?.PDisk?.StringifiedId}
+                        key={vDisk?.PDisk?.StringifiedId || index}
                         vDisk={vDisk}
                         highlightedVDisk={highlightedVDisk}
                         setHighlightedVDisk={setHighlightedVDisk}
@@ -89,7 +91,7 @@ function VDiskItem({
     const vDiskId = vDisk.StringifiedId;
 
     // show vdisks without AllocatedSize as having average width (#1433)
-    const minWidth = valueIsDefined(vDiskToShow.AllocatedSize) ? undefined : unavailableVDiskWidth;
+    const minWidth = isNumeric(vDiskToShow.AllocatedSize) ? undefined : unavailableVDiskWidth;
     const flexGrow = Number(vDiskToShow.AllocatedSize) || 1;
 
     return (

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

@@ -236,7 +236,9 @@ const getVDisksColumn = (data?: GetStorageColumnsData): StorageGroupsColumn => (
     name: STORAGE_GROUPS_COLUMNS_IDS.VDisks,
     header: STORAGE_GROUPS_COLUMNS_TITLES.VDisks,
     className: b('vdisks-column'),
-    render: ({row}) => <VDisks vDisks={row.VDisks} viewContext={data?.viewContext} />,
+    render: ({row}) => (
+        <VDisks vDisks={row.VDisks} viewContext={data?.viewContext} erasure={row.ErasureSpecies} />
+    ),
     align: DataTable.CENTER,
     width: 780, // usually 8-9 vdisks, this width corresponds to 8 vdisks, column is expanded if more
     resizeable: false,
@@ -248,7 +250,13 @@ const getDisksColumn = (data?: GetStorageColumnsData): StorageGroupsColumn => ({
     header: STORAGE_GROUPS_COLUMNS_TITLES.VDisksPDisks,
     className: b('disks-column'),
     render: ({row}) => {
-        return <Disks vDisks={row.VDisks} viewContext={data?.viewContext} />;
+        return (
+            <Disks
+                vDisks={row.VDisks}
+                viewContext={data?.viewContext}
+                erasure={row.ErasureSpecies}
+            />
+        );
     },
     align: DataTable.CENTER,
     width: 900,

src/containers/Storage/VDisks/VDisks.tsx

@@ -1,4 +1,5 @@
 import {VDiskWithDonorsStack} from '../../../components/VDisk/VDiskWithDonorsStack';
+import type {Erasure} from '../../../types/api/storage';
 import {cn} from '../../../utils/cn';
 import type {PreparedVDisk} from '../../../utils/disks/types';
 import type {StorageViewContext} from '../types';
@@ -11,10 +12,11 @@ const b = cn('ydb-storage-vdisks');
 interface VDisksProps {
     vDisks?: PreparedVDisk[];
     viewContext?: StorageViewContext;
+    erasure?: Erasure;
 }
 
-export function VDisks({vDisks, viewContext}: VDisksProps) {
-    const vDisksWithDCMargins = useVDisksWithDCMargins(vDisks);
+export function VDisks({vDisks, viewContext, erasure}: VDisksProps) {
+    const vDisksWithDCMargins = useVDisksWithDCMargins(vDisks, erasure);
 
     return (
         <div className={b('wrapper')}>

src/containers/Storage/utils/index.ts

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {selectNodesMap} from '../../../store/reducers/nodesList';
 import type {PreparedStorageGroup} from '../../../store/reducers/storage/types';
+import type {Erasure} from '../../../types/api/storage';
 import {valueIsDefined} from '../../../utils';
 import type {PreparedVDisk} from '../../../utils/disks/types';
 import {generateEvaluator} from '../../../utils/generateEvaluator';
@@ -84,12 +85,22 @@ export function getStorageGroupsInitialEntitiesCount(
     return DEFAULT_ENTITIES_COUNT;
 }
 
-export function useVDisksWithDCMargins(vDisks: PreparedVDisk[] = []) {
+function isErasureWithDifferentDC(erasure?: Erasure) {
+    // These erasure types suppose the data distributed across 3 different DC
+    return erasure === 'mirror-3-dc' || erasure === 'mirror-3of4';
+}
+
+export function useVDisksWithDCMargins(vDisks: PreparedVDisk[] = [], erasure?: Erasure) {
     const nodesMap = useTypedSelector(selectNodesMap);
 
     return React.useMemo(() => {
         const disksWithMargins: number[] = [];
 
+        // If single-dc erasure, all disks are in the same DC
+        if (!isErasureWithDifferentDC(erasure)) {
+            return disksWithMargins;
+        }
+
         // Backend returns disks sorted by DC, so we don't need to apply any additional sorting
         vDisks.forEach((disk, index) => {
             const dc1 = nodesMap?.get(Number(disk?.NodeId))?.DC;
@@ -101,5 +112,5 @@ export function useVDisksWithDCMargins(vDisks: PreparedVDisk[] = []) {
         });
 
         return disksWithMargins;
-    }, [vDisks, nodesMap]);
+    }, [erasure, vDisks, nodesMap]);
 }

src/store/reducers/storage/__tests__/prepareGroupsDisks.test.ts

@@ -95,7 +95,19 @@ describe('prepareGroupsVDisk', () => {
             AllocatedPercent: 12,
 
             Donors: undefined,
-            PDisk: undefined,
+
+            PDisk: {
+                AllocatedPercent: NaN,
+                AllocatedSize: NaN,
+                AvailableSize: NaN,
+                NodeId: 224,
+                PDiskId: undefined,
+                Severity: 0,
+                SlotSize: undefined,
+                StringifiedId: undefined,
+                TotalSize: NaN,
+                Type: undefined,
+            },
         };
 
         const preparedData = prepareGroupsVDisk(vDiksDataWithoutPDisk);
@@ -124,6 +136,19 @@ describe('prepareGroupsVDisk', () => {
             AvailableSize: 234461593600,
             TotalSize: 265405071360,
             AllocatedPercent: 12,
+
+            PDisk: {
+                AllocatedPercent: NaN,
+                AllocatedSize: NaN,
+                AvailableSize: NaN,
+                NodeId: 224,
+                PDiskId: undefined,
+                Severity: 0,
+                SlotSize: undefined,
+                StringifiedId: undefined,
+                TotalSize: NaN,
+                Type: undefined,
+            },
         };
 
         const preparedData = prepareGroupsVDisk(vDiksDataWithoutPDisk);
@@ -215,7 +240,19 @@ describe('prepareGroupsVDisk', () => {
             AllocatedPercent: 12,
 
             Donors: undefined,
-            PDisk: undefined,
+
+            PDisk: {
+                AllocatedPercent: NaN,
+                AllocatedSize: NaN,
+                AvailableSize: NaN,
+                NodeId: undefined,
+                PDiskId: undefined,
+                Severity: 0,
+                SlotSize: undefined,
+                StringifiedId: undefined,
+                TotalSize: NaN,
+                Type: undefined,
+            },
         };
 
         const preparedData = prepareGroupsVDisk(vDiksDataWithoutPDisk);

src/store/reducers/storage/prepareGroupsDisks.ts

@@ -16,9 +16,7 @@ export function prepareGroupsVDisk(data: TStorageVDisk = {}): PreparedVDisk {
         VDiskId: whiteboardVDisk.VDiskId,
     };
 
-    const preparedPDisk = PDisk
-        ? prepareGroupsPDisk({...PDisk, NodeId: mergedVDiskData.NodeId})
-        : undefined;
+    const preparedPDisk = prepareGroupsPDisk({...PDisk, NodeId: mergedVDiskData.NodeId});
 
     const PDiskId = preparedPDisk?.PDiskId ?? whiteboardVDisk?.PDiskId;
 

src/store/reducers/storage/types.ts

@@ -2,7 +2,7 @@ import {z} from 'zod';
 
 import type {EFlag} from '../../../types/api/enums';
 import type {NodesGroupByField} from '../../../types/api/nodes';
-import type {GroupsGroupByField} from '../../../types/api/storage';
+import type {Erasure, GroupsGroupByField} from '../../../types/api/storage';
 import type {PreparedPDisk, PreparedVDisk} from '../../../utils/disks/types';
 import type {NodesUptimeFilterValues, PreparedNodeSystemState} from '../../../utils/nodes';
 
@@ -56,7 +56,7 @@ export interface PreparedStorageGroup {
     PoolName?: string;
     MediaType?: string;
     Encryption?: boolean;
-    ErasureSpecies?: string;
+    ErasureSpecies?: Erasure;
     Degraded: number;
     Overall?: EFlag;
 

src/types/api/cluster.ts

@@ -1,4 +1,5 @@
 import type {EFlag} from './enums';
+import type {Erasure} from './storage';
 import type {TTabletStateInfo} from './tablet';
 
 /**
@@ -38,7 +39,7 @@ export interface TClusterInfoV1 {
 
 export interface TStorageStats {
     PDiskFilter?: string;
-    ErasureSpecies?: string;
+    ErasureSpecies?: Erasure;
     CurrentAvailableSize?: string;
     /** uint64 */
     CurrentAllocatedSize?: string;

src/types/api/storage.ts

@@ -66,7 +66,7 @@ export type TStorageGroupInfo = TBSGroupStateInfo &
 
 interface TBSGroupStateInfo {
     GroupID?: number;
-    ErasureSpecies?: string;
+    ErasureSpecies?: Erasure;
     VDisks?: TVDiskStateInfo[];
     /** uint64 */
     ChangeTime?: string;
@@ -137,7 +137,7 @@ export interface TGroupsStorageGroupInfo {
     DiskSpace?: EFlag;
     Kind?: string;
     MediaType?: string;
-    ErasureSpecies?: string;
+    ErasureSpecies?: Erasure;
     /** uint64 */
     AllocationUnits?: string;
     /**
@@ -228,6 +228,11 @@ export interface TStoragePDisk {
     Whiteboard?: TPDiskStateInfo;
 }
 
+/**
+ * https://ydb.tech/docs/en/concepts/topology#cluster-config
+ */
+export type Erasure = 'none' | 'block-4-2' | 'mirror-3-dc' | 'mirror-3of4';
+
 // ==== Request types ====
 
 export type EVersion = 'v1' | 'v2'; // only v2 versions works with sorting