fix: [DI-28200] - Fix for the volume contextual view dimension filter bug fix and group by default selection retention

packages/manager/.changeset/pr-13139-fixed-1764247173880.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+CloudPulse metrics volumes contextual view `not showing dimension values` and CloudPulse metrics `group by default selection retention` ([#13139](https://github.com/linode/manager/pull/13139))

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

@@ -8,12 +8,20 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { CloudPulseDashboardWithFilters } from './CloudPulseDashboardWithFilters';
 
+import type { GroupByOption } from '../GroupBy/CloudPulseGroupByDrawer';
+
 const queryMocks = vi.hoisted(() => ({
   useCloudPulseDashboardsQuery: vi.fn().mockReturnValue({}),
+  useGlobalDimensions: vi.fn().mockReturnValue({}),
 }));
 
 const circleProgress = 'circle-progress';
 const mandatoryFiltersError = 'Select filters to visualize metrics.';
+const mockGroupByOptions: GroupByOption[] = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' },
+];
 
 vi.mock('src/queries/cloudpulse/dashboards', async () => {
   const actual = await vi.importActual('src/queries/cloudpulse/dashboards');
@@ -22,6 +30,14 @@ vi.mock('src/queries/cloudpulse/dashboards', async () => {
     useCloudPulseDashboardsQuery: queryMocks.useCloudPulseDashboardsQuery,
   };
 });
+vi.mock('../GroupBy/utils', async () => {
+  const actual = await vi.importActual('../GroupBy/utils');
+
+  return {
+    ...actual,
+    useGlobalDimensions: queryMocks.useGlobalDimensions,
+  };
+});
 const mockDashboard = dashboardFactory.build();
 
 describe('CloudPulseDashboardWithFilters component tests', () => {
@@ -61,10 +77,19 @@ describe('CloudPulseDashboardWithFilters component tests', () => {
       isLoading: false,
     });
 
+    queryMocks.useGlobalDimensions.mockReturnValue({
+      isLoading: false,
+      options: mockGroupByOptions,
+      defaultValue: [],
+    });
+
     renderWithTheme(
       <CloudPulseDashboardWithFilters resource={1} serviceType="dbaas" />
     );
 
+    const groupByIcon = screen.getByTestId('group-by');
+    expect(groupByIcon).toBeEnabled();
+
     const startDate = screen.getByText('Start Date');
     const nodeTypeSelect = screen.getByTestId('node-type-select');
     expect(startDate).toBeInTheDocument();
@@ -217,7 +242,6 @@ describe('CloudPulseDashboardWithFilters component tests', () => {
 
     const startDate = screen.getByText('Start Date');
     expect(startDate).toBeInTheDocument();
-
     await userEvent.click(screen.getByPlaceholderText('Select a Dashboard'));
     await userEvent.click(screen.getByText('nodebalancer_firewall_dashbaord'));
     expect(

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

@@ -202,7 +202,7 @@ export const CloudPulseDashboardWithFilters = React.memo(
                   />
                   <GlobalFilterGroupByRenderer
                     handleChange={handleGroupByChange}
-                    selectedDashboard={dashboard}
+                    selectedDashboard={currentDashboard}
                   />
                 </Box>
               </Box>

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

@@ -165,7 +165,11 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => {
               handleChange={onGroupByChange}
               preferenceGroupBy={preferences?.[GROUP_BY]}
               savePreferences
-              selectedDashboard={selectedDashboard}
+              selectedDashboard={
+                preferences?.[DASHBOARD_ID] === selectedDashboard?.id // wait for dashboard id in preference to match selected dashboard id
+                  ? selectedDashboard
+                  : undefined
+              }
             />
           </Box>
         </Box>

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

@@ -209,7 +209,9 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
     dimensionLabel: 'linode_id',
     type: 'metrics',
     entities: entityIds,
-    regions: regions?.filter((region) => region.id === linodeRegion) ?? [],
+    regions: linodeRegion // if linode region is selected, filter regions to only that region else pass all regions
+      ? (regions?.filter(({ id }) => id === linodeRegion) ?? [])
+      : regions,
     scope: 'entity',
     serviceType,
     associatedEntityType: FILTER_CONFIG.get(dashboardId)?.associatedEntityType,
@@ -218,15 +220,19 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
     dimensionLabel: 'vpc_subnet_id',
     type: 'metrics',
     entities: entityIds,
-    regions: regions?.filter((region) => region.id === linodeRegion) ?? [],
+    regions: linodeRegion // if linode region is selected, filter regions to only that region else pass all regions
+      ? (regions?.filter(({ id }) => id === linodeRegion) ?? [])
+      : regions,
     scope: 'entity',
     serviceType,
     associatedEntityType: FILTER_CONFIG.get(dashboardId)?.associatedEntityType,
   });
   const linodeFromVolumes = useBlockStorageFetchOptions({
     entities: entityIds,
     dimensionLabel: 'linode_id',
-    regions: regions?.filter(({ id }) => id === region) ?? [],
+    regions: region // if region is selected, filter regions to only that region else pass all regions
+      ? (regions?.filter(({ id }) => id === region) ?? [])
+      : regions,
     type: 'metrics',
     scope: 'entity',
     serviceType,