From a083ec9ff51d71f756ab0d6346983b7d36346fe1 Mon Sep 17 00:00:00 2001
From: Borja Garrido <bgarrido@cern.ch>
Date: Thu, 8 Aug 2024 04:59:03 +0200
Subject: [PATCH] Transformations: Add variable support to select
 groupingToMatrix (#88551)

---
 .../transformers/groupingToMatrix.ts          | 15 ++++++++-----
 .../GroupingToMatrixTransformerEditor.tsx     | 22 ++++++++++++++++---
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-data/src/transformations/transformers/groupingToMatrix.ts b/packages/grafana-data/src/transformations/transformers/groupingToMatrix.ts
index a71fb929c55..62b3d4e8a74 100644
--- a/packages/grafana-data/src/transformations/transformers/groupingToMatrix.ts
+++ b/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
diff --git a/public/app/features/transformers/editors/GroupingToMatrixTransformerEditor.tsx b/public/app/features/transformers/editors/GroupingToMatrixTransformerEditor.tsx
index 04648b6c7c1..a129ddd1ef4 100644
--- a/public/app/features/transformers/editors/GroupingToMatrixTransformerEditor.tsx
+++ b/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 />