From d9a36010945be1b70d9972c685c40ade931289d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 29 Aug 2019 19:04:33 +0200
Subject: [PATCH] Singlestat: Various fixes to singlestat and DataFrame
 (#18783)

* Singlestat: Various fixes to singlestat and DataFrame

* removed comment
---
 .../src/components/Tooltip/_Tooltip.scss      |  2 +-
 packages/grafana-ui/src/types/panel.ts        |  2 --
 .../dashboard/panel_editor/QueriesTab.tsx     | 14 +++++++----
 .../app/features/panel/metrics_panel_ctrl.ts  | 23 +++++++++++++------
 public/app/features/panel/panel_ctrl.ts       | 14 ++++++-----
 public/app/plugins/panel/graph/module.ts      |  7 +++---
 public/app/plugins/panel/singlestat/module.ts | 21 ++++++++++++-----
 public/sass/components/_drop.scss             |  2 +-
 public/sass/mixins/_drop_element.scss         |  2 +-
 9 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
index 7af558624a9..f8002b5d0e1 100644
--- a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
+++ b/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;
 
diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts
index c91df07019d..c6fbb019ba8 100644
--- a/packages/grafana-ui/src/types/panel.ts
+++ b/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;
diff --git a/public/app/features/dashboard/panel_editor/QueriesTab.tsx b/public/app/features/dashboard/panel_editor/QueriesTab.tsx
index 17b2090e586..ac2461b4487 100644
--- a/public/app/features/dashboard/panel_editor/QueriesTab.tsx
+++ b/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;
-      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 });
     },
diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts
index 94d8cc2bbba..dbce8126619 100644
--- a/public/app/features/panel/metrics_panel_ctrl.ts
+++ b/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({
-          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() {
diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts
index b32aaae051d..373d2aee0cf 100644
--- a/public/app/features/panel/panel_ctrl.ts
+++ b/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) +
diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts
index 84c29ab0b6e..f78134a048b 100644
--- a/public/app/plugins/panel/graph/module.ts
+++ b/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[]) {
-    super.handleDataFrames(data);
-
+  onDataFramesReceived(data: DataFrame[]) {
     this.dataList = data;
     this.seriesList = this.processor.getSeriesList({
       dataList: this.dataList,
diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts
index 2ba1c725014..a787765416a 100644
--- a/public/app/plugins/panel/singlestat/module.ts
+++ b/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
-  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]; //
diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss
index f7133bc0aea..6fced0dec6f 100644
--- a/public/sass/components/_drop.scss
+++ b/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);
 
diff --git a/public/sass/mixins/_drop_element.scss b/public/sass/mixins/_drop_element.scss
index b0399aced72..209e8c979f6 100644
--- a/public/sass/mixins/_drop_element.scss
+++ b/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;