|
@@ -94,6 +94,25 @@ export class PanelChrome extends PureComponent<Props, State> {
|
|
|
return !this.props.dashboard.otherPanelInFullscreen(this.props.panel);
|
|
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 {
|
|
renderPanelPlugin(loading: LoadingState, panelData: PanelData, width: number, height: number): JSX.Element {
|
|
|
const { panel, plugin } = this.props;
|
|
const { panel, plugin } = this.props;
|
|
|
const { timeRange, renderCounter } = this.state;
|
|
const { timeRange, renderCounter } = this.state;
|
|
@@ -121,20 +140,14 @@ export class PanelChrome extends PureComponent<Props, State> {
|
|
|
);
|
|
);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- 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 { refreshCounter, timeRange } = this.state;
|
|
|
const { datasource, targets } = panel;
|
|
const { datasource, targets } = panel;
|
|
|
return (
|
|
return (
|
|
|
<>
|
|
<>
|
|
|
- {panel.snapshotData && panel.snapshotData.length > 0 ? (
|
|
|
|
|
- this.renderPanelPlugin(LoadingState.Done, snapshotDataToPanelData(panel), width, height)
|
|
|
|
|
- ) : (
|
|
|
|
|
- <>
|
|
|
|
|
- {plugin.noQueries ?
|
|
|
|
|
- this.renderPanelPlugin(LoadingState.Done, null, width, height)
|
|
|
|
|
- : (
|
|
|
|
|
- <DataPanel
|
|
|
|
|
|
|
+ {this.hasDataPanel ? (
|
|
|
|
|
+ <DataPanel
|
|
|
panelId={panel.id}
|
|
panelId={panel.id}
|
|
|
datasource={datasource}
|
|
datasource={datasource}
|
|
|
queries={targets}
|
|
queries={targets}
|
|
@@ -142,20 +155,18 @@ export class PanelChrome extends PureComponent<Props, State> {
|
|
|
isVisible={this.isVisible}
|
|
isVisible={this.isVisible}
|
|
|
widthPixels={width}
|
|
widthPixels={width}
|
|
|
refreshCounter={refreshCounter}
|
|
refreshCounter={refreshCounter}
|
|
|
- onDataResponse={this.onDataResponse}
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ onDataResponse={this.onDataResponse} >
|
|
|
{({ loading, panelData }) => {
|
|
{({ loading, panelData }) => {
|
|
|
return this.renderPanelPlugin(loading, panelData, width, height);
|
|
return this.renderPanelPlugin(loading, panelData, width, height);
|
|
|
}}
|
|
}}
|
|
|
</DataPanel>
|
|
</DataPanel>
|
|
|
- )}
|
|
|
|
|
- </>
|
|
|
|
|
- )}
|
|
|
|
|
|
|
+ ) : (
|
|
|
|
|
+ this.renderPanelPlugin(LoadingState.Done, this.getDataForPanel, width, height)
|
|
|
|
|
+ )}
|
|
|
</>
|
|
</>
|
|
|
);
|
|
);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-
|
|
|
|
|
render() {
|
|
render() {
|
|
|
const { dashboard, panel } = this.props;
|
|
const { dashboard, panel } = this.props;
|
|
|
const { timeInfo } = this.state;
|
|
const { timeInfo } = this.state;
|
|
@@ -180,7 +191,7 @@ export class PanelChrome extends PureComponent<Props, State> {
|
|
|
scopedVars={panel.scopedVars}
|
|
scopedVars={panel.scopedVars}
|
|
|
links={panel.links}
|
|
links={panel.links}
|
|
|
/>
|
|
/>
|
|
|
- {this.renderHelper(width, height)}
|
|
|
|
|
|
|
+ {this.renderDataPanel(width, height)}
|
|
|
</div>
|
|
</div>
|
|
|
);
|
|
);
|
|
|
}}
|
|
}}
|