fix: [M3-8740] - Convert Object Storage size from GiB to GB in UI (…

…#11293) * fix: [M3-8740] - Convert Object Storage size from GiB to GB in frontend * Added changeset: Convert Object Storage bucket sizes from `GiB` to `GB` in the frontend * refactor: [M3-8740] - Convert Object Storage size from GiB to GB in frontend * Change comment description
linode · Dec 5, 2024 · 2dc4dc6 · 2dc4dc6
1 parent 7609507
commit 2dc4dc6
Show file tree

Hide file tree

Showing 11 changed files with 26 additions and 10 deletions.
diff --git a/packages/manager/.changeset/pr-11293-fixed-1732102749040.md b/packages/manager/.changeset/pr-11293-fixed-1732102749040.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Convert Object Storage bucket sizes from `GiB` to `GB` in the frontend ([#11293](https://github.com/linode/manager/pull/11293))
diff --git a/packages/manager/src/components/Uploaders/FileUpload.tsx b/packages/manager/src/components/Uploaders/FileUpload.tsx
@@ -92,7 +92,8 @@ export const FileUpload = React.memo((props: FileUploadProps) => {
             })}
             variant="body1"
           >
-            {readableBytes(props.sizeInBytes).formatted}
+            {/* to convert from binary units (GiB) to decimal units (GB) we need to pass the base10 flag */}
+            {readableBytes(props.sizeInBytes, { base10: true }).formatted}
           </StyledFileSizeTypography>
           {props.percentCompleted === 100 ? (
             <FileUploadComplete

diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.test.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.test.tsx
@@ -51,7 +51,7 @@ describe('ObjectDetailsDrawer', () => {
       expect(getByText(/^Last modified: 2019-12-31/)).toBeInTheDocument()
     );
 
-    expect(getByText('12.1 KB')).toBeInTheDocument();
+    expect(getByText('12.3 KB')).toBeInTheDocument();
     expect(getByText(/^https:\/\/my-bucket/)).toBeInTheDocument();
   });
 

diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.tsx
@@ -63,7 +63,8 @@ export const ObjectDetailsDrawer = React.memo(
       >
         {size ? (
           <Typography variant="subtitle2">
-            {readableBytes(size).formatted}
+            {/* to convert from binary units (GiB) to decimal units (GB) we need to pass the base10 flag */}
+            {readableBytes(size, { base10: true }).formatted}
           </Typography>
         ) : null}
         {formattedLastModified && Boolean(profile) ? (

diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectTableRow.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectTableRow.tsx
@@ -51,7 +51,10 @@ export const ObjectTableRow = (props: Props) => {
           </Grid>
         </Grid>
       </TableCell>
-      <TableCell noWrap>{readableBytes(objectSize).formatted}</TableCell>
+      <TableCell noWrap>
+        {/* to convert from binary units (GiB) to decimal units (GB) we need to pass the base10 flag */}
+        {readableBytes(objectSize, { base10: true }).formatted}
+      </TableCell>
       <Hidden mdDown>
         <TableCell noWrap>
           <DateTimeDisplay value={objectLastModified} />

diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx
@@ -122,7 +122,8 @@ export const BucketDetailsDrawer = React.memo(
         )}
         {typeof size === 'number' && (
           <Typography variant="subtitle2">
-            {readableBytes(size).formatted}
+            {/* to convert from binary units (GiB) to decimal units (GB) we need to pass the base10 flag */}
+            {readableBytes(size, { base10: true }).formatted}
           </Typography>
         )}
         {/* @TODO OBJ Multicluster: use region instead of cluster if isObjMultiClusterEnabled. */}

diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.test.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.test.tsx
@@ -147,7 +147,7 @@ describe('ObjectStorageLanding', () => {
 
   it('renders a "Total usage" section if there is more than one Bucket', async () => {
     const buckets = objectStorageBucketFactory.buildList(2, {
-      size: 1024 * 1024 * 1024 * 5,
+      size: 1e9 * 5,
     });
 
     // Mock Clusters

diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx
@@ -183,7 +183,9 @@ export const BucketLanding = () => {
             style={{ marginTop: 18, textAlign: 'center', width: '100%' }}
             variant="body1"
           >
-            Total storage used: {readableBytes(totalUsage).formatted}
+            Total storage used:{' '}
+            {/* to convert from binary units (GiB) to decimal units (GB) we need to pass the base10 flag */}
+            {readableBytes(totalUsage, { base10: true }).formatted}
           </Typography>
         ) : null}
         <TransferDisplay

diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.test.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.test.tsx
@@ -41,6 +41,6 @@ describe('BucketTableRow', () => {
     const { getByText } = renderWithTheme(
       wrapWithTableBody(<BucketTableRow {...props} />)
     );
-    getByText('5.05 GB');
+    getByText('5.42 GB');
   });
 });
diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.tsx
@@ -107,7 +107,8 @@ export const BucketTableRow = (props: BucketTableRowProps) => {
       </Hidden>
       <StyledBucketSizeCell noWrap>
         <Typography data-qa-size variant="body1">
-          {readableBytes(size).formatted}
+          {/* to convert from binary units (GiB) to decimal units (GB) we need to pass the base10 flag */}
+          {readableBytes(size, { base10: true }).formatted}
         </Typography>
       </StyledBucketSizeCell>
 

diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx
@@ -171,7 +171,9 @@ export const OMC_BucketLanding = () => {
             style={{ marginTop: 18, textAlign: 'center', width: '100%' }}
             variant="body1"
           >
-            Total storage used: {readableBytes(totalUsage).formatted}
+            Total storage used:{' '}
+            {/* to convert from binary units (GiB) to decimal units (GB) we need to pass the base10 flag */}
+            {readableBytes(totalUsage, { base10: true }).formatted}
           </Typography>
         ) : null}
         <TransferDisplay spacingTop={buckets.length > 1 ? 8 : 18} />