upcoming: [DI-19328] - Added capability to save & retrieve CloudPulse user preferences

packages/api-v4/.changeset/pr-10625-upcoming-features-1719830627087.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Add ACLG Config and Widget to CloudPulse types ([#10625](https://github.com/linode/manager/pull/10625))

packages/api-v4/src/cloudpulse/types.ts

@@ -43,3 +43,19 @@ export interface Filters {
   operator: string;
   value: string;
 }
+
+export interface AclpConfig {
+  dashboardId: number;
+  interval: string;
+  region: string;
+  resources: string[];
+  timeDuration: string;
+  widgets: { [label: string]: AclpWidget };
+}
+
+export interface AclpWidget {
+  aggregateFunction: string;
+  timeGranularity: TimeGranularity;
+  label: string;
+  size: number;
+}

packages/manager/.changeset/pr-10625-upcoming-features-1719830617170.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add capability to save & retrieve user preferences ([#10625](https://github.com/linode/manager/pull/10625))

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

@@ -1,11 +1,23 @@
 import { Paper } from '@mui/material';
 import * as React from 'react';
 
-import { FiltersObject, GlobalFilters } from '../Overview/GlobalFilters';
+import { CircleProgress } from 'src/components/CircleProgress';
+
+import { GlobalFilters } from '../Overview/GlobalFilters';
+import { loadUserPreferences } from '../Utils/UserPreference';
+
+import type { FiltersObject } from '../Overview/GlobalFilters';
 
 export const DashboardLanding = () => {
+  const { isLoading } = loadUserPreferences();
+
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  const onFilterChange = (_filters: FiltersObject) => {};
+  const onFilterChange = React.useCallback((_filters: FiltersObject) => {}, []);
+
+  if (isLoading) {
+    return <CircleProgress />;
+  }
+
   return (
     <Paper>
       <div style={{ display: 'flex' }}>

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

@@ -2,14 +2,14 @@ import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
+import { CloudPulseDashboardSelect } from '../shared/CloudPulseDashboardSelect';
 import { CloudPulseRegionSelect } from '../shared/CloudPulseRegionSelect';
 import { CloudPulseResourcesSelect } from '../shared/CloudPulseResourcesSelect';
 import { CloudPulseTimeRangeSelect } from '../shared/CloudPulseTimeRangeSelect';
 
 import type { CloudPulseResources } from '../shared/CloudPulseResourcesSelect';
+import type { Dashboard } from '@linode/api-v4';
 import type { WithStartAndEnd } from 'src/features/Longview/request.types';
-import { Dashboard } from '@linode/api-v4';
-import { CloudPulseDashboardSelect } from '../shared/CloudPulseDashboardSelect';
 
 export interface GlobalFilterProperties {
   handleAnyFilterChange(filters: FiltersObject): undefined | void;
@@ -32,7 +32,7 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => {
   const [selectedDashboard, setSelectedDashboard] = React.useState<
     Dashboard | undefined
   >();
-  const [selectedRegion, setRegion] = React.useState<string | undefined>();
+  const [selectedRegion, setRegion] = React.useState<string>(); // fetch the default region from preference
   const [, setResources] = React.useState<CloudPulseResources[]>(); // removed the unused variable, this will be used later point of time
 
   React.useEffect(() => {
@@ -71,9 +71,12 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => {
   );
 
   const handleDashboardChange = React.useCallback(
-    (dashboard: Dashboard | undefined) => {
+    (dashboard: Dashboard | undefined, isDefault: boolean = false) => {
       setSelectedDashboard(dashboard);
-      setRegion(undefined);
+      if (!isDefault) {
+        // only update the region state when it is not a preference (default) call
+        setRegion(undefined);
+      }
     },
     []
   );
@@ -90,7 +93,6 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => {
           <StyledCloudPulseRegionSelect
             handleRegionChange={handleRegionChange}
             selectedDashboard={selectedDashboard}
-            selectedRegion={selectedRegion}
           />
         </Grid>
 
@@ -103,7 +105,6 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => {
         </Grid>
         <Grid sx={{ marginLeft: 2, width: 250 }}>
           <StyledCloudPulseTimeRangeSelect
-            defaultValue={'Past 30 Minutes'}
             handleStatsChange={handleTimeRangeChange}
             hideLabel
             label="Select Time Range"

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

@@ -0,0 +1,61 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import {
+  useMutatePreferences,
+  usePreferences,
+} from 'src/queries/profile/preferences';
+
+import type { AclpConfig } from '@linode/api-v4';
+
+let userPreference: AclpConfig;
+let timerId: ReturnType<typeof setTimeout>;
+let mutateFn: any;
+
+export const loadUserPreferences = () => {
+  if (userPreference) {
+    return { isLoading: false };
+  }
+  const { data: preferences, isError, isLoading } = usePreferences();
+
+  const { mutate } = useMutatePreferences();
+
+  if (isLoading) {
+    return { isLoading };
+  }
+  mutateFn = mutate;
+
+  if (isError || !preferences) {
+    userPreference = {} as AclpConfig;
+  } else {
+    userPreference = preferences.aclpPreference ?? {};
+  }
+
+  return { isLoading };
+};
+
+export const getUserPreferenceObject = () => {
+  return { ...userPreference };
+};
+
+const updateUserPreference = (updatedData: AclpConfig) => {
+  if (mutateFn) {
+    mutateFn({ aclpPreference: updatedData });
+  }
+};
+
+export const updateGlobalFilterPreference = (data: {}) => {
+  if (!userPreference) {
+    userPreference = {} as AclpConfig;
+  }
+  userPreference = { ...userPreference, ...data };
+
+  debounce(userPreference);
+};
+
+// to avoid frequent preference update calls within 500 ms interval
+const debounce = (updatedData: AclpConfig) => {
+  if (timerId) {
+    clearTimeout(timerId);
+  }
+
+  timerId = setTimeout(() => updateUserPreference(updatedData), 500);
+};

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

@@ -0,0 +1,19 @@
+export const DASHBOARD_ID = 'dashboardId';
+
+export const REGION = 'region';
+
+export const RESOURCES = 'resources';
+
+export const INTERVAL = 'interval';
+
+export const TIME_DURATION = 'timeDuration';
+
+export const AGGREGATE_FUNCTION = 'aggregateFunction';
+
+export const SIZE = 'size';
+
+export const LABEL = 'label';
+
+export const REFRESH = 'refresh';
+
+export const TIME_GRANULARITY = 'timeGranularity';

packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.test.tsx

@@ -1,11 +1,16 @@
-import { renderWithTheme } from 'src/utilities/testHelpers';
-import {
-  CloudPulseDashboardSelect,
-  CloudPulseDashboardSelectProps,
-} from './CloudPulseDashboardSelect';
-import React from 'react';
 import { fireEvent, screen } from '@testing-library/react';
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
 
+import { DASHBOARD_ID } from '../Utils/constants';
+import * as preferences from '../Utils/UserPreference';
+import { CloudPulseDashboardSelect } from './CloudPulseDashboardSelect';
+
+import type { CloudPulseDashboardSelectProps } from './CloudPulseDashboardSelect';
+import type { AclpConfig } from '@linode/api-v4';
+
+const dashboardLabel = 'Dashboard 1';
 const props: CloudPulseDashboardSelectProps = {
   handleDashboardChange: vi.fn(),
 };
@@ -26,23 +31,23 @@ queryMocks.useCloudViewDashboardsQuery.mockReturnValue({
   data: {
     data: [
       {
+        created: '2024-04-29T17:09:29',
         id: 1,
-        type: 'standard',
+        label: dashboardLabel,
         service_type: 'linode',
-        label: 'Dashboard 1',
-        created: '2024-04-29T17:09:29',
+        type: 'standard',
         updated: null,
         widgets: {},
       },
     ],
   },
-  isLoading: false,
   error: false,
+  isLoading: false,
 });
 
 describe('CloudPulse Dashboard select', () => {
   it('Should render dashboard select component', () => {
-    const { getByTestId, getByPlaceholderText } = renderWithTheme(
+    const { getByPlaceholderText, getByTestId } = renderWithTheme(
       <CloudPulseDashboardSelect {...props} />
     );
 
@@ -55,18 +60,29 @@ describe('CloudPulse Dashboard select', () => {
       fireEvent.click(screen.getByRole('button', { name: 'Open' }));
 
       expect(
-        screen.getByRole('option', { name: 'Dashboard 1' })
+        screen.getByRole('option', { name: dashboardLabel })
       ).toBeInTheDocument();
     }),
     it('Should select the option on click', () => {
       renderWithTheme(<CloudPulseDashboardSelect {...props} />);
 
       fireEvent.click(screen.getByRole('button', { name: 'Open' }));
-      fireEvent.click(screen.getByRole('option', { name: 'Dashboard 1' }));
+      fireEvent.click(screen.getByRole('option', { name: dashboardLabel }));
+
+      expect(screen.getByRole('combobox')).toHaveAttribute(
+        'value',
+        dashboardLabel
+      );
+    }),
+    it('Should select the default value from preferences', () => {
+      const mockFunction = vi.spyOn(preferences, 'getUserPreferenceObject');
+      mockFunction.mockReturnValue({ [DASHBOARD_ID]: 1 } as AclpConfig);
+
+      renderWithTheme(<CloudPulseDashboardSelect {...props} />);
 
       expect(screen.getByRole('combobox')).toHaveAttribute(
         'value',
-        'Dashboard 1'
+        dashboardLabel
       );
     });
 });

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

@@ -1,13 +1,23 @@
 import React from 'react';
 
-import { Dashboard } from '@linode/api-v4';
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { Box } from 'src/components/Box';
 import { Typography } from 'src/components/Typography';
 import { useCloudViewDashboardsQuery } from 'src/queries/cloudpulse/dashboards';
 
+import { DASHBOARD_ID, REGION, RESOURCES } from '../Utils/constants';
+import {
+  getUserPreferenceObject,
+  updateGlobalFilterPreference,
+} from '../Utils/UserPreference';
+
+import type { Dashboard } from '@linode/api-v4';
+
 export interface CloudPulseDashboardSelectProps {
-  handleDashboardChange: (dashboard: Dashboard | undefined) => void;
+  handleDashboardChange: (
+    dashboard: Dashboard | undefined,
+    isDefault?: boolean
+  ) => void;
 }
 
 export const CloudPulseDashboardSelect = React.memo(
@@ -16,7 +26,12 @@ export const CloudPulseDashboardSelect = React.memo(
       data: dashboardsList,
       error,
       isLoading,
-    } = useCloudViewDashboardsQuery(true); //Fetch the list of dashboards
+    } = useCloudViewDashboardsQuery(true); // Fetch the list of dashboards
+
+    const [
+      selectedDashboard,
+      setSelectedDashboard,
+    ] = React.useState<Dashboard>();
 
     const errorText: string = error ? 'Error loading dashboards' : '';
 
@@ -29,26 +44,35 @@ export const CloudPulseDashboardSelect = React.memo(
       );
     };
 
-    if (!dashboardsList) {
-      return (
-        <Autocomplete
-          options={[]}
-          label=""
-          disabled={true}
-          onChange={() => {}}
-          data-testid="cloudview-dashboard-select"
-          placeholder={placeHolder}
-          errorText={errorText}
-        />
-      );
-    }
+    // Once the data is loaded, set the state variable with value stored in preferences
+    React.useEffect(() => {
+      if (dashboardsList) {
+        const dashboardId = getUserPreferenceObject()?.dashboardId;
+
+        if (dashboardId) {
+          const dashboard = dashboardsList.data.find(
+            (obj) => obj.id === dashboardId
+          );
+          setSelectedDashboard(dashboard);
+          props.handleDashboardChange(dashboard, true);
+        } else {
+          props.handleDashboardChange(undefined, true);
+        }
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dashboardsList]);
 
     return (
       <Autocomplete
         onChange={(_: any, dashboard: Dashboard) => {
+          updateGlobalFilterPreference({
+            [DASHBOARD_ID]: dashboard?.id,
+            [REGION]: undefined,
+            [RESOURCES]: undefined,
+          });
+          setSelectedDashboard(dashboard);
           props.handleDashboardChange(dashboard);
         }}
-        options={getSortedDashboardsList(dashboardsList.data)}
         renderGroup={(params) => (
           <Box key={params.key}>
             <Typography
@@ -63,14 +87,17 @@ export const CloudPulseDashboardSelect = React.memo(
         autoHighlight
         clearOnBlur
         data-testid="cloudview-dashboard-select"
+        disabled={!dashboardsList}
         errorText={errorText}
         fullWidth
         groupBy={(option: Dashboard) => option.service_type}
-        isOptionEqualToValue={(option, value) => option.label === value.label}
+        isOptionEqualToValue={(option, value) => option.id === value.id}
         label=""
         loading={isLoading}
         noMarginTop
+        options={getSortedDashboardsList(dashboardsList?.data ?? [])}
         placeholder={placeHolder}
+        value={selectedDashboard ?? null} // Undefined is not allowed for uncontrolled component
       />
     );
   }