diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx index 03098c37755..b015d6ad58e 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx @@ -3,7 +3,7 @@ import { ReplaySubject } from 'rxjs'; import { Provider } from 'react-redux'; import configureMockStore from 'redux-mock-store'; import { act, render, screen } from '@testing-library/react'; -import { getDefaultTimeRange, LoadingState, PanelData, PanelPlugin, PanelProps } from '@grafana/data'; +import { EventBusSrv, getDefaultTimeRange, LoadingState, PanelData, PanelPlugin, PanelProps } from '@grafana/data'; import { PanelChrome, Props } from './PanelChrome'; import { DashboardModel, PanelModel } from '../state'; @@ -43,6 +43,7 @@ function setupTestContext(options: Partial) { dashboard: ({ panelInitialized: jest.fn(), getTimezone: () => 'browser', + events: new EventBusSrv(), } as unknown) as DashboardModel, plugin: ({ meta: { skipDataQuery: false }, diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index d7d6433fa8c..5ac44c25480 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx @@ -16,7 +16,6 @@ import { PANEL_BORDER } from 'app/core/constants'; import { AbsoluteTimeRange, DashboardCursorSync, - EventBusSrv, EventFilterOptions, FieldConfigSource, getDefaultTimeRange, @@ -63,14 +62,8 @@ export class PanelChrome extends Component { constructor(props: Props) { super(props); - // Can this eventBus be on PanelModel? - // when we have more complex event filtering, that may be a better option - const eventBus = props.dashboard.events - ? props.dashboard.events.newScopedBus( - `panel:${props.panel.id}`, // panelID - this.eventFilter - ) - : new EventBusSrv(); + // Can this eventBus be on PanelModel? when we have more complex event filtering, that may be a better option + const eventBus = props.dashboard.events.newScopedBus(`panel:${props.panel.id}`, this.eventFilter); this.state = { isFirstLoad: true, @@ -187,16 +180,7 @@ export class PanelChrome extends Component { // The next is outside a react synthetic event so setState is not batched // So in this context we can only do a single call to setState onDataUpdate(data: PanelData) { - const { isInView, dashboard, panel, plugin } = this.props; - - if (!isInView) { - if (data.state !== LoadingState.Streaming) { - // Ignore events when not visible. - // The call will be repeated when the panel comes into view - this.setState({ refreshWhenInView: true }); - } - return; - } + const { dashboard, panel, plugin } = this.props; // Ignore this data update if we are now a non data panel if (plugin.meta.skipDataQuery) { @@ -239,6 +223,7 @@ export class PanelChrome extends Component { onRefresh = () => { const { panel, isInView, width } = this.props; + if (!isInView) { this.setState({ refreshWhenInView: true }); return; @@ -252,6 +237,10 @@ export class PanelChrome extends Component { return; } + if (this.state.refreshWhenInView) { + this.setState({ refreshWhenInView: false }); + } + panel.getQueryRunner().run({ datasource: panel.datasource, queries: panel.targets,