upcoming: [DI-27803] - Firewall-Nodebalancer dashboard enhancements - filtering of firewalls & single select firewall filter (linode#13014)

* add filtering for firewalls

* update comments

* upcoming: [DI-27803] - Update util

* upcoming: [DI-27803] - Update comments

* upcoming: [DI-27803] - Update util and comments

* upcoming: [DI-27803] - Update custom-select, config, utils

* upcoming: [DI-27803] - Remove type error

* upcoming: [DI-27803] - Update comments

* upcoming: [DI-27803] - Improve consistency

* [DI-27803] - fix linode interface filtering bug

* upcoming: [DI-27803] - Add changeset

* upcoming: [DI-27803] - Avoid type casting, convert to string array

---------

Co-authored-by: Nikhil Agrawal <165884194+nikhagra-akamai@users.noreply.github.com>

Author: ankita-akamai

packages/manager/.changeset/pr-13014-upcoming-features-1761313517879.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+CloudPulse-Metrics: Update `FilterConfig.ts` to make firewall a single-select filter and to filter firewalls based on dashboard ([#13014](https://github.com/linode/manager/pull/13014))

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

@@ -11,7 +11,7 @@ import {
 
 import { RESOURCE_FILTER_MAP } from '../Utils/constants';
 import { useAclpPreference } from '../Utils/UserPreference';
-import { getAssociatedEntityType } from '../Utils/utils';
+import { getResourcesFilterConfig } from '../Utils/utils';
 import {
   renderPlaceHolder,
   RenderWidgets,
@@ -112,8 +112,11 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
     isLoading: isDashboardLoading,
   } = useCloudPulseDashboardByIdQuery(dashboardId);
 
-  // Get the associated entity type for the dashboard
-  const associatedEntityType = getAssociatedEntityType(dashboardId);
+  // Get the resources filter configuration for the dashboard
+  const resourcesFilterConfig = getResourcesFilterConfig(dashboardId);
+  const associatedEntityType =
+    resourcesFilterConfig?.associatedEntityType ?? 'both';
+  const filterFn = resourcesFilterConfig?.filterFn;
 
   const {
     data: resourceList,
@@ -124,7 +127,8 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
     dashboard?.service_type,
     {},
     RESOURCE_FILTER_MAP[dashboard?.service_type ?? ''] ?? {},
-    associatedEntityType
+    associatedEntityType,
+    filterFn
   );
 
   const {

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

@@ -80,9 +80,11 @@ export const CloudPulseDashboardRenderer = React.memo(
             : undefined
         }
         resources={
-          filterValue[RESOURCE_ID] && Array.isArray(filterValue[RESOURCE_ID])
-            ? (filterValue[RESOURCE_ID] as string[])
-            : []
+          Array.isArray(filterValue[RESOURCE_ID])
+            ? filterValue[RESOURCE_ID].map(String)
+            : typeof filterValue[RESOURCE_ID] === 'string'
+              ? [filterValue[RESOURCE_ID]]
+              : []
         }
         savePref={true}
         serviceType={dashboard.service_type}

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

@@ -134,6 +134,37 @@ it('test getResourceSelectionProperties method', () => {
   }
 });
 
+it('test getResourceSelectionProperties method for linode-firewall', () => {
+  const resourceSelectionConfig = firewallConfig?.filters.find(
+    (filterObj) => filterObj.name === 'Firewalls'
+  );
+
+  expect(resourceSelectionConfig).toBeDefined();
+
+  if (resourceSelectionConfig) {
+    const {
+      disabled,
+      handleResourcesSelection,
+      label,
+      savePreferences,
+      filterFn,
+    } = getResourcesProperties(
+      {
+        config: resourceSelectionConfig,
+        dashboard: { ...mockDashboard, id: 4 },
+        isServiceAnalyticsIntegration: true,
+      },
+      vi.fn()
+    );
+    const { name } = resourceSelectionConfig.configuration;
+    expect(handleResourcesSelection).toBeDefined();
+    expect(savePreferences).toEqual(false);
+    expect(disabled).toEqual(false);
+    expect(label).toEqual(name);
+    expect(filterFn).toBeDefined();
+  }
+});
+
 it('test getResourceSelectionProperties method with disabled true', () => {
   const resourceSelectionConfig = linodeConfig?.filters.find(
     (filterObj) => filterObj.name === 'Resources'
@@ -349,6 +380,7 @@ it('test getCustomSelectProperties method', () => {
       isMultiSelect: isMultiSelectApi,
       savePreferences: savePreferencesApi,
       type,
+      filterFn,
     } = getCustomSelectProperties(
       {
         config: customSelectEngineConfig,
@@ -365,6 +397,7 @@ it('test getCustomSelectProperties method', () => {
     expect(savePreferencesApi).toEqual(false);
     expect(isMultiSelectApi).toEqual(true);
     expect(label).toEqual(name);
+    expect(filterFn).not.toBeDefined();
   }
 });
 

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

@@ -183,6 +183,8 @@ export const getResourcesProperties = (
     resourceType: dashboard.service_type,
     savePreferences: !isServiceAnalyticsIntegration,
     xFilter: filterBasedOnConfig(config, dependentFilters ?? {}),
+    associatedEntityType: config.configuration.associatedEntityType ?? 'both',
+    filterFn: config.configuration.filterFn,
   };
 };
 
@@ -247,6 +249,7 @@ export const getCustomSelectProperties = (
     options,
     placeholder,
     isOptional,
+    filterFn,
   } = props.config.configuration;
   const {
     dashboard,
@@ -285,6 +288,7 @@ export const getCustomSelectProperties = (
     type: options
       ? CloudPulseSelectTypes.static
       : CloudPulseSelectTypes.dynamic,
+    filterFn,
   };
 };
 

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

@@ -1,5 +1,7 @@
 import { capabilityServiceTypeMapping } from '@linode/api-v4';
 
+import { queryFactory } from 'src/queries/cloudpulse/queries';
+
 import {
   ENDPOINT,
   INTERFACE_IDS_PLACEHOLDER_TEXT,
@@ -8,8 +10,10 @@ import {
   RESOURCE_ID,
 } from './constants';
 import { CloudPulseAvailableViews, CloudPulseSelectTypes } from './models';
+import { filterFirewallResources } from './utils';
 
 import type { CloudPulseServiceTypeFilterMap } from './models';
+import type { Firewall } from '@linode/api-v4';
 
 const TIME_DURATION = 'Time Range';
 
@@ -233,6 +237,8 @@ export const FIREWALL_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
         placeholder: 'Select Firewalls',
         priority: 1,
         associatedEntityType: 'linode',
+        filterFn: (resources: Firewall[]) =>
+          filterFirewallResources(resources, 'linode'),
       },
       name: 'Firewalls',
     },
@@ -328,14 +334,16 @@ export const FIREWALL_NODEBALANCER_CONFIG: Readonly<CloudPulseServiceTypeFilterM
           filterType: 'string',
           isFilterable: true,
           isMetricsFilter: true,
-          isMultiSelect: true,
-          name: 'Firewalls',
+          name: 'Firewall',
           neededInViews: [CloudPulseAvailableViews.central],
           associatedEntityType: 'nodebalancer',
-          placeholder: 'Select Firewalls',
+          placeholder: 'Select a Firewall',
           priority: 1,
+          apiV4QueryKey: queryFactory.resources('firewall'),
+          filterFn: (resources: Firewall[]) =>
+            filterFirewallResources(resources, 'nodebalancer'),
         },
-        name: 'Firewalls',
+        name: 'Firewall',
       },
       {
         configuration: {

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

@@ -46,6 +46,8 @@ export const PORT = 'port';
 
 export const INTERFACE_ID = 'interface_id';
 
+export const FIREWALL = 'Firewall';
+
 export const PORTS_HELPER_TEXT =
   'Enter one or more port numbers (1-65535) separated by commas.';
 

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

@@ -3,7 +3,13 @@ import type {
   Capabilities,
   CloudPulseServiceType,
   DatabaseEngine,
+  DatabaseInstance,
   DatabaseType,
+  Firewall,
+  Linode,
+  NodeBalancer,
+  ObjectStorageBucket,
+  Volume,
 } from '@linode/api-v4';
 import type { QueryFunction, QueryKey } from '@tanstack/react-query';
 
@@ -46,7 +52,15 @@ export interface CloudPulseServiceTypeFilters {
 /**
  * As of now, the list of possible custom filters are engine, database type, this union type will be expanded if we start enhancing our custom select config
  */
-export type QueryFunctionType = DatabaseEngine[] | DatabaseType[];
+export type QueryFunctionType =
+  | DatabaseEngine[]
+  | DatabaseInstance[]
+  | DatabaseType[]
+  | Firewall[]
+  | Linode[]
+  | NodeBalancer[]
+  | ObjectStorageBucket[]
+  | Volume[];
 
 /**
  * The non array types of QueryFunctionType like DatabaseEngine|DatabaseType
@@ -108,6 +122,11 @@ export interface CloudPulseServiceTypeFiltersConfiguration {
    */
   dimensionKey?: string;
 
+  /**
+   * This is an optional field, it is used to filter the resources
+   */
+  filterFn?: (resources: QueryFunctionType) => QueryFunctionType;
+
   /**
    * This is the field that will be sent in the metrics api call or xFilter
    */

packages/manager/src/features/CloudPulse/Utils/utils.test.ts

@@ -2,6 +2,10 @@ import { regionFactory } from '@linode/utilities';
 import { describe, expect, it } from 'vitest';
 
 import { serviceTypesFactory } from 'src/factories';
+import {
+  firewallEntityfactory,
+  firewallFactory,
+} from 'src/factories/firewalls';
 
 import {
   INTERFACE_ID,
@@ -20,9 +24,10 @@ import {
 import {
   arePortsValid,
   areValidInterfaceIds,
-  getAssociatedEntityType,
+  filterFirewallResources,
   getEnabledServiceTypes,
   getFilteredDimensions,
+  getResourcesFilterConfig,
   isValidFilter,
   isValidPort,
   useIsAclpSupportedRegion,
@@ -345,17 +350,89 @@ describe('getEnabledServiceTypes', () => {
     expect(result).not.toContain('linode');
   });
 
-  describe('getAssociatedEntityType', () => {
-    it('should return both if the dashboard id is not provided', () => {
-      expect(getAssociatedEntityType(undefined)).toBe('both');
+  describe('getResourcesFilterConfig', () => {
+    it('should return undefined if the dashboard id is not provided', () => {
+      expect(getResourcesFilterConfig(undefined)).toBeUndefined();
+    });
+
+    it('should return the resources filter configuration for the linode-firewalldashboard', () => {
+      const resourcesFilterConfig = getResourcesFilterConfig(4);
+      expect(resourcesFilterConfig).toBeDefined();
+      expect(resourcesFilterConfig?.associatedEntityType).toBe('linode');
+      expect(resourcesFilterConfig?.filterFn).toBeDefined();
     });
 
-    it('should return the associated entity type for linode firewall dashboard', () => {
-      expect(getAssociatedEntityType(4)).toBe('linode');
+    it('should return the resources filter configuration for the nodebalancer-firewall dashboard', () => {
+      const resourcesFilterConfig = getResourcesFilterConfig(8);
+      expect(resourcesFilterConfig).toBeDefined();
+      expect(resourcesFilterConfig?.associatedEntityType).toBe('nodebalancer');
+      expect(resourcesFilterConfig?.filterFn).toBeDefined();
     });
+  });
 
-    it('should return the associated entity type for nodebalancer firewall dashboard', () => {
-      expect(getAssociatedEntityType(8)).toBe('nodebalancer');
+  describe('filterFirewallResources', () => {
+    it('should return the filtered firewall resources for linode', () => {
+      const resources = [
+        firewallFactory.build({
+          entities: [
+            firewallEntityfactory.build({
+              id: 1,
+              label: 'linode-1',
+              type: 'linode',
+            }),
+          ],
+        }),
+        firewallFactory.build({
+          entities: [
+            firewallEntityfactory.build({
+              id: 33,
+              label: null,
+              type: 'linode_interface',
+              parent_entity: {
+                id: 2,
+                label: 'linode-2',
+                type: 'linode',
+              },
+            }),
+          ],
+        }),
+        firewallFactory.build({
+          entities: [
+            firewallEntityfactory.build({
+              id: 3,
+              label: null,
+              type: 'linode',
+            }),
+          ],
+        }),
+        firewallFactory.build({
+          entities: [
+            firewallEntityfactory.build({
+              id: 4,
+              label: null,
+              type: 'linode_interface',
+              parent_entity: {
+                id: 3,
+                label: null,
+                type: 'linode',
+              },
+            }),
+          ],
+        }),
+        firewallFactory.build({
+          entities: [
+            firewallEntityfactory.build({
+              id: 2,
+              label: 'nodebalancer-1',
+              type: 'nodebalancer',
+            }),
+          ],
+        }),
+      ];
+      expect(filterFirewallResources(resources, 'linode')).toEqual([
+        resources[0],
+        resources[1],
+      ]);
     });
   });
 });