From 0a34b51055b670e0d581e7179550d8b648b6b7bb Mon Sep 17 00:00:00 2001
From: Nathan Marrs <nathanielmarrs@gmail.com>
Date: Tue, 30 Jul 2024 17:15:44 -0600
Subject: [PATCH] Transformation: Add variable support for filter by value
 regex matcher (#90926)

* add support for template vars in filter by value transformation for regex matcher

* less code is more code

* add test to confirm interpolation works for regex

* suggestions input for regex editor

---------

Co-authored-by: Adela Almasan <adela.almasan@grafana.com>
---
 .../transformers/filterByValue.test.ts        | 45 +++++++++++++++++++
 .../transformers/filterByValue.ts             |  3 --
 .../ValueMatchers/RegexMatcherEditor.tsx      | 34 +++++++++++++-
 3 files changed, 78 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-data/src/transformations/transformers/filterByValue.test.ts b/packages/grafana-data/src/transformations/transformers/filterByValue.test.ts
index 92cad2a1986..05517cf70c4 100644
--- a/packages/grafana-data/src/transformations/transformers/filterByValue.test.ts
+++ b/packages/grafana-data/src/transformations/transformers/filterByValue.test.ts
@@ -305,6 +305,51 @@ describe('FilterByValue transformer', () => {
     });
   });
 
+  it('should interpolate dashboard variables for regex matcher', async () => {
+    mockTransformationsVariableSupport.mockReturnValue(true);
+
+    const regex: MatcherConfig<BasicValueMatcherOptions<string | number>> = {
+      id: ValueMatcherID.regex,
+      options: { value: '.*thiswillinterpolateto6' },
+    };
+
+    const cfg: DataTransformerConfig<FilterByValueTransformerOptions> = {
+      id: DataTransformerID.filterByValue,
+      options: {
+        type: FilterByValueType.include,
+        match: FilterByValueMatch.all,
+        filters: [
+          {
+            fieldName: 'numbers',
+            config: regex,
+          },
+        ],
+      },
+    };
+
+    const ctxmock = { interpolate: jest.fn(() => '6') };
+
+    await expect(transformDataFrame([cfg], [seriesAWithSingleField], ctxmock)).toEmitValuesWith((received) => {
+      const processed = received[0];
+
+      expect(processed.length).toEqual(1);
+      expect(processed[0].fields).toEqual([
+        {
+          name: 'time',
+          type: FieldType.time,
+          values: [6000],
+          state: {},
+        },
+        {
+          name: 'numbers',
+          type: FieldType.number,
+          values: [6],
+          state: {},
+        },
+      ]);
+    });
+  });
+
   it('should not interpolate dashboard variables when feature toggle is off', async () => {
     mockTransformationsVariableSupport.mockReturnValue(false);
 
diff --git a/packages/grafana-data/src/transformations/transformers/filterByValue.ts b/packages/grafana-data/src/transformations/transformers/filterByValue.ts
index 5630a767bbd..285a0aa293c 100644
--- a/packages/grafana-data/src/transformations/transformers/filterByValue.ts
+++ b/packages/grafana-data/src/transformations/transformers/filterByValue.ts
@@ -77,9 +77,6 @@ export const filterByValueTransformer: DataTransformerInfo<FilterByValueTransfor
                 },
               },
             };
-          } else if (filter.config.id === ValueMatcherID.regex) {
-            // Due to colliding syntaxes, interpolating regex filters will cause issues.
-            return filter;
           } else if (filter.config.options.value) {
             let value = filter.config.options.value;
             if (typeof filter.config.options.value === 'string') {
diff --git a/public/app/features/transformers/FilterByValueTransformer/ValueMatchers/RegexMatcherEditor.tsx b/public/app/features/transformers/FilterByValueTransformer/ValueMatchers/RegexMatcherEditor.tsx
index 2c44980d7e4..b99f246b358 100644
--- a/public/app/features/transformers/FilterByValueTransformer/ValueMatchers/RegexMatcherEditor.tsx
+++ b/public/app/features/transformers/FilterByValueTransformer/ValueMatchers/RegexMatcherEditor.tsx
@@ -1,9 +1,12 @@
 import { useCallback, useState } from 'react';
 import * as React from 'react';
 
-import { ValueMatcherID, BasicValueMatcherOptions } from '@grafana/data';
+import { ValueMatcherID, BasicValueMatcherOptions, VariableOrigin } from '@grafana/data';
+import { config as cfg, getTemplateSrv } from '@grafana/runtime';
 import { Input } from '@grafana/ui';
 
+import { SuggestionsInput } from '../../suggestionsInput/SuggestionsInput';
+
 import { ValueMatcherEditorConfig, ValueMatcherUIProps, ValueMatcherUIRegistryItem } from './types';
 import { convertToType } from './utils';
 
@@ -14,6 +17,12 @@ export function regexMatcherEditor(
     const { validator, converter = convertToType } = config;
     const { value } = options;
     const [isInvalid, setInvalid] = useState(!validator(value));
+
+    const templateSrv = getTemplateSrv();
+    const variables = templateSrv.getVariables().map((v) => {
+      return { value: v.name, label: v.label || v.name, origin: VariableOrigin.Template };
+    });
+
     const onChangeValue = useCallback(
       (event: React.FormEvent<HTMLInputElement>) => {
         setInvalid(!validator(event.currentTarget.value));
@@ -21,6 +30,17 @@ export function regexMatcherEditor(
       [setInvalid, validator]
     );
 
+    const onChangeVariableValue = useCallback(
+      (value: string) => {
+        setInvalid(!validator(value));
+        onChange({
+          ...options,
+          value,
+        });
+      },
+      [setInvalid, validator, onChange, options]
+    );
+
     const onChangeOptions = useCallback(
       (event: React.FocusEvent<HTMLInputElement>) => {
         if (isInvalid) {
@@ -37,6 +57,18 @@ export function regexMatcherEditor(
       [options, onChange, isInvalid, field, converter]
     );
 
+    if (cfg.featureToggles.transformationsVariableSupport) {
+      return (
+        <SuggestionsInput
+          invalid={isInvalid}
+          value={value}
+          onChange={onChangeVariableValue}
+          placeholder="Value or variable"
+          suggestions={variables}
+        />
+      );
+    }
+
     return (
       <Input
         className="flex-grow-1"