diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index 138f299091b..ffc5ef7b904 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx @@ -94,6 +94,25 @@ export class PanelChrome extends PureComponent { return !this.props.dashboard.otherPanelInFullscreen(this.props.panel); } + get hasPanelSnapshot() { + const { panel } = this.props; + return panel.snapshotData && panel.snapshotData.length; + } + + get hasDataPanel() { + return !this.props.plugin.noQueries && !this.hasPanelSnapshot; + } + + get getDataForPanel() { + const { panel, plugin } = this.props; + + if (plugin.noQueries) { + return null; + } + + return this.hasPanelSnapshot ? snapshotDataToPanelData(panel) : null; + } + renderPanelPlugin(loading: LoadingState, panelData: PanelData, width: number, height: number): JSX.Element { const { panel, plugin } = this.props; const { timeRange, renderCounter } = this.state; @@ -121,20 +140,14 @@ export class PanelChrome extends PureComponent { ); } - renderHelper = (width: number, height: number): JSX.Element => { - const { panel, plugin } = this.props; + renderDataPanel = (width: number, height: number): JSX.Element => { + const { panel } = this.props; const { refreshCounter, timeRange } = this.state; const { datasource, targets } = panel; return ( <> - {panel.snapshotData && panel.snapshotData.length > 0 ? ( - this.renderPanelPlugin(LoadingState.Done, snapshotDataToPanelData(panel), width, height) - ) : ( - <> - {plugin.noQueries ? - this.renderPanelPlugin(LoadingState.Done, null, width, height) - : ( - { isVisible={this.isVisible} widthPixels={width} refreshCounter={refreshCounter} - onDataResponse={this.onDataResponse} - > + onDataResponse={this.onDataResponse} > {({ loading, panelData }) => { return this.renderPanelPlugin(loading, panelData, width, height); }} - )} - - )} + ) : ( + this.renderPanelPlugin(LoadingState.Done, this.getDataForPanel, width, height) + )} ); } - render() { const { dashboard, panel } = this.props; const { timeInfo } = this.state; @@ -180,7 +191,7 @@ export class PanelChrome extends PureComponent { scopedVars={panel.scopedVars} links={panel.links} /> - {this.renderHelper(width, height)} + {this.renderDataPanel(width, height)} ); }}