From 5f7854236622da6a17cf2ceb5f61c88ae15c27cd Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Thu, 9 Nov 2023 14:41:47 +0000
Subject: [PATCH] Dashboards: Prevent shared queries from being unnecessarily
 re-run (#77490)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Dashboards: Prevent shared queries from being unnecessarily re-run

* Minor change

* Set solo panel as being viewed

---------

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
---
 .../features/dashboard/containers/SoloPanelPage.tsx  |  5 +++++
 .../dashboard/dashgrid/PanelStateWrapper.tsx         | 12 ++++--------
 public/app/features/dashboard/state/PanelModel.ts    |  3 +++
 .../plugins/datasource/dashboard/runSharedRequest.ts |  7 ++++++-
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/public/app/features/dashboard/containers/SoloPanelPage.tsx b/public/app/features/dashboard/containers/SoloPanelPage.tsx
index 04fc483129a..4628ed79685 100644
--- a/public/app/features/dashboard/containers/SoloPanelPage.tsx
+++ b/public/app/features/dashboard/containers/SoloPanelPage.tsx
@@ -76,7 +76,12 @@ export class SoloPanelPage extends Component<Props, State> {
         return;
       }
 
+      if (panel) {
+        dashboard.exitViewPanel(panel);
+      }
+
       this.setState({ panel });
+      dashboard.initViewPanel(panel);
     }
   }
 
diff --git a/public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx b/public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx
index c8bc81ea66c..786f314cdc0 100644
--- a/public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx
@@ -74,7 +74,6 @@ export interface State {
   isFirstLoad: boolean;
   renderCounter: number;
   errorMessage?: string;
-  refreshWhenInView: boolean;
   context: PanelContext;
   data: PanelData;
   liveTime?: TimeRange;
@@ -95,7 +94,6 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
     this.state = {
       isFirstLoad: true,
       renderCounter: 0,
-      refreshWhenInView: false,
       context: {
         eventsScope: '__global_',
         eventBus,
@@ -258,7 +256,7 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props) {
-    const { isInView, width } = this.props;
+    const { isInView, width, panel } = this.props;
     const { context } = this.state;
 
     const app = this.getPanelContextApp();
@@ -276,7 +274,7 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
     if (isInView !== prevProps.isInView) {
       if (isInView) {
         // Check if we need a delayed refresh
-        if (this.state.refreshWhenInView) {
+        if (panel.refreshWhenInView) {
           this.onRefresh();
         }
       }
@@ -343,7 +341,7 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
     const { dashboard, panel, isInView, width } = this.props;
 
     if (!isInView) {
-      this.setState({ refreshWhenInView: true });
+      panel.refreshWhenInView = true;
       return;
     }
 
@@ -355,9 +353,7 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
         return;
       }
 
-      if (this.state.refreshWhenInView) {
-        this.setState({ refreshWhenInView: false });
-      }
+      panel.refreshWhenInView = false;
       panel.runAllPanelQueries({
         dashboardUID: dashboard.uid,
         dashboardTimezone: dashboard.getTimezone(),
diff --git a/public/app/features/dashboard/state/PanelModel.ts b/public/app/features/dashboard/state/PanelModel.ts
index d053d2c756d..6fb41e402fb 100644
--- a/public/app/features/dashboard/state/PanelModel.ts
+++ b/public/app/features/dashboard/state/PanelModel.ts
@@ -67,6 +67,7 @@ const notPersistedProperties: { [str: string]: boolean } = {
   dataSupport: true,
   key: true,
   isNew: true,
+  refreshWhenInView: true,
 };
 
 // For angular panels we need to clean up properties when changing type
@@ -191,6 +192,7 @@ export class PanelModel implements DataConfigSource, IPanelModel {
   cacheTimeout?: string | null;
   queryCachingTTL?: number | null;
   isNew?: boolean;
+  refreshWhenInView = false;
 
   cachedPluginOptions: Record<string, PanelOptionsCache> = {};
   legend?: { show: boolean; sort?: string; sortDesc?: boolean };
@@ -363,6 +365,7 @@ export class PanelModel implements DataConfigSource, IPanelModel {
     if (this.type === 'row') {
       return;
     }
+
     this.getQueryRunner().run({
       datasource: this.datasource,
       queries: this.targets,
diff --git a/public/app/plugins/datasource/dashboard/runSharedRequest.ts b/public/app/plugins/datasource/dashboard/runSharedRequest.ts
index dd74a6661ba..ed1c816364e 100644
--- a/public/app/plugins/datasource/dashboard/runSharedRequest.ts
+++ b/public/app/plugins/datasource/dashboard/runSharedRequest.ts
@@ -71,7 +71,10 @@ export function runSharedRequest(options: QueryRunnerOptions, query: DashboardQu
 
     // If we are in fullscreen the other panel will not execute any queries
     // So we have to trigger it from here
-    if (!listenToPanel.isInView) {
+    if (
+      (!listenToPanel.isInView && listenToPanel.refreshWhenInView) ||
+      dashboard?.otherPanelInFullscreen(listenToPanel)
+    ) {
       const { datasource, targets } = listenToPanel;
       const modified = {
         ...options,
@@ -79,6 +82,8 @@ export function runSharedRequest(options: QueryRunnerOptions, query: DashboardQu
         panelId: listenToPanelId,
         queries: targets,
       };
+
+      listenToPanel.refreshWhenInView = false;
       listenToRunner.run(modified);
     }