diff --git a/docs/sources/panels/field-configuration-options.md b/docs/sources/panels/field-configuration-options.md
index 08e778a25f3..89ef84dbd07 100644
--- a/docs/sources/panels/field-configuration-options.md
+++ b/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.
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx
index c4749e3877c..809fa09de8c 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx
+++ b/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,
};
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldNameMatcherEditor.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldNameMatcherEditor.tsx
index b8904629d16..99d5921241c 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldNameMatcherEditor.tsx
+++ b/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> => {
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx
index a424dae7b01..4c4534e0e51 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx
+++ b/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,
};
diff --git a/packages/grafana-ui/src/components/MatchersUI/fieldMatchersUI.ts b/packages/grafana-ui/src/components/MatchersUI/fieldMatchersUI.ts
index 0c6d55907f6..b50124ac40e 100644
--- a/packages/grafana-ui/src/components/MatchersUI/fieldMatchersUI.ts
+++ b/packages/grafana-ui/src/components/MatchersUI/fieldMatchersUI.ts
@@ -1,6 +1,6 @@
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';
diff --git a/packages/grafana-ui/src/components/MatchersUI/types.ts b/packages/grafana-ui/src/components/MatchersUI/types.ts
index 22b4d691f33..cd8e57f37bb 100644
--- a/packages/grafana-ui/src/components/MatchersUI/types.ts
+++ b/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> {
diff --git a/public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx b/public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx
index 10f60c9b73e..80341118fc0 100644
--- a/public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx
+++ b/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}
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx
index 16104ea2817..fdec2493ff0 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx
+++ b/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;
diff --git a/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx b/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx
index 1af1016c033..bfe0f670079 100644
--- a/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx
+++ b/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};
+ `,
};
});