From 9e6e41c6f8d17c3e2d2b6142d18adb202d346777 Mon Sep 17 00:00:00 2001
From: ismail simsek <ismailsimsek09@gmail.com>
Date: Thu, 5 Sep 2024 21:04:43 +0200
Subject: [PATCH] Explore Metrics: Fix infinite loop while opening a panel in
 explore metrics (#92946)

* Fix infinite loop while opening a panel in explore metrics

* clean up
---
 public/app/features/trails/DataTrail.tsx     | 34 +++++++++-----------
 public/app/features/trails/DataTrailsApp.tsx |  9 ++++--
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/public/app/features/trails/DataTrail.tsx b/public/app/features/trails/DataTrail.tsx
index 54194dcea59..54c08d11f2f 100644
--- a/public/app/features/trails/DataTrail.tsx
+++ b/public/app/features/trails/DataTrail.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 
-import { AdHocVariableFilter, GrafanaTheme2, PageLayoutType, VariableHide, urlUtil } from '@grafana/data';
+import { AdHocVariableFilter, GrafanaTheme2, urlUtil, VariableHide } from '@grafana/data';
 import { config, locationService, useChromeHeaderHeight } from '@grafana/runtime';
 import {
   AdHocFiltersVariable,
@@ -24,7 +24,6 @@ import {
   VariableValueSelectors,
 } from '@grafana/scenes';
 import { useStyles2 } from '@grafana/ui';
-import { Page } from 'app/core/components/Page/Page';
 
 import { DataTrailSettings } from './DataTrailSettings';
 import { DataTrailHistory } from './DataTrailsHistory';
@@ -35,7 +34,6 @@ import { getTrailStore } from './TrailStore/TrailStore';
 import { MetricDatasourceHelper } from './helpers/MetricDatasourceHelper';
 import { reportChangeInLabelFilters } from './interactions';
 import { MetricSelectedEvent, trailDS, VAR_DATASOURCE, VAR_FILTERS } from './shared';
-import { getMetricName } from './utils';
 
 export interface DataTrailState extends SceneObjectState {
   topScene?: SceneObject;
@@ -211,27 +209,25 @@ export class DataTrail extends SceneObjectBase<DataTrailState> {
   }
 
   static Component = ({ model }: SceneComponentProps<DataTrail>) => {
-    const { controls, topScene, history, settings, metric } = model.useState();
+    const { controls, topScene, history, settings } = model.useState();
     const chromeHeaderHeight = useChromeHeaderHeight();
     const styles = useStyles2(getStyles, chromeHeaderHeight ?? 0);
     const showHeaderForFirstTimeUsers = getTrailStore().recent.length < 2;
 
     return (
-      <Page navId="explore/metrics" pageNav={{ text: getMetricName(metric) }} layout={PageLayoutType.Custom}>
-        <div className={styles.container}>
-          {showHeaderForFirstTimeUsers && <MetricsHeader />}
-          <history.Component model={history} />
-          {controls && (
-            <div className={styles.controls}>
-              {controls.map((control) => (
-                <control.Component key={control.state.key} model={control} />
-              ))}
-              <settings.Component model={settings} />
-            </div>
-          )}
-          <div className={styles.body}>{topScene && <topScene.Component model={topScene} />}</div>
-        </div>
-      </Page>
+      <div className={styles.container}>
+        {showHeaderForFirstTimeUsers && <MetricsHeader />}
+        <history.Component model={history} />
+        {controls && (
+          <div className={styles.controls}>
+            {controls.map((control) => (
+              <control.Component key={control.state.key} model={control} />
+            ))}
+            <settings.Component model={settings} />
+          </div>
+        )}
+        <div className={styles.body}>{topScene && <topScene.Component model={topScene} />}</div>
+      </div>
     );
   };
 }
diff --git a/public/app/features/trails/DataTrailsApp.tsx b/public/app/features/trails/DataTrailsApp.tsx
index 37fc404f321..a3b7c8ec46a 100644
--- a/public/app/features/trails/DataTrailsApp.tsx
+++ b/public/app/features/trails/DataTrailsApp.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 import { PageLayoutType } from '@grafana/data';
@@ -11,7 +11,7 @@ import { DataTrailsHome } from './DataTrailsHome';
 import { MetricsHeader } from './MetricsHeader';
 import { getTrailStore } from './TrailStore/TrailStore';
 import { HOME_ROUTE, TRAILS_ROUTE } from './shared';
-import { getUrlForTrail, newMetricsTrail } from './utils';
+import { getMetricName, getUrlForTrail, newMetricsTrail } from './utils';
 
 export interface DataTrailsAppState extends SceneObjectState {
   trail: DataTrail;
@@ -55,6 +55,7 @@ export class DataTrailsApp extends SceneObjectBase<DataTrailsAppState> {
 
 function DataTrailView({ trail }: { trail: DataTrail }) {
   const [isInitialized, setIsInitialized] = useState(false);
+  const { metric } = trail.useState();
 
   useEffect(() => {
     if (!isInitialized) {
@@ -69,7 +70,9 @@ function DataTrailView({ trail }: { trail: DataTrail }) {
 
   return (
     <UrlSyncContextProvider scene={trail}>
-      <trail.Component model={trail} />
+      <Page navId="explore/metrics" pageNav={{ text: getMetricName(metric) }} layout={PageLayoutType.Custom}>
+        <trail.Component model={trail} />
+      </Page>
     </UrlSyncContextProvider>
   );
 }