Field overrides: Overrides UI improvements (#27073)

* Add filter name by regex matcher for overrides

* Update docs

* Introduce UI improvements to overrides list

* Update public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

* Review improvements

* Fix merge

* Remove ellipsis

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

docs/sources/panels/field-configuration-options.md

@@ -99,7 +99,6 @@ Allows you to type in a regular expression against which fields to be overridden
 
 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

@@ -22,4 +22,5 @@ export const fieldNameByRegexMatcherItem: FieldMatcherUIRegistryItem<string> = {
   matcher: fieldMatchers.get(FieldMatcherID.byRegexp),
   name: 'Filter by field using regex',
   description: 'Set properties for fields with names matching provided regex',
+  optionsToLabel: options => options,
 };

packages/grafana-ui/src/components/MatchersUI/FieldNameMatcherEditor.tsx

@@ -28,6 +28,7 @@ export const fieldNameMatcherItem: FieldMatcherUIRegistryItem<string> = {
   matcher: fieldMatchers.get(FieldMatcherID.byName),
   name: 'Filter by field',
   description: 'Set properties for fields matching the name',
+  optionsToLabel: options => options,
 };
 
 const useFieldDisplayNames = (data: DataFrame[]): Set<string> => {

packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx

@@ -81,4 +81,5 @@ export const fieldTypeMatcherItem: FieldMatcherUIRegistryItem<string> = {
   matcher: fieldMatchers.get(FieldMatcherID.byType),
   name: 'Filter by type',
   description: 'Set properties for fields matching a type',
+  optionsToLabel: options => options,
 };

packages/grafana-ui/src/components/MatchersUI/fieldMatchersUI.ts

 import { Registry } from '@grafana/data';
-import { fieldNameMatcherItem } from './FieldNameMatcherEditor';
 import { FieldMatcherUIRegistryItem } from './types';
+import { fieldNameMatcherItem } from './FieldNameMatcherEditor';
 import { fieldNameByRegexMatcherItem } from './FieldNameByRegexMatcherEditor';
 import { fieldTypeMatcherItem } from './FieldTypeMatcherEditor';
 

packages/grafana-ui/src/components/MatchersUI/types.ts

@@ -4,6 +4,8 @@ import { DataFrame, RegistryItem, FieldMatcherInfo } from '@grafana/data';
 export interface FieldMatcherUIRegistryItem<TOptions> extends RegistryItem {
   component: React.ComponentType<MatcherUIProps<TOptions>>;
   matcher: FieldMatcherInfo<TOptions>;
+  /* Maps matcher options to human-readable label */
+  optionsToLabel: (options: TOptions) => string;
 }
 
 export interface MatcherUIProps<T> {

public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx

@@ -76,7 +76,7 @@ export const OverrideFieldConfigEditor: React.FC<Props> = props => {
           // TODO:  apply matcher to retrieve fields
           return (
             <OverrideEditor
-              name={`Override ${i + 1}`}
+              name={`${fieldMatchersUI.get(o.matcher.id).name}`}
               key={`${o.matcher.id}/${i}`}
               data={data}
               override={o}

public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx

@@ -108,7 +108,7 @@ const CollapsibleSection: FC<Omit<OptionsGroupProps, 'persistMe'>> = ({
         <div className={cx(styles.toggle, 'editor-options-group-toggle')}>
           <Icon name={isExpanded ? 'angle-down' : 'angle-right'} />
         </div>
-        <div style={{ width: '100%' }}>{renderTitle ? renderTitle(isExpanded) : title}</div>
+        <div className={styles.title}>{renderTitle ? renderTitle(isExpanded) : title}</div>
       </div>
       {isExpanded && <div className={styles.body}>{_.isFunction(children) ? children(toggleExpand) : children}</div>}
     </div>
@@ -130,9 +130,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isExpanded: boolean, isNes
     ),
     toggle: css`
       color: ${theme.colors.textWeak};
-      font-size: ${theme.typography.size.lg};
       margin-right: ${theme.spacing.sm};
     `,
+    title: css`
+      flex-grow: 1;
+      overflow: hidden;
+    `,
     header: cx(
       css`
         display: flex;

public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx

@@ -110,6 +110,8 @@ export const OverrideEditor: React.FC<OverrideEditorProps> = ({
   });
 
   const renderOverrideTitle = (isExpanded: boolean) => {
+    const overriddenProperites = override.properties.map(p => registry.get(p.id).name).join(', ');
+    const matcherOptions = matcherUi.optionsToLabel(override.matcher.options);
     return (
       <div>
         <HorizontalGroup justify="space-between">
@@ -118,8 +120,13 @@ export const OverrideEditor: React.FC<OverrideEditorProps> = ({
         </HorizontalGroup>
         {!isExpanded && (
           <div className={styles.overrideDetails}>
-            Matcher <Icon name="angle-right" /> {matcherUi.name} <br />
-            {override.properties.length === 0 ? 'No' : override.properties.length} properties overriden
+            <div className={styles.options} title={matcherOptions}>
+              Options <Icon name="angle-right" /> {matcherOptions}
+            </div>
+            <div className={styles.options} title={overriddenProperites}>
+              Properties overridden <Icon name="angle-right" />
+              {overriddenProperites}
+            </div>
           </div>
         )}
       </div>
@@ -137,7 +144,7 @@ export const OverrideEditor: React.FC<OverrideEditorProps> = ({
         />
       </Field>
 
-      <div>
+      <>
         {override.properties.map((p, j) => {
           const item = registry.getIfExists(p.id);
 
@@ -176,7 +183,7 @@ export const OverrideEditor: React.FC<OverrideEditorProps> = ({
             />
           </div>
         )}
-      </div>
+      </>
     </OptionsGroup>
   );
 };
@@ -194,5 +201,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       color: ${theme.colors.textWeak};
       font-weight: ${theme.typography.weight.regular};
     `,
+    options: css`
+      overflow: hidden;
+      padding-right: ${theme.spacing.xl};
+    `,
   };
 });