From 59aebdf6abf05b9edfa9469ac7cae413b6ae364d Mon Sep 17 00:00:00 2001 From: hasyed-akamai Date: Wed, 20 Nov 2024 16:44:39 +0530 Subject: [PATCH 1/3] fix: [M3-8740] - Convert Object Storage size from GiB to GB in frontend --- packages/manager/src/components/Uploaders/FileUpload.tsx | 2 +- .../ObjectStorage/BucketDetail/ObjectDetailsDrawer.tsx | 2 +- .../features/ObjectStorage/BucketDetail/ObjectTableRow.tsx | 4 +++- .../ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx | 2 +- .../features/ObjectStorage/BucketLanding/BucketLanding.tsx | 3 ++- .../features/ObjectStorage/BucketLanding/BucketTableRow.tsx | 2 +- .../ObjectStorage/BucketLanding/OMC_BucketLanding.tsx | 3 ++- 7 files changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/manager/src/components/Uploaders/FileUpload.tsx b/packages/manager/src/components/Uploaders/FileUpload.tsx index 51b5e81b1d2..840884e8646 100644 --- a/packages/manager/src/components/Uploaders/FileUpload.tsx +++ b/packages/manager/src/components/Uploaders/FileUpload.tsx @@ -93,7 +93,7 @@ export const FileUpload = React.memo((props: FileUploadProps) => { })} variant="body1" > - {readableBytes(props.sizeInBytes).formatted} + {readableBytes(props.sizeInBytes, { base10: true }).formatted} {props.percentCompleted === 100 ? ( {size ? ( - {readableBytes(size).formatted} + {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 6848fff2841..6e9dcd5e430 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectTableRow.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectTableRow.tsx @@ -52,7 +52,9 @@ export const ObjectTableRow = (props: Props) => { - {readableBytes(objectSize).formatted} + + {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 fd5f87bfb7c..bf2fdd0b893 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx @@ -123,7 +123,7 @@ export const BucketDetailsDrawer = React.memo( )} {typeof size === 'number' && ( - {readableBytes(size).formatted} + {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.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx index 5bfdeed2143..74319ea9be1 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx @@ -184,7 +184,8 @@ export const BucketLanding = () => { style={{ marginTop: 18, textAlign: 'center', width: '100%' }} variant="body1" > - Total storage used: {readableBytes(totalUsage).formatted} + Total storage used:{' '} + {readableBytes(totalUsage, { base10: true }).formatted} ) : null} { - {readableBytes(size).formatted} + {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 0cb0316849e..96867e0860d 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx @@ -172,7 +172,8 @@ export const OMC_BucketLanding = () => { style={{ marginTop: 18, textAlign: 'center', width: '100%' }} variant="body1" > - Total storage used: {readableBytes(totalUsage).formatted} + Total storage used:{' '} + {readableBytes(totalUsage, { base10: true }).formatted} ) : null} 1 ? 8 : 18} /> From a10b4d78c31f6c8b6820796d80c2c7801f8b3099 Mon Sep 17 00:00:00 2001 From: hasyed-akamai Date: Wed, 20 Nov 2024 17:09:09 +0530 Subject: [PATCH 2/3] Added changeset: Convert Object Storage bucket sizes from `GiB` to `GB` in the frontend --- packages/manager/.changeset/pr-11293-fixed-1732102749040.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-11293-fixed-1732102749040.md 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)) From 574f52a199dd4e100a7469a687d2c723c9c95080 Mon Sep 17 00:00:00 2001 From: hasyed-akamai Date: Fri, 22 Nov 2024 13:05:02 +0530 Subject: [PATCH 3/3] refactor: [M3-8740] - Convert Object Storage size from GiB to GB in frontend --- packages/manager/src/components/Uploaders/FileUpload.tsx | 1 + .../ObjectStorage/BucketDetail/ObjectDetailsDrawer.test.tsx | 2 +- .../features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.tsx | 1 + .../src/features/ObjectStorage/BucketDetail/ObjectTableRow.tsx | 1 + .../ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx | 1 + .../features/ObjectStorage/BucketLanding/BucketLanding.test.tsx | 2 +- .../src/features/ObjectStorage/BucketLanding/BucketLanding.tsx | 1 + .../ObjectStorage/BucketLanding/BucketTableRow.test.tsx | 2 +- .../src/features/ObjectStorage/BucketLanding/BucketTableRow.tsx | 1 + .../features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx | 1 + 10 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/manager/src/components/Uploaders/FileUpload.tsx b/packages/manager/src/components/Uploaders/FileUpload.tsx index 840884e8646..7aae6ffe007 100644 --- a/packages/manager/src/components/Uploaders/FileUpload.tsx +++ b/packages/manager/src/components/Uploaders/FileUpload.tsx @@ -93,6 +93,7 @@ export const FileUpload = React.memo((props: FileUploadProps) => { })} variant="body1" > + {/* 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 ? ( diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.test.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.test.tsx index 44d9d7418a9..5cd289372ed 100644 --- 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 index 3f05623a88d..087ade67010 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.tsx @@ -64,6 +64,7 @@ export const ObjectDetailsDrawer = React.memo( > {size ? ( + {/* to convert the Bytes to equivalent MB/GB we need to pass the base10 flag as true */} {readableBytes(size, { base10: true }).formatted} ) : null} diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectTableRow.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectTableRow.tsx index 6e9dcd5e430..2b0f8622109 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectTableRow.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectTableRow.tsx @@ -53,6 +53,7 @@ export const ObjectTableRow = (props: Props) => { + {/* 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 bf2fdd0b893..3c3eba42adc 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx @@ -123,6 +123,7 @@ export const BucketDetailsDrawer = React.memo( )} {typeof size === 'number' && ( + {/* 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/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 74319ea9be1..0677fa7072d 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx @@ -185,6 +185,7 @@ export const BucketLanding = () => { variant="body1" > 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} diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.test.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.test.tsx index 12f25403d29..9063f654c3d 100644 --- 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() ); - 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 aba1d91d270..b1ab4548458 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.tsx @@ -108,6 +108,7 @@ export const BucketTableRow = (props: BucketTableRowProps) => { + {/* 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 96867e0860d..137371548e3 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx @@ -173,6 +173,7 @@ export const OMC_BucketLanding = () => { variant="body1" > 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}