diff --git a/packages/manager/.changeset/pr-11293-fixed-1732102749040.md b/packages/manager/.changeset/pr-11293-fixed-1732102749040.md new file mode 100644 index 00000000000..3f4aea55b16 --- /dev/null +++ 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 index 79abd889eda..ef3ec4338e0 100644 --- 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 the Bytes to equivalent MB/GB we need to pass the base10 flag as true */} + {readableBytes(props.sizeInBytes, { base10: true }).formatted} {props.percentCompleted === 100 ? ( { 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 index b7489a57219..c5b8fd616ed 100644 --- 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 ? ( - {readableBytes(size).formatted} + {/* to convert the Bytes to equivalent MB/GB we need to pass the base10 flag as true */} + {readableBytes(size, { base10: true }).formatted} ) : null} {formattedLastModified && Boolean(profile) ? ( diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectTableRow.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectTableRow.tsx index 6d8dc65310c..6fce4f406b5 100644 --- 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) => { - {readableBytes(objectSize).formatted} + + {/* to convert the Bytes to equivalent MB/GB we need to pass the base10 flag as true */} + {readableBytes(objectSize, { base10: true }).formatted} + diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx index 9de2347269d..c392b157ffc 100644 --- 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' && ( - {readableBytes(size).formatted} + {/* to convert the Bytes to equivalent MB/GB we need to pass the base10 flag as true */} + {readableBytes(size, { base10: true }).formatted} )} {/* @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 index af3fa786119..82899102a01 100644 --- 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 index a733864c96f..a862c7050fc 100644 --- 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 the Bytes to equivalent MB/GB we need to pass the base10 flag as true */} + {readableBytes(totalUsage, { base10: true }).formatted} ) : null} { const { getByText } = renderWithTheme( wrapWithTableBody() ); - 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 index 56bfeb83886..5013292c6ab 100644 --- 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) => { - {readableBytes(size).formatted} + {/* to convert the Bytes to equivalent MB/GB we need to pass the base10 flag as true */} + {readableBytes(size, { base10: true }).formatted} diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx index 6ca2559b1ad..63dcd63f352 100644 --- 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 the Bytes to equivalent MB/GB we need to pass the base10 flag as true */} + {readableBytes(totalUsage, { base10: true }).formatted} ) : null} 1 ? 8 : 18} />