Dashboards: Prevent shared queries from being unnecessarily re-run (#77490)

* 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>

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);
     }
   }
 

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(),

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,

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);
     }