Fix API references

Author: devabhishekpal

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/db.json

@@ -6892,36 +6892,62 @@
             },
             "OM": {
                 "pendingKeyBytes": 1254500,
-                "pendingBytes": 4464500,
+                "totalBytes": 4464500,
                 "pendingDirectoryBytes": 3210000
             }
         }
       }
     },
     "dataNodeUsage": [
       {
-        "uuid": "1477a674-b86c-43b9-ae84-1586c5720125",
-        "capacity": 1080992018248,
-        "used": 4398612,
-        "remaining": 1019728228844,
-        "committed": 1073725932,
-        "pendingDeletion": 1013125932
-      },
-      {
-        "uuid": "c040c145-b44f-42a8-a3a3-b18171c8c01c",
-        "capacity": 1080992018248,
-        "used": 4382720,
-        "remaining": 1019728248832,
-        "committed": 0,
-        "pendingDeletion": 11025932
-      },
-      {
-        "uuid": "1d076fc9-ece2-43e7-9fca-bb1e8646a56d",
-        "capacity": 1080992018248,
-        "used": 4382720,
-        "remaining": 1019728248832,
-        "committed": 1023725932,
-        "pendingDeletion": 21125932
+          "datanodeUuid": "ec4d37e4-04d7-4d1b-b0bb-aafa05d86b3c",
+          "hostName": "ozone-datanode-2.ozone_default",
+          "capacity": 125645656770,
+          "used": 4382720,
+          "remaining": 104675287040,
+          "committed": 0,
+          "pendingDeletion": 0,
+          "minimumFreeSpace": 125645664
+      },
+      {
+          "datanodeUuid": "ed34b38a-88b0-4dde-8ef6-6d158339064e",
+          "hostName": "ozone-datanode-4.ozone_default",
+          "capacity": 125645656770,
+          "used": 4382720,
+          "remaining": 104675291136,
+          "committed": 0,
+          "pendingDeletion": 0,
+          "minimumFreeSpace": 125645664
+      },
+      {
+          "datanodeUuid": "49d5a41b-ffb4-426f-bd46-93d9263296ef",
+          "hostName": "ozone-datanode-5.ozone_default",
+          "capacity": 125645656770,
+          "used": 4382720,
+          "remaining": 104675291136,
+          "committed": 0,
+          "pendingDeletion": 0,
+          "minimumFreeSpace": 125645664
+      },
+      {
+          "datanodeUuid": "08b69287-6fd0-42e0-b944-f5d527607ac9",
+          "hostName": "ozone-datanode-1.ozone_default",
+          "capacity": 125645656770,
+          "used": 4382720,
+          "remaining": 104675282944,
+          "committed": 0,
+          "pendingDeletion": 0,
+          "minimumFreeSpace": 125645664
+      },
+      {
+          "datanodeUuid": "3be0d2dc-b068-46c9-a6df-ff086e94fec5",
+          "hostName": "ozone-datanode-3.ozone_default",
+          "capacity": 125645656770,
+          "used": 4382720,
+          "remaining": 104675282944,
+          "committed": 0,
+          "pendingDeletion": 0,
+          "minimumFreeSpace": 125645664
       }
     ]
   }

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/capacity/capacity.tsx

@@ -101,7 +101,7 @@ const Capacity: React.FC<object> = () => {
       // setGlobalNamespace(utilizationResponse.globalNamespace);
       setUsageBreakdown(utilizationResponse.usedSpaceBreakdown);
       setDatanodeUsage(utilizationResponse.dataNodeUsage);
-      setSelectedDatanode(utilizationResponse.dataNodeUsage[0].uuid);
+      setSelectedDatanode(utilizationResponse.dataNodeUsage[0].hostName);
       setState({
         loading: false,
         lastUpdated: Number(moment())
@@ -128,8 +128,9 @@ const Capacity: React.FC<object> = () => {
   }, []);
 
   const selectedDNDetails: DataNodeUsage = React.useMemo(() => {
-    return datanodeUsage.find(datanode => datanode.uuid === selectedDatanode) ?? {
-      uuid: "xxxx-xxxx-xxxx-xxxx",
+    return datanodeUsage.find(datanode => datanode.hostName === selectedDatanode) ?? {
+      datanodeUuid: "unknown-uuid",
+      hostName: "unknown-host",
       capacity: 0,
       used: 0,
       remaining: 0,
@@ -237,7 +238,7 @@ const Capacity: React.FC<object> = () => {
             showDropdown={false}
             dataDetails={[{
               title: 'OZONE MANAGER',
-              size: usageBreakdown.deletionPendingBytes.byStage.OM.pendingBytes,
+              size: usageBreakdown.deletionPendingBytes.byStage.OM.totalBytes ?? 0,
               breakdown: [{
                 label: 'KEYS',
                 value: usageBreakdown.deletionPendingBytes.byStage.OM.pendingKeyBytes,
@@ -274,29 +275,29 @@ const Capacity: React.FC<object> = () => {
             loading={state.loading}
             showDropdown={true}
             handleSelect={setSelectedDatanode}
-            dropdownItems={datanodeUsage.map(datanode => datanode.uuid)}
+            dropdownItems={datanodeUsage.map(datanode => datanode.hostName)}
             dataDetails={[{
               title: 'USED SPACE',
-              size: selectedDNDetails.used + selectedDNDetails.pendingDeletion,
+              size: (selectedDNDetails.used ?? 0) + (selectedDNDetails.pendingDeletion ?? 0),
               breakdown: [{
                 label: 'PENDING DELETION',
-                value: selectedDNDetails.pendingDeletion,
+                value: selectedDNDetails.pendingDeletion ?? 0,
                 color: '#f4a233'
               }, {
                 label: 'OZONE USED',
-                value: selectedDNDetails.used,
+                value: selectedDNDetails.used ?? 0,
                 color: '#10073b'
               }]
             }, {
               title: 'FREE SPACE',
-              size: selectedDNDetails.remaining + selectedDNDetails.committed,
+              size: (selectedDNDetails.remaining ?? 0) + (selectedDNDetails.committed ?? 0),
               breakdown: [{
                 label: unusedSpaceBreakdown,
-                value: selectedDNDetails.remaining,
+                value: selectedDNDetails.remaining ?? 0,
                 color: '#f4a233'
               }, {
                 label: 'OZONE PRE-ALLOCATED',
-                value: selectedDNDetails.committed,
+                value: selectedDNDetails.committed ?? 0,
                 color: '#10073b'
               }]
             }]} />

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/capacity/components/CapacityDetail.tsx

@@ -18,7 +18,7 @@
 
 import { EChart } from '@/components/eChart/eChart';
 import { GraphLegendIcon } from '@/utils/themeIcons';
-import { cardBodyStyle, cardHeadStyle, statisticValueStyle } from '@/v2/pages/capacity/constants/styles.constants';
+import { cardHeadStyle, statisticValueStyle } from '@/v2/pages/capacity/constants/styles.constants';
 import { Card, Divider, Row, Select, Statistic } from 'antd';
 import filesize from 'filesize';
 import React from 'react';
@@ -47,9 +47,8 @@ const getEchartOptions = (title: string | React.ReactNode, data: DataDetailItem)
       bottom: 0
     },
     xAxis: {
-      // We are using a log scale to make the chart more readable in case there are some value
-      // which are too small or too large to be displayed in the chart
-      type: 'log',
+      // Use linear scale to support zero values safely
+      type: 'value',
       axisLine: { show: false },
       axisTick: { show: false },
       axisLabel: { show: false }
@@ -77,12 +76,10 @@ const getEchartOptions = (title: string | React.ReactNode, data: DataDetailItem)
     barGap: '2px'
   }));
 
-  console.log(series);
-
   return {
     ...option,
     series
-  }
+  } as any
 }
 
 
@@ -99,7 +96,7 @@ const CapacityDetail: React.FC<CapacityDetailProps> = (
     <Card title={title} size='small' headStyle={cardHeadStyle} loading={loading}>
       { showDropdown && options.length > 0 &&
         <div className='node-select-container'>
-          Node Select:
+          <strong>Node Selector:</strong>
           <Select
             defaultValue={options?.[0]?.value}
             options={options}