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>

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.
+1. Select a [filter option](#filter-options) 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. 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.

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',
+};

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];
 });