From 3cfa2c12dbfbd7ecd3e915e6d960882336b4f607 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 4 Feb 2021 09:18:19 +0100
Subject: [PATCH] Alerting: Fixes alert panel header icon not showing (#30840)
 (#30885)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Alerting: Fixes alert panel header icon not showing

* Remove as any

(cherry picked from commit 01b10ab43613bf09714d6ac017ce01def0c79829)

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>
---
 .../dashboard/dashgrid/PanelChromeAngular.tsx   |  4 +++-
 .../app/features/dashboard/state/PanelModel.ts  |  3 ++-
 public/app/features/panel/panel_directive.ts    | 17 ++++++++++++++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx b/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
index 336090508d0..02bc13f988f 100644
--- a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
@@ -90,8 +90,10 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
     this.subs.add(panel.events.subscribe(RenderEvent, this.onPanelRenderEvent));
   }
 
-  onPanelRenderEvent = (payload?: any) => {
+  onPanelRenderEvent = (event: RenderEvent) => {
     const { alertState } = this.state;
+    // graph sends these old render events with payloads
+    const payload = event.payload;
 
     if (payload && payload.alertState && this.props.panel.alert) {
       this.setState({ alertState: payload.alertState });
diff --git a/public/app/features/dashboard/state/PanelModel.ts b/public/app/features/dashboard/state/PanelModel.ts
index 8a92e709e0a..d5083df2154 100644
--- a/public/app/features/dashboard/state/PanelModel.ts
+++ b/public/app/features/dashboard/state/PanelModel.ts
@@ -12,6 +12,7 @@ import {
   FieldConfigSource,
   PanelPlugin,
   ScopedVars,
+  EventBus,
   EventBusSrv,
   DataFrameDTO,
   urlUtil,
@@ -153,7 +154,7 @@ export class PanelModel implements DataConfigSource {
   isInView: boolean;
 
   hasRefreshed: boolean;
-  events: EventBusSrv;
+  events: EventBus;
   cacheTimeout?: any;
   cachedPluginOptions: Record<string, PanelOptionsCache>;
   legend?: { show: boolean; sort?: string; sortDesc?: boolean };
diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts
index aed1b4b802b..05387765ecb 100644
--- a/public/app/features/panel/panel_directive.ts
+++ b/public/app/features/panel/panel_directive.ts
@@ -77,7 +77,12 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
       );
 
       subs.add(
-        panel.events.subscribe(RenderEvent, () => {
+        panel.events.subscribe(RenderEvent, (event) => {
+          // this event originated from angular so no need to bubble it back
+          if (event.payload?.fromAngular) {
+            return;
+          }
+
           updateDimensionsFromParentScope();
 
           $timeout(() => {
@@ -87,6 +92,16 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
         })
       );
 
+      subs.add(
+        ctrl.events.subscribe(RenderEvent, (event) => {
+          // this event originated from angular so bubble it to react so the PanelChromeAngular can update the panel header alert state
+          if (event.payload) {
+            event.payload.fromAngular = true;
+            panel.events.publish(event);
+          }
+        })
+      );
+
       scope.$on('$destroy', () => {
         elem.off();