[DI-27664] - Integrate nodebalancer dashboard for firewall in metrics (#12980)

* [DI-27664] - Integrate nodebalancer dashboard for firewall in metrics

* [DI-27664] - Remove unnecessary string conversion

* [DI-27664] - Update dimension transformation config for nodebalancer_id, add more tests

* [DI-27664] - Update uesresourcesquery, add mapping for firewall entity type

* upcoming: [DI-27664] - pr comments

* upcoming: [DI-27664] - Pr comments

* upcoming: [DI-27664] - Add stricter check

* upcoming: [DI-27664] - Update filterkey typo for endpoints

* upcoming: [DI-27664] - Add changeset

* upcoming: [DI-27664] - Remove unnecessary check

* upcoming: [DI-27664] - Remove type assertion, keep filters undefined in case of no parent entities

* upcoming: [DI-27664] - Drive id based logic from filterconfig

* upcoming: [DI-27664] - Update prop name, add util and unit test

* upcoming: [DI-27664] - more updates

* upcoming: [DI-27664] - make a union type for entity types

* upcoming: [DI-27664] - Remove temporary integration in service page

Author: ankita-akamai

packages/manager/.changeset/pr-12980-upcoming-features-1760345799268.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+CloudPulse-Metrics: Update `filterConfig.ts`, `useFirewallFetchOptions.tsx` for firewall-nodebalancer dashboard integration ([#12980](https://github.com/linode/manager/pull/12980))

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/constants.ts

@@ -21,6 +21,7 @@ import type {
   CloudPulseServiceType,
   Region,
 } from '@linode/api-v4';
+import type { AssociatedEntityType } from 'src/features/CloudPulse/shared/types';
 
 export const MULTISELECT_PLACEHOLDER_TEXT = 'Select Values';
 export const TEXTFIELD_PLACEHOLDER_TEXT = 'Enter a Value';
@@ -340,6 +341,10 @@ export interface FetchOptions {
 }
 
 export interface FetchOptionsProps {
+  /**
+   * The type of associated entity to filter on.
+   */
+  associatedEntityType?: AssociatedEntityType;
   /**
    * The dimension label determines the filtering logic and return type.
    */

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/useFirewallFetchOptions.ts

@@ -1,4 +1,8 @@
-import { useAllLinodesQuery, useAllVPCsQuery } from '@linode/queries';
+import {
+  useAllLinodesQuery,
+  useAllNodeBalancersQuery,
+  useAllVPCsQuery,
+} from '@linode/queries';
 import { useMemo } from 'react';
 
 import { useResourcesQuery } from 'src/queries/cloudpulse/resources';
@@ -8,6 +12,7 @@ import {
   getFilteredFirewallParentEntities,
   getFirewallLinodes,
   getLinodeRegions,
+  getNodebalancerRegions,
   getVPCSubnets,
 } from './utils';
 
@@ -21,7 +26,15 @@ import type { Filter } from '@linode/api-v4';
 export function useFirewallFetchOptions(
   props: FetchOptionsProps
 ): FetchOptions {
-  const { dimensionLabel, regions, entities, serviceType, type, scope } = props;
+  const {
+    dimensionLabel,
+    regions,
+    entities,
+    serviceType,
+    type,
+    scope,
+    associatedEntityType = 'both',
+  } = props;
 
   const supportedRegionIds =
     (serviceType &&
@@ -54,7 +67,10 @@ export function useFirewallFetchOptions(
     isError: isResourcesError,
   } = useResourcesQuery(
     filterLabels.includes(dimensionLabel ?? ''),
-    'firewall'
+    'firewall',
+    {},
+    {},
+    associatedEntityType // To avoid fetching resources for which the associated entity type is not supported
   );
   // Decide firewall resource IDs based on scope
   const filteredFirewallParentEntityIds = useMemo(() => {
@@ -68,14 +84,24 @@ export function useFirewallFetchOptions(
     );
   }, [scope, firewallResources, entities]);
 
-  const idFilter = {
+  const idFilter: Filter = {
     '+or': filteredFirewallParentEntityIds.length
-      ? filteredFirewallParentEntityIds.map((id) => ({ id }))
-      : [{ id: '' }],
+      ? filteredFirewallParentEntityIds.map(({ id }) => ({ id }))
+      : undefined,
   };
 
-  const combinedFilter: Filter = {
-    '+and': [idFilter, regionFilter].filter(Boolean) as Filter[],
+  const labelFilter: Filter = {
+    '+or': filteredFirewallParentEntityIds.length
+      ? filteredFirewallParentEntityIds.map(({ label }) => ({ label }))
+      : undefined,
+  };
+
+  const combinedFilterLinode: Filter = {
+    '+and': [idFilter, regionFilter].filter(Boolean),
+  };
+
+  const combinedFilterNodebalancer: Filter = {
+    '+and': [labelFilter, regionFilter].filter(Boolean),
   };
 
   // Fetch all linodes with the combined filter
@@ -85,13 +111,30 @@ export function useFirewallFetchOptions(
     isLoading: isLinodesLoading,
   } = useAllLinodesQuery(
     {},
-    combinedFilter,
+    combinedFilterLinode,
     serviceType === 'firewall' &&
       filterLabels.includes(dimensionLabel ?? '') &&
       filteredFirewallParentEntityIds.length > 0 &&
+      (associatedEntityType === 'linode' || associatedEntityType === 'both') &&
       supportedRegionIds?.length > 0
   );
 
+  // Fetch all nodebalancers with the combined filter
+  const {
+    data: nodebalancers,
+    isError: isNodebalancersError,
+    isLoading: isNodebalancersLoading,
+  } = useAllNodeBalancersQuery(
+    serviceType === 'firewall' &&
+      filterLabels.includes(dimensionLabel ?? '') &&
+      filteredFirewallParentEntityIds.length > 0 &&
+      (associatedEntityType === 'nodebalancer' ||
+        associatedEntityType === 'both') &&
+      supportedRegionIds?.length > 0,
+    {},
+    combinedFilterNodebalancer
+  );
+
   // Extract linodes from filtered firewall resources
   const firewallLinodes = useMemo(
     () => getFirewallLinodes(linodes ?? []),
@@ -104,6 +147,17 @@ export function useFirewallFetchOptions(
     [linodes]
   );
 
+  // Extract unique regions from nodebalancers
+  const nodebalancerRegions = useMemo(
+    () => getNodebalancerRegions(nodebalancers ?? []),
+    [nodebalancers]
+  );
+
+  const allRegions = useMemo(
+    () => Array.from(new Set([...linodeRegions, ...nodebalancerRegions])),
+    [linodeRegions, nodebalancerRegions]
+  );
+
   const {
     data: vpcs,
     isLoading: isVPCsLoading,
@@ -117,18 +171,29 @@ export function useFirewallFetchOptions(
   // Determine what options to return based on the dimension label
   switch (dimensionLabel) {
     case 'associated_entity_region':
-    case 'region_id':
       return {
-        values: linodeRegions,
-        isError: isLinodesError || isResourcesError,
-        isLoading: isLinodesLoading || isResourcesLoading,
+        values:
+          associatedEntityType === 'linode'
+            ? linodeRegions
+            : associatedEntityType === 'nodebalancer'
+              ? nodebalancerRegions
+              : allRegions,
+        isError: isLinodesError || isResourcesError || isNodebalancersError,
+        isLoading:
+          isLinodesLoading || isResourcesLoading || isNodebalancersLoading,
       };
     case 'linode_id':
       return {
         values: firewallLinodes,
         isError: isLinodesError || isResourcesError,
         isLoading: isLinodesLoading || isResourcesLoading,
       };
+    case 'region_id':
+      return {
+        values: linodeRegions,
+        isError: isLinodesError || isResourcesError,
+        isLoading: isLinodesLoading || isResourcesLoading,
+      };
     case 'vpc_subnet_id':
       return {
         values: vpcSubnets,

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/utils.test.ts

@@ -1,10 +1,11 @@
-import { linodeFactory } from '@linode/utilities';
+import { linodeFactory, nodeBalancerFactory } from '@linode/utilities';
 
 import { transformDimensionValue } from '../../../Utils/utils';
 import {
   getFilteredFirewallParentEntities,
   getFirewallLinodes,
   getLinodeRegions,
+  getNodebalancerRegions,
   getOperatorGroup,
   getStaticOptions,
   handleValueChange,
@@ -120,16 +121,30 @@ describe('Utils', () => {
         entities: { b: 'linode-2' },
         label: 'firewall-2',
       },
+      {
+        id: '3',
+        entities: { c: 'nodebalancer-1' },
+        label: 'firewall-3',
+      },
     ];
 
     it('should return matched resources by entity IDs', () => {
       expect(getFilteredFirewallParentEntities(resources, ['1'])).toEqual([
-        'a',
+        {
+          label: 'linode-1',
+          id: 'a',
+        },
+      ]);
+      expect(getFilteredFirewallParentEntities(resources, ['3'])).toEqual([
+        {
+          label: 'nodebalancer-1',
+          id: 'c',
+        },
       ]);
     });
 
     it('should return empty array if no match', () => {
-      expect(getFilteredFirewallParentEntities(resources, ['3'])).toEqual([]);
+      expect(getFilteredFirewallParentEntities(resources, ['4'])).toEqual([]);
     });
 
     it('should handle undefined inputs', () => {
@@ -191,6 +206,35 @@ describe('Utils', () => {
     });
   });
 
+  describe('getNodebalancerRegions', () => {
+    it('should extract and deduplicate regions', () => {
+      const nodebalancers = nodeBalancerFactory.buildList(3, {
+        region: 'us-east',
+      });
+      nodebalancers[1].region = 'us-west'; // introduce a second unique region
+
+      const result = getNodebalancerRegions(nodebalancers);
+      expect(result).toEqual([
+        {
+          label: transformDimensionValue(
+            'firewall',
+            'region_id',
+            nodebalancers[0].region
+          ),
+          value: 'us-east',
+        },
+        {
+          label: transformDimensionValue(
+            'firewall',
+            'region_id',
+            nodebalancers[1].region
+          ),
+          value: 'us-west',
+        },
+      ]);
+    });
+  });
+
   describe('scopeBasedFilteredBuckets', () => {
     const buckets: CloudPulseResources[] = [
       { label: 'bucket-1', id: 'bucket-1', region: 'us-east' },

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/utils.ts

@@ -7,9 +7,11 @@ import type {
   CloudPulseServiceType,
   DimensionFilterOperatorType,
   Linode,
+  NodeBalancer,
   VPC,
 } from '@linode/api-v4';
 import type { CloudPulseResources } from 'src/features/CloudPulse/shared/CloudPulseResourcesSelect';
+import type { FirewallEntity } from 'src/features/CloudPulse/shared/types';
 
 /**
  * Resolves the selected value(s) for the Autocomplete component from raw string.
@@ -99,13 +101,19 @@ export const getStaticOptions = (
 export const getFilteredFirewallParentEntities = (
   firewallResources: CloudPulseResources[] | undefined,
   entities: string[] | undefined
-): string[] => {
+): FirewallEntity[] => {
   if (!(firewallResources?.length && entities?.length)) return [];
 
   return firewallResources
     .filter((firewall) => entities.includes(firewall.id))
     .flatMap((firewall) =>
-      firewall.entities ? Object.keys(firewall.entities) : []
+      // combine key as id and value as label for each entity
+      firewall.entities
+        ? Object.entries(firewall.entities).map(([id, label]) => ({
+            id,
+            label,
+          }))
+        : []
     );
 };
 
@@ -139,6 +147,23 @@ export const getLinodeRegions = (linodes: Linode[]): Item<string, string>[] => {
   }));
 };
 
+/**
+ * Extracts unique region values from a list of nodebalancers.
+ * @param nodebalancers - Nodebalancer objects with region information.
+ * @returns - Deduplicated list of regions as options.
+ */
+export const getNodebalancerRegions = (
+  nodebalancers: NodeBalancer[]
+): Item<string, string>[] => {
+  if (!nodebalancers) return [];
+  const regions = new Set<string>();
+  nodebalancers.forEach(({ region }) => region && regions.add(region));
+  return Array.from(regions).map((region) => ({
+    label: transformDimensionValue('firewall', 'region_id', region),
+    value: region,
+  }));
+};
+
 /**
  *
  * @param vpcs List of VPCs

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

@@ -11,6 +11,7 @@ import {
 
 import { RESOURCE_FILTER_MAP } from '../Utils/constants';
 import { useAclpPreference } from '../Utils/UserPreference';
+import { getAssociatedEntityType } from '../Utils/utils';
 import {
   renderPlaceHolder,
   RenderWidgets,
@@ -111,6 +112,9 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
     isLoading: isDashboardLoading,
   } = useCloudPulseDashboardByIdQuery(dashboardId);
 
+  // Get the associated entity type for the dashboard
+  const associatedEntityType = getAssociatedEntityType(dashboardId);
+
   const {
     data: resourceList,
     isError: isResourcesApiError,
@@ -119,7 +123,8 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
     Boolean(dashboard?.service_type),
     dashboard?.service_type,
     {},
-    RESOURCE_FILTER_MAP[dashboard?.service_type ?? ''] ?? {}
+    RESOURCE_FILTER_MAP[dashboard?.service_type ?? ''] ?? {},
+    associatedEntityType
   );
 
   const {

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { CloudPulseErrorPlaceholder } from '../shared/CloudPulseErrorPlaceholder';
 import {
-  LINODE_REGION,
+  PARENT_ENTITY_REGION,
   REFRESH,
   REGION,
   RESOURCE_ID,
@@ -64,9 +64,9 @@ export const CloudPulseDashboardRenderer = React.memo(
         duration={timeDuration}
         groupBy={groupBy}
         linodeRegion={
-          filterValue[LINODE_REGION] &&
-          typeof filterValue[LINODE_REGION] === 'string'
-            ? (filterValue[LINODE_REGION] as string)
+          filterValue[PARENT_ENTITY_REGION] &&
+          typeof filterValue[PARENT_ENTITY_REGION] === 'string'
+            ? (filterValue[PARENT_ENTITY_REGION] as string)
             : undefined
         }
         manualRefreshTimeStamp={

packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.test.tsx

@@ -238,4 +238,22 @@ describe('CloudPulseDashboardWithFilters component tests', () => {
     const startDate = screen.getByText('Start Date');
     expect(startDate).toBeInTheDocument();
   });
+
+  it('renders a CloudPulseDashboardWithFilters component successfully for firewall nodebalancer', () => {
+    queryMocks.useCloudPulseDashboardByIdQuery.mockReturnValue({
+      data: { ...mockDashboard, service_type: 'firewall', id: 8 },
+      error: false,
+      isError: false,
+      isLoading: false,
+    });
+
+    renderWithTheme(
+      <CloudPulseDashboardWithFilters dashboardId={8} resource={1} />
+    );
+    const startDate = screen.getByText('Start Date');
+    expect(startDate).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText('Select a NodeBalancer Region')
+    ).toBeVisible();
+  });
 });