Add support for custom “display names” in Template Variable (#97)

* Add text and value Field for Template Variable
---------

Co-authored-by: Sebastian Balz <[email protected]>
Co-authored-by: Julien Millau <[email protected]>
Co-authored-by: Julien Millau <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.9.0
+
+### ⭐ Added
+- Template Variable: custom “display names” support with `__text` & `__value`
+
 ## 1.8.1
 
 ### 🐞 Bug Fixes

README.md

@@ -145,6 +145,13 @@ SELECT column FROM table WHERE column in ${variable:regex}
 SELECT column FROM table WHERE column in (test1|test2)
 ```
 
+Add a Template Variable:<br/>
+You can use a SQL Query to define a [Template Variable](https://grafana.com/docs/grafana/latest/dashboards/variables/add-template-variables/#add-a-query-variable)<br/>
+```sql
+-- Add __text and __value columns to your query to support custom "display names"
+SELECT value_column as __value, text_column as __text FROM table 
+```
+
 ##### Layout of a query
 
 *Simple query*

src/datasource.ts

@@ -3,6 +3,7 @@ import { DataQueryRequest, DataFrame, MetricFindValue, DataSourceInstanceSetting
 import { SnowflakeQuery, SnowflakeOptions } from './types';
 import { switchMap, map } from 'rxjs/operators';
 import { firstValueFrom } from 'rxjs';
+import { uniqBy } from 'lodash';
 
 export class DataSource extends DataSourceWithBackend<SnowflakeQuery, SnowflakeOptions> {
   constructor(instanceSettings: DataSourceInstanceSettings<SnowflakeOptions>) {
@@ -41,14 +42,25 @@ export class DataSource extends DataSourceWithBackend<SnowflakeQuery, SnowflakeO
           }
           return response.data;
         }),
-        switchMap((data: DataFrame) => {
-          return data.fields;
-        }),
-        map((field) =>
-          field.values.toArray().map((value) => {
-            return { text: value };
-          })
-        )
+        map((data: DataFrame) => {
+          const values: MetricFindValue[] = [];
+          const textField = data.fields.find((f) => f.name.toLowerCase() === '__text');
+          const valueField = data.fields.find((f) => f.name.toLowerCase() === '__value');
+
+          if (textField && valueField) {
+            for (let i = 0; i < textField.values.length; i++) {
+              values.push({ text: '' + textField.values[i], value: '' + valueField.values[i] });
+            }
+          } else {
+            for (const field of data.fields) {
+              for (const value of field.values) {
+                values.push({ text: value });
+              }
+            }
+          }
+
+          return uniqBy(values, 'text');
+        })
       ));
   }
 }