fix: label array/object variable options as JSON so the dropdown renders (#781)

src/datasource/datasource.response.test.ts

@@ -175,6 +175,23 @@ describe('processQueryResponse', () => {
       expect(result.data[0].fields).toEqual([{ name: 'text', type: 'string', values: [7] }]);
     });
 
+    it('labels Array cells as JSON and keeps the raw arrays as values (#781)', () => {
+      const col = "array(service_name, ' test array')";
+      const result = run([{ name: col, type: 'Array(String)' }], [{ [col]: ['mysql', ' test array'] }]);
+      expect(result.data[0].fields).toEqual([
+        { name: 'text', type: 'string', values: ['["mysql"," test array"]'] },
+        { name: 'value', type: 'string', values: [['mysql', ' test array']] },
+      ]);
+    });
+
+    it('labels Map cells of a lone text column as JSON (#781)', () => {
+      const result = run([{ name: 'text', type: 'Map(String, String)' }], [{ text: { k: 'v' } }]);
+      expect(result.data[0].fields).toEqual([
+        { name: 'text', type: 'string', values: ['{"k":"v"}'] },
+        { name: 'value', type: 'string', values: [{ k: 'v' }] },
+      ]);
+    });
+
     it('yields an empty field list for empty meta', () => {
       const result = run([], []);
       expect(result.data[0].fields).toEqual([{ name: 'text', type: 'string', values: [] }]);
@@ -260,6 +277,15 @@ describe('queryVariables', () => {
     expect(result.data[0].fields).toEqual([{ name: 'text', type: 'string', values: [] }]);
   });
 
+  it('labels Array cells as JSON and keeps the raw arrays as values (#781)', async () => {
+    const { ds } = setup({ rows: 1, meta: [{ name: 'arr', type: 'Array(String)' }], data: [{ arr: ['mysql', ' test array'] }] });
+    const result: any = await firstValueFrom(ds.queryVariables({ ...baseOptions, targets: [{ refId: 'A', query: 'SELECT x' }] }));
+    expect(result.data[0].fields).toEqual([
+      { name: 'text', type: 'string', values: ['["mysql"," test array"]'] },
+      { name: 'value', type: 'string', values: [['mysql', ' test array']] },
+    ]);
+  });
+
   it('skips responses without rows', async () => {
     const { ds } = setup({ meta: [], data: [] });
     const result: any = await firstValueFrom(ds.queryVariables({ ...baseOptions, targets: [{ refId: 'A', query: 'SELECT x' }] }));

src/datasource/datasource.ts

@@ -29,7 +29,7 @@ import { DataLinkConfig } from './datalinks';
 import {QueryEditor, QueryEditorVariable} from '../views/QueryEditor/QueryEditor';
 import { getAdhocFilters } from '../views/QueryEditor/helpers/getAdHocFilters';
 import { from, merge, Observable } from 'rxjs';
-import { adhocFilterVariable, conditionalTest, convertTimestamp, createContextAwareInterpolation, safeTemplateReplace } from './helpers';
+import { adhocFilterVariable, conditionalTest, convertTimestamp, createContextAwareInterpolation, safeTemplateReplace, toVariableFields } from './helpers';
 import { ClickHouseResourceClient } from './resource_handler';
 import { parseJsonResponseLossless, tryParseJson } from './losslessJson';
 import { generateQueryForTimestampBackward, generateQueryForTimestampForward } from './log-context-query';
@@ -470,11 +470,7 @@ export class CHDataSource
                 values: sqlSeries.series.map(item => item[valueField!].toString()),
               })
             } else if (textField) {
-              resultContent.fields.push({
-                name: 'text',
-                type: FieldType.string,
-                values: sqlSeries.series.map(item => item[textField!]),
-              })
+              resultContent.fields.push(...toVariableFields(sqlSeries.series.map(item => item[textField!])))
             } else {
               const getFirstStringField = sqlSeries.meta.find((col: any) => col.type === 'String');
               if (getFirstStringField) {
@@ -486,11 +482,7 @@ export class CHDataSource
               } else {
                 const getFirstElement = sqlSeries.meta[0];
 
-                resultContent.fields.push({
-                  name: 'text',
-                  type: FieldType.string,
-                  values: sqlSeries.series.map(item => item[getFirstElement.name]),
-                })
+                resultContent.fields.push(...toVariableFields(sqlSeries.series.map(item => item[getFirstElement.name])))
               }
             }
 
@@ -745,11 +737,7 @@ export class CHDataSource
               values: sqlSeries.series.map(item => item[valueField!].toString()),
             })
           } else if (textField) {
-            resultContent.fields.push({
-              name: 'text',
-              type: FieldType.string,
-              values: sqlSeries.series.map(item => item[textField!]),
-            })
+            resultContent.fields.push(...toVariableFields(sqlSeries.series.map(item => item[textField!])))
           } else {
             const getFirstStringField = sqlSeries.meta.find((col: any) => col.type === 'String');
             if (getFirstStringField) {
@@ -761,11 +749,7 @@ export class CHDataSource
             } else {
               const getFirstElement = sqlSeries.meta[0];
 
-              resultContent.fields.push({
-                name: 'text',
-                type: FieldType.string,
-                values: sqlSeries.series.map(item => item[getFirstElement.name]),
-              })
+              resultContent.fields.push(...toVariableFields(sqlSeries.series.map(item => item[getFirstElement.name])))
             }
           }
 

src/datasource/helpers/index.test.ts

@@ -1,4 +1,4 @@
-import { interpolateQueryExpr, interpolateQueryExprWithContext, createContextAwareInterpolation, conditionalTest } from './index';
+import { interpolateQueryExpr, interpolateQueryExprWithContext, createContextAwareInterpolation, conditionalTest, toVariableFields } from './index';
 
 describe('Variable Interpolation', () => {
   describe('interpolateQueryExpr (original)', () => {
@@ -1184,3 +1184,16 @@ describe('safeTemplateReplace', () => {
     expect(templateSrv.replace).toHaveBeenLastCalledWith('/* grafana dashboard=, user=admin */ SELECT $x', {}, undefined);
   });
 });
+
+describe('toVariableFields (#781)', () => {
+  it('keeps scalar values untouched in a single text field', () => {
+    expect(toVariableFields(['a', 7, null])).toEqual([{ name: 'text', type: 'string', values: ['a', 7, null] }]);
+  });
+
+  it('labels arrays and objects as JSON and keeps them raw as values', () => {
+    expect(toVariableFields([['a', 'b'], { k: 'v' }, 'c'])).toEqual([
+      { name: 'text', type: 'string', values: ['["a","b"]', '{"k":"v"}', 'c'] },
+      { name: 'value', type: 'string', values: [['a', 'b'], { k: 'v' }, 'c'] },
+    ]);
+  });
+});

src/datasource/helpers/index.ts

@@ -1,5 +1,5 @@
 import { TemplateSrv } from '@grafana/runtime';
-import { dateMath, TypedVariableModel } from '@grafana/data';
+import { dateMath, FieldType, TypedVariableModel } from '@grafana/data';
 import { each, isString, map } from 'lodash';
 
 export const conditionalTest = (query: string, templateSrv: TemplateSrv) => {
@@ -602,6 +602,17 @@ export const safeTemplateReplace = (
   }
 };
 
+export const toVariableFields = (values: any[]) => {
+  const isComplex = (value: any) => value !== null && typeof value === 'object';
+  if (!values.some(isComplex)) {
+    return [{ name: 'text', type: FieldType.string, values }];
+  }
+  return [
+    { name: 'text', type: FieldType.string, values: values.map((value) => (isComplex(value) ? JSON.stringify(value) : value)) },
+    { name: 'value', type: FieldType.string, values },
+  ];
+};
+
 export const convertTimestamp = (date: any) => {
   if (isString(date)) {
     date = dateMath.parse(date, true);

tests/testflows/tests/automated/template_variables_editor.py

@@ -150,6 +150,19 @@ def variable_dropdown(self):
                 assert variable_value in sql_editor.get_reformatted_query(query_name='A'), error()
 
 
+@TestScenario
+def array_variable_dropdown_issue_781(self):
+    with Given("I open dashboard clickhouse dashboard"):
+        dashboards.open_dashboard(dashboard_name="clickhouse dashboard")
+
+    with When("I get array_var values"):
+        with delay():
+            variable_values = panel.get_dropdown_variable_values_set(variable_name="array_var")
+
+    with Then("I check dropdown shows array values as JSON"):
+        assert {'["mysql"," test array"]', '["postgresql"," test array"]'} <= variable_values, error()
+
+
 @TestFeature
 @Name("template variable editor")
 def feature(self):