From 5f7f2b068c712199f54ecde4f2d51b15fd27868c Mon Sep 17 00:00:00 2001 From: smitajoshi12 Date: Mon, 10 Jun 2024 22:02:19 +0530 Subject: [PATCH 01/12] HDDS-10864. Recon Disk Usage If one volume is large it occupies almost all space of Pie Chart --- .../webapps/recon/ozone-recon-web/package.json | 1 + .../webapps/recon/ozone-recon-web/pnpm-lock.yaml | 8 ++++++++ .../src/views/diskUsage/diskUsage.tsx | 14 ++++++++++---- 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/package.json b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/package.json index 41987c00ef35..4b4a031bc461 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/package.json +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/package.json @@ -16,6 +16,7 @@ "ag-charts-community": "^7.3.0", "ag-charts-react": "^7.3.0", "antd": "^3.26.20", + "array-normalize": "^2.0.0", "axios": "^0.28.0", "babel-jest": "^24.9.0", "babel-plugin-import": "^1.13.8", diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/pnpm-lock.yaml b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/pnpm-lock.yaml index 957a0ed5d152..3a71702eba7d 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/pnpm-lock.yaml +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/pnpm-lock.yaml @@ -17,6 +17,7 @@ specifiers: ag-charts-community: ^7.3.0 ag-charts-react: ^7.3.0 antd: ^3.26.20 + array-normalize: ^2.0.0 axios: ^0.28.0 babel-jest: ^24.9.0 babel-plugin-import: ^1.13.8 @@ -61,6 +62,7 @@ dependencies: ag-charts-community: 7.3.0 ag-charts-react: 7.3.0_4uflhkpzmxcxyxkuqg2ofty3gq antd: 3.26.20_wcqkhtmu7mswc6yz4uyexck3ty + array-normalize: 2.0.0 axios: 0.28.0 babel-jest: 24.9.0_@babel+core@7.22.11 babel-plugin-import: 1.13.8 @@ -3657,6 +3659,12 @@ packages: array-bounds: 1.0.1 dev: false + /array-normalize/2.0.0: + resolution: {integrity: sha512-WofPolGg9OqpmfYh2qqOJ0yeJ9Idjn+EcQ+Nyy3eQbqtuz0MRyqTEHB0PH/Ypp2PpsOAfjsqTMzu1fHOaPzO1Q==} + dependencies: + array-bounds: 1.0.1 + dev: false + /array-range/1.0.1: resolution: {integrity: sha512-shdaI1zT3CVNL2hnx9c0JMc0ZogGaxDs5e85akgHWKYa0yVbIyp06Ind3dVkTj/uuFrzaHBOyqFzo+VV6aXgtA==} dev: false 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 e82d8f71fcaa..385509cb99ff 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 @@ -25,6 +25,7 @@ import {byteToSize, showDataFetchError} from 'utils/common'; import './diskUsage.less'; import moment from 'moment'; import { AxiosGetHelper, cancelRequests } from 'utils/axiosRequestHelper'; +const normalize = require('array-normalize'); const DEFAULT_DISPLAY_LIMIT = 10; const OTHER_PATH_NAME = 'Other Objects'; @@ -63,6 +64,7 @@ let cancelPieSignal: AbortController let cancelSummarySignal: AbortController let cancelQuotaSignal: AbortController; let cancelKeyMetadataSignal: AbortController; +let normalizedValues: number[]=[]; export class DiskUsage extends React.Component, IDUState> { constructor(props = {}) { @@ -184,15 +186,19 @@ export class DiskUsage extends React.Component, IDUState> // Differentiate key without trailing slash return (subpath.isKey || subpathName === OTHER_PATH_NAME) ? subpathName : subpathName + '/'; }); - + values = subpaths.map(subpath => { return subpath.size / dataSize; }); - + // Logic for Values Normalization on Pie chart adding 0.05 so minimum block + // will be displayed on Pie chart using below logic + // Percentage and Size string Logic will be same + normalizedValues= normalize(values); + normalizedValues= values && values.map((item)=> item+ 0.05); percentage = values.map(value => { return (value * 100).toFixed(2); }); - + sizeStr = subpaths.map(subpath => { return byteToSize(subpath.size, 1); }); @@ -209,7 +215,7 @@ export class DiskUsage extends React.Component, IDUState> plotData: [{ type: 'pie', hole: 0.2, - values: values, + values: normalizedValues, customdata: percentage, labels: pathLabels, text: sizeStr, From f8a75d9149f35f48cf11434f6f2159135972d580 Mon Sep 17 00:00:00 2001 From: smitajoshi12 Date: Tue, 11 Jun 2024 18:23:32 +0530 Subject: [PATCH 02/12] HDDS-10864. Recon Disk Usage If one volume is large it occupies almost all space of Pie Chart --- .../webapps/recon/ozone-recon-web/api/db.json | 193 +----------------- .../src/views/diskUsage/diskUsage.tsx | 21 +- 2 files changed, 21 insertions(+), 193 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 271e70d741eb..553f982a5186 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 @@ -1398,217 +1398,42 @@ "root": { "status": "OK", "path": "/", - "size": 1709108, + "size": 15160, "sizeWithReplica": -1, - "subPathCount": 30, + "subPathCount": 5, "subPaths": [ - { - "key": false, - "path": "/vol-0-30461", - "size": 33096, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol-1-82078", - "size": 33096, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol-2-96509", - "size": 330496, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol-3-75124", - "size": 330496, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol-4-53147", - "size": 330240, - "sizeWithReplica": -1, - "isKey": false - }, { "key": false, "path": "/vol1", - "size": 12204, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol17", - "size": 8136, + "size": 10000, "sizeWithReplica": -1, "isKey": false }, { "key": false, - "path": "/vol21", - "size": 8136, + "path": "/vol-2", + "size": 10, "sizeWithReplica": -1, "isKey": false }, { "key": false, - "path": "/vol22", - "size": 8136, + "path": "/vol3", + "size": 100, "sizeWithReplica": -1, "isKey": false }, { "key": false, "path": "/vol4", - "size": 8136, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol18", - "size": 4068, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol19", - "size": 4068, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/s3v", - "size": 0, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol10", - "size": 0, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol11", - "size": 0, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol12", - "size": 0, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol13", - "size": 0, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol14", - "size": 0, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol15", - "size": 0, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol16", - "size": 0, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol2", - "size": 0, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol20", - "size": 0, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol3", - "size": 0, + "size": 50, "sizeWithReplica": -1, "isKey": false }, { "key": false, "path": "/vol5", - "size": 0, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol6", - "size": 0, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol7", - "size": 0, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol8", - "size": 0, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol9", - "size": 0, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol10", - "size": 10, - "sizeWithReplica": -1, - "isKey": false - }, - { - "key": false, - "path": "/vol11", - "size": 20, + "size": 5000, "sizeWithReplica": -1, "isKey": false } 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 385509cb99ff..5e6040bd480c 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 @@ -30,6 +30,7 @@ const normalize = require('array-normalize'); const DEFAULT_DISPLAY_LIMIT = 10; const OTHER_PATH_NAME = 'Other Objects'; const MAX_DISPLAY_LIMIT = 30; +const MIN_BLOCK_SIZE = 0.05; interface IDUSubpath { path: string; @@ -186,24 +187,26 @@ export class DiskUsage extends React.Component, IDUState> // Differentiate key without trailing slash return (subpath.isKey || subpathName === OTHER_PATH_NAME) ? subpathName : subpathName + '/'; }); - + values = subpaths.map(subpath => { return subpath.size / dataSize; }); - // Logic for Values Normalization on Pie chart adding 0.05 so minimum block - // will be displayed on Pie chart using below logic - // Percentage and Size string Logic will be same - normalizedValues= normalize(values); - normalizedValues= values && values.map((item)=> item+ 0.05); + // Normalize values for the pie chart to ensure better visual representation. + // Adding a small constant (MIN_BLOCK_SIZE) to each normalized value ensures that even + // the smallest entities are visible on the pie chart. + // Note: The percentage and size string calculations remain unchanged. + + normalizedValues = normalize(values); + normalizedValues = values && values.map((item) => item + MIN_BLOCK_SIZE); percentage = values.map(value => { return (value * 100).toFixed(2); }); - + sizeStr = subpaths.map(subpath => { return byteToSize(subpath.size, 1); }); } - + this.setState({ // Normalized path isLoading: false, @@ -574,7 +577,7 @@ export class DiskUsage extends React.Component, IDUState> layout={ { width: 1200, - height: 900, + height: 850, font: { family: 'Roboto, sans-serif', size: 15 From 517cb42f1505ebcb31494cdb17a3b8e4198c47cb Mon Sep 17 00:00:00 2001 From: smitajoshi12 Date: Wed, 12 Jun 2024 10:12:15 +0530 Subject: [PATCH 03/12] HDDS-10864. Recon Disk Usage If one volume is large it occupies almost all space of Pie Chart --- .../src/views/diskUsage/diskUsage.tsx | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) 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 5e6040bd480c..19524738e44d 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 @@ -168,7 +168,7 @@ export class DiskUsage extends React.Component, IDUState> } } - let pathLabels, values, percentage, sizeStr, pieces, subpathName; + let pathLabels, values: any[] = [], percentage, sizeStr, pieces, subpathName; if (duResponse.subPathCount === 0 || subpaths === 0) { pieces = duResponse && duResponse.path != null && duResponse.path.split('/'); @@ -188,16 +188,19 @@ export class DiskUsage extends React.Component, IDUState> return (subpath.isKey || subpathName === OTHER_PATH_NAME) ? subpathName : subpathName + '/'; }); - values = subpaths.map(subpath => { - return subpath.size / dataSize; - }); - // Normalize values for the pie chart to ensure better visual representation. - // Adding a small constant (MIN_BLOCK_SIZE) to each normalized value ensures that even - // the smallest entities are visible on the pie chart. - // Note: The percentage and size string calculations remain unchanged. + // To avoid NaN Condition NaN will get divide by Zero to avoid map iterations + if (dataSize > 0) { + values = subpaths.map(subpath => { + return subpath.size / dataSize; + }); + } - normalizedValues = normalize(values); - normalizedValues = values && values.map((item) => item + MIN_BLOCK_SIZE); + // Normalize values for the pie chart to ensure better visual representation. + // Adding a small constant (MIN_BLOCK_SIZE) to each normalized value ensures that even + // the smallest entities are visible on the pie chart. + // Note: The percentage and size string calculations remain unchanged. + // normalize() method will convert array between 0 to 1 + normalizedValues = values && normalize(values) && values.map((item) => item + MIN_BLOCK_SIZE); percentage = values.map(value => { return (value * 100).toFixed(2); }); From c99cf01ef7033444879f71c7d82a834c53e9bb41 Mon Sep 17 00:00:00 2001 From: smitajoshi12 Date: Wed, 12 Jun 2024 15:29:47 +0530 Subject: [PATCH 04/12] HDDS-10864. Recon Disk Usage If one volume is large it occupies almost all space of Pie Chart --- .../recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 19524738e44d..3f1718712fe5 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 @@ -200,7 +200,7 @@ export class DiskUsage extends React.Component, IDUState> // the smallest entities are visible on the pie chart. // Note: The percentage and size string calculations remain unchanged. // normalize() method will convert array between 0 to 1 - normalizedValues = values && normalize(values) && values.map((item) => item + MIN_BLOCK_SIZE); + normalizedValues = values && normalize(values) && values.map((item) => item > 0 ? item + MIN_BLOCK_SIZE : item); percentage = values.map(value => { return (value * 100).toFixed(2); }); From 0136aed3d8e0733645a7dbce365b73a38c62fc96 Mon Sep 17 00:00:00 2001 From: smitajoshi12 Date: Wed, 12 Jun 2024 18:04:17 +0530 Subject: [PATCH 05/12] HDDS-10864. Recon Disk Usage If one volume is large it occupies almost all space of Pie Chart --- .../recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 3f1718712fe5..1329a8257991 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 @@ -200,7 +200,10 @@ export class DiskUsage extends React.Component, IDUState> // the smallest entities are visible on the pie chart. // Note: The percentage and size string calculations remain unchanged. // normalize() method will convert array between 0 to 1 - normalizedValues = values && normalize(values) && values.map((item) => item > 0 ? item + MIN_BLOCK_SIZE : item); + const clonedValues = structuredClone(values); + const temp = clonedValues && normalize(clonedValues); + normalizedValues = temp.map((item: number) => item + MIN_BLOCK_SIZE); + percentage = values.map(value => { return (value * 100).toFixed(2); }); From 8b5b4093d68451773dc3993a6e64510c957b9c2d Mon Sep 17 00:00:00 2001 From: smitajoshi12 Date: Tue, 18 Jun 2024 13:28:19 +0530 Subject: [PATCH 06/12] HDDS-10864. Recon Disk Usage If one volume is large it occupies almost all space of Pie Chart --- .../recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 1329a8257991..1a24e98ee227 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 @@ -202,7 +202,7 @@ export class DiskUsage extends React.Component, IDUState> // normalize() method will convert array between 0 to 1 const clonedValues = structuredClone(values); const temp = clonedValues && normalize(clonedValues); - normalizedValues = temp.map((item: number) => item + MIN_BLOCK_SIZE); + normalizedValues = temp && temp.map((item: number) => item + MIN_BLOCK_SIZE); percentage = values.map(value => { return (value * 100).toFixed(2); @@ -582,7 +582,7 @@ export class DiskUsage extends React.Component, IDUState> data={plotData} layout={ { - width: 1200, + width: 1000, height: 850, font: { family: 'Roboto, sans-serif', From 16e85478bfa95de9ceb11aad4a0303593a3f04f5 Mon Sep 17 00:00:00 2001 From: smitajoshi12 Date: Wed, 19 Jun 2024 16:08:16 +0530 Subject: [PATCH 07/12] HDDS-10864. Recon Disk Usage If one volume is large it occupies almost all space of Pie Chart Review Comment --- .../recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 1a24e98ee227..3d082f9fff89 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 @@ -65,7 +65,7 @@ let cancelPieSignal: AbortController let cancelSummarySignal: AbortController let cancelQuotaSignal: AbortController; let cancelKeyMetadataSignal: AbortController; -let normalizedValues: number[]=[]; +let normalizedValues: number[] = []; export class DiskUsage extends React.Component, IDUState> { constructor(props = {}) { @@ -212,7 +212,6 @@ export class DiskUsage extends React.Component, IDUState> return byteToSize(subpath.size, 1); }); } - this.setState({ // Normalized path isLoading: false, From 1a897bf25c5010fffeaca4c405de2181f5610304 Mon Sep 17 00:00:00 2001 From: smitajoshi12 Date: Fri, 21 Jun 2024 21:54:20 +0530 Subject: [PATCH 08/12] HDDS-10864. Recon Disk Usage If one volume is large it occupies almost all space of Pie Chart --- .../ozone-recon-web/src/views/diskUsage/diskUsage.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 3d082f9fff89..b690db22c384 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 @@ -200,9 +200,10 @@ export class DiskUsage extends React.Component, IDUState> // the smallest entities are visible on the pie chart. // Note: The percentage and size string calculations remain unchanged. // normalize() method will convert array between 0 to 1 + // Zero Size Entities not adding Minimum Block Size Logic so it will not display inside pi chart const clonedValues = structuredClone(values); const temp = clonedValues && normalize(clonedValues); - normalizedValues = temp && temp.map((item: number) => item + MIN_BLOCK_SIZE); + normalizedValues = temp && temp.map((item: number) => item > 0 ? item + MIN_BLOCK_SIZE : item); percentage = values.map(value => { return (value * 100).toFixed(2); @@ -565,6 +566,10 @@ export class DiskUsage extends React.Component, IDUState> +      + + +
     - +
From 454ce6ea9d4edda281584ae50c0aeb7ac6313928 Mon Sep 17 00:00:00 2001 From: smitajoshi12 Date: Mon, 24 Jun 2024 15:56:10 +0530 Subject: [PATCH 10/12] HDDS-10864. Recon Disk Usage If one volume is large it occupies almost all space of Pie Chart --- .../recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 75a117283ed4..eddc9d9b0dbb 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 @@ -18,7 +18,7 @@ import React from 'react'; import Plot from 'react-plotly.js'; -import {Row, Col, Icon, Button, Input, Menu, Dropdown} from 'antd'; +import {Row, Col, Icon, Button, Input, Menu, Dropdown, Tooltip} from 'antd'; import {DetailPanel} from 'components/rightDrawer/rightDrawer'; import * as Plotly from 'plotly.js'; import {byteToSize, showDataFetchError} from 'utils/common'; From a796cc6d5c80c9070882af4671fe98f27e2be3b2 Mon Sep 17 00:00:00 2001 From: smitajoshi12 Date: Tue, 25 Jun 2024 18:44:55 +0530 Subject: [PATCH 11/12] HDDS-10864. Recon Disk Usage If one volume is large it occupies almost all space of Pie Chart --- .../ozone-recon-web/src/views/diskUsage/diskUsage.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) 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 eddc9d9b0dbb..5fd78d0d5be8 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 @@ -167,7 +167,7 @@ export class DiskUsage extends React.Component, IDUState> } } - let pathLabels, values: any[] = [], percentage, sizeStr, pieces, subpathName; + let pathLabels, values: number[] = [], percentage, sizeStr, pieces, subpathName; if (duResponse.subPathCount === 0 || subpaths === 0) { pieces = duResponse && duResponse.path != null && duResponse.path.split('/'); @@ -194,9 +194,8 @@ export class DiskUsage extends React.Component, IDUState> }); } - // Adding a MIN_BLOCK_SIZE to each value ensures that even the smallest entities are visible on the pie chart. + // Adding a MIN_BLOCK_SIZE to non-zero size entities to ensure that even the smallest entities are visible on the pie chart. // Note: The percentage and size string calculations remain unchanged. - // Zero Size Entities not adding Minimum Block Size Logic so it will not display inside pi chart. const clonedValues = structuredClone(values); adddedvaluesBlockSize = clonedValues && clonedValues.map((item: number) => item > 0 ? item + MIN_BLOCK_SIZE : item); @@ -559,7 +558,7 @@ export class DiskUsage extends React.Component, IDUState>
     - +
From f7f5c749292023ab9f2a0f213941525fb62eb3f3 Mon Sep 17 00:00:00 2001 From: smitajoshi12 Date: Thu, 27 Jun 2024 17:17:46 +0530 Subject: [PATCH 12/12] HDDS-10864. Recon Disk Usage If one volume is large it occupies almost all space of Pie Chart --- .../ozone-recon-web/src/views/diskUsage/diskUsage.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 5fd78d0d5be8..df280fe9fe90 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 @@ -64,7 +64,7 @@ let cancelPieSignal: AbortController let cancelSummarySignal: AbortController let cancelQuotaSignal: AbortController; let cancelKeyMetadataSignal: AbortController; -let adddedvaluesBlockSize: number[] = []; +let valuesWithMinBlockSize: number[] = []; export class DiskUsage extends React.Component, IDUState> { constructor(props = {}) { @@ -197,7 +197,7 @@ export class DiskUsage extends React.Component, IDUState> // Adding a MIN_BLOCK_SIZE to non-zero size entities to ensure that even the smallest entities are visible on the pie chart. // Note: The percentage and size string calculations remain unchanged. const clonedValues = structuredClone(values); - adddedvaluesBlockSize = clonedValues && clonedValues.map((item: number) => item > 0 ? item + MIN_BLOCK_SIZE : item); + valuesWithMinBlockSize = clonedValues && clonedValues.map((item: number) => item > 0 ? item + MIN_BLOCK_SIZE : item); percentage = values.map(value => { return (value * 100).toFixed(2); @@ -218,7 +218,7 @@ export class DiskUsage extends React.Component, IDUState> plotData: [{ type: 'pie', hole: 0.2, - values: adddedvaluesBlockSize, + values: valuesWithMinBlockSize, customdata: percentage, labels: pathLabels, text: sizeStr, @@ -558,7 +558,7 @@ export class DiskUsage extends React.Component, IDUState>
     - +