From 9d11c9153fe6ce8251c7ed1be9d36b6722a36e6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Mon, 10 Jan 2022 06:41:18 +0100
Subject: [PATCH] Variables: Fix for flickering repeat panels (#43447)

* Variables: Fix for flickering repeat panels

* Refactor: updates after PR comments
---
 .../dashboard/state/DashboardModel.ts         | 21 ++++++++++++++++---
 .../app/features/variables/state/actions.ts   |  4 +++-
 public/app/features/variables/types.ts        |  8 +++++++
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/public/app/features/dashboard/state/DashboardModel.ts b/public/app/features/dashboard/state/DashboardModel.ts
index 119d581eeb6..1ea50c41315 100644
--- a/public/app/features/dashboard/state/DashboardModel.ts
+++ b/public/app/features/dashboard/state/DashboardModel.ts
@@ -49,7 +49,12 @@ import { RefreshEvent, TimeRangeUpdatedEvent } from '@grafana/runtime';
 import { sortedDeepCloneWithoutNulls } from 'app/core/utils/object';
 import { Subscription } from 'rxjs';
 import { appEvents } from '../../../core/core';
-import { VariablesChanged, VariablesChangedEvent, VariablesChangedInUrl } from '../../variables/types';
+import {
+  VariablesChanged,
+  VariablesChangedEvent,
+  VariablesChangedInUrl,
+  VariablesTimeRangeProcessDone,
+} from '../../variables/types';
 
 export interface CloneOptions {
   saveVariables?: boolean;
@@ -178,6 +183,9 @@ export class DashboardModel {
     this.appEventsSubscription = new Subscription();
     this.lastRefresh = Date.now();
     this.appEventsSubscription.add(appEvents.subscribe(VariablesChanged, this.variablesChangedHandler.bind(this)));
+    this.appEventsSubscription.add(
+      appEvents.subscribe(VariablesTimeRangeProcessDone, this.variablesTimeRangeProcessDoneHandler.bind(this))
+    );
     this.appEventsSubscription.add(
       appEvents.subscribe(VariablesChangedInUrl, this.variablesChangedInUrlHandler.bind(this))
     );
@@ -1210,8 +1218,15 @@ export class DashboardModel {
     });
   }
 
-  private variablesChangedHandler(event: VariablesChanged) {
-    this.processRepeats();
+  private variablesTimeRangeProcessDoneHandler(event: VariablesTimeRangeProcessDone) {
+    const processRepeats = event.payload.variableIds.length > 0;
+    this.variablesChangedHandler(new VariablesChanged({ panelIds: [], refreshAll: true }), processRepeats);
+  }
+
+  private variablesChangedHandler(event: VariablesChanged, processRepeats = true) {
+    if (processRepeats) {
+      this.processRepeats();
+    }
 
     if (event.payload.refreshAll || getTimeSrv().isRefreshOutsideThreshold(this.lastRefresh)) {
       this.startRefresh({ refreshAll: true, panelIds: [] });
diff --git a/public/app/features/variables/state/actions.ts b/public/app/features/variables/state/actions.ts
index 2e9c3bec100..6ad712db714 100644
--- a/public/app/features/variables/state/actions.ts
+++ b/public/app/features/variables/state/actions.ts
@@ -23,6 +23,7 @@ import {
   VariablesChanged,
   VariablesChangedEvent,
   VariablesChangedInUrl,
+  VariablesTimeRangeProcessDone,
   VariableWithMultiSupport,
   VariableWithOptions,
 } from '../types';
@@ -571,13 +572,14 @@ export const onTimeRangeUpdated = (
     return false;
   }) as VariableWithOptions[];
 
+  const variableIds = variablesThatNeedRefresh.map((variable) => variable.id);
   const promises = variablesThatNeedRefresh.map((variable: VariableWithOptions) =>
     dispatch(timeRangeUpdated(toVariableIdentifier(variable)))
   );
 
   try {
     await Promise.all(promises);
-    dependencies.events.publish(new VariablesChanged({ panelIds: [], refreshAll: true }));
+    dependencies.events.publish(new VariablesTimeRangeProcessDone({ variableIds }));
   } catch (error) {
     console.error(error);
     dispatch(notifyApp(createVariableErrorNotification('Template variable service failed', error)));
diff --git a/public/app/features/variables/types.ts b/public/app/features/variables/types.ts
index 54908f6584f..ef9be5c0644 100644
--- a/public/app/features/variables/types.ts
+++ b/public/app/features/variables/types.ts
@@ -162,6 +162,14 @@ export class VariablesChanged extends BusEventWithPayload<VariablesChangedEvent>
   static type = 'variables-changed';
 }
 
+export interface VariablesTimeRangeProcessDoneEvent {
+  variableIds: string[];
+}
+
+export class VariablesTimeRangeProcessDone extends BusEventWithPayload<VariablesTimeRangeProcessDoneEvent> {
+  static type = 'variables-time-range-process-done';
+}
+
 export class VariablesChangedInUrl extends BusEventWithPayload<VariablesChangedEvent> {
   static type = 'variables-changed-in-url';
 }