HDDS-12036. Add storage indicators when reaching capacity (#7663)

apache · Jan 10, 2025 · 76ac396 · 76ac396
1 parent 9670965
commit 76ac396
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 44 deletions.
diff --git a/...rces/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewStorageCard.tsx b/...rces/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/...main/resources/webapps/recon/ozone-recon-web/src/v2/components/storageBar/storageBar.less b/...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/.../main/resources/webapps/recon/ozone-recon-web/src/v2/components/storageBar/storageBar.tsx b/.../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>
   );
 }