valueMappings variable subst

CHANGELOG.md

@@ -16,6 +16,14 @@ The yaml drive is identical in nature to the fillColor drive.
 New config terms:
 - cells.cell-name.strokeColor
 
+Grafana Variable Substitution in ValueMappings
+----------------------------------------------
+Adds support for passing valueMappings text through grafana variable substitution. i.e. to substitute
+all values of a timeseries with a variable value:
+cell abc:
+  valueMappings:
+    - {text = "${myVariableName}"}
+
 ## 1.12.0
 URL Grafana Variables
 ---------------------

provisioning/dashboardData/dataMappings.yaml → provisioning/dashboardData/valueMappings.yaml

@@ -10,7 +10,7 @@ anchorLinks:
   - valueMappings: &valuemap1
     - {value: null, text: "panel null"}
     - {value: 0, text: "panel off"}
-    - {valueMax: 300, text: "panel low"}
+    - {valueMax: 300, text: "panel ${exampleVar}"}
     - {valueMin: 300, valueMax: 600, text: "panel medium"}
     - {valueMin: 600, text: "panel high"}
   - thresholds: &thresholds

provisioning/dashboardData/dataMappingsSite.yaml → provisioning/dashboardData/valueMappingsSite.yaml

@@ -9,6 +9,6 @@ valueMappings:
   dbTrans:
     - {value: null, text: "site null"}
     - {value: 0, text: "site off"}
-    - {valueMax: 300, text: "site low"}
+    - {valueMax: 300, text: "site ${exampleVar}"}
     - {valueMin: 300, valueMax: 600, text: "site medium"}
     - {valueMin: 600, text: "site high"}

src/components/Config.tsx

@@ -1,3 +1,4 @@
+import { VariableInterpolation, getTemplateSrv } from "@grafana/runtime";
 import { createUrl } from "./Utils";
 
 export type DatapointMode = 'last' | 'lastNotNull';
@@ -39,6 +40,7 @@ export type FlowValueMapping = {
   valueMin: number | undefined;
   valueMax: number | undefined;
   text: string;
+  variableSubst: boolean;
   valid: boolean;
 };
 
@@ -238,6 +240,12 @@ function panelConfigDereference(siteConfig: SiteConfig, panelConfig: PanelConfig
             (typeof mapping.text === 'string') &&
             ((typeof mapping.valueMin === 'number') || (typeof mapping.valueMin === 'undefined')) &&
             ((typeof mapping.valueMax === 'number') || (typeof mapping.valueMax === 'undefined')));
+
+          if (mapping.valid && (typeof mapping.variableSubst === 'undefined')) {
+            let interpolations: VariableInterpolation[] = [];
+            getTemplateSrv().replace(mapping.text, undefined, undefined, interpolations);
+            mapping.variableSubst = interpolations.length > 0;
+          }
         }
       }
     }

src/components/SvgUpdater.tsx

@@ -12,6 +12,7 @@ import {
 import { HighlightState } from './Highlighter';
 import {
   CellFillLevelDriver, getClipper, isShapeElement } from 'components/FillLevel';
+import { getTemplateSrv } from '@grafana/runtime';
 // Defines the metadata stored against each drivable svg cell
 export type SvgCell = {
   cellId: string;
@@ -261,7 +262,7 @@ export function valueMapping(valueMappings: FlowValueMapping[], value: number |
           ((typeof mapping.valueMax === 'undefined') || (value <= mapping.valueMax));
       }
       if (match) {
-        return mapping.text;
+        return mapping.variableSubst ? getTemplateSrv().replace(mapping.text) : mapping.text;
       }
     }
   }

src/test/SvgUpdater.test.tsx

@@ -143,14 +143,15 @@ test('zero', () => {
 });
 
 test('valuemapping', () => {
+  // Note getTemplateSrv is not available in the test framework so variableSubst is always false
   let fvm: FlowValueMapping[] = [
-    {valid: true, value: -3, valueMin: undefined, valueMax: undefined, text: 'val_-3'},
-    {valid: true, value: 0, valueMin: undefined, valueMax: undefined, text: 'val_0'},
-    {valid: true, value: 3, valueMin: undefined, valueMax: undefined, text: 'val_3'},
-    {valid: true, value: undefined, valueMin: 10, valueMax: 20, text: 'hello1'},
-    {valid: true, value: undefined, valueMin: 21, valueMax: 30, text: 'hello2'},
-    {valid: true, value: undefined, valueMin: 1000, valueMax: undefined, text: 'high'},
-    {valid: true, value: undefined, valueMin: undefined, valueMax: -1000, text: 'low'},
+    {valid: true, value: -3, valueMin: undefined, valueMax: undefined, text: 'val_-3', variableSubst: false},
+    {valid: true, value: 0, valueMin: undefined, valueMax: undefined, text: 'val_0', variableSubst: false},
+    {valid: true, value: 3, valueMin: undefined, valueMax: undefined, text: 'val_3', variableSubst: false},
+    {valid: true, value: undefined, valueMin: 10, valueMax: 20, text: 'hello1', variableSubst: false},
+    {valid: true, value: undefined, valueMin: 21, valueMax: 30, text: 'hello2', variableSubst: false},
+    {valid: true, value: undefined, valueMin: 1000, valueMax: undefined, text: 'high', variableSubst: false},
+    {valid: true, value: undefined, valueMin: undefined, valueMax: -1000, text: 'low', variableSubst: false},
   ];
   expect(valueMapping(fvm, -4)).toEqual(null);
   expect(valueMapping(fvm, -3)).toEqual('val_-3');
@@ -163,7 +164,7 @@ test('valuemapping', () => {
 
 test('valuemappingnocriteria', () => {
   let fvm: FlowValueMapping[] = [
-    {valid: true, value:  undefined, valueMin: undefined, valueMax: undefined, text: 'custom'},
+    {valid: true, value:  undefined, valueMin: undefined, valueMax: undefined, text: 'custom', variableSubst: false},
   ];
   expect(valueMapping(fvm, -4)).toEqual('custom');
   expect(valueMapping(fvm, 0)).toEqual('custom');