Skip to content

Commit

Permalink
HDDS-10864. Recon Disk Usage If one volume is large it occupies almos…
Browse files Browse the repository at this point in the history 
…t all space of Pie Chart (#6801)
  • Loading branch information
@smitajoshi12
smitajoshi12 authored Jun 28, 2024
1 parent 50c5a78 commit 7df3120
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 193 deletions.
193 changes: 9 additions & 184 deletions hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/db.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
31 changes: 22 additions & 9 deletions .../recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -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 = {}) {
Expand Down Expand Up @@ -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('/');
Expand All @@ -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);
Expand All @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -548,6 +557,10 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
<Button>Display Limit: {displayLimit}</Button>
</Dropdown>
</div>
&nbsp;&nbsp;&nbsp;&nbsp;
<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>
Expand All @@ -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
Expand Down

0 comments on commit 7df3120

Please sign in to comment.