upcoming: [DI-20360] - Updated preferences logic to remove flickering issue

packages/api-v4/.changeset/pr-10853-upcoming-features-1725371578425.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Add export to FilterValue interface ([#10853](https://github.com/linode/manager/pull/10853))

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

@@ -11,6 +11,7 @@ export interface Dashboard {
 export interface TimeGranularity {
   unit: string;
   value: number;
+  label?: string;
 }
 
 export interface TimeDuration {
@@ -44,8 +45,7 @@ export interface Filters {
   value: string;
 }
 
-// Define the type for filter values
-type FilterValue =
+export type FilterValue =
   | number
   | string
   | string[]
@@ -56,7 +56,6 @@ type FilterValue =
 type WidgetFilterValue = { [key: string]: AclpWidget };
 
 export interface AclpConfig {
-  // we maintain only the filters selected in the preferences for latest selected dashboard
   [key: string]: FilterValue;
   widgets?: WidgetFilterValue;
 }

packages/manager/.changeset/pr-10853-upcoming-features-1725371660855.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+add useAclpPreference hook in UserPreference.ts, update CloudPulseWidget.ts, CloudPulseDashboard & GlobalFilters to use useAclpPreference and pass preference values to child component ([#10853](https://github.com/linode/manager/pull/10853))

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

@@ -1,37 +1,20 @@
-import { Grid, Paper } from '@mui/material';
+import { Grid } from '@mui/material';
 import React from 'react';
 
-import CloudPulseIcon from 'src/assets/icons/entityIcons/monitor.svg';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
-import { Placeholder } from 'src/components/Placeholder/Placeholder';
 import { useCloudPulseDashboardByIdQuery } from 'src/queries/cloudpulse/dashboards';
 import { useResourcesQuery } from 'src/queries/cloudpulse/resources';
 import {
   useCloudPulseJWEtokenQuery,
   useGetCloudPulseMetricDefinitionsByServiceType,
 } from 'src/queries/cloudpulse/services';
 
-import { getUserPreferenceObject } from '../Utils/UserPreference';
-import { createObjectCopy } from '../Utils/utils';
-import { CloudPulseWidget } from '../Widget/CloudPulseWidget';
-import {
-  allIntervalOptions,
-  getInSeconds,
-  getIntervalIndex,
-} from '../Widget/components/CloudPulseIntervalSelect';
+import { useAclpPreference } from '../Utils/UserPreference';
+import { RenderWidgets } from '../Widget/CloudPulseWidgetRenderer';
 
-import type {
-  CloudPulseMetricsAdditionalFilters,
-  CloudPulseWidgetProperties,
-} from '../Widget/CloudPulseWidget';
-import type {
-  AvailableMetrics,
-  Dashboard,
-  JWETokenPayLoad,
-  TimeDuration,
-  Widgets,
-} from '@linode/api-v4';
+import type { CloudPulseMetricsAdditionalFilters } from '../Widget/CloudPulseWidget';
+import type { JWETokenPayLoad, TimeDuration } from '@linode/api-v4';
 
 export interface DashboardProperties {
   /**
@@ -52,7 +35,7 @@ export interface DashboardProperties {
   /**
    * optional timestamp to pass as react query param to forcefully re-fetch data
    */
-  manualRefreshTimeStamp?: number | undefined;
+  manualRefreshTimeStamp?: number;
 
   /**
    * Selected region for the dashboard
@@ -80,53 +63,14 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
     savePref,
   } = props;
 
+  const { preferences } = useAclpPreference();
+
   const getJweTokenPayload = (): JWETokenPayLoad => {
     return {
       resource_ids: resourceList?.map((resource) => Number(resource.id)) ?? [],
     };
   };
 
-  const getCloudPulseGraphProperties = (
-    widget: Widgets
-  ): CloudPulseWidgetProperties => {
-    const graphProp: CloudPulseWidgetProperties = {
-      additionalFilters,
-      ariaLabel: widget.label,
-      authToken: '',
-      availableMetrics: undefined,
-      duration,
-      errorLabel: 'Error While Loading Data',
-      resourceIds: resources,
-      resources: [],
-      serviceType: dashboard?.service_type ?? '',
-      timeStamp: manualRefreshTimeStamp,
-      unit: widget.unit ?? '%',
-      widget: { ...widget },
-    };
-    if (savePref) {
-      setPreferredWidgetPlan(graphProp.widget);
-    }
-    return graphProp;
-  };
-
-  const setPreferredWidgetPlan = (widgetObj: Widgets) => {
-    const widgetPreferences = getUserPreferenceObject().widgets;
-    const pref = widgetPreferences?.[widgetObj.label];
-    if (pref) {
-      Object.assign(widgetObj, {
-        aggregate_function: pref.aggregateFunction,
-        size: pref.size,
-        time_granularity: { ...pref.timeGranularity },
-      });
-    }
-  };
-
-  const getTimeGranularity = (scrapeInterval: string) => {
-    const scrapeIntervalValue = getInSeconds(scrapeInterval);
-    const index = getIntervalIndex(scrapeIntervalValue);
-    return index < 0 ? allIntervalOptions[0] : allIntervalOptions[index];
-  };
-
   const {
     data: dashboard,
     isLoading: isDashboardLoading,
@@ -182,76 +126,18 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
     return <ErrorState errorText={'Error loading metric definitions'} />;
   }
 
-  const RenderWidgets = () => {
-    if (!dashboard || !dashboard.widgets?.length) {
-      return renderPlaceHolder(
-        'No visualizations are available at this moment. Create Dashboards to list here.'
-      );
-    }
-
-    if (
-      !dashboard.service_type ||
-      !Boolean(resources.length > 0) ||
-      !jweToken?.token ||
-      !Boolean(resourceList?.length)
-    ) {
-      return renderPlaceHolder(
-        'Select Dashboard, Region and Resource to visualize metrics'
-      );
-    }
-
-    // maintain a copy
-    const newDashboard: Dashboard = createObjectCopy(dashboard)!;
-    return (
-      <Grid columnSpacing={2} container item rowSpacing={2} xs={12}>
-        {{ ...newDashboard }.widgets.map((widget, index) => {
-          // check if widget metric definition is available or not
-          if (widget) {
-            // find the metric defintion of the widget label
-            const availMetrics = metricDefinitions?.data.find(
-              (availMetrics: AvailableMetrics) =>
-                widget.label === availMetrics.label
-            );
-            const cloudPulseWidgetProperties = getCloudPulseGraphProperties({
-              ...widget,
-            });
-
-            // metric definition is available but time_granularity is not present
-            if (
-              availMetrics &&
-              !cloudPulseWidgetProperties.widget.time_granularity
-            ) {
-              cloudPulseWidgetProperties.widget.time_granularity = getTimeGranularity(
-                availMetrics.scrape_interval
-              );
-            }
-            return (
-              <CloudPulseWidget
-                key={widget.label}
-                {...cloudPulseWidgetProperties}
-                authToken={jweToken?.token}
-                availableMetrics={availMetrics}
-                resources={resourceList!}
-                savePref={savePref}
-              />
-            );
-          } else {
-            return <React.Fragment key={index}></React.Fragment>;
-          }
-        })}
-      </Grid>
-    );
-  };
-
-  const renderPlaceHolder = (title: string) => {
-    return (
-      <Grid item xs>
-        <Paper>
-          <Placeholder icon={CloudPulseIcon} isEntity title={title} />
-        </Paper>
-      </Grid>
-    );
-  };
-
-  return <RenderWidgets />;
+  return (
+    <RenderWidgets
+      additionalFilters={additionalFilters}
+      dashboard={dashboard}
+      duration={duration}
+      jweToken={jweToken}
+      manualRefreshTimeStamp={manualRefreshTimeStamp}
+      metricDefinitions={metricDefinitions}
+      preferences={preferences}
+      resourceList={resourceList}
+      resources={resources}
+      savePref={savePref}
+    />
+  );
 };