From ed1b929fe5662d7ce81d49fb931eb49e161c796c Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Thu, 20 Aug 2020 08:54:49 +0200
Subject: [PATCH] Field overrides: Filter by field name using regex (#27070)

* Add filter name by regex matcher for overrides

* Update docs

* rever schema change

* add docs for by type

* add docs for by type

* add docs for by type

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
---
 .../panels/field-configuration-options.md     | 22 +++++++++++++---
 .../FieldNameByRegexMatcherEditor.tsx         | 25 +++++++++++++++++++
 .../components/MatchersUI/fieldMatchersUI.ts  |  3 ++-
 3 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx

diff --git a/docs/sources/panels/field-configuration-options.md b/docs/sources/panels/field-configuration-options.md
index 026ae3b3202..08e778a25f3 100644
--- a/docs/sources/panels/field-configuration-options.md
+++ b/docs/sources/panels/field-configuration-options.md
@@ -76,16 +76,30 @@ Field overrides allow you to change the settings for one field (column in tables
 1. Navigate to the panel you want to edit, click the panel title, and then click **Edit**.
 1. Click the **Overrides** tab.
 1. Click **Add override**.
-1. Select a filter option to choose which fields the override applies to.
-
-   **Note:** Currently you can only match by name, so after you choose the filter, select which field it applies to from the dropdown list.
-
+1. Select a [filter option](#filter-options) to choose which fields the override applies to.
 1. Click **Add override property**.
 1. Select the [field option](#field-options) you want to apply.
 1. Enter options by adding values in the fields. To return options to default values, delete the white text in the fields.
 1. Continue to add overrides to this field by clicking **Add override property**, or you can click **Add override** and select a different field to add overrides to.
 1. When finished, click **Save** to save all panel edits to the dashboard.
 
+## Filter options
+
+This section explains all available filter options for field overrides. They are listed in alphabetical order.
+
+### Filter field by name
+
+Allows you to select a field from the list of all available fields that the override will be applied to.
+
+### Filter field by name using regex
+
+Allows you to type in a regular expression against which fields to be overridden will be matched.
+
+### Filter field by type
+
+Allows you to select fields by their type (string, numeric, etc).
+
+
 ## Field options
 
 This section explains all available field options. They are listed in alphabetical order.
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx
new file mode 100644
index 00000000000..c4749e3877c
--- /dev/null
+++ b/packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx
@@ -0,0 +1,25 @@
+import React, { memo, useCallback } from 'react';
+import { MatcherUIProps, FieldMatcherUIRegistryItem } from './types';
+import { FieldMatcherID, fieldMatchers } from '@grafana/data';
+import { Input } from '../Input/Input';
+
+export const FieldNameByRegexMatcherEditor = memo<MatcherUIProps<string>>(props => {
+  const { options } = props;
+
+  const onBlur = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      return props.onChange(e.target.value);
+    },
+    [props.onChange]
+  );
+
+  return <Input placeholder="Enter regular expression" defaultValue={options} onBlur={onBlur} />;
+});
+
+export const fieldNameByRegexMatcherItem: FieldMatcherUIRegistryItem<string> = {
+  id: FieldMatcherID.byRegexp,
+  component: FieldNameByRegexMatcherEditor,
+  matcher: fieldMatchers.get(FieldMatcherID.byRegexp),
+  name: 'Filter by field using regex',
+  description: 'Set properties for fields with names matching provided regex',
+};
diff --git a/packages/grafana-ui/src/components/MatchersUI/fieldMatchersUI.ts b/packages/grafana-ui/src/components/MatchersUI/fieldMatchersUI.ts
index 36dca81f38e..0c6d55907f6 100644
--- a/packages/grafana-ui/src/components/MatchersUI/fieldMatchersUI.ts
+++ b/packages/grafana-ui/src/components/MatchersUI/fieldMatchersUI.ts
@@ -1,8 +1,9 @@
 import { Registry } from '@grafana/data';
 import { fieldNameMatcherItem } from './FieldNameMatcherEditor';
 import { FieldMatcherUIRegistryItem } from './types';
+import { fieldNameByRegexMatcherItem } from './FieldNameByRegexMatcherEditor';
 import { fieldTypeMatcherItem } from './FieldTypeMatcherEditor';
 
 export const fieldMatchersUI = new Registry<FieldMatcherUIRegistryItem<any>>(() => {
-  return [fieldNameMatcherItem, fieldTypeMatcherItem];
+  return [fieldNameMatcherItem, fieldNameByRegexMatcherItem, fieldTypeMatcherItem];
 });