diff --git a/src/components/Explore/GroupBySelector.tsx b/src/components/Explore/GroupBySelector.tsx index bc5a61c..0a89e6c 100644 --- a/src/components/Explore/GroupBySelector.tsx +++ b/src/components/Explore/GroupBySelector.tsx @@ -125,7 +125,6 @@ export function GroupBySelector({ options, radioAttributes, value, onChange, sho options={getModifiedSelectOptions(otherAttrOptions)} onChange={(selected) => { const newSelected = selected?.value ?? defaultOnChangeValue; - locationService.partial({ 'var-groupBy': newSelected }); onChange(newSelected); }} className={styles.select} diff --git a/src/components/Explore/TracesByService/TracesByServiceScene.tsx b/src/components/Explore/TracesByService/TracesByServiceScene.tsx index c8f6654..7c66e6d 100644 --- a/src/components/Explore/TracesByService/TracesByServiceScene.tsx +++ b/src/components/Explore/TracesByService/TracesByServiceScene.tsx @@ -57,7 +57,7 @@ export interface TraceSceneState extends SceneObjectState { } export class TracesByServiceScene extends SceneObjectBase { - protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['actionView', 'selection'] }); + public _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['actionView', 'selection', 'metric'] }); public constructor(state: MakeOptional) { super({ @@ -76,6 +76,7 @@ export class TracesByServiceScene extends SceneObjectBase { this._subs.add( metricVariable.subscribeToState((newState, prevState) => { if (newState.value !== prevState.value) { + this.setState({ metric: newState.value as MetricFunction }); const selection = getDefaultSelectionForMetric(newState.value as MetricFunction); if (selection) { this.setState({ selection }); @@ -155,6 +156,7 @@ export class TracesByServiceScene extends SceneObjectBase { getUrlState() { return { actionView: this.state.actionView, + metric: this.state.metric, selection: this.state.selection ? JSON.stringify(this.state.selection) : undefined, }; } diff --git a/src/components/Explore/panels/histogram.ts b/src/components/Explore/panels/histogram.ts index 848ac3e..763c0b6 100644 --- a/src/components/Explore/panels/histogram.ts +++ b/src/components/Explore/panels/histogram.ts @@ -2,7 +2,6 @@ import { getTraceByServiceScene, shouldShowSelection } from '../../../utils/util import { ComparisonSelection } from '../../../utils/shared'; import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from '../../../utils/analytics'; import { PanelBuilders, SceneFlexItem, SceneFlexLayout, SceneObject } from '@grafana/scenes'; -import { locationService } from '@grafana/runtime'; export function getHistogramVizPanel(scene: SceneObject, yBuckets: number[]) { const parent = getTraceByServiceScene(scene); @@ -23,7 +22,6 @@ export function getHistogramVizPanel(scene: SceneObject, yBuckets: number[]) { const rawSelection = args[0]; // @ts-ignore const newSelection: ComparisonSelection = { type: 'manual', raw: rawSelection }; - locationService.partial({ 'selection': newSelection }); newSelection.timeRange = { from: Math.round((rawSelection.x?.from || 0) / 1000), @@ -39,7 +37,9 @@ export function getHistogramVizPanel(scene: SceneObject, yBuckets: number[]) { const yTo = yBucketToDuration(args[0].y?.to || 0, yBuckets); newSelection.duration = { from: yFrom, to: yTo }; - parent.setState({ selection: newSelection }); + parent._urlSync.performBrowserHistoryAction(() => { + parent.setState({ selection: newSelection }); + }); if (!shouldShowSelection(parent.state.actionView)) { parent.setActionView('comparison'); } diff --git a/src/pages/Explore/TraceExploration.tsx b/src/pages/Explore/TraceExploration.tsx index 71e556d..af2e63f 100644 --- a/src/pages/Explore/TraceExploration.tsx +++ b/src/pages/Explore/TraceExploration.tsx @@ -23,7 +23,6 @@ import { import { LocationService, config, - locationService, // @ts-ignore sidecarServiceSingleton_EXPERIMENTAL, } from '@grafana/runtime'; @@ -40,7 +39,7 @@ import { VAR_LATENCY_THRESHOLD, VAR_METRIC, } from '../../utils/shared'; -import { getTraceExplorationScene, getFilterSignature, getFiltersVariable } from '../../utils/utils'; +import { getTraceExplorationScene, getFilterSignature, getFiltersVariable, getTraceByServiceSceneAsDescendent } from '../../utils/utils'; import { DetailsScene } from '../../components/Explore/TracesByService/DetailsScene'; import { FilterByVariable } from 'components/Explore/filters/FilterByVariable'; import { getSignalForKey, primarySignalOptions } from './primary-signals'; @@ -191,8 +190,9 @@ export class TraceExploration extends SceneObjectBase { return; } - locationService.partial({ 'primarySignal': signal }); - this.setState({ primarySignal: signal }); + this._urlSync.performBrowserHistoryAction(() => { + this.setState({ primarySignal: signal }); + }); }; public onChangeMetricFunction = (metric: string) => { @@ -201,8 +201,9 @@ export class TraceExploration extends SceneObjectBase { return; } - locationService.partial({ 'var-metric': metric }); - variable.changeValueTo(metric); + getTraceByServiceSceneAsDescendent(this)._urlSync.performBrowserHistoryAction(() => { + variable.changeValueTo(metric); + }); }; public getMetricFunction() { diff --git a/src/pages/Explore/TraceExplorationPage.tsx b/src/pages/Explore/TraceExplorationPage.tsx index 46b0e81..3619ddc 100644 --- a/src/pages/Explore/TraceExplorationPage.tsx +++ b/src/pages/Explore/TraceExplorationPage.tsx @@ -44,7 +44,7 @@ export function TraceExplorationView({ exploration }: { exploration: TraceExplor } return ( - + ); diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 17105b6..43d0a0c 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -40,6 +40,16 @@ export function getTraceByServiceScene(model: SceneObject): TracesByServiceScene return sceneGraph.getAncestor(model, TracesByServiceScene); } +export function getTraceByServiceSceneAsDescendent(model: SceneObject): TracesByServiceScene { + const scenes = sceneGraph.findDescendents(model, TracesByServiceScene); + + if (!scenes || scenes.length < 1 || !(scenes[0] instanceof TracesByServiceScene)) { + throw new Error('TracesByServiceScene not found'); + } + + return scenes[0]; +} + export function newTracesExploration( locationService: LocationService, initialDS?: string,