From 8232659012526ff22164aaf37d65f64bdce80758 Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Tue, 22 Oct 2019 16:31:56 +0200
Subject: [PATCH] SingleStat: apply mappings to no data response (#19951)

---
 .../SingleStatShared/SingleStatBaseOptions.ts  |  4 ++--
 .../src/components/SingleStatShared/index.ts   |  2 +-
 public/app/plugins/panel/singlestat/module.ts  | 18 +++++++++++-------
 .../panel/singlestat/specs/singlestat.test.ts  | 15 +++++++++++++++
 4 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts b/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts
index 87dff8fc9cf..45857502112 100644
--- a/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts
+++ b/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts
@@ -72,7 +72,7 @@ export function sharedSingleStatPanelChangedHandler(
     }
 
     // Convert value mappings
-    const mappings = convertOldAngulrValueMapping(panel);
+    const mappings = convertOldAngularValueMapping(panel);
     if (mappings && mappings.length) {
       defaults.mappings = mappings;
     }
@@ -192,7 +192,7 @@ export function migrateOldThresholds(thresholds?: any[]): Threshold[] | undefine
 /**
  * Convert the angular single stat mapping to new react style
  */
-export function convertOldAngulrValueMapping(panel: any): ValueMapping[] {
+export function convertOldAngularValueMapping(panel: any): ValueMapping[] {
   const mappings: ValueMapping[] = [];
 
   // Guess the right type based on options
diff --git a/packages/grafana-ui/src/components/SingleStatShared/index.ts b/packages/grafana-ui/src/components/SingleStatShared/index.ts
index 41b23573e22..c66cc532767 100644
--- a/packages/grafana-ui/src/components/SingleStatShared/index.ts
+++ b/packages/grafana-ui/src/components/SingleStatShared/index.ts
@@ -5,5 +5,5 @@ export {
   SingleStatBaseOptions,
   sharedSingleStatPanelChangedHandler,
   sharedSingleStatMigrationHandler,
-  convertOldAngulrValueMapping,
+  convertOldAngularValueMapping,
 } from './SingleStatBaseOptions';
diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts
index eab1f74349d..939a769e5c1 100644
--- a/public/app/plugins/panel/singlestat/module.ts
+++ b/public/app/plugins/panel/singlestat/module.ts
@@ -22,7 +22,7 @@ import {
   LegacyResponseData,
   getFlotPairs,
   getDisplayProcessor,
-  convertOldAngulrValueMapping,
+  convertOldAngularValueMapping,
   getColorFromHexRgbOrName,
   PanelEvents,
 } from '@grafana/ui';
@@ -186,13 +186,17 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     }
 
     if (!fieldInfo) {
+      const processor = getDisplayProcessor({
+        config: {
+          mappings: convertOldAngularValueMapping(this.panel),
+          noValue: 'No Data',
+        },
+        theme: config.theme,
+      });
       // When we don't have any field
       this.data = {
-        value: 'No Data',
-        display: {
-          text: 'No Data',
-          numeric: NaN,
-        },
+        value: null,
+        display: processor(null),
       };
     } else {
       this.data = this.processField(fieldInfo);
@@ -246,7 +250,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
         ...fieldInfo.field.config,
         unit: panel.format,
         decimals: panel.decimals,
-        mappings: convertOldAngulrValueMapping(panel),
+        mappings: convertOldAngularValueMapping(panel),
       },
       theme: config.theme,
       isUtc: dashboard.isTimezoneUtc && dashboard.isTimezoneUtc(),
diff --git a/public/app/plugins/panel/singlestat/specs/singlestat.test.ts b/public/app/plugins/panel/singlestat/specs/singlestat.test.ts
index 67d543f90a4..51c62266489 100644
--- a/public/app/plugins/panel/singlestat/specs/singlestat.test.ts
+++ b/public/app/plugins/panel/singlestat/specs/singlestat.test.ts
@@ -205,6 +205,21 @@ describe('SingleStatCtrl', () => {
     });
   });
 
+  singleStatScenario('When mapping null values and no data', (ctx: TestContext) => {
+    ctx.setup(() => {
+      ctx.input = []; // No data
+      ctx.ctrl.panel.valueMaps = [{ value: 'null', text: 'XYZ' }];
+    });
+
+    it('value should be null', () => {
+      expect(ctx.data.value).toBe(null);
+    });
+
+    it('Should replace value with text', () => {
+      expect(ctx.data.display.text).toBe('XYZ');
+    });
+  });
+
   singleStatScenario('When range to text mapping is specified for first range', (ctx: TestContext) => {
     ctx.setup(() => {
       ctx.input = [{ target: 'test.cpu1', datapoints: [[41, 50]] }];