diff --git a/packages/manager/src/components/QuotaUsageBar/QuotaUsageBar.test.tsx b/packages/manager/src/components/QuotaUsageBar/QuotaUsageBar.test.tsx
index 8b8da628179..665c47ba819 100644
--- a/packages/manager/src/components/QuotaUsageBar/QuotaUsageBar.test.tsx
+++ b/packages/manager/src/components/QuotaUsageBar/QuotaUsageBar.test.tsx
@@ -13,4 +13,20 @@ describe('QuotaUsageBanner', () => {
const quotaUsageText = getByText('1 of 10 Bytes used');
expect(quotaUsageText).toBeVisible();
});
+
+ it.each([1000000000, 100000000, 10000000, 1000000])(
+ 'should display content usage in proper format',
+ (usage) => {
+ const { getByText } = renderWithTheme(
+
+ );
+
+ const quotaUsageText = getByText('<0.01 of 100 TB used');
+ expect(quotaUsageText).toBeVisible();
+ }
+ );
});
diff --git a/packages/manager/src/components/QuotaUsageBar/QuotaUsageBar.tsx b/packages/manager/src/components/QuotaUsageBar/QuotaUsageBar.tsx
index d7a19a57304..d041a256567 100644
--- a/packages/manager/src/components/QuotaUsageBar/QuotaUsageBar.tsx
+++ b/packages/manager/src/components/QuotaUsageBar/QuotaUsageBar.tsx
@@ -23,6 +23,18 @@ export const QuotaUsageBar = ({ limit, usage, resourceMetric }: Props) => {
initialLimit: limit,
});
+ function getUsageText() {
+ let convertedUsageString = convertedUsage.toLocaleString();
+ const convertedLimitString = convertedLimit.toLocaleString();
+
+ // Special case to display storage usage
+ if (convertedUsage === 0 && convertedResourceMetric === 'TB') {
+ convertedUsageString = '<0.01';
+ }
+
+ return `${convertedUsageString} of ${convertedLimitString} ${convertedResourceMetric} used`;
+ }
+
return (
<>
{
sx={{ mb: 1, mt: 2, padding: '3px' }}
value={usage}
/>
-
- {`${convertedUsage?.toLocaleString() ?? 'unknown'} of ${
- convertedLimit?.toLocaleString() ?? 'unknown'
- } ${convertedResourceMetric} used`}
-
+ {getUsageText()}
>
);
};