upcoming: [DI-28222] : Integration for widget Level dimension filters in cloudpulse metrics (#13116)

* upcoming: [DI-28222] - Integration changes for dimension filters

* upcoming: [DI-28222] - Integration changes for dimension filters

* upcoming: [DI-28222] - Fix key issue

* upcoming: [DI-28222] - Code refactoring and issue fixes

* upcoming: [DI-28222] - Code refactoring

* upcoming: [DI-28222] - Add UT for renderers

* upcoming: [DI-28222] - Code refactoring to continue support widget filters, incase of widget dimension filters not supported

* upcoming: [DI-28222] - UT fix

---------

Co-authored-by: agorthi-akamai <[email protected]>

Author: venkymano-akamai

packages/manager/.changeset/pr-13116-upcoming-features-1763642170773.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add integration changes with `CloudPulseWidget` for widget level dimension support in CloudPulse metrics ([#13116](https://github.com/linode/manager/pull/13116))

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

@@ -104,7 +104,7 @@ const dashboard = dashboardFactory.build({
   widgets: metrics.map(({ name, title, unit, yLabel }) =>
     widgetFactory.build({
       entity_ids: [String(id)],
-      filters: [...dimensions],
+      filters: [],
       label: title,
       metric: name,
       unit,
@@ -367,7 +367,7 @@ describe('Integration Tests for DBaaS Dashboard ', () => {
             (filter: DimensionFilter) => filter.dimension_label === 'node_type'
           );
 
-          expect(nodeTypeFilter).to.have.length(2);
+          expect(nodeTypeFilter).to.have.length(1);
           expect(nodeTypeFilter[0].operator).to.equal('eq');
           expect(nodeTypeFilter[0].value).to.equal('secondary');
         });
@@ -462,7 +462,7 @@ describe('Integration Tests for DBaaS Dashboard ', () => {
         const nodeTypeFilter = filters.filter(
           (filter: DimensionFilter) => filter.dimension_label === 'node_type'
         );
-        expect(nodeTypeFilter).to.have.length(2);
+        expect(nodeTypeFilter).to.have.length(1);
         expect(nodeTypeFilter[0].operator).to.equal('eq');
         expect(nodeTypeFilter[0].value).to.equal('secondary');
 
@@ -537,7 +537,7 @@ describe('Integration Tests for DBaaS Dashboard ', () => {
         const nodeTypeFilter = filters.filter(
           (filter: DimensionFilter) => filter.dimension_label === 'node_type'
         );
-        expect(nodeTypeFilter).to.have.length(2);
+        expect(nodeTypeFilter).to.have.length(1);
         expect(nodeTypeFilter[0].operator).to.equal('eq');
         expect(nodeTypeFilter[0].value).to.equal('secondary');
       });

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/FirewallDimensionFilterAutocomplete.tsx

@@ -30,15 +30,18 @@ export const FirewallDimensionFilterAutocomplete = (
     scope,
     serviceType,
     type,
+    selectedRegions,
   } = props;
 
   const { data: regions } = useRegionsQuery();
 
   const { values, isLoading, isError } = useFirewallFetchOptions({
     associatedEntityType: entityType,
     dimensionLabel,
+    regions: selectedRegions
+      ? regions?.filter(({ id }) => selectedRegions.includes(id))
+      : regions,
     entities,
-    regions,
     scope,
     serviceType,
     type,

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/ValueFieldRenderer.tsx

@@ -194,6 +194,7 @@ export const ValueFieldRenderer = (props: ValueFieldRendererProps) => {
             entityType={entityType}
             placeholderText={config.placeholder ?? autocompletePlaceholder}
             scope={scope}
+            selectedRegions={selectedRegions}
           />
         );
       case 'objectstorage':

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

@@ -151,6 +151,7 @@ export const DBAAS_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
         isMetricsFilter: false, // if it is false, it will go as a part of filter params, else global filter
         isMultiSelect: false,
         name: 'Node Type',
+        dimensionKey: 'node_type',
         neededInViews: [
           CloudPulseAvailableViews.service,
           CloudPulseAvailableViews.central,
@@ -203,6 +204,7 @@ export const NODEBALANCER_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
         isMetricsFilter: false,
         isOptional: true,
         name: 'Ports',
+        dimensionKey: 'port',
         neededInViews: [
           CloudPulseAvailableViews.central,
           CloudPulseAvailableViews.service,
@@ -256,6 +258,7 @@ export const FIREWALL_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
         isMetricsFilter: true,
         isMultiSelect: false,
         name: 'Linode Region',
+        dimensionKey: 'region_id',
         neededInViews: [
           CloudPulseAvailableViews.central,
           CloudPulseAvailableViews.service,
@@ -274,6 +277,7 @@ export const FIREWALL_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
         isMultiSelect: true,
         name: 'Interface Types',
         isOptional: true,
+        dimensionKey: 'interface_type',
         neededInViews: [
           CloudPulseAvailableViews.central,
           CloudPulseAvailableViews.service,
@@ -302,6 +306,7 @@ export const FIREWALL_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
         isMetricsFilter: false,
         isOptional: true,
         name: 'Interface IDs',
+        dimensionKey: 'interface_id',
         neededInViews: [
           CloudPulseAvailableViews.central,
           CloudPulseAvailableViews.service,
@@ -359,6 +364,7 @@ export const FIREWALL_NODEBALANCER_CONFIG: Readonly<CloudPulseServiceTypeFilterM
           isMetricsFilter: true,
           name: 'NodeBalancer Region',
           priority: 2,
+          dimensionKey: 'region_id',
           neededInViews: [
             CloudPulseAvailableViews.central,
             CloudPulseAvailableViews.service,
@@ -377,6 +383,7 @@ export const FIREWALL_NODEBALANCER_CONFIG: Readonly<CloudPulseServiceTypeFilterM
           isMultiSelect: true,
           isOptional: true,
           name: 'NodeBalancers',
+          dimensionKey: 'nodebalancer_id',
           neededInViews: [
             CloudPulseAvailableViews.central,
             CloudPulseAvailableViews.service,
@@ -419,6 +426,7 @@ export const OBJECTSTORAGE_CONFIG_BUCKET: Readonly<CloudPulseServiceTypeFilterMa
           isMultiSelect: true,
           name: 'Endpoints',
           priority: 2,
+          dimensionKey: 'endpoint',
           neededInViews: [CloudPulseAvailableViews.central],
           filterFn: (resources: ObjectStorageBucket[]) =>
             getValidSortedEndpoints(resources),

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

@@ -481,7 +481,10 @@ export const isValidFilter = (
   if (!dimension) return false;
 
   const dimensionConfig =
-    valueFieldConfig[filter.dimension_label] ?? valueFieldConfig['*'];
+    valueFieldConfig[filter.dimension_label] ??
+    valueFieldConfig[
+      !dimension.values || dimension.values.length === 0 ? 'emptyValue' : '*'
+    ];
 
   const dimensionFieldConfig = dimensionConfig[operatorGroup];
 
@@ -493,11 +496,7 @@ export const isValidFilter = (
       String(filter.value ?? ''),
       dimensionFieldConfig
     );
-  } else if (
-    dimensionFieldConfig.type === 'textfield' ||
-    !dimension.values ||
-    !dimension.values.length
-  ) {
+  } else if (dimensionFieldConfig.type === 'textfield') {
     return true;
   }
 

packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx

@@ -1,4 +1,4 @@
-import { useProfile } from '@linode/queries';
+import { useProfile, useRegionsQuery } from '@linode/queries';
 import { Box, Paper, Typography } from '@linode/ui';
 import { GridLegacy, Stack, useTheme } from '@mui/material';
 import { DateTime } from 'luxon';
@@ -7,6 +7,8 @@ import React from 'react';
 import { useFlags } from 'src/hooks/useFlags';
 import { useCloudPulseMetricsQuery } from 'src/queries/cloudpulse/metrics';
 
+import { useBlockStorageFetchOptions } from '../Alerts/CreateAlert/Criteria/DimensionFilterValue/useBlockStorageFetchOptions';
+import { useFirewallFetchOptions } from '../Alerts/CreateAlert/Criteria/DimensionFilterValue/useFirewallFetchOptions';
 import { WidgetFilterGroupByRenderer } from '../GroupBy/WidgetFilterGroupByRenderer';
 import {
   generateGraphData,
@@ -18,10 +20,17 @@ import {
   SIZE,
   TIME_GRANULARITY,
 } from '../Utils/constants';
-import { constructAdditionalRequestFilters } from '../Utils/FilterBuilder';
+import {
+  constructAdditionalRequestFilters,
+  constructWidgetDimensionFilters,
+} from '../Utils/FilterBuilder';
+import { FILTER_CONFIG } from '../Utils/FilterConfig';
 import { generateCurrentUnit } from '../Utils/unitConversion';
 import { useAclpPreference } from '../Utils/UserPreference';
-import { convertStringToCamelCasesWithSpaces } from '../Utils/utils';
+import {
+  convertStringToCamelCasesWithSpaces,
+  getFilteredDimensions,
+} from '../Utils/utils';
 import { CloudPulseAggregateFunction } from './components/CloudPulseAggregateFunction';
 import { CloudPulseIntervalSelect } from './components/CloudPulseIntervalSelect';
 import { CloudPulseLineGraph } from './components/CloudPulseLineGraph';
@@ -30,6 +39,7 @@ import { ZoomIcon } from './components/Zoomer';
 
 import type { FilterValueType } from '../Dashboard/CloudPulseDashboardLanding';
 import type { CloudPulseResources } from '../shared/CloudPulseResourcesSelect';
+import type { MetricsDimensionFilter } from './components/DimensionFilters/types';
 import type {
   CloudPulseServiceType,
   DateTimeWithPreset,
@@ -183,6 +193,9 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
     dashboardId,
     region,
   } = props;
+  const [dimensionFilters, setDimensionFilters] = React.useState<
+    MetricsDimensionFilter[] | undefined
+  >(widget.filters);
 
   const timezone =
     duration.timeZone ?? profile?.timezone ?? DateTime.local().zoneName;
@@ -191,13 +204,93 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
   const scaledWidgetUnit = React.useRef(generateCurrentUnit(unit));
 
   const jweTokenExpiryError = 'Token expired';
-  const filters: Filters[] | undefined =
-    additionalFilters?.length || widget?.filters?.length
+  const { data: regions } = useRegionsQuery();
+  const linodesFetch = useFirewallFetchOptions({
+    dimensionLabel: 'linode_id',
+    type: 'metrics',
+    entities: entityIds,
+    regions: regions?.filter((region) => region.id === linodeRegion) ?? [],
+    scope: 'entity',
+    serviceType,
+    associatedEntityType: FILTER_CONFIG.get(dashboardId)?.associatedEntityType,
+  });
+  const vpcFetch = useFirewallFetchOptions({
+    dimensionLabel: 'vpc_subnet_id',
+    type: 'metrics',
+    entities: entityIds,
+    regions: regions?.filter((region) => region.id === linodeRegion) ?? [],
+    scope: 'entity',
+    serviceType,
+    associatedEntityType: FILTER_CONFIG.get(dashboardId)?.associatedEntityType,
+  });
+  const linodeFromVolumes = useBlockStorageFetchOptions({
+    entities: entityIds,
+    dimensionLabel: 'linode_id',
+    regions: regions?.filter(({ id }) => id === region) ?? [],
+    type: 'metrics',
+    scope: 'entity',
+    serviceType,
+  });
+  // Determine which fetch object is relevant for linodes
+  const activeLinodeFetch =
+    serviceType === 'blockstorage' ? linodeFromVolumes : linodesFetch;
+
+  // Combine loading states
+  const isLoadingFilters = activeLinodeFetch.isLoading || vpcFetch.isLoading;
+
+  const excludeDimensionFilters = React.useMemo(() => {
+    return (
+      FILTER_CONFIG.get(dashboardId)
+        ?.filters.filter(
+          ({ configuration }) => configuration.dimensionKey !== undefined
+        )
+        .map(({ configuration }) => configuration.dimensionKey) ?? []
+    );
+  }, [dashboardId]);
+  const filteredDimensions = React.useMemo(() => {
+    return excludeDimensionFilters && excludeDimensionFilters.length > 0
+      ? availableMetrics?.dimensions.filter(
+          ({ dimension_label: dimensionLabel }) =>
+            !excludeDimensionFilters.includes(dimensionLabel)
+        )
+      : availableMetrics?.dimensions;
+  }, [availableMetrics?.dimensions, excludeDimensionFilters]);
+
+  const filteredSelections = React.useMemo(() => {
+    if (isLoadingFilters || !flags.aclp?.showWidgetDimensionFilters) {
+      return dimensionFilters ?? [];
+    }
+
+    return getFilteredDimensions({
+      dimensions: filteredDimensions ?? [],
+      linodes: activeLinodeFetch,
+      vpcs: vpcFetch,
+      dimensionFilters,
+    });
+  }, [
+    activeLinodeFetch,
+    dimensionFilters,
+    filteredDimensions,
+    flags.aclp?.showWidgetDimensionFilters,
+    isLoadingFilters,
+    vpcFetch,
+  ]);
+
+  const filters: Filters[] | undefined = React.useMemo(() => {
+    return additionalFilters?.length ||
+      widget?.filters?.length ||
+      dimensionFilters?.length
       ? [
           ...constructAdditionalRequestFilters(additionalFilters ?? []),
-          ...(widget.filters ?? []),
+          ...[...(constructWidgetDimensionFilters(filteredSelections) ?? [])], // dashboard level filters followed by widget filters
         ]
       : undefined;
+  }, [
+    additionalFilters,
+    widget?.filters?.length,
+    dimensionFilters?.length,
+    filteredSelections,
+  ]);
 
   /**
    *
@@ -274,6 +367,34 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
     },
     []
   );
+
+  const handleDimensionFiltersChange = React.useCallback(
+    (selectedFilters: MetricsDimensionFilter[]) => {
+      if (savePref) {
+        updatePreferences(widget.label, {
+          filters: selectedFilters
+            .map((filter) => {
+              if (
+                filter.value !== null &&
+                filter.dimension_label !== null &&
+                filter.operator !== null
+              ) {
+                return {
+                  dimension_label: filter.dimension_label,
+                  operator: filter.operator,
+                  value: filter.value,
+                };
+              } else {
+                return undefined;
+              }
+            })
+            .filter((filter) => filter !== undefined),
+        });
+      }
+      setDimensionFilters(selectedFilters);
+    },
+    [savePref, updatePreferences, widget.label]
+  );
   const {
     data: metricsList,
     error,
@@ -295,6 +416,7 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
       filters, // any additional dimension filters will be constructed and passed here
     },
     {
+      isFiltersLoading: isLoadingFilters,
       authToken,
       isFlags: Boolean(flags && !isJweTokenFetching),
       label: widget.label,
@@ -332,6 +454,24 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
   const end = DateTime.fromISO(duration.end, { zone: 'GMT' });
   const hours = end.diff(start, 'hours').hours;
   const tickFormat = hours <= 24 ? 'hh:mm a' : 'LLL dd';
+
+  React.useEffect(() => {
+    if (
+      filteredSelections.length !== (dimensionFilters?.length ?? 0) &&
+      !linodesFetch.isLoading &&
+      !vpcFetch.isLoading &&
+      !linodeFromVolumes.isLoading
+    ) {
+      handleDimensionFiltersChange(filteredSelections);
+    }
+  }, [
+    filteredSelections,
+    dimensionFilters,
+    handleDimensionFiltersChange,
+    linodesFetch.isLoading,
+    vpcFetch.isLoading,
+    linodeFromVolumes.isLoading,
+  ]);
   return (
     <GridLegacy container item lg={widget.size} xs={12}>
       <Stack
@@ -394,11 +534,12 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
               )}
               <Box sx={{ display: 'flex', gap: 2 }}>
                 {flags.aclp?.showWidgetDimensionFilters && (
-                  <CloudPulseDimensionFiltersSelect // upcoming: Need to pass selected dimensions from widget in upcoming PR
-                    dimensionOptions={availableMetrics?.dimensions ?? []}
+                  <CloudPulseDimensionFiltersSelect
+                    dashboardId={dashboardId}
+                    dimensionOptions={filteredDimensions ?? []}
                     drawerLabel={availableMetrics?.label ?? ''}
-                    handleSelectionChange={() => {}}
-                    selectedDimensions={[]}
+                    handleSelectionChange={handleDimensionFiltersChange}
+                    selectedDimensions={filteredSelections}
                     selectedEntities={entityIds}
                     selectedRegions={linodeRegion ? [linodeRegion] : undefined}
                     serviceType={serviceType}