This is an automated email from the ASF dual-hosted git repository.
tanvipenumudy 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 76ac396611 HDDS-12036. Add storage indicators when reaching capacity
(#7663)
76ac396611 is described below
commit 76ac396611e0d650c02ce0a13fd2c75d61f30f26
Author: Abhishek Pal <[email protected]>
AuthorDate: Fri Jan 10 11:01:46 2025 +0530
HDDS-12036. Add storage indicators when reaching capacity (#7663)
---
.../overviewCard/overviewStorageCard.tsx | 6 ++-
.../src/v2/components/storageBar/storageBar.less | 29 ++++----------
.../src/v2/components/storageBar/storageBar.tsx | 46 ++++++++++++----------
3 files changed, 37 insertions(+), 44 deletions(-)
diff --git
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewStorageCard.tsx
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewStorageCard.tsx
index d6e29a2f96..51de4669b9 100644
---
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewStorageCard.tsx
+++
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewStorageCard.tsx
@@ -55,6 +55,10 @@ const cardStyle: React.CSSProperties = {
boxSizing: 'border-box',
height: '100%'
}
+const cardErrorStyle: React.CSSProperties = {
+ borderColor: '#FF4D4E',
+ borderWidth: '1.4px'
+}
const eChartStyle: React.CSSProperties = {
width: '280px',
height: '200px'
@@ -175,7 +179,7 @@ const OverviewStorageCard:
React.FC<OverviewStorageCardProps> = ({
title='Cluster Capacity'
headStyle={cardHeadStyle}
bodyStyle={cardBodyStyle}
- style={cardStyle}>
+ style={(usagePercentage > 79) ? {...cardStyle, ...cardErrorStyle} :
cardStyle} >
<Row justify='space-between'>
<Col
className='echart-col'
diff --git
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/storageBar/storageBar.less
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/storageBar/storageBar.less
index 798287366c..966e982600 100644
---
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/storageBar/storageBar.less
+++
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/storageBar/storageBar.less
@@ -16,30 +16,15 @@
* limitations under the License.
*/
-@progress-gray: #d0d0d0;
-@progress-light-blue: rgb(230, 235, 248);
-@progress-blue: #1890ff;
-@progress-green: #52c41a;
-@progress-red: #FFA39E;
-
.storage-cell-container-v2 {
.capacity-bar-v2 {
font-size: 1em;
}
-}
-
-.ozone-used-bg-v2 {
- color: @progress-green !important;
-}
-
-.non-ozone-used-bg-v2 {
- color: @progress-blue !important;
-}
-
-.remaining-bg-v2 {
- color: @progress-light-blue !important;
-}
-
-.committed-bg-v2 {
- color: @progress-red !important;
+
+ .capacity-bar-v2-error {
+ font-size: 1em;
+ .ant-progress-text {
+ color: #F5222D;
+ }
+ }
}
diff --git
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/storageBar/storageBar.tsx
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/storageBar/storageBar.tsx
index fd6dd8dfe9..086a8eaa10 100644
---
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/storageBar/storageBar.tsx
+++
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/storageBar/storageBar.tsx
@@ -19,10 +19,8 @@
import React from 'react';
import { Progress } from 'antd';
import filesize from 'filesize';
-import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
-import { FilledIcon } from '@/utils/themeIcons';
import { getCapacityPercent } from '@/utils/common';
import type { StorageReport } from '@/v2/types/overview.types';
@@ -52,25 +50,31 @@ const StorageBar: React.FC<StorageReportProps> = ({
const totalUsed = capacity - remaining;
const tooltip = (
<>
- <div>
- <Icon component={FilledIcon} className='ozone-used-bg-v2' />
- Ozone Used ({size(used)})
- </div>
- <div>
- <Icon component={FilledIcon} className='non-ozone-used-bg-v2' />
- Non Ozone Used ({size(nonOzoneUsed)})
- </div>
- <div>
- <Icon component={FilledIcon} className='remaining-bg-v2' />
- Remaining ({size(remaining)})
- </div>
- <div>
- <Icon component={FilledIcon} className='committed-bg-v2' />
- Container Pre-allocated ({size(committed)})
- </div>
+ <table cellPadding={5}>
+ <tbody>
+ <tr>
+ <td>Ozone Used</td>
+ <td><strong>{size(used)}</strong></td>
+ </tr>
+ <tr>
+ <td>Non Ozone Used</td>
+ <td><strong>{size(nonOzoneUsed)}</strong></td>
+ </tr>
+ <tr>
+ <td>Remaining</td>
+ <td><strong>{size(remaining)}</strong></td>
+ </tr>
+ <tr>
+ <td>Container Pre-allocated</td>
+ <td><strong>{size(committed)}</strong></td>
+ </tr>
+ </tbody>
+ </table>
</>
);
+ const percentage = getCapacityPercent(totalUsed, capacity)
+
return (
<Tooltip
title={tooltip}
@@ -83,9 +87,9 @@ const StorageBar: React.FC<StorageReportProps> = ({
}
<Progress
strokeLinecap='round'
- percent={getCapacityPercent(totalUsed, capacity)}
- success={{ percent: getCapacityPercent(used, capacity) }}
- className='capacity-bar-v2' strokeWidth={strokeWidth} />
+ percent={percentage}
+ strokeColor={(percentage > 80) ? '#FF4D4E' : '#52C41A'}
+ className={(percentage > 80) ? 'capacity-bar-v2-error' :
'capacity-bar-v2'} strokeWidth={strokeWidth} />
</Tooltip>
);
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
