This is an automated email from the ASF dual-hosted git repository.
arafat2198 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/ozone.git
The following commit(s) were added to refs/heads/master by this push:
new 7df3120ff0 HDDS-10864. Recon Disk Usage If one volume is large it
occupies almost all space of Pie Chart (#6801)
7df3120ff0 is described below
commit 7df3120ff01c905f38a56ed172e4302acbf0f525
Author: Smita <[email protected]>
AuthorDate: Fri Jun 28 15:29:01 2024 +0530
HDDS-10864. Recon Disk Usage If one volume is large it occupies almost all
space of Pie Chart (#6801)
---
.../webapps/recon/ozone-recon-web/api/db.json | 193 +--------------------
.../src/views/diskUsage/diskUsage.tsx | 31 +++-
2 files changed, 31 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 47dd6ba040..51f6511935 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 792a56a177..df280fe9fe 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';
@@ -29,6 +29,7 @@ import { AxiosGetHelper, cancelRequests } from
'utils/axiosRequestHelper';
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;
@@ -63,6 +64,7 @@ let cancelPieSignal: AbortController
let cancelSummarySignal: AbortController
let cancelQuotaSignal: AbortController;
let cancelKeyMetadataSignal: AbortController;
+let valuesWithMinBlockSize: number[] = [];
export class DiskUsage extends React.Component<Record<string, object>,
IDUState> {
constructor(props = {}) {
@@ -165,7 +167,7 @@ export class DiskUsage extends
React.Component<Record<string, object>, IDUState>
}
}
- let pathLabels, values, 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('/');
@@ -185,9 +187,17 @@ export class DiskUsage extends
React.Component<Record<string, object>, IDUState>
return (subpath.isKey || subpathName === OTHER_PATH_NAME) ?
subpathName : subpathName + '/';
});
- values = subpaths.map(subpath => {
- return subpath.size / dataSize;
- });
+ // 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;
+ });
+ }
+
+ // 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);
+ valuesWithMinBlockSize = clonedValues && clonedValues.map((item:
number) => item > 0 ? item + MIN_BLOCK_SIZE : item);
percentage = values.map(value => {
return (value * 100).toFixed(2);
@@ -197,7 +207,6 @@ export class DiskUsage extends
React.Component<Record<string, object>, IDUState>
return byteToSize(subpath.size, 1);
});
}
-
this.setState({
// Normalized path
isLoading: false,
@@ -209,7 +218,7 @@ export class DiskUsage extends
React.Component<Record<string, object>, IDUState>
plotData: [{
type: 'pie',
hole: 0.2,
- values: values,
+ values: valuesWithMinBlockSize,
customdata: percentage,
labels: pathLabels,
text: sizeStr,
@@ -548,6 +557,10 @@ export class DiskUsage extends
React.Component<Record<string, object>, IDUState>
<Button>Display Limit: {displayLimit}</Button>
</Dropdown>
</div>
+
+ <Tooltip placement="rightTop" title="Additional block size
is added to each entity, so even the small entities are visible. Please refer
to pie-chart tooltip for exact size information.">
+ <Icon type='info-circle' />
+ </Tooltip>
<div className='metadata-button'>
<Button type='primary' onClick={e =>
this.showMetadataDetails(e, returnPath)}>
<b>
@@ -564,8 +577,8 @@ export class DiskUsage extends
React.Component<Record<string, object>, IDUState>
data={plotData}
layout={
{
- width: 1200,
- height: 900,
+ width: 1000,
+ height: 850,
font: {
family: 'Roboto, sans-serif',
size: 15
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
