Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: [M3-8740] - Convert Object Storage size from GiB to GB in frontend #11293

5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-11293-fixed-1732102749040.md
Original file line number Diff line number Diff line change
@@ -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))
3 changes: 2 additions & 1 deletion packages/manager/src/components/Uploaders/FileUpload.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: You could add a comment to provide context for enabling base10.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Optional: this comment is not super clear. Essentially what you are doing here is converting from binary units (GiB) to decimal units (GB).

</StyledFileSizeTypography>
{props.percentCompleted === 100 ? (
<FileUploadComplete
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) ? (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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. */}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,6 @@ describe('BucketTableRow', () => {
const { getByText } = renderWithTheme(
wrapWithTableBody(<BucketTableRow {...props} />)
);
getByText('5.05 GB');
getByText('5.42 GB');
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
Loading