From 374fb0ca605d3c57d80c20bddb67e54f012ad664 Mon Sep 17 00:00:00 2001
From: smitajoshi <smitha.joshi@cloudera.com>
Date: Tue, 16 Apr 2024 15:04:07 +0530
Subject: [PATCH] HDDS-9626. [Recon] Disk Usage page with high number of
 key/bucket/volume

---
 .../webapps/recon/ozone-recon-web/api/db.json | 148 +++++++++++++++---
 .../components/rightDrawer/rightDrawer.tsx    |   4 +-
 .../src/views/diskUsage/diskUsage.tsx         |  10 +-
 3 files changed, 133 insertions(+), 29 deletions(-)

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/db.json b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/db.json
index 79ff9f8e7c6d..609452a861a5 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/db.json
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/db.json
@@ -1396,37 +1396,137 @@
   "root": {
     "status": "OK",
     "path": "/",
-    "size": 100000,
+    "size": 50000,
     "sizeWithReplica": 300000,
-    "subPathCount": 5,
+    "subPathCount": 25,
     "subPaths": [
       {
         "path": "/vol1",
-        "size": 50000,
+        "size": 5000,
         "sizeWithReplica": 150000
       },
       {
         "path": "/vol2",
-        "size": 20000,
-        "sizeWithReplica": 60000
+        "size": 8000,
+        "sizeWithReplica": 260000
       },
       {
         "path": "/vol3",
-        "size": 10000,
-        "sizeWithReplica": 30000
+        "size": 9000,
+        "sizeWithReplica": 300000
       },
       {
         "path": "/vol4",
-        "size": 10000,
+        "size": 1000,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol5",
-        "size": 10000,
+        "size": 1000,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol6",
+        "size": 2000,
+        "sizeWithReplica": 60000
+      },
+      {
+        "path": "/vol7",
+        "size": 1000,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol8",
+        "size": 1000,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol9",
+        "size": 1000,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol10",
+        "size": 2000,
+        "sizeWithReplica": 60000
+      },
+      {
+        "path": "/vol11",
+        "size": 1000,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol12",
+        "size": 1000,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol13",
+        "size": 1000,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol14",
+        "size": 2000,
+        "sizeWithReplica": 60000
+      },
+      {
+        "path": "/vol15",
+        "size": 1000,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol16",
+        "size": 1000,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol17",
+        "size": 1000,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol18",
+        "size": 2000,
+        "sizeWithReplica": 60000
+      },
+      {
+        "path": "/vol19",
+        "size": 1000,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol20",
+        "size": 1000,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol21",
+        "size": 1000,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol22",
+        "size": 1000,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol23",
+        "size": 1000,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol24",
+        "size": 1000,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol25",
+        "size": 1000,
         "sizeWithReplica": 30000
       }
     ],
-    "sizeDirectKey": 0
+    "sizeDirectKey": 50000
   },
   "volume": {
     "status": "OK",
@@ -1517,37 +1617,41 @@
   },
   "dir": {
     "status": "OK",
-    "path": "/dummyVolume/dummyBucket/dummyDir",
-    "size": 200000,
+    "path": "/volumetest/buckettest/dir1",
+    "size": 111010000,
     "sizeWithReplica": -1,
-    "subPathCount": 5,
+    "subPathCount": 4,
     "subPaths": [
       {
-        "path": "/dummyVolume/dummyBucket/dummyDir/key1",
-        "size": 100000,
+        "key": true,
+        "path": "/volumetest/buckettest/dir1/key100MB",
+        "size": 100000000,
         "sizeWithReplica": -1,
         "isKey": true
       },
       {
-        "path": "/dummyVolume/dummyBucket/dummyDir/key2",
-        "size": 30000,
+        "key": true,
+        "path": "/volumetest/buckettest/dir1/key10mb",
+        "size": 10000000,
         "sizeWithReplica": -1,
         "isKey": true
       },
       {
-        "path": "/dummyVolume/dummyBucket/dummyDir/key3",
-        "size": 30000,
+        "key": true,
+        "path": "/volumetest/buckettest/dir1/key1MB",
+        "size": 1000000,
         "sizeWithReplica": -1,
         "isKey": true
       },
       {
-        "path": "/dummyVolume/dummyBucket/dummyDir/key4",
-        "size": 40000,
+        "key": true,
+        "path": "/volumetest/buckettest/dir1/key10kb",
+        "size": 10000,
         "sizeWithReplica": -1,
         "isKey": true
       }
     ],
-    "sizeDirectKey": 50000
+    "sizeDirectKey": 111010000
   },
   "empty": {
     "status": "OK",
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/rightDrawer/rightDrawer.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/rightDrawer/rightDrawer.tsx
index e1d3c36869d7..8ff69717ba46 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/rightDrawer/rightDrawer.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/rightDrawer/rightDrawer.tsx
@@ -54,8 +54,8 @@ export class DetailPanel extends React.Component<IRightDrawerProps> {
         <Drawer
           title={`Metadata Summary for ${path}`}
           placement='right'
-          width='40%'
-          closable={false}
+          width='25%'
+          closable={true}
           visible={visible}
           getContainer={false}
           style={{position: 'absolute'}}
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
index 29866aacf08e..ef45b76cc12b 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
@@ -265,7 +265,7 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
 
   updateDisplayLimit(e): void {
     let res = -1;
-    if (e.key === 'all') {
+    if (e.key === '30') {
       res = Number.MAX_VALUE;
     } else {
       res = Number.parseInt(e.key, 10);
@@ -517,8 +517,8 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
         <Menu.Item key='20'>
           20
         </Menu.Item>
-        <Menu.Item key='all'>
-          All
+        <Menu.Item key='30'>
+          30
         </Menu.Item>
       </Menu>
     );
@@ -549,7 +549,7 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
                   </div>
                   <div className='dropdown-button'>
                     <Dropdown overlay={menu} placement='bottomCenter'>
-                      <Button>Display Limit: {(displayLimit === Number.MAX_VALUE) ? 'All' : displayLimit}</Button>
+                      <Button>Display Limit: {(displayLimit === Number.MAX_VALUE) ? '30' : displayLimit}</Button>
                     </Dropdown>
                   </div>
                   <div className='metadata-button'>
@@ -569,7 +569,7 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
                       layout={
                         {
                           width: 1200,
-                          height: 750,
+                          height: 1000,
                           font: {
                             family: 'Roboto, sans-serif',
                             size: 15