Singlestat: Various fixes to singlestat and DataFrame (#18783)

* Singlestat: Various fixes to singlestat and DataFrame

* removed comment

packages/grafana-ui/src/components/Tooltip/_Tooltip.scss

@@ -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;
 

packages/grafana-ui/src/types/panel.ts

@@ -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;

public/app/features/dashboard/panel_editor/QueriesTab.tsx

@@ -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;
+      try {
-      if (data.state === LoadingState.Error) {
+        const { panel } = this.props;
-        panel.events.emit('data-error', data.error);
+        if (data.state === LoadingState.Error) {
-      } else if (data.state === LoadingState.Done) {
+          panel.events.emit('data-error', data.error);
-        panel.events.emit('data-received', data.legacy);
+        } 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 });
     },

public/app/features/panel/metrics_panel_ctrl.ts

@@ -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({
+        this.handleQueryResult({ data: data.legacy });
-          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() {

public/app/features/panel/panel_ctrl.ts

@@ -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) +

public/app/plugins/panel/graph/module.ts

@@ -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[]) {
+  onDataFramesReceived(data: DataFrame[]) {
-    super.handleDataFrames(data);
-
     this.dataList = data;
     this.seriesList = this.processor.getSeriesList({
       dataList: this.dataList,

public/app/plugins/panel/singlestat/module.ts

@@ -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
+  onFramesReceived(frames: DataFrame[]) {
-  handleDataFrames(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]; //

public/sass/components/_drop.scss

@@ -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);
 

public/sass/mixins/_drop_element.scss

@@ -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;