Alerting: Fixes alert panel header icon not showing (#30840)

* Alerting: Fixes alert panel header icon not showing

* Remove as any

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

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

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