mirror of
https://github.com/grafana/grafana.git
synced 2024-12-30 10:47:30 -06:00
Singlestat: Various fixes to singlestat and DataFrame (#18783)
* Singlestat: Various fixes to singlestat and DataFrame * removed comment
This commit is contained in:
parent
e6e8611d52
commit
d9a3601094
@ -26,7 +26,7 @@ $popper-margin-from-ref: 5px;
|
||||
background: $tooltipBackground;
|
||||
border-radius: $border-radius-sm;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||
padding: 6px 10px;
|
||||
padding: $space-sm;
|
||||
color: $tooltipColor;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
|
||||
|
@ -24,8 +24,6 @@ export interface PanelData {
|
||||
export interface PanelProps<T = any> {
|
||||
id: number; // ID within the current dashboard
|
||||
data: PanelData;
|
||||
// TODO: annotation?: PanelData;
|
||||
|
||||
timeRange: TimeRange;
|
||||
timeZone: TimeZone;
|
||||
options: T;
|
||||
|
@ -76,11 +76,15 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
// Updates the response with information from the stream
|
||||
panelDataObserver = {
|
||||
next: (data: PanelData) => {
|
||||
const { panel } = this.props;
|
||||
if (data.state === LoadingState.Error) {
|
||||
panel.events.emit('data-error', data.error);
|
||||
} else if (data.state === LoadingState.Done) {
|
||||
panel.events.emit('data-received', data.legacy);
|
||||
try {
|
||||
const { panel } = this.props;
|
||||
if (data.state === LoadingState.Error) {
|
||||
panel.events.emit('data-error', data.error);
|
||||
} else if (data.state === LoadingState.Done) {
|
||||
panel.events.emit('data-received', data.legacy);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('Panel.events handler error', err);
|
||||
}
|
||||
this.setState({ data });
|
||||
},
|
||||
|
@ -6,7 +6,7 @@ import { PanelCtrl } from 'app/features/panel/panel_ctrl';
|
||||
import { getExploreUrl } from 'app/core/utils/explore';
|
||||
import { applyPanelTimeOverrides, getResolution } from 'app/features/dashboard/utils/panel';
|
||||
import { ContextSrv } from 'app/core/services/context_srv';
|
||||
import { toLegacyResponseData, isDataFrame, TimeRange, LoadingState, DataFrame } from '@grafana/data';
|
||||
import { toLegacyResponseData, isDataFrame, TimeRange, LoadingState, DataFrame, toDataFrameDTO } from '@grafana/data';
|
||||
|
||||
import { LegacyResponseData, DataSourceApi, PanelData, DataQueryResponse } from '@grafana/ui';
|
||||
import { Unsubscribable } from 'rxjs';
|
||||
@ -154,9 +154,7 @@ class MetricsPanelCtrl extends PanelCtrl {
|
||||
|
||||
// Make the results look like they came directly from a <6.2 datasource request
|
||||
// NOTE: any object other than 'data' is no longer supported supported
|
||||
this.handleQueryResult({
|
||||
data: data.legacy,
|
||||
});
|
||||
this.handleQueryResult({ data: data.legacy });
|
||||
} else {
|
||||
this.handleDataFrames(data.series);
|
||||
}
|
||||
@ -218,10 +216,17 @@ class MetricsPanelCtrl extends PanelCtrl {
|
||||
}
|
||||
|
||||
handleDataFrames(data: DataFrame[]) {
|
||||
this.loading = false;
|
||||
|
||||
if (this.dashboard && this.dashboard.snapshot) {
|
||||
this.panel.snapshotData = data;
|
||||
this.panel.snapshotData = data.map(frame => toDataFrameDTO(frame));
|
||||
}
|
||||
|
||||
try {
|
||||
this.events.emit('data-frames-received', data);
|
||||
} catch (err) {
|
||||
this.processDataError(err);
|
||||
}
|
||||
// Subclasses that asked for DataFrame will override
|
||||
}
|
||||
|
||||
handleQueryResult(result: DataQueryResponse) {
|
||||
@ -236,7 +241,11 @@ class MetricsPanelCtrl extends PanelCtrl {
|
||||
result = { data: [] };
|
||||
}
|
||||
|
||||
this.events.emit('data-received', result.data);
|
||||
try {
|
||||
this.events.emit('data-received', result.data);
|
||||
} catch (err) {
|
||||
this.processDataError(err);
|
||||
}
|
||||
}
|
||||
|
||||
getAdditionalMenuItems() {
|
||||
|
@ -249,23 +249,25 @@ export class PanelCtrl {
|
||||
}
|
||||
|
||||
getInfoContent(options: { mode: string }) {
|
||||
let markdown = this.panel.description || '';
|
||||
const { panel } = this;
|
||||
let markdown = panel.description || '';
|
||||
|
||||
if (options.mode === 'tooltip') {
|
||||
markdown = this.error || this.panel.description || '';
|
||||
markdown = this.error || panel.description || '';
|
||||
}
|
||||
|
||||
const templateSrv: TemplateSrv = this.$injector.get('templateSrv');
|
||||
const interpolatedMarkdown = templateSrv.replace(markdown, this.panel.scopedVars);
|
||||
const interpolatedMarkdown = templateSrv.replace(markdown, panel.scopedVars);
|
||||
let html = '<div class="markdown-html panel-info-content">';
|
||||
|
||||
const md = renderMarkdown(interpolatedMarkdown);
|
||||
html += config.disableSanitizeHtml ? md : sanitize(md);
|
||||
const links = this.panel.links && getPanelLinksSupplier(this.panel).getLinks();
|
||||
|
||||
if (links && links.length > 0) {
|
||||
if (panel.links && panel.links.length > 0) {
|
||||
const interpolatedLinks = getPanelLinksSupplier(panel).getLinks();
|
||||
|
||||
html += '<ul class="panel-info-corner-links">';
|
||||
for (const link of links) {
|
||||
for (const link of interpolatedLinks) {
|
||||
html +=
|
||||
'<li><a class="panel-menu-link" href="' +
|
||||
escapeHtml(link.href) +
|
||||
|
@ -149,6 +149,7 @@ class GraphCtrl extends MetricsPanelCtrl {
|
||||
|
||||
this.events.on('render', this.onRender.bind(this));
|
||||
this.events.on('data-received', this.onDataReceived.bind(this));
|
||||
this.events.on('data-frames-received', this.onDataReceived.bind(this));
|
||||
this.events.on('data-error', this.onDataError.bind(this));
|
||||
this.events.on('data-snapshot-load', this.onDataSnapshotLoad.bind(this));
|
||||
this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
|
||||
@ -210,13 +211,11 @@ class GraphCtrl extends MetricsPanelCtrl {
|
||||
|
||||
// This should only be called from the snapshot callback
|
||||
onDataReceived(dataList: LegacyResponseData[]) {
|
||||
this.handleDataFrames(getProcessedDataFrames(dataList));
|
||||
this.onDataFramesReceived(getProcessedDataFrames(dataList));
|
||||
}
|
||||
|
||||
// Directly support DataFrame skipping event callbacks
|
||||
handleDataFrames(data: DataFrame[]) {
|
||||
super.handleDataFrames(data);
|
||||
|
||||
onDataFramesReceived(data: DataFrame[]) {
|
||||
this.dataList = data;
|
||||
this.seriesList = this.processor.getSeriesList({
|
||||
dataList: this.dataList,
|
||||
|
@ -119,7 +119,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
|
||||
super($scope, $injector);
|
||||
_.defaults(this.panel, this.panelDefaults);
|
||||
|
||||
this.events.on('data-received', this.onDataReceived.bind(this));
|
||||
this.events.on('data-frames-received', this.onFramesReceived.bind(this));
|
||||
this.events.on('data-error', this.onDataError.bind(this));
|
||||
this.events.on('data-snapshot-load', this.onDataReceived.bind(this));
|
||||
this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
|
||||
@ -157,14 +157,23 @@ class SingleStatCtrl extends MetricsPanelCtrl {
|
||||
|
||||
// This should only be called from the snapshot callback
|
||||
onDataReceived(dataList: LegacyResponseData[]) {
|
||||
this.handleDataFrames(getProcessedDataFrames(dataList));
|
||||
this.onFramesReceived(getProcessedDataFrames(dataList));
|
||||
}
|
||||
|
||||
// Directly support DataFrame skipping event callbacks
|
||||
handleDataFrames(frames: DataFrame[]) {
|
||||
onFramesReceived(frames: DataFrame[]) {
|
||||
const { panel } = this;
|
||||
super.handleDataFrames(frames);
|
||||
this.loading = false;
|
||||
|
||||
if (frames && frames.length > 1) {
|
||||
this.data = {
|
||||
value: 0,
|
||||
display: {
|
||||
text: 'Only queries that return single series/table is supported',
|
||||
numeric: NaN,
|
||||
},
|
||||
};
|
||||
this.render();
|
||||
return;
|
||||
}
|
||||
|
||||
const distinct = getDistinctNames(frames);
|
||||
let fieldInfo = distinct.byName[panel.tableColumn]; //
|
||||
|
@ -5,7 +5,7 @@ $useDropShadow: false;
|
||||
$attachmentOffset: 0%;
|
||||
$easing: cubic-bezier(0, 0, 0.265, 1);
|
||||
|
||||
@include drop-theme('error', $popover-error-bg, $popover-color);
|
||||
@include drop-theme('error', $popover-error-bg, $white);
|
||||
@include drop-theme('popover', $popover-bg, $popover-color, $popover-border-color);
|
||||
@include drop-theme('help', $popover-help-bg, $popover-help-color);
|
||||
|
||||
|
@ -6,7 +6,7 @@
|
||||
.drop-content {
|
||||
border-radius: $border-radius-lg;
|
||||
position: relative;
|
||||
font-family: inherit;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
background: $theme-bg;
|
||||
color: $theme-color;
|
||||
padding: $space-sm;
|
||||
|
Loading…
Reference in New Issue
Block a user