Explore Metrics: Fix existing parent error while opening a panel in explore metrics (#92948)

Fix exiting parent error while opening a panel in explore metrics

public/app/features/trails/Integrations/DataTrailEmbedded.tsx

@@ -1,14 +1,21 @@
 import { AdHocVariableFilter } from '@grafana/data';
-import { SceneComponentProps, SceneObjectBase, SceneObjectState, SceneTimeRangeLike } from '@grafana/scenes';
+import {
+  SceneComponentProps,
+  SceneObjectBase,
+  SceneObjectState,
+  SceneTimeRange,
+  SceneTimeRangeState,
+} from '@grafana/scenes';
 
 import { DataTrail } from '../DataTrail';
 
 export interface DataTrailEmbeddedState extends SceneObjectState {
-  timeRange: SceneTimeRangeLike;
+  timeRangeState: SceneTimeRangeState;
   metric?: string;
   filters?: AdHocVariableFilter[];
   dataSourceUid?: string;
 }
+
 export class DataTrailEmbedded extends SceneObjectBase<DataTrailEmbeddedState> {
   static Component = DataTrailEmbeddedRenderer;
 
@@ -24,9 +31,9 @@ function DataTrailEmbeddedRenderer({ model }: SceneComponentProps<DataTrailEmbed
   return <model.trail.Component model={model.trail} />;
 }
 
-function buildDataTrailFromState({ metric, filters, dataSourceUid, timeRange }: DataTrailEmbeddedState) {
+function buildDataTrailFromState({ metric, filters, dataSourceUid, timeRangeState }: DataTrailEmbeddedState) {
   return new DataTrail({
-    $timeRange: timeRange,
+    $timeRange: new SceneTimeRange(timeRangeState),
     metric,
     initialDS: dataSourceUid,
     initialFilters: filters,

public/app/features/trails/Integrations/dashboardIntegration.ts

@@ -1,7 +1,7 @@
 import { PanelMenuItem } from '@grafana/data';
 import { PromQuery } from '@grafana/prometheus';
 import { getDataSourceSrv } from '@grafana/runtime';
-import { SceneTimeRangeLike, VizPanel } from '@grafana/scenes';
+import { SceneTimeRangeState, VizPanel } from '@grafana/scenes';
 import { DataQuery, DataSourceRef } from '@grafana/schema';
 import { getQueryRunnerFor } from 'app/features/dashboard-scene/utils/utils';
 
@@ -11,8 +11,8 @@ import { reportExploreMetrics } from '../interactions';
 
 import { DataTrailEmbedded, DataTrailEmbeddedState } from './DataTrailEmbedded';
 import { SceneDrawerAsScene } from './SceneDrawer';
-import { QueryMetric, getQueryMetrics } from './getQueryMetrics';
+import { getQueryMetrics, QueryMetric } from './getQueryMetrics';
-import { createAdHocFilters, getQueryMetricLabel, getTimeRangeFromDashboard } from './utils';
+import { createAdHocFilters, getQueryMetricLabel, getTimeRangeStateFromDashboard } from './utils';
 
 export async function addDataTrailPanelAction(dashboard: DashboardScene, panel: VizPanel, items: PanelMenuItem[]) {
   if (panel.state.pluginId !== 'timeseries') {
@@ -64,33 +64,35 @@ export async function addDataTrailPanelAction(dashboard: DashboardScene, panel:
 
 function getUnique<T extends { text: string }>(items: T[]) {
   const uniqueMenuTexts = new Set<string>();
+
   function isUnique({ text }: { text: string }) {
     const before = uniqueMenuTexts.size;
     uniqueMenuTexts.add(text);
     const after = uniqueMenuTexts.size;
     return after > before;
   }
+
   return items.filter(isUnique);
 }
 
 function getEmbeddedTrailsState(
   { metric, labelFilters, query }: QueryMetric,
-  timeRange: SceneTimeRangeLike,
+  timeRangeState: SceneTimeRangeState,
   dataSourceUid: string | undefined
 ) {
   const state: DataTrailEmbeddedState = {
     metric,
     filters: createAdHocFilters(labelFilters),
     dataSourceUid,
-    timeRange,
+    timeRangeState,
   };
 
   return state;
 }
 
 function createCommonEmbeddedTrailStateProps(item: QueryMetric, dashboard: DashboardScene, ds: DataSourceRef) {
-  const timeRange = getTimeRangeFromDashboard(dashboard);
+  const timeRangeState = getTimeRangeStateFromDashboard(dashboard);
-  const trailState = getEmbeddedTrailsState(item, timeRange, ds.uid);
+  const trailState = getEmbeddedTrailsState(item, timeRangeState, ds.uid);
   const embeddedTrail: DataTrailEmbedded = new DataTrailEmbedded(trailState);
 
   embeddedTrail.trail.addActivationHandler(() => {

public/app/features/trails/Integrations/utils.ts

@@ -1,15 +1,15 @@
 import { QueryBuilderLabelFilter } from '@grafana/prometheus/src/querybuilder/shared/types';
 import { DashboardScene } from 'app/features/dashboard-scene/scene/DashboardScene';
 
-import { QueryMetric } from './getQueryMetrics';
+import { QueryMetric } from './getQueryMetrics'; // We only support label filters with the '=' operator
 
 // We only support label filters with the '=' operator
 export function isEquals(labelFilter: QueryBuilderLabelFilter) {
   return labelFilter.op === '=';
 }
 
-export function getTimeRangeFromDashboard(dashboard: DashboardScene) {
+export function getTimeRangeStateFromDashboard(dashboard: DashboardScene) {
-  return dashboard.state.$timeRange!.clone();
+  return dashboard.state.$timeRange!.state;
 }
 
 export function getQueryMetricLabel({ metric, labelFilters }: QueryMetric) {