HDDS-10494. Recon datanode page to support sort by other storage metrics

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/storageBar/storageBar.less

@@ -50,3 +50,7 @@
 .committed-bg {
   color: @progress-dark-grey;
 }
+
+.percentage-bg {
+  color: linear-gradient(to right, @progress-green 50%, @progress-blue 50%);
+}

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/storageBar/storageBar.tsx

@@ -22,7 +22,7 @@ import {withRouter} from 'react-router-dom';
 import {RouteComponentProps} from 'react-router';
 import {FilledIcon} from 'utils/themeIcons';
 import Tooltip from 'antd/lib/tooltip';
-import {getCapacityPercent} from 'utils/common';
+import {getCapacityPercent, getNonOzoneUsed, getTotalUsed} from 'utils/common';
 import filesize from 'filesize';
 import './storageBar.less';
 
@@ -49,14 +49,16 @@ class StorageBar extends React.Component<IStorageBarProps> {
 
   render() {
     const {total, used, remaining, committed, showMeta} = this.props;
-    const nonOzoneUsed = total - remaining - used;
-    const totalUsed = total - remaining;
+    const nonOzoneUsed = getNonOzoneUsed(total, remaining, used);
+    const totalUsed = getTotalUsed(total, remaining);
+    const percentageUsed = getCapacityPercent(totalUsed, total)
     const tooltip = (
       <div>
+        <div> Total storage utilization ({percentageUsed}%)</div>
         <div><Icon component={FilledIcon} className='ozone-used-bg'/> Ozone Used ({size(used)})</div>
         <div><Icon component={FilledIcon} className='non-ozone-used-bg'/> Non Ozone Used ({size(nonOzoneUsed)})</div>
+        <div><Icon component={FilledIcon} className='committed-bg'/> Pre-allocated ({size(committed)})</div>
         <div><Icon component={FilledIcon} className='remaining-bg'/> Remaining ({size(remaining)})</div>
-        <div><Icon component={FilledIcon} className='committed-bg'/> Container Pre-allocated ({size(committed)})</div>
       </div>
     );
     const metaElement = showMeta ? <div>{size(used)} + {size(nonOzoneUsed)} / {size(total)}</div> : null;
@@ -66,7 +68,7 @@ class StorageBar extends React.Component<IStorageBarProps> {
           {metaElement}
           <Progress
             strokeLinecap='square'
-            percent={getCapacityPercent(totalUsed, total)}
+            percent={percentageUsed}
             successPercent={getCapacityPercent(used, total)}
             className='capacity-bar' strokeWidth={3}/>
         </Tooltip>

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx

@@ -21,6 +21,9 @@ import {notification} from 'antd';
 
 export const getCapacityPercent = (used: number, total: number) => Math.round((used / total) * 100);
 
+export const getNonOzoneUsed = (total: number, remaining: number, ozoneUsed: number) => getTotalUsed(total, remaining) - ozoneUsed;
+export const getTotalUsed = (total: number, remaining: number) => total - remaining;
+
 export const timeFormat = (time: number) => time > 0 ?
   moment(time).format('lll') : 'NA';