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