ValueMappings: support settings icons in field value mappings (#43942)

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' } } },

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

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;
 
   /**

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