IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Field overrides: Overrides UI improvements (#27073)

Browse Source 
* 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>
This commit is contained in:
Dominik Prokop 2020-08-24 12:07:44 +02:00 committed by GitHub
parent 954a2811b3
commit f7950491a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/sources/panels/field-configuration-options.md
View File

@ -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.

1
packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx
View File

@ -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,
};

1
packages/grafana-ui/src/components/MatchersUI/FieldNameMatcherEditor.tsx
View File

@ -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> => {

1
packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx
View File

@ -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,
};

2
packages/grafana-ui/src/components/MatchersUI/fieldMatchersUI.ts
View File

@ -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';

2
packages/grafana-ui/src/components/MatchersUI/types.ts
View File

@ -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> {

2
public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx
View File

@ -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}

7
public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx
View File

@ -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;

19
public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx
View File

@ -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};
`,
};
});