diff --git a/src/components/Explore/GroupBySelector.tsx b/src/components/Explore/GroupBySelector.tsx index fea09ab..de8a46a 100644 --- a/src/components/Explore/GroupBySelector.tsx +++ b/src/components/Explore/GroupBySelector.tsx @@ -122,7 +122,10 @@ export function GroupBySelector({ options, radioAttributes, value, onChange, sho value={value && getModifiedSelectOptions(otherAttrOptions).some((x) => x.value === value) ? value : null} // remove value from select when radio button clicked placeholder={'Other attributes'} options={getModifiedSelectOptions(otherAttrOptions)} - onChange={(selected) => onChange(selected?.value ?? defaultOnChangeValue)} + onChange={(selected) => { + const newSelected = selected?.value ?? defaultOnChangeValue; + onChange(newSelected); + }} className={styles.select} isClearable onInputChange={(value: string, { action }: InputActionMeta) => { 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 e62773e..763c0b6 100644 --- a/src/components/Explore/panels/histogram.ts +++ b/src/components/Explore/panels/histogram.ts @@ -37,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 91b51a3..af2e63f 100644 --- a/src/pages/Explore/TraceExploration.tsx +++ b/src/pages/Explore/TraceExploration.tsx @@ -39,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'; @@ -189,7 +189,10 @@ export class TraceExploration extends SceneObjectBase { if (!signal || this.state.primarySignal === signal) { return; } - this.setState({ primarySignal: signal }); + + this._urlSync.performBrowserHistoryAction(() => { + this.setState({ primarySignal: signal }); + }); }; public onChangeMetricFunction = (metric: string) => { @@ -197,7 +200,10 @@ export class TraceExploration extends SceneObjectBase { if (!metric || variable.getValue() === metric) { return; } - 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,