Upcoming: [DI-24748] - Show regions based on available resources and dependent filters in CloudPulse dashboards (linode#12078)

* upcoming: [DI-24748] - Initial changes for region selection in dashboard based on resources

* DI-24748 - Update filter logic

* DI-24748 - Cypress fixes and logic updates

* DI-24748 - Changeset

* DI-24748 - fix cypress

* DI-24748 - fix cypress

* DI-24748 - remove unwanted error message handling and show only regions

* DI-24748 - fix region logic and resource selection CSS updates

* DI-24748 - remove svg styles

* DI-24748 - remove unused import and css fixes

* DI-24748 - fix optional concept for disabled prop

* DI-24748 - remove space between strings

* DI-24748 - NIT typo fixes

Author: venkymano-akamai

packages/manager/.changeset/pr-12078-upcoming-features-1745307427690.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Show regions based on available resources and dependent filters in CloudPulse dashboards `GlobalFilter` section ([#12078](https://github.com/linode/manager/pull/12078))

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

@@ -61,7 +61,7 @@ const flags: Partial<Flags> = {
       dimensionKey: 'cluster_id',
       maxResourceSelections: 10,
       serviceType: 'dbaas',
-      supportedRegionIds: 'us-ord',
+      supportedRegionIds: 'us-ord, us-east',
     },
   ],
 };
@@ -96,21 +96,39 @@ const metricDefinitions = metrics.map(({ name, title, unit }) =>
   })
 );
 
-const mockRegion = regionFactory.build({
-  capabilities: ['Managed Databases'],
-  id: 'us-ord',
-  label: 'Chicago, IL',
-});
+const mockRegions = [
+  regionFactory.build({
+    id: 'us-ord',
+    label: 'Chicago, IL',
+    capabilities: ['Managed Databases'],
+  }),
+  regionFactory.build({
+    id: 'us-east',
+    label: 'Newark, NJ',
+    capabilities: ['Managed Databases'],
+  }),
+];
+
+const databaseMocks: Database[] = [
+  databaseFactory.build({
+    cluster_size: 3,
+    engine: 'mysql',
+    label: clusterName,
+    region: mockRegions[0].id,
+    status: 'provisioning',
+    type: engine,
+    version: '1',
+  }),
+  databaseFactory.build({
+    cluster_size: 3,
+    engine: 'mysql',
+    region: mockRegions[1].id,
+    status: 'provisioning',
+    type: engine,
+    version: '1',
+  }),
+];
 
-const databaseMock: Database = databaseFactory.build({
-  cluster_size: 3,
-  engine: 'mysql',
-  label: clusterName,
-  region: mockRegion.id,
-  status: 'provisioning',
-  type: engine,
-  version: '1',
-});
 const mockAccount = accountFactory.build();
 
 describe('Tests for API error handling', () => {
@@ -122,9 +140,9 @@ describe('Tests for API error handling', () => {
     mockGetCloudPulseServices([serviceType]).as('fetchServices');
     mockCreateCloudPulseJWEToken(serviceType);
     mockGetCloudPulseDashboard(id, dashboard);
-    mockGetRegions([mockRegion]);
+    mockGetRegions(mockRegions);
     mockGetUserPreferences({});
-    mockGetDatabases([databaseMock]).as('getDatabases');
+    mockGetDatabases(databaseMocks).as('getDatabases');
   });
 
   it('displays error message when metric definitions API fails', () => {
@@ -161,7 +179,7 @@ describe('Tests for API error handling', () => {
     //  Select a region from the dropdown.
     ui.regionSelect.find().click();
     ui.regionSelect
-      .findItemByRegionId(mockRegion.id, [mockRegion])
+      .findItemByRegionId(mockRegions[0].id, mockRegions)
       .should('be.visible')
       .click();
 
@@ -238,7 +256,7 @@ describe('Tests for API error handling', () => {
     ui.regionSelect.find().click();
 
     ui.regionSelect
-      .findItemByRegionId(mockRegion.id, [mockRegion])
+      .findItemByRegionId(mockRegions[0].id, mockRegions)
       .should('be.visible')
       .click();
 
@@ -321,7 +339,7 @@ describe('Tests for API error handling', () => {
     //  Select a region from the dropdown.
     ui.regionSelect.find().click();
     ui.regionSelect
-      .findItemByRegionId(mockRegion.id, [mockRegion])
+      .findItemByRegionId(mockRegions[0].id, mockRegions)
       .should('be.visible')
       .click();
 
@@ -383,11 +401,6 @@ describe('Tests for API error handling', () => {
   });
 
   it('displays error message when instance API fails', () => {
-    // Mocking an error response for the 'CloudPulseDatabaseInstances' API request.
-    mockGetDatabasesError('Internal Server Error').as(
-      'getDatabaseInstancesError'
-    );
-
     cy.visitWithLogin('/metrics');
 
     // Wait for the API calls .
@@ -404,14 +417,6 @@ describe('Tests for API error handling', () => {
       .should('be.visible')
       .click();
 
-    //  Select a region from the dropdown.
-    ui.regionSelect.find().click();
-
-    ui.regionSelect
-      .findItemByRegionId(mockRegion.id, [mockRegion])
-      .should('be.visible')
-      .click();
-
     // Select a Database Engine from the autocomplete input.
     ui.autocomplete
       .findByLabel('Database Engine')
@@ -420,6 +425,25 @@ describe('Tests for API error handling', () => {
 
     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/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts

@@ -173,7 +173,7 @@ const databaseMock: Database = databaseFactory.build({
     secondary: undefined,
   },
   label: clusterName,
-  region: mockRegion.label,
+  region: mockRegion.id,
   status: 'provisioning',
   type: engine,
   version: '1',

packages/manager/cypress/e2e/core/cloudpulse/linode-widget-verification.spec.ts

@@ -96,6 +96,7 @@ const metricDefinitions = metrics.map(({ name, title, unit }) =>
 const mockLinode = linodeFactory.build({
   id: kubeLinodeFactory.build().instance_id ?? undefined,
   label: resource,
+  region: 'us-ord',
 });
 
 const mockAccount = accountFactory.build();

packages/manager/cypress/e2e/core/cloudpulse/timerange-verification.spec.ts

@@ -102,7 +102,7 @@ const metricsAPIResponsePayload = cloudPulseMetricsResponseFactory.build({
 });
 
 const databaseMock: Database = databaseFactory.build({
-  region: mockRegion.label,
+  region: mockRegion.id,
   type: engine,
 });
 const mockProfile = profileFactory.build({
@@ -237,10 +237,15 @@ describe('Integration tests for verifying Cloudpulse custom and preset configura
         resources: ['1'],
       },
     }).as('fetchPreferences');
-    mockGetDatabases([databaseMock]);
+    mockGetDatabases([databaseMock]).as('fetchDatabases');
 
     cy.visitWithLogin('/metrics');
-    cy.wait(['@fetchServices', '@fetchDashboard', '@fetchPreferences']);
+    cy.wait([
+      '@fetchServices',
+      '@fetchDashboard',
+      '@fetchPreferences',
+      '@fetchDatabases',
+    ]);
   });
 
   it('Implement and validate the functionality of the custom date and time picker for selecting a specific date and time range', () => {

packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts

@@ -107,15 +107,27 @@ export const getRegionProperties = (
     savePref?: boolean
   ) => void
 ): CloudPulseRegionSelectProps => {
-  const { name: label, placeholder } = props.config.configuration;
-  const { dashboard, isServiceAnalyticsIntegration, preferences } = props;
+  const { name: label, placeholder, filterKey } = props.config.configuration;
+  const {
+    dashboard,
+    isServiceAnalyticsIntegration,
+    preferences,
+    dependentFilters,
+    config,
+  } = props;
   return {
     defaultValue: preferences?.[REGION],
     handleRegionChange,
     label,
     placeholder,
     savePreferences: !isServiceAnalyticsIntegration,
     selectedDashboard: dashboard,
+    disabled: shouldDisableFilterByFilterKey(
+      filterKey,
+      dependentFilters ?? {},
+      dashboard
+    ),
+    xFilter: buildXFilter(config, dependentFilters ?? {}),
   };
 };
 

packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts

@@ -101,6 +101,7 @@ export const DBAAS_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
     },
     {
       configuration: {
+        dependency: ['engine'],
         filterKey: 'region',
         filterType: 'string',
         isFilterable: false,

packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx

@@ -245,6 +245,7 @@ export const CloudPulseDashboardFilterBuilder = React.memo(
               dashboard,
               isServiceAnalyticsIntegration,
               preferences,
+              dependentFilters: dependentFilterReference.current,
             },
             handleRegionChange
           );