Showing Reported Size and Estimated Size in human readable format in UI (#8199)

shahsank3t · web-flow · commit e7f806bb4978 · 2022-02-14T11:47:40.000Z
diff --git a/pinot-controller/src/main/resources/app/pages/TenantDetails.tsx b/pinot-controller/src/main/resources/app/pages/TenantDetails.tsx
@@ -468,14 +468,14 @@ const TenantPageDetails = ({ match }: RouteComponentProps<Props>) => {
           </Grid>
           <Tooltip title="Uncompressed size of all data segments"  arrow placement="top-start">
           <Grid item xs={2}>
-            <strong>Reported Size:</strong> {tableSummary.reportedSize}
+            <strong>Reported Size:</strong> {Utils.formatBytes(tableSummary.reportedSize)}
           </Grid>
           </Tooltip>
           <Grid item xs={2}></Grid>
           <Tooltip title="Estimated size of all data segments, in case any servers are not reachable for actual size" arrow placement="top-start">
             <Grid item xs={2}>
               <strong>Estimated Size: </strong>
-              {tableSummary.estimatedSize}
+              {Utils.formatBytes(tableSummary.estimatedSize)}
             </Grid>
           </Tooltip>
           <Grid item xs={2}></Grid>
diff --git a/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts b/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
@@ -422,8 +422,8 @@ const getAllTableDetails = (tablesList) => {
           } = result.data;
           singleTableData.push(
             tableName,
-            reportedSizeInBytes,
-            estimatedSizeInBytes
+            Utils.formatBytes(reportedSizeInBytes),
+            Utils.formatBytes(estimatedSizeInBytes)
           );
         } else if (index % 3 === 1) {
           // response of getIdealState API
diff --git a/pinot-controller/src/main/resources/app/utils/Utils.tsx b/pinot-controller/src/main/resources/app/utils/Utils.tsx
@@ -324,6 +324,18 @@ const encodeString = (str: string) => {
   return str;
 }
 
+const formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
 export default {
   sortArray,
   tableFormat,
@@ -333,5 +345,6 @@ export default {
   serialize,
   navigateToPreviousPage,
   syncTableSchemaData,
-  encodeString
+  encodeString,
+  formatBytes
 };
