From 54b120505e7e29f3f57035f84cea8149ad4a70e7 Mon Sep 17 00:00:00 2001
From: Nathan Marrs <nathanielmarrs@gmail.com>
Date: Thu, 13 Jan 2022 10:06:40 -0800
Subject: [PATCH] ValueMappings: support settings icons in field value mappings
 (#43942)

---
 .../src/field/displayProcessor.test.ts        | 33 +++++++++++++++++++
 .../src/field/displayProcessor.ts             | 23 ++++++++++++-
 .../grafana-data/src/types/displayValue.ts    |  6 +++-
 .../grafana-data/src/types/valueMapping.ts    |  1 +
 4 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-data/src/field/displayProcessor.test.ts b/packages/grafana-data/src/field/displayProcessor.test.ts
index 0c301915ba8..3bae9138192 100644
--- a/packages/grafana-data/src/field/displayProcessor.test.ts
+++ b/packages/grafana-data/src/field/displayProcessor.test.ts
@@ -145,6 +145,39 @@ describe('Format value', () => {
     expect(result.text).toEqual('10.0');
   });
 
+  it('should return icon value if there are matching value mappings', () => {
+    const valueMappings: ValueMapping[] = [
+      { type: MappingType.ValueToText, options: { '11': { text: 'elva', icon: 'windmill.svg' } } },
+    ];
+
+    const display = getDisplayProcessorFromConfig({ decimals: 1, mappings: valueMappings });
+    const result = display('11');
+
+    expect(result.icon).toEqual('windmill.svg');
+  });
+
+  it('should return icon value if there are matching value mappings in a range', () => {
+    const valueMappings: ValueMapping[] = [
+      { type: MappingType.RangeToText, options: { from: 1, to: 9, result: { text: '1-9', icon: 'drone.svg' } } },
+    ];
+
+    const display = getDisplayProcessorFromConfig({ decimals: 1, mappings: valueMappings });
+    const result = display('8');
+
+    expect(result.icon).toEqual('drone.svg');
+  });
+
+  it('should return undefined icon value if there are no matching value mappings in a range', () => {
+    const valueMappings: ValueMapping[] = [
+      { type: MappingType.ValueToText, options: { '11': { text: 'elva', icon: 'windmill.svg' } } },
+    ];
+
+    const display = getDisplayProcessorFromConfig({ decimals: 1, mappings: valueMappings });
+    const result = display('10');
+
+    expect(result.icon).toEqual(undefined);
+  });
+
   it('should return mapped value if there are matching value mappings', () => {
     const valueMappings: ValueMapping[] = [
       { type: MappingType.ValueToText, options: { '11': { text: 'elva' } } },
diff --git a/packages/grafana-data/src/field/displayProcessor.ts b/packages/grafana-data/src/field/displayProcessor.ts
index 6abc7202714..32c92e08072 100644
--- a/packages/grafana-data/src/field/displayProcessor.ts
+++ b/packages/grafana-data/src/field/displayProcessor.ts
@@ -84,6 +84,7 @@ export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayP
     let prefix: string | undefined;
     let suffix: string | undefined;
     let color: string | undefined;
+    let icon: string | undefined;
     let percent: number | undefined;
 
     if (mappings && mappings.length > 0) {
@@ -97,6 +98,10 @@ export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayP
         if (mappingResult.color != null) {
           color = options.theme.visualization.getColorByName(mappingResult.color);
         }
+
+        if (mappingResult.icon != null) {
+          icon = mappingResult.icon;
+        }
       }
     }
 
@@ -137,7 +142,23 @@ export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayP
       percent = scaleResult.percent;
     }
 
-    return { text, numeric, prefix, suffix, color, percent };
+    const display: DisplayValue = {
+      text,
+      numeric,
+      prefix,
+      suffix,
+      color,
+    };
+
+    if (icon != null) {
+      display.icon = icon;
+    }
+
+    if (percent != null) {
+      display.percent = percent;
+    }
+
+    return display;
   };
 }
 
diff --git a/packages/grafana-data/src/types/displayValue.ts b/packages/grafana-data/src/types/displayValue.ts
index 7fb97183e8e..2effad55d78 100644
--- a/packages/grafana-data/src/types/displayValue.ts
+++ b/packages/grafana-data/src/types/displayValue.ts
@@ -12,9 +12,13 @@ export interface DisplayValue extends FormattedValue {
    */
   percent?: number;
   /**
-   *  Color based on configs or Threshold
+   *  Color based on mappings or threshold
    */
   color?: string;
+  /**
+   *  Icon based on mappings or threshold
+   */
+  icon?: string;
   title?: string;
 
   /**
diff --git a/packages/grafana-data/src/types/valueMapping.ts b/packages/grafana-data/src/types/valueMapping.ts
index 6a4b373d305..463137c6bc8 100644
--- a/packages/grafana-data/src/types/valueMapping.ts
+++ b/packages/grafana-data/src/types/valueMapping.ts
@@ -14,6 +14,7 @@ export enum MappingType {
 export interface ValueMappingResult {
   text?: string;
   color?: string;
+  icon?: string;
   index?: number;
 }