testing autocomplete

apps/alerting/notifications/pkg/apis/alertingnotifications/v0alpha1/receiver_schema_gen.go

@@ -13,7 +13,7 @@ import (
 // schema is unexported to prevent accidental overwrites
 var (
 	schemaReceiver = resource.NewSimpleSchema("notifications.alerting.grafana.app", "v0alpha1", NewReceiver(), &ReceiverList{}, resource.WithKind("Receiver"),
-		resource.WithPlural("receivers"), resource.WithScope(resource.NamespacedScope), resource.WithSelectableFields([]resource.SelectableField{{
+		resource.WithPlural("receivers"), resource.WithScope(resource.NamespacedScope), resource.WithSelectableFields([]resource.SelectableField{resource.SelectableField{
 			FieldSelector: "spec.title",
 			FieldValueFunc: func(o resource.Object) (string, error) {
 				cast, ok := o.(*Receiver)

apps/dashboard/kinds/v2alpha1/dashboard_spec.cue

@@ -790,6 +790,8 @@ VariableOption: {
 	text: string | [...string]
 	// Value of the option
 	value: string | [...string]
+	// Additional properties for multi-props variables
+	properties?: {[string]: string}
 }
 
 // Query variable specification

apps/dashboard/kinds/v2beta1/dashboard_spec.cue

@@ -794,6 +794,8 @@ VariableOption: {
 	text: string | [...string]
 	// Value of the option
 	value: string | [...string]
+	// Additional properties for multi-props variables
+	properties?: {[string]: string}
 }
 
 // Query variable specification

apps/dashboard/pkg/apis/dashboard/v0alpha1/dashboard_object_gen.go

@@ -301,6 +301,8 @@ var _ resource.ListObject = &DashboardList{}
 
 // Copy methods for all subresource types
 
+
+
 // DeepCopy creates a full deep copy of DashboardStatus
 func (s *DashboardStatus) DeepCopy() *DashboardStatus {
 	cpy := &DashboardStatus{}

apps/dashboard/pkg/apis/dashboard/v1beta1/dashboard_object_gen.go

@@ -301,6 +301,8 @@ var _ resource.ListObject = &DashboardList{}
 
 // Copy methods for all subresource types
 
+
+
 // DeepCopy creates a full deep copy of DashboardStatus
 func (s *DashboardStatus) DeepCopy() *DashboardStatus {
 	cpy := &DashboardStatus{}

apps/dashboard/pkg/apis/dashboard/v2alpha1/dashboard_spec.cue

@@ -794,6 +794,8 @@ VariableOption: {
 	text: string | [...string]
 	// Value of the option
 	value: string | [...string]
+	// Additional properties for multi-props variables
+	properties?: {[string]: string}
 }
 
 // Query variable specification

apps/dashboard/pkg/apis/dashboard/v2alpha1/dashboard_spec_gen.go

@@ -1411,6 +1411,8 @@ type DashboardVariableOption struct {
 	Text DashboardStringOrArrayOfString `json:"text"`
 	// Value of the option
 	Value DashboardStringOrArrayOfString `json:"value"`
+	// Additional properties for multi-props variables
+	Properties map[string]string `json:"properties,omitempty"`
 }
 
 // NewDashboardVariableOption creates a new DashboardVariableOption object.

apps/dashboard/pkg/apis/dashboard/v2beta1/dashboard_spec.cue

@@ -798,6 +798,8 @@ VariableOption: {
 	text: string | [...string]
 	// Value of the option
 	value: string | [...string]
+	// Additional properties for multi-props variables
+	properties?: {[string]: string}
 }
 
 // Query variable specification

apps/dashboard/pkg/apis/dashboard/v2beta1/dashboard_spec_gen.go

@@ -1414,6 +1414,8 @@ type DashboardVariableOption struct {
 	Text DashboardStringOrArrayOfString `json:"text"`
 	// Value of the option
 	Value DashboardStringOrArrayOfString `json:"value"`
+	// Additional properties for multi-props variables
+	Properties map[string]string `json:"properties,omitempty"`
 }
 
 // NewDashboardVariableOption creates a new DashboardVariableOption object.

apps/folder/pkg/apis/manifestdata/folder_manifest.go

@@ -18,6 +18,8 @@ import (
 	v1beta1 "github.com/grafana/grafana/apps/folder/pkg/apis/folder/v1beta1"
 )
 
+var ()
+
 var appManifestData = app.ManifestData{
 	AppName:          "folder",
 	Group:            "folder.grafana.app",

packages/grafana-sql/src/SQLVariableSupport.tsx

@@ -0,0 +1,174 @@
+import { useEffect, useState } from 'react';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import {
+  CustomVariableSupport,
+  DataQueryRequest,
+  DataQueryResponse,
+  QueryEditorProps,
+  Field,
+  DataFrame,
+  MetricFindValue,
+} from '@grafana/data';
+import { t } from '@grafana/i18n';
+import { EditorMode, EditorRows, EditorRow, EditorField } from '@grafana/plugin-ui';
+import { Combobox, ComboboxOption } from '@grafana/ui';
+
+import { SqlQueryEditorLazy } from './components/QueryEditorLazy';
+import { SqlDatasource } from './datasource/SqlDatasource';
+import { applyQueryDefaults } from './defaults';
+import { QueryFormat, type SQLQuery, type SQLOptions, type SQLQueryMeta } from './types';
+
+type SQLVariableQuery = { query: string } & SQLQuery;
+
+const refId = 'SQLVariableQueryEditor-VariableQuery';
+
+export class SQLVariableSupport extends CustomVariableSupport<SqlDatasource, SQLQuery> {
+  constructor(readonly datasource: SqlDatasource) {
+    super();
+  }
+  editor = SQLVariablesQueryEditor;
+  query(request: DataQueryRequest<SQLQuery>): Observable<DataQueryResponse> {
+    if (request.targets.length < 1) {
+      throw new Error('no variable query found');
+    }
+    const updatedQuery = migrateVariableQuery(request.targets[0]);
+    return this.datasource.query({ ...request, targets: [updatedQuery] }).pipe(
+      map((d: DataQueryResponse) => {
+        const frames = d.data || [];
+        const metricFindValues = convertDataFramesToMetricFindValues(frames, updatedQuery.meta);
+        return { data: metricFindValues };
+      })
+    );
+  }
+  getDefaultQuery(): Partial<SQLQuery> {
+    return applyQueryDefaults({ refId, editorMode: EditorMode.Builder, format: QueryFormat.Table });
+  }
+}
+
+type SQLVariableQueryEditorProps = QueryEditorProps<SqlDatasource, SQLQuery, SQLOptions>;
+
+const SQLVariablesQueryEditor = (props: SQLVariableQueryEditorProps) => {
+  const query = migrateVariableQuery(props.query);
+  return (
+    <>
+      <SqlQueryEditorLazy {...props} query={query} />
+      <FieldMapping {...props} query={query} />
+    </>
+  );
+};
+
+const FieldMapping = (props: SQLVariableQueryEditorProps) => {
+  const { query, datasource, onChange } = props;
+  const [choices, setChoices] = useState<ComboboxOption[]>([]);
+  useEffect(() => {
+    let isActive = true;
+    // eslint-disable-next-line
+    const subscription = datasource.query({ targets: [query] } as DataQueryRequest<SQLQuery>).subscribe({
+      next: (response) => {
+        if (!isActive) {
+          return;
+        }
+        const fieldNames = (response.data[0] || { fields: [] }).fields.map((f: Field) => f.name);
+        setChoices(fieldNames.map((f: Field) => ({ value: f, label: f })));
+      },
+      error: () => {
+        if (isActive) {
+          setChoices([]);
+        }
+      },
+    });
+    return () => {
+      isActive = false;
+      subscription.unsubscribe();
+    };
+  }, [datasource, query]);
+  const onMetaPropChange = <Key extends keyof SQLQueryMeta, Value extends SQLQueryMeta[Key]>(
+    key: Key,
+    value: Value,
+    meta = query.meta || {}
+  ) => {
+    onChange({ ...query, meta: { ...meta, [key]: value } });
+  };
+  return (
+    <EditorRows>
+      <EditorRow>
+        <EditorField label={t('grafana-sql.components.query-meta.variables.valueField', 'Value Field')}>
+          <Combobox
+            isClearable
+            value={query.meta?.valueField}
+            onChange={(e) => onMetaPropChange('valueField', e?.value)}
+            width={40}
+            options={choices}
+          />
+        </EditorField>
+        <EditorField label={t('grafana-sql.components.query-meta.variables.textField', 'Text Field')}>
+          <Combobox
+            isClearable
+            value={query.meta?.textField}
+            onChange={(e) => onMetaPropChange('textField', e?.value)}
+            width={40}
+            options={choices}
+          />
+        </EditorField>
+      </EditorRow>
+    </EditorRows>
+  );
+};
+
+const migrateVariableQuery = (rawQuery: string | SQLQuery): SQLVariableQuery => {
+  if (typeof rawQuery !== 'string') {
+    return {
+      ...rawQuery,
+      refId: rawQuery.refId || refId,
+      query: rawQuery.rawSql || '',
+    };
+  }
+  return {
+    ...applyQueryDefaults({
+      refId,
+      rawSql: rawQuery,
+      editorMode: rawQuery ? EditorMode.Code : EditorMode.Builder,
+    }),
+    query: rawQuery,
+  };
+};
+
+const convertDataFramesToMetricFindValues = (frames: DataFrame[], meta?: SQLQueryMeta): MetricFindValue[] => {
+  if (!frames.length) {
+    throw new Error('no results found');
+  }
+
+  const frame = frames[0];
+
+  const fields = frame.fields;
+
+  if (fields.length < 1) {
+    throw new Error('no fields found in the response');
+  }
+
+  let textField = fields.find((f) => f.name === '__text');
+  let valueField = fields.find((f) => f.name === '__value');
+  if (meta?.textField) {
+    textField = fields.find((f) => f.name === meta.textField);
+  }
+  if (meta?.valueField) {
+    valueField = fields.find((f) => f.name === meta.valueField);
+  }
+  const resolvedTextField = textField || valueField || fields[0];
+  const resolvedValueField = valueField || textField || fields[0];
+
+  const results: MetricFindValue[] = [];
+  const rowCount = frame.length;
+  for (let i = 0; i < rowCount; i++) {
+    const text = String(resolvedTextField.values[i] ?? '');
+    const value = String(resolvedValueField.values[i] ?? '');
+    const properties: Record<string, string> = {};
+    for (const field of fields) {
+      properties[field.name] = String(field.values[i] ?? '');
+    }
+    results.push({ text, value, properties });
+  }
+  return results;
+};

packages/grafana-sql/src/index.ts

@@ -21,6 +21,7 @@ export { TLSSecretsConfig } from './components/configuration/TLSSecretsConfig';
 export { useMigrateDatabaseFields } from './components/configuration/useMigrateDatabaseFields';
 export { SqlQueryEditorLazy } from './components/QueryEditorLazy';
 export type { QueryHeaderProps } from './components/QueryHeader';
+export { SQLVariableSupport } from './SQLVariableSupport';
 export { createSelectClause, haveColumns } from './utils/sql.utils';
 export { applyQueryDefaults } from './defaults';
 export { makeVariable } from './utils/testHelpers';

packages/grafana-sql/src/locales/en-US/grafana-sql.json

@@ -69,6 +69,12 @@
         "placeholder-select-format": "Select format",
         "run-query": "Run query"
       },
+      "query-meta": {
+        "variables": {
+          "textField": "Text Field",
+          "valueField": "Value Field"
+        }
+      },
       "query-toolbox": {
         "content-hit-ctrlcmdreturn-to-run-query": "Hit CTRL/CMD+Return to run query",
         "tooltip-collapse": "Collapse editor",

packages/grafana-sql/src/types.ts

@@ -50,6 +50,8 @@ export enum QueryFormat {
   Table = 'table',
 }
 
+export type SQLQueryMeta = { valueField?: string; textField?: string };
+
 export interface SQLQuery extends DataQuery {
   alias?: string;
   format?: QueryFormat;
@@ -59,6 +61,7 @@ export interface SQLQuery extends DataQuery {
   sql?: SQLExpression;
   editorMode?: EditorMode;
   rawQuery?: boolean;
+  meta?: SQLQueryMeta;
 }
 
 export interface NameValue {

public/app/features/dashboard-scene/serialization/sceneVariablesSetToVariables.ts

@@ -284,6 +284,7 @@ function variableValueOptionsToVariableOptions(varState: MultiValueVariable['sta
     value: String(o.value),
     text: o.label,
     selected: Array.isArray(varState.value) ? varState.value.includes(o.value) : varState.value === o.value,
+    ...(o.properties && { properties: o.properties }),
   }));
 }
 

public/app/features/panel/panellinks/link_srv.ts

@@ -80,18 +80,18 @@ const buildLabelPath = (label: string) => {
   return label.includes('.') || label.trim().includes(' ') ? `["${label}"]` : `.${label}`;
 };
 
-const getVariableValueProperties = (variable: TypedVariableModel): string[] => {
-  if (!('valuesFormat' in variable) || variable.valuesFormat !== 'json') {
-    return [];
-  }
+const isRecord = (value: unknown): value is Record<string, unknown> => {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
 
-  function collectFieldPaths(option: Record<string, string>, currentPath: string) {
+const getVariableValueProperties = (variable: TypedVariableModel): string[] => {
+  function collectFieldPaths(option: Record<string, unknown>, currentPath: string): string[] {
     let paths: string[] = [];
     for (const field in option) {
       if (option.hasOwnProperty(field)) {
         const newPath = `${currentPath}.${field}`;
         const value = option[field];
-        if (typeof value === 'object' && value !== null) {
+        if (isRecord(value)) {
           paths = [...paths, ...collectFieldPaths(value, newPath)];
         }
         paths.push(newPath);
@@ -100,11 +100,23 @@ const getVariableValueProperties = (variable: TypedVariableModel): string[] => {
     return paths;
   }
 
-  try {
-    return collectFieldPaths(JSON.parse(variable.query)[0], variable.name);
-  } catch {
-    return [];
+  if ('valuesFormat' in variable && variable.valuesFormat === 'json') {
+    try {
+      return collectFieldPaths(JSON.parse(variable.query)[0], variable.name);
+    } catch {
+      return [];
+    }
   }
+
+  if ('options' in variable && Array.isArray(variable.options) && variable.options.length > 0) {
+    for (const opt of variable.options) {
+      if ('properties' in opt && isRecord(opt.properties) && Object.keys(opt.properties).length > 0) {
+        return collectFieldPaths(opt.properties, variable.name);
+      }
+    }
+  }
+
+  return [];
 };
 
 export const getPanelLinksVariableSuggestions = (): VariableSuggestion[] => [

public/app/plugins/datasource/grafana-postgresql-datasource/datasource.ts

@@ -11,6 +11,7 @@ import {
   SQLQuery,
   SQLSelectableValue,
   SqlDatasource,
+  SQLVariableSupport,
   formatSQL,
 } from '@grafana/sql';
 
@@ -25,6 +26,7 @@ export class PostgresDatasource extends SqlDatasource {
 
   constructor(instanceSettings: DataSourceInstanceSettings<PostgresOptions>) {
     super(instanceSettings);
+    this.variables = new SQLVariableSupport(this);
   }
 
   getQueryModel(target?: SQLQuery, templateSrv?: TemplateSrv, scopedVars?: ScopedVars): PostgresQueryModel {