This is an automated email from the ASF dual-hosted git repository.
siyao 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 13a6d0178e HDDS-7141. Recon: Improve Disk Usage Page (#3789)
13a6d0178e is described below
commit 13a6d0178e0225f5ecab098b700f75de663ba811
Author: smitajoshi12 <[email protected]>
AuthorDate: Fri Oct 21 12:36:23 2022 +0530
HDDS-7141. Recon: Improve Disk Usage Page (#3789)
---
.../src/views/diskUsage/diskUsage.less | 36 +++++++++++-
.../src/views/diskUsage/diskUsage.tsx | 68 ++++++++++++----------
2 files changed, 71 insertions(+), 33 deletions(-)
diff --git
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.less
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.less
index fced2c5ba4..154a959710 100644
---
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.less
+++
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.less
@@ -38,9 +38,28 @@
margin-right: 25px;
}
- h3 {
- display: inline-block;
- padding-right: 5px;
+ .legendtext {
+ fill: rgba(0, 0, 0, 0.65) !important;
+ line-height: 1.5;
+ font-size: 16px !important;
+ font-feature-settings: 'tnum', "tnum";
+ font-variant: tabular-nums;
+ }
+
+ .gtitle {
+ font-size: 22px;
+ font-weight: 500 !important;
+ fill: rgba(0, 0, 0, 0.60) !important;
+ font-feature-settings: 'tnum', "tnum";
+ font-variant: tabular-nums;
+ }
+
+ .slicetext {
+ fill: rgba(0, 0, 0, 0.60) !important;
+ font-size: 17px !important;
+ line-height: 1.5;
+ font-feature-settings: 'tnum', "tnum";
+ font-variant: tabular-nums;
}
}
@@ -49,4 +68,15 @@
margin-right: 10px;
display: inline-block;
width: 300px;
+}
+
+.metadatainformation {
+ font-size: 14px;
+ fill: rgba(0, 0, 0, 0.65) !important;
+ line-height: 1.5;
+ font-feature-settings: 'tnum', "tnum";
+}
+
+.ant-drawer-open .ant-drawer-mask {
+ opacity: 0 !important;
}
\ No newline at end of file
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 872efe0df1..357567f77c 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
@@ -152,26 +152,39 @@ export class DiskUsage extends
React.Component<Record<string, object>, IDUState>
subpaths.push(other);
}
- const pathLabels = subpaths.map(subpath => {
- // The return subPath must be normalized in a format with
- // a leading slash and without trailing slash
- const pieces = subpath.path.split('/');
- const subpathName = pieces[pieces.length - 1];
- // Differentiate key without trailing slash
- return (subpath.isKey || subpathName === OTHER_PATH_NAME) ?
subpathName : subpathName + '/';
- });
+ let pathLabels, values, percentage, sizeStr, pieces, subpathName;
+
+ if (duResponse.subPathCount === 0 || subpaths === 0) {
+ pieces = duResponse && duResponse.path != null &&
duResponse.path.split('/');
+ subpathName = pieces[pieces.length - 1];
+ pathLabels = [subpathName];
+ values = [0.1];
+ percentage = [100.00];
+ sizeStr = [this.byteToSize(duResponse.size, 1)];
+ }
+ else {
+ pathLabels = subpaths.map(subpath => {
+ // The return subPath must be normalized in a format with
+ // a leading slash and without trailing slash
+ pieces = subpath.path.split('/');
+ subpathName = pieces[pieces.length - 1];
+ // Differentiate key without trailing slash
+ return (subpath.isKey || subpathName === OTHER_PATH_NAME) ?
subpathName : subpathName + '/';
+ });
- const values = subpaths.map(subpath => {
- return subpath.size / dataSize;
- });
+ values = subpaths.map(subpath => {
+ return subpath.size / dataSize;
+ });
- const percentage = values.map(value => {
- return (value * 100).toFixed(2);
- });
+ percentage = values.map(value => {
+ return (value * 100).toFixed(2);
+ });
- const sizeStr = subpaths.map(subpath => {
- return this.byteToSize(subpath.size, 1);
- });
+ sizeStr = subpaths.map(subpath => {
+ return this.byteToSize(subpath.size, 1);
+ });
+ }
+
this.setState({
// Normalized path
isLoading: false,
@@ -407,13 +420,7 @@ export class DiskUsage extends
React.Component<Record<string, object>, IDUState>
</Row>
<Row>
{(duResponse.size > 0) ?
- ((duResponse.size > 0 && duResponse.subPathCount === 0) ?
- <div style={{height: 800}}>
- <br/> {' '}
- <h3>This object is a key with a file size of
{this.byteToSize(duResponse.size, 1)}.<br/> {' '}
- You can also view its metadata details by clicking the
top right button.
- </h3>
- </div> :
+ <div style={{height: 800}}>
<Plot
data={plotData}
layout={
@@ -421,18 +428,19 @@ export class DiskUsage extends
React.Component<Record<string, object>, IDUState>
width: 800,
height: 750,
font: {
- family: 'Arial',
- size: 14
+ family: 'Roboto, sans-serif',
+ size: 15
},
showlegend: true,
title: 'Disk Usage for ' + returnPath + ' (Total
Size: ' + this.byteToSize(duResponse.size, 1) + ')'
}
}
- onClick={e => this.clickPieSection(e, returnPath)}/>) :
- <div style={{height: 800}}><br/>
- <h3>This object is empty. Add files to it to see a
visualization on disk usage.<br/> {' '}
+ onClick={(duResponse.subPathCount === 0) ? undefined : e
=> this.clickPieSection(e, returnPath)}/>
+ </div>
+ :
+ <div style={{height: 800}}
className='metadatainformation'><br/>
+ This object is empty. Add files to it to see a
visualization on disk usage.{' '}<br/>
You can also view its metadata details by clicking the
top right button.
- </h3>
</div>}
<DetailPanel path={returnPath} keys={panelKeys}
values={panelValues} visible={showPanel}/>
</Row>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
