Fix VDisk tablets table display issue by handling multiple API response structures

Co-authored-by: adameat <[email protected]>

Author: Copilot

src/containers/VDiskPage/VDiskTablets/VDiskTablets.tsx

@@ -33,13 +33,57 @@ export function VDiskTablets({nodeId, pDiskId, vDiskSlotId, className}: VDiskTab
     });
 
     const loading = isFetching && currentData === undefined;
-    const tableData: VDiskBlobIndexItem[] = currentData?.BlobIndexStat || [];
+    
+    // Debug: Log the actual response to understand the structure
+    React.useEffect(() => {
+        if (currentData) {
+            console.log('VDisk BlobIndexStat Response:', currentData);
+            console.log('Response keys:', Object.keys(currentData));
+            console.log('BlobIndexStat field:', currentData.BlobIndexStat);
+            console.log('blobIndexStat field:', currentData.blobIndexStat);
+            console.log('blobindexstat field:', currentData.blobindexstat);
+            console.log('result field:', currentData.result);
+            console.log('data field:', currentData.data);
+        }
+    }, [currentData]);
+    
+    // Try multiple possible field names for the data array
+    const tableData: VDiskBlobIndexItem[] = React.useMemo(() => {
+        if (!currentData) return [];
+        
+        // Try different possible field names
+        const possibleFields = [
+            currentData.BlobIndexStat,
+            currentData.blobIndexStat,
+            currentData.blobindexstat,
+            currentData.result,
+            currentData.data,
+        ];
+        
+        for (const field of possibleFields) {
+            if (Array.isArray(field)) {
+                console.log('Using field:', field);
+                return field;
+            }
+        }
+        
+        // If none of the expected fields work, try to find any array in the response
+        for (const [key, value] of Object.entries(currentData)) {
+            if (Array.isArray(value)) {
+                console.log('Found array field:', key, value);
+                return value;
+            }
+        }
+        
+        console.log('No array found in response, returning empty array');
+        return [];
+    }, [currentData]);
 
     // Sort by size descending by default
     const sortedData = React.useMemo(() => {
         return [...tableData].sort((a, b) => {
-            const sizeA = Number(a.Size) || 0;
-            const sizeB = Number(b.Size) || 0;
+            const sizeA = Number(a.Size ?? a.size) || 0;
+            const sizeB = Number(b.Size ?? b.size) || 0;
             return sizeB - sizeA;
         });
     }, [tableData]);

src/containers/VDiskPage/VDiskTablets/columns.tsx

@@ -10,8 +10,9 @@ import {vDiskPageKeyset} from '../i18n';
 
 const b = cn('ydb-vdisk-tablets');
 
-function TabletIdCell({getValue}: CellContext<VDiskBlobIndexItem, unknown>) {
-    const tabletId = getValue<string | number>();
+function TabletIdCell({row}: CellContext<VDiskBlobIndexItem, unknown>) {
+    const item = row.original;
+    const tabletId = item.TabletId || item.tabletId;
 
     if (!tabletId) {
         return <span>-</span>;
@@ -20,13 +21,26 @@ function TabletIdCell({getValue}: CellContext<VDiskBlobIndexItem, unknown>) {
     return <InternalLink to={getTabletPagePath(String(tabletId))}>{tabletId}</InternalLink>;
 }
 
-function MetricsCell({getValue}: CellContext<VDiskBlobIndexItem, unknown>) {
-    const value = getValue<string | number>();
+function MetricsCell({row, column}: CellContext<VDiskBlobIndexItem, unknown>) {
+    const item = row.original;
+    const fieldName = column.id;
+    
+    // Handle both PascalCase and camelCase field names
+    let value;
+    if (fieldName === 'ChannelId') {
+        value = item.ChannelId ?? item.channelId;
+    } else if (fieldName === 'Count') {
+        value = item.Count ?? item.count;
+    } else {
+        value = item[fieldName];
+    }
+    
     return <span className={b('metrics-cell')}>{value ?? '-'}</span>;
 }
 
-function SizeCell({getValue}: CellContext<VDiskBlobIndexItem, unknown>) {
-    const size = getValue<string | number>();
+function SizeCell({row}: CellContext<VDiskBlobIndexItem, unknown>) {
+    const item = row.original;
+    const size = item.Size ?? item.size;
     const numericSize = Number(size) || 0;
     return <span className={b('size-cell')}>{formatBytes(numericSize)}</span>;
 }

src/types/api/vdiskBlobIndex.ts

@@ -7,19 +7,37 @@
 export interface VDiskBlobIndexItem {
     /** Tablet ID */
     TabletId?: string | number;
+    /** Alternative field name for Tablet ID */
+    tabletId?: string | number;
     /** Channel ID */
     ChannelId?: number;
+    /** Alternative field name for Channel ID */
+    channelId?: number;
     /** Count */
     Count?: number;
+    /** Alternative field name for Count */
+    count?: number;
     /** Size in bytes */
     Size?: number | string;
+    /** Alternative field name for Size */
+    size?: number | string;
+    /** Allow for other possible field names */
+    [key: string]: any;
 }
 
 export interface VDiskBlobIndexResponse {
     /** Array of blob index statistics */
     BlobIndexStat?: VDiskBlobIndexItem[];
+    /** Alternative possible field name (camelCase) */
+    blobIndexStat?: VDiskBlobIndexItem[];
+    /** Alternative possible field name (lowercase) */
+    blobindexstat?: VDiskBlobIndexItem[];
     /** Response time */
     ResponseTime?: string;
     /** Response duration */
     ResponseDuration?: number;
+    /** Alternative response structures */
+    result?: VDiskBlobIndexItem[];
+    data?: VDiskBlobIndexItem[];
+    [key: string]: any; // Allow for other possible field names
 }