save progress

linode · Feb 12, 2025 · 04c43b6 · 04c43b6
1 parent 89fab5c
commit 04c43b6
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 43 deletions.
diff --git a/packages/api-v4/src/quotas/types.ts b/packages/api-v4/src/quotas/types.ts
@@ -78,8 +78,10 @@ export interface QuotaUsage {
   /**
    * The current account usage, measured in units specified by the
    * `resource_metric` field.
+   *
+   * This can be null if the user does not have resources for the given Quota Name.
    */
-  used: number;
+  used: number | null;
 }
 
 export const quotaTypes = {

diff --git a/packages/manager/src/features/Account/Quotas/Quotas.tsx b/packages/manager/src/features/Account/Quotas/Quotas.tsx
@@ -13,7 +13,6 @@ import * as React from 'react';
 import { DocsLink } from 'src/components/DocsLink/DocsLink';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
-import { regionFactory } from 'src/factories';
 import { useQuotasQuery } from 'src/queries/quotas/quotas';
 
 import { useGetLocationsForQuotaService } from './utils';
@@ -60,19 +59,10 @@ export const Quotas = () => {
     value: key as QuotaType,
   }));
 
-  // Build Location options
-
+  // Destructure Locations for both the regions and s3 endpoints controls
   const { regions, s3Endpoints } = locationData;
-  const globalOption = regionFactory.build({
-    capabilities: [],
-    id: 'global',
-    label: 'Global (Account level)',
-  });
-  const memoizedLocationOptions = React.useMemo(() => {
-    return [globalOption, ...(regions ?? [])];
-  }, [regions, globalOption]);
 
-  // Fetch the usage for each quota
+  // Fetch the usage for each quota, depending on the service
   const quotaIds = quotas?.data.map((quota) => quota.quota_id) ?? [];
   const quotaUsageQueries = useQueries({
     queries: quotaIds.map((quotaId) => ({
@@ -109,7 +99,6 @@ export const Quotas = () => {
   ) => {
     setSelectedService(value);
     setSelectedLocation(null);
-    refetch();
   };
 
   return (
@@ -138,11 +127,12 @@ export const Quotas = () => {
                     label: value?.label,
                     value: value?.value,
                   });
+                  refetch();
                 }}
                 options={
-                  memoizedLocationOptions.map((location) => ({
+                  s3Endpoints?.map((location) => ({
                     label: location.label,
-                    value: location.label,
+                    value: location.value,
                   })) ?? []
                 }
                 placeholder={
@@ -153,7 +143,8 @@ export const Quotas = () => {
                 value={{
                   label:
                     s3Endpoints?.find(
-                      (loc) => loc.label === selectedLocation?.value
+                      (s3Endpoint) =>
+                        s3Endpoint.value === selectedLocation?.value
                     )?.label ?? '',
                   value: selectedLocation?.value ?? '',
                 }}
@@ -169,6 +160,7 @@ export const Quotas = () => {
                     label: value.label,
                     value: value.id,
                   });
+                  refetch();
                 }}
                 placeholder={
                   isFetchingLocations
@@ -180,7 +172,7 @@ export const Quotas = () => {
                 disabled={isFetchingLocations}
                 loading={isFetchingLocations}
                 noOptionsText={`No resource found for ${selectedService.label}`}
-                regions={memoizedLocationOptions}
+                regions={regions ?? []}
                 sx={{ flexGrow: 1, mr: 2 }}
                 value={selectedLocation?.value}
               />
@@ -201,7 +193,7 @@ export const Quotas = () => {
                 <pre
                   style={{
                     backgroundColor: '#f5f5f5',
-                    borderRadius: '4px',
+                    borderRadius: '8px',
                     overflow: 'auto',
                     padding: '1rem',
                     width: '100%',

diff --git a/packages/manager/src/features/Account/Quotas/utils.ts b/packages/manager/src/features/Account/Quotas/utils.ts
@@ -30,7 +30,7 @@ export const useGetLocationsForQuotaService = (
   const {
     data: quotas,
     isFetching: isFetchingObjectStorageQuotas,
-  } = useQuotasQuery(service, {}, {}, true);
+  } = useQuotasQuery(service, {}, {}, service === 'object-storage');
 
   const globalOption = regionFactory.build({
     capabilities: [],
@@ -58,9 +58,7 @@ export const useGetLocationsForQuotaService = (
       isFetchingObjectStorageQuotas,
       regions: null,
       s3Endpoints: [
-        ...(uniqueEndpoints.length >= 2
-          ? [{ label: 'Global (Account level)', value: 'global' }]
-          : []),
+        ...[{ label: 'Global (Account level)', value: 'global' }],
         ...uniqueEndpoints.map((endpoint) => ({
           label: `${endpoint.endpoint} (Standard ${endpoint.endpoint_type})`,
           value: endpoint.endpoint,

diff --git a/packages/manager/src/mocks/presets/crud/handlers/quotas.ts b/packages/manager/src/mocks/presets/crud/handlers/quotas.ts
@@ -7,7 +7,7 @@ import {
   makePaginatedResponse,
   makeResponse,
 } from 'src/mocks/utilities/response';
-import { pickRandom, pickXRandomFromArray } from 'src/utilities/random';
+import { pickRandom } from 'src/utilities/random';
 
 import type { Quota, QuotaType, QuotaUsage } from '@linode/api-v4';
 import type { StrictResponse } from 'msw';
@@ -18,7 +18,7 @@ import type {
 
 const mockQuotas: Record<QuotaType, Quota[]> = {
   linode: [
-    ...pickXRandomFromArray(regions, 3).map((region) =>
+    ...regions.map((region) =>
       quotaFactory.build({
         description:
           'Max number of vCPUs assigned to Linodes with Dedicated plans',
@@ -28,7 +28,7 @@ const mockQuotas: Record<QuotaType, Quota[]> = {
         resource_metric: 'CPU',
       })
     ),
-    ...pickXRandomFromArray(regions, 3).map((region) =>
+    ...regions.map((region) =>
       quotaFactory.build({
         description:
           'Max number of vCPUs assigned to Linodes with Shared plans',
@@ -38,7 +38,7 @@ const mockQuotas: Record<QuotaType, Quota[]> = {
         resource_metric: 'CPU',
       })
     ),
-    ...pickXRandomFromArray(regions, 3).map((region) =>
+    ...regions.map((region) =>
       quotaFactory.build({
         description: 'Max number of GPUs assigned to Linodes with GPU plans',
         quota_limit: pickRandom([5, 6, 7, 8, 9, 10]),
@@ -47,7 +47,7 @@ const mockQuotas: Record<QuotaType, Quota[]> = {
         resource_metric: 'GPU',
       })
     ),
-    ...pickXRandomFromArray(regions, 3).map((region) =>
+    ...regions.map((region) =>
       quotaFactory.build({
         description: 'Max number of VPUs assigned to Linodes with VPU plans',
         quota_limit: pickRandom([10, 20, 30, 40, 50]),
@@ -56,7 +56,7 @@ const mockQuotas: Record<QuotaType, Quota[]> = {
         resource_metric: 'VPU',
       })
     ),
-    ...pickXRandomFromArray(regions, 3).map((region) =>
+    ...regions.map((region) =>
       quotaFactory.build({
         description:
           'Max number of vCPUs assigned to Linodes with High Memory plans',
@@ -68,7 +68,7 @@ const mockQuotas: Record<QuotaType, Quota[]> = {
     ),
   ],
   lke: [
-    ...pickXRandomFromArray(regions, 3).map((region) =>
+    ...regions.map((region) =>
       quotaFactory.build({
         quota_limit: pickRandom([10, 20, 30, 40, 50]),
         quota_name: 'Total number of Clusters',
@@ -156,14 +156,14 @@ export const getQuotas = () => [
           return makeResponse(
             quotaUsageFactory.build({
               quota_limit: quota.quota_limit,
-              used: pickRandom([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]),
+              used: pickRandom([5, 6, 7, 8, 9, 10, null]),
             })
           );
         case 'lke':
           return makeResponse(
             quotaUsageFactory.build({
               quota_limit: quota.quota_limit,
-              used: pickRandom([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
+              used: pickRandom([0, 1, 2, 3, 4, 5, null]),
             })
           );
         case 'object-storage':
@@ -178,8 +178,9 @@ export const getQuotas = () => [
                       200_000_000,
                       300_000_000,
                       400_000_000,
+                      null,
                     ])
-                  : pickRandom([100, 200, 300, 400, 500]),
+                  : pickRandom([100, 200, 300, 400, 500, null]),
             })
           );
         default:

diff --git a/packages/manager/src/utilities/random.ts b/packages/manager/src/utilities/random.ts
@@ -7,16 +7,6 @@ export const pickRandom = <T>(items: T[]): T => {
   return items[Math.floor(Math.random() * items.length)];
 };
 
-/**
- * Picks random elements from an array
- * @param items { T[] } an array of any kind
- * @param count { number } the number of elements to pick
- * @returns {T[]} an array of the given type
- */
-export const pickXRandomFromArray = <T>(items: T[], count: number): T[] => {
-  return items.sort(() => Math.random() - 0.5).slice(0, count);
-};
-
 /**
  * Generates a random date between two dates
  * @param start {Date} the start date