new: STORIF-183 - Quotas table modified to show throughputs.

Author: dchyrva-akamai

packages/api-v4/src/quotas/types.ts

@@ -10,6 +10,12 @@ export interface Quota {
    */
   description: string;
 
+  /**
+   * Defines if the quota should be visible in the table of quotas.
+   *
+   */
+  display_mode: 'hidden' | 'visible';
+
   /**
    * The OBJ endpoint type to which this limit applies.
    *
@@ -52,6 +58,11 @@ export interface Quota {
    * For OBJ limits only.
    */
   s3_endpoint?: string;
+
+  /**
+   * Sets usage column to be n/a when value is "none".
+   */
+  usage_mode: 'none' | 'normal';
 }
 
 /**

packages/manager/src/factories/quotas.ts

@@ -9,6 +9,8 @@ export const quotaFactory = Factory.Sync.makeFactory<Quota>({
   quota_name: 'Linode Dedicated vCPUs',
   region_applied: 'us-east',
   resource_metric: 'CPU',
+  display_mode: 'visible',
+  usage_mode: 'normal',
 });
 
 export const quotaUsageFactory = Factory.Sync.makeFactory<QuotaUsage>({

packages/manager/src/features/Account/Quotas/QuotasTable.tsx

@@ -72,9 +72,13 @@ export const QuotasTable = (props: QuotasTableProps) => {
   );
 
   // Quota Usage Queries
-  // For each quota, fetch the usage in parallel
+  // For each quota with usage_mode == normal,
+  // fetch the usage in parallel
   // This will only fetch for the paginated set
-  const quotaIds = quotas?.data.map((quota) => quota.quota_id) ?? [];
+  const quotaIds =
+    quotas?.data
+      .filter((quota) => quota.usage_mode === 'normal')
+      .map((quota) => quota.quota_id) ?? [];
   const quotaUsageQueries = useQueries({
     queries: quotaIds.map((quotaId) =>
       quotaQueries.service(selectedService.value)._ctx.usage(quotaId)
@@ -147,7 +151,10 @@ export const QuotasTable = (props: QuotasTableProps) => {
             />
           ) : (
             quotasWithUsage.map((quota, index) => {
-              const hasQuotaUsage = quota.usage?.usage !== null;
+              const hasQuotaUsage =
+                quota.usage_mode === 'normal' && quota.usage?.usage !== null;
+
+              if (quota.display_mode === 'hidden') return null;
 
               return (
                 <QuotasTableRow

packages/manager/src/features/Account/Quotas/QuotasTableRow.tsx

@@ -129,7 +129,7 @@ export const QuotasTableRow = (props: QuotasTableRowProps) => {
               usage={quota.usage?.usage ?? 0}
             />
           ) : (
-            <Typography>Data not available</Typography>
+            <Typography>n/a</Typography>
           )}
         </Box>
       </TableCell>

packages/manager/src/features/Account/Quotas/utils.ts

@@ -1,5 +1,9 @@
 import { useRegionsQuery } from '@linode/queries';
-import { capitalize, readableBytes } from '@linode/utilities';
+import {
+  capitalize,
+  convertStorageUnit,
+  readableBytes,
+} from '@linode/utilities';
 import { object, string } from 'yup';
 
 import { regionSelectGlobalOption } from 'src/components/RegionSelect/constants';
@@ -193,6 +197,14 @@ export const convertResourceMetric = ({
     };
   }
 
+  if (initialResourceMetric === 'byte_per_second') {
+    return {
+      convertedUsage: 0,
+      convertedResourceMetric: 'Gbps',
+      convertedLimit: convertStorageUnit('B', initialLimit, 'GB'),
+    };
+  }
+
   return {
     convertedUsage: initialUsage,
     convertedLimit: initialLimit,