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

packages/api-v4/.changeset/pr-13177-added-1769180577836.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Added
+---
+
+New quota properties ([#13177](https://github.com/linode/manager/pull/13177))

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

@@ -17,6 +17,11 @@ export interface Quota {
    */
   endpoint_type?: ObjectStorageEndpointTypes;
 
+  /**
+   * Sets usage column to be n/a when value is false.
+   */
+  has_usage?: boolean;
+
   /**
    * A unique identifier for the quota.
    */
@@ -33,6 +38,11 @@ export interface Quota {
    */
   quota_name: string;
 
+  /**
+   * Customer facing id describing the quota.
+   */
+  quota_type: string;
+
   /**
    * The region slug to which this limit applies.
    *

packages/manager/.changeset/pr-13177-added-1769180535349.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Support for throughput quotas ([#13177](https://github.com/linode/manager/pull/13177))

packages/manager/cypress/e2e/core/account/quotas-storage.spec.ts

@@ -60,6 +60,7 @@ describe('Quota workflow tests', () => {
     const mockQuotas = [
       quotaFactory.build({
         quota_id: `obj-bytes-${selectedDomain}`,
+        quota_type: 'obj-bytes',
         description: randomLabel(50),
         endpoint_type: mockSelectedEndpoint.endpoint_type,
         quota_limit: 10,
@@ -69,6 +70,7 @@ describe('Quota workflow tests', () => {
       }),
       quotaFactory.build({
         quota_id: `obj-buckets-${selectedDomain}`,
+        quota_type: 'obj-buckets',
         description: randomLabel(50),
         endpoint_type: mockSelectedEndpoint.endpoint_type,
         quota_limit: 78,
@@ -78,6 +80,7 @@ describe('Quota workflow tests', () => {
       }),
       quotaFactory.build({
         quota_id: `obj-objects-${selectedDomain}`,
+        quota_type: 'obj-objects',
         description: randomLabel(50),
         endpoint_type: mockSelectedEndpoint.endpoint_type,
         quota_limit: 400,
@@ -134,25 +137,32 @@ describe('Quota workflow tests', () => {
         },
       }).as('getFeatureFlags');
     });
+
     it('Quotas and quota usages display properly', function () {
-      cy.visitWithLogin('/account/quotas');
+      cy.visitWithLogin('/quotas');
+
       cy.wait(['@getFeatureFlags', '@getObjectStorageEndpoints']);
+
       // Quotas table placeholder text is shown
       cy.get('[data-testid="table-row-empty"]').should('be.visible');
 
       // Object Storage Endpoint field is blank
       cy.findByPlaceholderText(placeholderText)
         .should('be.visible')
         .should('be.enabled');
+
       ui.autocomplete
         .findByLabel('Object Storage Endpoint')
         .should('be.visible')
         .type(this.selectedDomain);
+
       ui.autocompletePopper
         .findByTitle(this.selectedDomain, { exact: false })
         .should('be.visible')
         .click();
+
       cy.wait(['@getQuotas', '@getQuotaUsages']);
+
       cy.get('table[data-testid="table-endpoint-quotas"]')
         .find('tbody')
         .within(() => {
@@ -200,6 +210,7 @@ describe('Quota workflow tests', () => {
       const updatedQuotas = [
         quotaFactory.build({
           quota_id: `obj-bytes-${updatedDomain}`,
+          quota_type: 'obj-bytes',
           description: randomLabel(50),
           endpoint_type: updatedEndpoint.endpoint_type,
           quota_limit: 20,
@@ -209,6 +220,7 @@ describe('Quota workflow tests', () => {
         }),
         quotaFactory.build({
           quota_id: `obj-buckets-${updatedDomain}`,
+          quota_type: 'obj-buckets',
           description: randomLabel(50),
           endpoint_type: updatedEndpoint.endpoint_type,
           quota_limit: 122,
@@ -218,6 +230,7 @@ describe('Quota workflow tests', () => {
         }),
         quotaFactory.build({
           quota_id: `obj-objects-${updatedDomain}`,
+          quota_type: 'obj-objects',
           description: randomLabel(50),
           endpoint_type: updatedEndpoint.endpoint_type,
           quota_limit: 450,

packages/manager/src/factories/quotas.ts

@@ -7,8 +7,10 @@ export const quotaFactory = Factory.Sync.makeFactory<Quota>({
   quota_id: Factory.each((id) => id.toString()),
   quota_limit: 50,
   quota_name: 'Linode Dedicated vCPUs',
+  quota_type: 'linode-dedicated-cpus',
   region_applied: 'us-east',
   resource_metric: 'CPU',
+  has_usage: true,
 });
 
 export const quotaUsageFactory = Factory.Sync.makeFactory<QuotaUsage>({

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

@@ -7,8 +7,13 @@
 
 import { Quotas } from './Quotas';
 
+import type { Quota } from '@linode/api-v4';
+
 const queryMocks = vi.hoisted(() => ({
   getQuotasFilters: vi.fn().mockReturnValue({}),
+  getQuotaVisibilityFilter: vi
+    .fn()
+    .mockReturnValue({ isVisible: (quota: Quota) => true }),
   useFlags: vi.fn().mockReturnValue({}),
   useGetLocationsForQuotaService: vi.fn().mockReturnValue({}),
   useObjectStorageEndpoints: vi.fn().mockReturnValue({}),
@@ -34,6 +39,7 @@
 
 vi.mock('./utils', () => ({
   getQuotasFilters: queryMocks.getQuotasFilters,
+  getQuotaVisibilityFilter: queryMocks.getQuotaVisibilityFilter,
   useGetLocationsForQuotaService: queryMocks.useGetLocationsForQuotaService,
   convertResourceMetric: queryMocks.convertResourceMetric,
   pluralizeMetric: queryMocks.pluralizeMetric,

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

@@ -16,7 +16,7 @@ import { usePaginationV2 } from 'src/hooks/usePaginationV2';
 
 import { QuotasIncreaseForm } from './QuotasIncreaseForm';
 import { QuotasTableRow } from './QuotasTableRow';
-import { getQuotasFilters } from './utils';
+import { getQuotasFilters, getQuotaVisibilityFilter } from './utils';
 
 import type { Filter, Quota, QuotaType } from '@linode/api-v4';
 import type { SelectOption } from '@linode/ui';
@@ -52,6 +52,7 @@ export const QuotasTable = (props: QuotasTableProps) => {
     location: selectedLocation,
     service: selectedService,
   });
+  const visiblityFilter = getQuotaVisibilityFilter(selectedService);
 
   const {
     data: quotas,
@@ -68,22 +69,30 @@ export const QuotasTable = (props: QuotasTableProps) => {
   );
 
   // Quota Usage Queries
-  // For each quota, fetch the usage in parallel
+  // For each quota with has_usage == true,
+  // fetch the usage in parallel
   // This will only fetch for the paginated set
-  const quotaIds = quotas?.data.map((quota) => quota.quota_id) ?? [];
+  const quotaIdsHavingUsage =
+    quotas?.data
+      .filter(
+        (quota) => quota.has_usage === true || quota.has_usage === undefined
+      )
+      .map((quota) => quota.quota_id) ?? [];
   const quotaUsageQueries = useQueries({
-    queries: quotaIds.map((quotaId) =>
+    queries: quotaIdsHavingUsage.map((quotaId) =>
       quotaQueries.service(selectedService.value)._ctx.usage(quotaId)
     ),
   });
 
   // Combine the quotas with their usage
-  const quotasWithUsage = React.useMemo(
+  const filteredQuotasWithUsage = React.useMemo(
     () =>
-      quotas?.data.map((quota, index) => ({
-        ...quota,
-        usage: quotaUsageQueries?.[index]?.data,
-      })) ?? [],
+      quotas?.data
+        .filter((quota) => visiblityFilter.isVisible(quota))
+        .map((quota, index) => ({
+          ...quota,
+          usage: quotaUsageQueries?.[index]?.data,
+        })) ?? [],
     [quotas, quotaUsageQueries]
   );
 
@@ -135,20 +144,21 @@ export const QuotasTable = (props: QuotasTableProps) => {
               message="Apply filters above to see quotas and current usage."
               sx={{ height: quotaRowMinHeight }}
             />
-          ) : quotasWithUsage.length === 0 ? (
+          ) : filteredQuotasWithUsage.length === 0 ? (
             <TableRowEmpty
               colSpan={4}
               message="There is no data available for this service and region."
               sx={{ height: quotaRowMinHeight }}
             />
           ) : (
-            quotasWithUsage.map((quota, index) => {
-              const hasQuotaUsage = quota.usage?.usage !== null;
-
+            filteredQuotasWithUsage.map((quota, index) => {
               return (
                 <QuotasTableRow
-                  hasQuotaUsage={hasQuotaUsage}
+                  hasUsage={
+                    quota.has_usage === true || quota.has_usage === undefined
+                  }
                   index={index}
+                  isDataPresent={quota.usage?.usage !== null}
                   key={quota.quota_id}
                   quota={quota}
                   quotaUsageQueries={quotaUsageQueries}

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

@@ -20,8 +20,9 @@ interface QuotaWithUsage extends Quota {
 }
 
 interface QuotasTableRowProps {
-  hasQuotaUsage: boolean;
+  hasUsage: boolean;
   index: number;
+  isDataPresent: boolean;
   quota: QuotaWithUsage;
   quotaUsageQueries: UseQueryResult<QuotaUsage, Error>[];
   setConvertedResourceMetrics: (resourceMetric: {
@@ -36,7 +37,8 @@ const quotaRowMinHeight = 58;
 
 export const QuotasTableRow = (props: QuotasTableRowProps) => {
   const {
-    hasQuotaUsage,
+    hasUsage,
+    isDataPresent,
     index,
     quota,
     quotaUsageQueries,
@@ -122,18 +124,20 @@ export const QuotasTableRow = (props: QuotasTableRowProps) => {
               <ErrorOutline />
               {getQuotaError(quotaUsageQueries, index)}
             </Typography>
-          ) : hasQuotaUsage ? (
+          ) : hasUsage && isDataPresent ? (
             <QuotaUsageBar
               limit={quota.quota_limit}
               resourceMetric={quota.resource_metric}
               usage={quota.usage?.usage ?? 0}
             />
-          ) : (
+          ) : hasUsage ? (
             <Typography>Data not available</Typography>
+          ) : (
+            <Typography>Not applicable</Typography>
           )}
         </Box>
       </TableCell>
-      {hasQuotaUsage ? (
+      {hasUsage ? (
         <TableCell sx={{ paddingRight: 0, textAlign: 'right' }}>
           <ActionMenu
             actionsList={[requestIncreaseAction]}

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

@@ -17,6 +17,15 @@ import type {
 import type { SelectOption } from '@linode/ui';
 import type { UseQueryResult } from '@tanstack/react-query';
 
+const INCLUDED_OBJ_QUOTA_TYPES = [
+  'obj-bytes',
+  'obj-objects',
+  'obj-buckets',
+  'obj-total-ingress-throughput',
+  'obj-total-egress-throughput',
+  'obj-total-concurrent-requests',
+];
+
 type UseGetLocationsForQuotaService =
   | {
       isFetchingRegions: boolean;
@@ -80,6 +89,18 @@ interface GetQuotasFiltersProps {
   service: SelectOption<QuotaType>;
 }
 
+export const getQuotaVisibilityFilter = (service: SelectOption<QuotaType>) => {
+  return {
+    isVisible(quota: Quota) {
+      if (service.value === 'object-storage') {
+        return INCLUDED_OBJ_QUOTA_TYPES.includes(quota.quota_type);
+      }
+
+      return true;
+    },
+  };
+};
+
 /**
  * Function to get the filters for the quotas query
  */
@@ -193,6 +214,18 @@ export const convertResourceMetric = ({
     };
   }
 
+  if (initialResourceMetric === 'byte_per_second') {
+    return {
+      convertedUsage: 0,
+      convertedResourceMetric: 'Gbps',
+      convertedLimit: readableBytes(initialLimit, {
+        unit: 'GB',
+        round: 0,
+        base10: true,
+      }).value,
+    };
+  }
+
   return {
     convertedUsage: initialUsage,
     convertedLimit: initialLimit,