Transformations: Add variable support to select groupingToMatrix (#88551)

packages/grafana-data/src/transformations/transformers/groupingToMatrix.ts

@@ -2,7 +2,12 @@ import { map } from 'rxjs/operators';
 
 import { getFieldDisplayName } from '../../field/fieldState';
 import { DataFrame, Field, FieldType } from '../../types/dataFrame';
-import { SpecialValue, DataTransformerInfo, TransformationApplicabilityLevels } from '../../types/transformations';
+import {
+  SpecialValue,
+  DataTransformerInfo,
+  TransformationApplicabilityLevels,
+  DataTransformContext,
+} from '../../types/transformations';
 import { fieldMatchers } from '../matchers';
 import { FieldMatcherID } from '../matchers/ids';
 
@@ -57,12 +62,12 @@ export const groupingToMatrixTransformer: DataTransformerInfo<GroupingToMatrixTr
 
     return `Grouping to matrix requiers at least 3 fields to work. Currently there are ${numFields} fields.`;
   },
-  operator: (options) => (source) =>
+  operator: (options: GroupingToMatrixTransformerOptions, ctx: DataTransformContext) => (source) =>
     source.pipe(
       map((data) => {
-        const columnFieldMatch = options.columnField || DEFAULT_COLUMN_FIELD;
-        const rowFieldMatch = options.rowField || DEFAULT_ROW_FIELD;
-        const valueFieldMatch = options.valueField || DEFAULT_VALUE_FIELD;
+        const columnFieldMatch = ctx.interpolate(options.columnField || DEFAULT_COLUMN_FIELD);
+        const rowFieldMatch = ctx.interpolate(options.rowField || DEFAULT_ROW_FIELD);
+        const valueFieldMatch = ctx.interpolate(options.valueField || DEFAULT_VALUE_FIELD);
         const emptyValue = options.emptyValue || DEFAULT_EMPTY_VALUE;
 
         // Accept only single queries

public/app/features/transformers/editors/GroupingToMatrixTransformerEditor.tsx

@@ -10,6 +10,7 @@ import {
   SpecialValue,
   TransformerCategory,
 } from '@grafana/data';
+import { getTemplateSrv } from '@grafana/runtime';
 import { InlineField, InlineFieldRow, Select } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
@@ -21,6 +22,11 @@ export const GroupingToMatrixTransformerEditor = ({
   onChange,
 }: TransformerUIProps<GroupingToMatrixTransformerOptions>) => {
   const fieldNames = useAllFieldNamesFromDataFrames(input).map((item: string) => ({ label: item, value: item }));
+  const variables = getTemplateSrv()
+    .getVariables()
+    .map((v) => {
+      return { value: '$' + v.name, label: '$' + v.name };
+    });
 
   const onSelectColumn = useCallback(
     (value: SelectableValue<string>) => {
@@ -73,13 +79,23 @@ export const GroupingToMatrixTransformerEditor = ({
     <>
       <InlineFieldRow>
         <InlineField label="Column" labelWidth={8}>
-          <Select options={fieldNames} value={options.columnField} onChange={onSelectColumn} isClearable />
+          <Select
+            options={[...fieldNames, ...variables]}
+            value={options.columnField}
+            onChange={onSelectColumn}
+            isClearable
+          />
         </InlineField>
         <InlineField label="Row" labelWidth={8}>
-          <Select options={fieldNames} value={options.rowField} onChange={onSelectRow} isClearable />
+          <Select options={[...fieldNames, ...variables]} value={options.rowField} onChange={onSelectRow} isClearable />
         </InlineField>
         <InlineField label="Cell Value" labelWidth={10}>
-          <Select options={fieldNames} value={options.valueField} onChange={onSelectValue} isClearable />
+          <Select
+            options={[...fieldNames, ...variables]}
+            value={options.valueField}
+            onChange={onSelectValue}
+            isClearable
+          />
         </InlineField>
         <InlineField label="Empty Value">
           <Select options={specialValueOptions} value={options.emptyValue} onChange={onSelectEmptyValue} isClearable />