diff --git a/public/app/features/trails/DataTrail.tsx b/public/app/features/trails/DataTrail.tsx index a7a284c9589..68f044923e3 100644 --- a/public/app/features/trails/DataTrail.tsx +++ b/public/app/features/trails/DataTrail.tsx @@ -193,7 +193,7 @@ export class DataTrail extends SceneObjectBase { }; } -function getTopSceneFor(metric?: string) { +export function getTopSceneFor(metric?: string) { if (metric) { return new MetricScene({ metric: metric }); } else { diff --git a/public/app/features/trails/DataTrailsHistory.tsx b/public/app/features/trails/DataTrailsHistory.tsx index f5def4ad5b1..c562b85cd30 100644 --- a/public/app/features/trails/DataTrailsHistory.tsx +++ b/public/app/features/trails/DataTrailsHistory.tsx @@ -13,7 +13,7 @@ import { } from '@grafana/scenes'; import { useStyles2, Tooltip, Stack } from '@grafana/ui'; -import { DataTrail, DataTrailState } from './DataTrail'; +import { DataTrail, DataTrailState, getTopSceneFor } from './DataTrail'; import { VAR_FILTERS } from './shared'; import { getTrailFor, isSceneTimeRangeState } from './utils'; @@ -44,7 +44,22 @@ export class DataTrailHistory extends SceneObjectBase { const trail = getTrailFor(this); if (this.state.steps.length === 0) { + // We always want to ensure in initial 'start' step this.addTrailStep(trail, 'start'); + + if (trail.state.metric) { + // But if our current trail has a metric, we want to remove it and the topScene, + // so that the "start" step always displays a metric select screen. + + // So we remove the metric and update the topscene for the "start" step + const { metric, ...startState } = trail.state; + startState.topScene = getTopSceneFor(undefined); + this.state.steps[0].trailState = startState; + + // But must add a secondary step to represent the selection of the metric + // for this restored trail state + this.addTrailStep(trail, 'metric'); + } } trail.subscribeToState((newState, oldState) => {