Explore Metrics: Persist otel experience toggle state in local storage (#96057)

persist otel experience toggle state in local storage

public/app/features/trails/DataTrail.tsx

@@ -50,6 +50,7 @@ import { reportChangeInLabelFilters } from './interactions';
 import { getDeploymentEnvironments, TARGET_INFO_FILTER, totalOtelResources } from './otel/api';
 import { OtelResourcesObject, OtelTargetType } from './otel/types';
 import { sortResources, getOtelJoinQuery, getOtelResourcesObject, updateOtelJoinWithGroupLeft } from './otel/util';
+import { getOtelExperienceToggleState } from './services/store';
 import {
   getVariablesWithOtelJoinQueryConstant,
   MetricSelectedEvent,
@@ -110,7 +111,7 @@ export class DataTrail extends SceneObjectBase<DataTrailState> {
       history: state.history ?? new DataTrailHistory({}),
       settings: state.settings ?? new DataTrailSettings({}),
       createdAt: state.createdAt ?? new Date().getTime(),
-      // default to false but update this to true on checkOtelSandardization()
+      // default to false but update this to true on updateOtelData()
       // or true if the user either turned on the experience
       useOtelExperience: state.useOtelExperience ?? false,
       // preserve the otel join query
@@ -396,18 +397,19 @@ export class DataTrail extends SceneObjectBase<DataTrailState> {
       }
     }
   }
+
   /**
    *  This function is used to update state and otel variables.
    *
    *  1. Set the otelResources adhoc tagKey and tagValues filter functions
-      2. Get the otel join query for state and variable
-      3. Update state with the following
-        - otel join query
-        - otelTargets used to filter metrics
-      For initialization we also update the following
-        - has otel resources flag
-        - isStandardOtel flag (for enabliing the otel experience toggle)
-        - and useOtelExperience
+   *  2. Get the otel join query for state and variable
+   *  3. Update state with the following
+   *    - otel join query
+   *    - otelTargets used to filter metrics
+   *  For initialization we also update the following
+   *    - has otel resources flag
+   *    - isStandardOtel flag (for enabliing the otel experience toggle)
+   *    - and useOtelExperience
    *
    * This function is called on start and when variables change.
    * On start will provide the deploymentEnvironments and hasOtelResources parameters.
@@ -526,12 +528,13 @@ export class DataTrail extends SceneObjectBase<DataTrailState> {
 
     // we pass in deploymentEnvironments and hasOtelResources on start
     if (hasOtelResources && deploymentEnvironments) {
+      const isEnabledInLocalStorage = getOtelExperienceToggleState();
       this.setState({
         otelTargets,
         otelJoinQuery,
         hasOtelResources,
         isStandardOtel: deploymentEnvironments.length > 0,
-        useOtelExperience: true,
+        useOtelExperience: isEnabledInLocalStorage,
       });
     } else {
       // we are updating on variable changes

public/app/features/trails/MetricSelect/MetricSelectScene.tsx

@@ -34,6 +34,7 @@ import { StatusWrapper } from '../StatusWrapper';
 import { Node, Parser } from '../groop/parser';
 import { getMetricDescription } from '../helpers/MetricDatasourceHelper';
 import { reportExploreMetrics } from '../interactions';
+import { setOtelExperienceToggleState } from '../services/store';
 import {
   getVariablesWithMetricConstant,
   MetricSelectedEvent,
@@ -485,6 +486,7 @@ export class MetricSelectScene extends SceneObjectBase<MetricSelectSceneState> i
     const trail = getTrailFor(this);
     const useOtelExperience = trail.state.useOtelExperience;
 
+    setOtelExperienceToggleState(!useOtelExperience);
     trail.setState({ useOtelExperience: !useOtelExperience });
   };
 

public/app/features/trails/services/store.ts

@@ -1,4 +1,4 @@
-import { TRAIL_BREAKDOWN_VIEW_KEY, TRAIL_BREAKDOWN_SORT_KEY } from '../shared';
+import { TRAIL_BREAKDOWN_VIEW_KEY, TRAIL_BREAKDOWN_SORT_KEY, OTEL_EXPERIENCE_ENABLED_KEY } from '../shared';
 
 export function getVewByPreference() {
   return localStorage.getItem(TRAIL_BREAKDOWN_VIEW_KEY) ?? 'grid';
@@ -23,3 +23,12 @@ export function setSortByPreference(target: string, sortBy: string) {
     localStorage.setItem(`${TRAIL_BREAKDOWN_SORT_KEY}.${target}.by`, `${sortBy}`);
   }
 }
+
+export function getOtelExperienceToggleState(): boolean {
+  const val = localStorage.getItem(OTEL_EXPERIENCE_ENABLED_KEY);
+  return val !== null ? JSON.parse(val) : true;
+}
+
+export function setOtelExperienceToggleState(value: boolean) {
+  return localStorage.setItem(OTEL_EXPERIENCE_ENABLED_KEY, value.toString());
+}

public/app/features/trails/shared.ts

@@ -3,6 +3,7 @@ import { ConstantVariable, SceneObject } from '@grafana/scenes';
 import { VariableHide } from '@grafana/schema';
 
 export type ActionViewType = 'overview' | 'breakdown' | 'label-breakdown' | 'related-logs' | 'related';
+
 export interface ActionViewDefinition {
   displayName: string;
   value: ActionViewType;
@@ -44,6 +45,7 @@ export const RECENT_TRAILS_KEY = 'grafana.trails.recent';
 export const TRAIL_BOOKMARKS_KEY = 'grafana.trails.bookmarks';
 export const TRAIL_BREAKDOWN_VIEW_KEY = 'grafana.trails.breakdown.view';
 export const TRAIL_BREAKDOWN_SORT_KEY = 'grafana.trails.breakdown.sort';
+export const OTEL_EXPERIENCE_ENABLED_KEY = 'grafana.trails.otel.experience.enabled';
 
 export const MDP_METRIC_PREVIEW = 250;
 export const MDP_METRIC_OVERVIEW = 500;