diff --git a/public/app/features/trails/DataTrail.tsx b/public/app/features/trails/DataTrail.tsx index 448253d5819..dcae58bb515 100644 --- a/public/app/features/trails/DataTrail.tsx +++ b/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 { 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 { } } } + /** * 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 { // 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 diff --git a/public/app/features/trails/MetricSelect/MetricSelectScene.tsx b/public/app/features/trails/MetricSelect/MetricSelectScene.tsx index f8e68f408dd..69ad378f842 100644 --- a/public/app/features/trails/MetricSelect/MetricSelectScene.tsx +++ b/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 i const trail = getTrailFor(this); const useOtelExperience = trail.state.useOtelExperience; + setOtelExperienceToggleState(!useOtelExperience); trail.setState({ useOtelExperience: !useOtelExperience }); }; diff --git a/public/app/features/trails/services/store.ts b/public/app/features/trails/services/store.ts index c745d22f2e6..0ae490e6cda 100644 --- a/public/app/features/trails/services/store.ts +++ b/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()); +} diff --git a/public/app/features/trails/shared.ts b/public/app/features/trails/shared.ts index 7edc2a5faf6..e2e76404599 100644 --- a/public/app/features/trails/shared.ts +++ b/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;