Change: [DI-26395] - Update filters to use the resources from useQuery cache in CloudPulse metrics (linode#12678)

* DI-26395 : Initial changes for reduction in instances call

* DI-26395 : Cypress changes

* DI-26395 : Cypress changes

* DI-26395 : Code refactoring changes

* DI-26395 : Add changetset

* DI-26395 :  No xFilter needed for firewall service

* DI-26395 :  Code refactoring and updates

Author: venkymano-akamai

packages/manager/.changeset/pr-12678-changed-1754995292006.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Update logic in metrics filters to use the resources from `useResources` useQuery cache in CloudPulse metrics ([#12678](https://github.com/linode/manager/pull/12678))

packages/manager/cypress/e2e/core/cloudpulse/cloudpulse-dashboard-errors.spec.ts

@@ -389,6 +389,11 @@ describe('Tests for API error handling', () => {
     // Wait for the API calls .
     cy.wait(['@fetchServices', '@fetchDashboard']);
 
+    // simulate an error on instances call before changing the region again
+    mockGetDatabasesError('Internal Server Error').as(
+      'getDatabaseInstancesError'
+    );
+
     //  Select a dashboard from the autocomplete input
     ui.autocomplete
       .findByLabel('Dashboard')
@@ -400,33 +405,6 @@ describe('Tests for API error handling', () => {
       .should('be.visible')
       .click();
 
-    // Select a Database Engine from the autocomplete input.
-    ui.autocomplete
-      .findByLabel('Database Engine')
-      .should('be.visible')
-      .type(engine);
-
-    ui.autocompletePopper.findByTitle(engine).should('be.visible').click();
-
-    //  Select a region from the dropdown.
-    ui.regionSelect.find().click();
-    ui.regionSelect
-      .findItemByRegionId(mockRegions[0].id, mockRegions)
-      .should('be.visible')
-      .click();
-
-    // simulate an error on instances call before changing the region again
-    mockGetDatabasesError('Internal Server Error').as(
-      'getDatabaseInstancesError'
-    );
-
-    //  Select a region from the dropdown.
-    ui.regionSelect.find().click();
-    ui.regionSelect
-      .findItemByRegionId(mockRegions[1].id, mockRegions)
-      .should('be.visible')
-      .click();
-
     // Wait for the intercepted request to complete
     cy.wait('@getDatabaseInstancesError');
 

packages/manager/src/components/GenerateFirewallDialog/useCreateFirewallFromTemplate.ts

@@ -65,7 +65,7 @@ export const createFirewallFromTemplate = async (options: {
   // Get firewalls and firewall template in parallel
   const [{ rules, slug }, firewalls] = await Promise.all([
     queryClient.ensureQueryData(firewallQueries.template(templateSlug)),
-    queryClient.fetchQuery(firewallQueries.firewalls._ctx.all), // must fetch fresh data if generating more than one firewall
+    queryClient.fetchQuery(firewallQueries.firewalls._ctx.all()), // must fetch fresh data if generating more than one firewall
   ]);
 
   if (updateProgress) {

packages/manager/src/features/CloudPulse/Alerts/AlertRegions/AlertRegions.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
 import { useResourcesQuery } from 'src/queries/cloudpulse/resources';
 
+import { RESOURCE_FILTER_MAP } from '../../Utils/constants';
 import {
   type AlertFormMode,
   REGION_GROUP_INFO_MESSAGE,
@@ -17,7 +18,7 @@ import { getFilteredRegions } from '../Utils/utils';
 import { DisplayAlertRegions } from './DisplayAlertRegions';
 
 import type { AlertRegion } from './DisplayAlertRegions';
-import type { CloudPulseServiceType, Filter } from '@linode/api-v4';
+import type { CloudPulseServiceType } from '@linode/api-v4';
 
 interface AlertRegionsProps {
   /**
@@ -48,19 +49,11 @@ export const AlertRegions = React.memo((props: AlertRegionsProps) => {
   const { data: regions, isLoading: isRegionsLoading } = useRegionsQuery();
   const [selectedRegions, setSelectedRegions] = React.useState<string[]>(value);
   const [showSelected, setShowSelected] = React.useState<boolean>(false);
-
-  const resourceFilterMap: Record<string, Filter> = {
-    dbaas: {
-      platform: 'rdbms-default',
-    },
-  };
   const { data: resources, isLoading: isResourcesLoading } = useResourcesQuery(
     Boolean(serviceType && regions?.length),
     serviceType === null ? undefined : serviceType,
     {},
-    {
-      ...(resourceFilterMap[serviceType ?? ''] ?? {}),
-    }
+    { ...(RESOURCE_FILTER_MAP[serviceType ?? ''] ?? {}) }
   );
 
   const handleSelectionChange = React.useCallback(

packages/manager/src/features/CloudPulse/Alerts/AlertsResources/AlertsResources.tsx

@@ -132,6 +132,10 @@ export const AlertResources = React.memo((props: AlertResourcesProp) => {
 
   const supportedRegionIds = getSupportedRegionIds(regions, serviceType);
   const xFilterToBeApplied: Filter | undefined = React.useMemo(() => {
+    if (serviceType === 'firewall') {
+      return undefined;
+    }
+
     const regionFilter: Filter = supportedRegionIds
       ? {
           '+or': supportedRegionIds.map((regionId) => ({

packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx

@@ -9,6 +9,7 @@ import {
   useGetCloudPulseMetricDefinitionsByServiceType,
 } from 'src/queries/cloudpulse/services';
 
+import { RESOURCE_FILTER_MAP } from '../Utils/constants';
 import { useAclpPreference } from '../Utils/UserPreference';
 import {
   renderPlaceHolder,
@@ -92,7 +93,7 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
     Boolean(dashboard?.service_type),
     dashboard?.service_type,
     {},
-    dashboard?.service_type === 'dbaas' ? { platform: 'rdbms-default' } : {}
+    RESOURCE_FILTER_MAP[dashboard?.service_type ?? ''] ?? {}
   );
 
   const {
@@ -131,7 +132,13 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
   }
 
   if (isMetricDefinitionLoading || isDashboardLoading || isResourcesLoading) {
-    return <CircleProgress />;
+    return (
+      <CircleProgress
+        sx={(theme) => ({
+          padding: theme.spacingFunction(16),
+        })}
+      />
+    );
   }
 
   if (!dashboard) {

packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx

@@ -18,11 +18,12 @@ export interface FilterData {
   id: { [filterKey: string]: FilterValueType };
   label: { [filterKey: string]: string[] };
 }
+export interface CloudPulseMetricsFilter {
+  [key: string]: FilterValueType;
+}
 export interface DashboardProp {
   dashboard?: Dashboard;
-  filterValue: {
-    [key: string]: FilterValueType;
-  };
+  filterValue: CloudPulseMetricsFilter;
   timeDuration?: DateTimeWithPreset;
 }
 

packages/manager/src/features/CloudPulse/Overview/GlobalFilters.test.tsx

@@ -1,6 +1,7 @@
 import { screen } from '@testing-library/react';
 import React from 'react';
 
+import { databaseInstanceFactory } from 'src/factories';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { GlobalFilters } from './GlobalFilters';
@@ -19,6 +20,19 @@ const setup = () => {
     />
   );
 };
+
+const queryMocks = vi.hoisted(() => ({
+  useResourcesQuery: vi.fn().mockReturnValue({}),
+}));
+
+vi.mock('src/queries/cloudpulse/resources', async () => {
+  const actual = await vi.importActual('src/queries/cloudpulse/resources');
+  return {
+    ...actual,
+    useResourcesQuery: queryMocks.useResourcesQuery,
+  };
+});
+
 describe('Global filters component test', () => {
   it('Should render refresh button', () => {
     setup();
@@ -40,4 +54,16 @@ describe('Global filters component test', () => {
 
     expect(timeRangeSelect).toBeInTheDocument();
   });
+
+  it('Should show circle progress if resources call is loading', async () => {
+    queryMocks.useResourcesQuery.mockReturnValue({
+      data: [{ ...databaseInstanceFactory.build(), clusterSize: 1 }],
+      isLoading: true,
+    });
+
+    setup();
+
+    const progress = await screen.findByTestId('circle-progress');
+    expect(progress).toBeInTheDocument();
+  });
 });

packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx

@@ -4,13 +4,19 @@ import { GridLegacy } from '@mui/material';
 import * as React from 'react';
 
 import Reload from 'src/assets/icons/refresh.svg';
+import { useResourcesQuery } from 'src/queries/cloudpulse/resources';
 
 import { CloudPulseDashboardFilterBuilder } from '../shared/CloudPulseDashboardFilterBuilder';
 import { CloudPulseDashboardSelect } from '../shared/CloudPulseDashboardSelect';
 import { CloudPulseDateTimeRangePicker } from '../shared/CloudPulseDateTimeRangePicker';
 import { CloudPulseTooltip } from '../shared/CloudPulseTooltip';
 import { convertToGmt } from '../Utils/CloudPulseDateTimePickerUtils';
-import { DASHBOARD_ID, REFRESH, TIME_DURATION } from '../Utils/constants';
+import {
+  DASHBOARD_ID,
+  REFRESH,
+  RESOURCE_FILTER_MAP,
+  TIME_DURATION,
+} from '../Utils/constants';
 import { useAclpPreference } from '../Utils/UserPreference';
 
 import type { FilterValueType } from '../Dashboard/CloudPulseDashboardLanding';
@@ -88,6 +94,14 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => {
     handleAnyFilterChange(REFRESH, Date.now(), []);
   }, []);
 
+  const { isLoading, isError } = useResourcesQuery(
+    selectedDashboard !== undefined,
+    selectedDashboard?.service_type ?? '',
+    {},
+
+    RESOURCE_FILTER_MAP[selectedDashboard?.service_type ?? ''] ?? {}
+  );
+
   return (
     <GridLegacy container>
       <GridLegacy item xs={12}>
@@ -150,6 +164,8 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => {
           dashboard={selectedDashboard}
           emitFilterChange={emitFilterChange}
           handleToggleAppliedFilter={handleToggleAppliedFilter}
+          isError={isError}
+          isLoading={isLoading}
           isServiceAnalyticsIntegration={false}
           preferences={preferences}
         />