HDDS-9626. [Recon] Disk Usage page with high number of key/bucket/volume

apache · Apr 29, 2024 · 1714a3d · 1714a3d
1 parent 305ff53
commit 1714a3d
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 32 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
@@ -1396,133 +1396,158 @@
   "root": {
     "status": "OK",
     "path": "/",
-    "size": 50000,
+    "size": 400,
     "sizeWithReplica": 300000,
-    "subPathCount": 25,
+    "subPathCount": 30,
     "subPaths": [
       {
         "path": "/vol1",
-        "size": 5000,
+        "size": 10,
         "sizeWithReplica": 150000
       },
       {
         "path": "/vol2",
-        "size": 8000,
+        "size": 10,
         "sizeWithReplica": 260000
       },
       {
         "path": "/vol3",
-        "size": 9000,
+        "size": 20,
         "sizeWithReplica": 300000
       },
       {
         "path": "/vol4",
-        "size": 1000,
+        "size": 30,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol5",
-        "size": 1000,
+        "size": 10,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol6",
-        "size": 2000,
+        "size": 20,
         "sizeWithReplica": 60000
       },
       {
         "path": "/vol7",
-        "size": 1000,
+        "size": 10,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol8",
-        "size": 1000,
+        "size": 10,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol9",
-        "size": 1000,
+        "size": 10,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol10",
-        "size": 2000,
+        "size": 20,
         "sizeWithReplica": 60000
       },
       {
         "path": "/vol11",
-        "size": 1000,
+        "size": 10,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol12",
-        "size": 1000,
+        "size": 10,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol13",
-        "size": 1000,
+        "size": 10,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol14",
-        "size": 2000,
+        "size": 20,
         "sizeWithReplica": 60000
       },
       {
         "path": "/vol15",
-        "size": 1000,
+        "size": 10,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol16",
-        "size": 1000,
+        "size": 10,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol17",
-        "size": 1000,
+        "size": 10,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol18",
-        "size": 2000,
+        "size": 20,
         "sizeWithReplica": 60000
       },
       {
         "path": "/vol19",
-        "size": 1000,
+        "size": 10,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol20",
-        "size": 1000,
+        "size": 10,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol21",
-        "size": 1000,
+        "size": 10,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol22",
-        "size": 1000,
+        "size": 10,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol23",
-        "size": 1000,
+        "size": 10,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol24",
-        "size": 1000,
+        "size": 10,
         "sizeWithReplica": 30000
       },
       {
         "path": "/vol25",
-        "size": 1000,
+        "size": 10,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol26",
+        "size": 10,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol27",
+        "size": 10,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol28",
+        "size": 10,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol29",
+        "size": 10,
+        "sizeWithReplica": 30000
+      },
+      {
+        "path": "/vol30",
+        "size": 10,
         "sizeWithReplica": 30000
       }
     ],

diff --git a/.../recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx b/.../recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
@@ -148,16 +148,17 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
 
       // Only show top n blocks with the most DU,
       // other blocks are merged as a single block
-      if (subpaths.length > limit) {
+      if (subpaths.length > limit || (subpaths.length > 0 && limit === 30)) {
         subpaths = subpaths.slice(0, limit);
         let topSize = 0;
         for (let i = 0; i < limit; ++i) {
           topSize += subpaths[i].size;
         }
-
         const otherSize = dataSize - topSize;
-        const other: IDUSubpath = {path: OTHER_PATH_NAME, size: otherSize};
-        subpaths.push(other);
+        if (otherSize > 0) {
+          const other: IDUSubpath = {path: OTHER_PATH_NAME, size: otherSize};
+          subpaths.push(other);
+        }
       }
 
       let pathLabels, values, percentage, sizeStr, pieces, subpathName;
@@ -266,7 +267,7 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
   updateDisplayLimit(e): void {
     let res = -1;
     if (e.key === '30') {
-      res = Number.MAX_VALUE;
+      res = Number.parseInt(e.key, 10);
     } else {
       res = Number.parseInt(e.key, 10);
     }