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

FieldEditor: extendable FieldConfig UI (#21882)

Browse Source 
* initial POC

* fix import

* field config editor in the sidebar

* field config editor in the sidebar

* field config editor in the sidebar

* sidebar

* include threshold in sidebar

* include threshold in sidebar

* include threshold in sidebar

* init to empty threshold

* merge

* Make sure editor is fully rendered when page is refreshed

* use scrollbars

* add matcher UI folder

* remove

* Field options basic editors

* Removed deebugger

* Make number field editor controlled

* Update public/app/features/dashboard/state/PanelModel.ts

* Update public/app/plugins/panel/gauge/GaugePanel.tsx

* Ready for production

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
This commit is contained in:
Ryan McKinley
2020-02-08 18:29:09 +01:00
committed by GitHub
parent 20c4d00df8
commit da395729c3
20 changed files with 656 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/grafana-data/src/types/fieldOverrides.ts
View File

@@ -1,4 +1,8 @@
import { MatcherConfig, FieldConfig } from '../types';
import { MatcherConfig, FieldConfig, Field } from '../types';
import { Registry, RegistryItem } from '../utils';
import { ComponentType } from 'react';
import { InterpolateFunction } from './panel';
import { DataFrame } from 'apache-arrow';
export interface DynamicConfigValue {
path: string;
@@ -17,3 +21,38 @@ export interface FieldConfigSource {
// Rules to override individual values
overrides: ConfigOverrideRule[];
}
export interface FieldConfigEditorProps<TValue, TSettings> {
item: FieldPropertyEditorItem<TValue, TSettings>; // The property info
value: TValue;
onChange: (value: TValue) => void;
}
export interface FieldOverrideContext {
field: Field;
data: DataFrame;
replaceVariables: InterpolateFunction;
}
export interface FieldOverrideEditorProps<TValue, TSettings> {
item: FieldPropertyEditorItem<TValue, TSettings>;
value: any;
context: FieldOverrideContext;
onChange: (value: any) => void;
}
export interface FieldPropertyEditorItem<TValue = any, TSettings = any> extends RegistryItem {
// An editor the creates the well typed value
editor: ComponentType<FieldConfigEditorProps<TValue, TSettings>>;
// An editor that can be filled in with context info (template variables etc)
override: ComponentType<FieldOverrideEditorProps<TValue, TSettings>>;
// Convert the override value to a well typed value
process: (value: any, context: FieldOverrideContext, settings: TSettings) => TValue;
// Configuration options for the particular property
settings: TSettings;
}
export type FieldConfigEditorRegistry = Registry<FieldPropertyEditorItem>;

7
packages/grafana-data/src/types/panel.ts
View File

@@ -5,6 +5,7 @@ import { ScopedVars } from './ScopedVars';
import { LoadingState } from './data';
import { DataFrame } from './dataFrame';
import { AbsoluteTimeRange, TimeRange, TimeZone } from './time';
import { FieldConfigEditorRegistry } from './fieldOverrides';
export type InterpolateFunction = (value: string, scopedVars?: ScopedVars, format?: string | Function) => string;
@@ -72,6 +73,7 @@ export type PanelTypeChangedHandler<TOptions = any> = (
export class PanelPlugin<TOptions = any> extends GrafanaPlugin<PanelPluginMeta> {
panel: ComponentType<PanelProps<TOptions>>;
editor?: ComponentClass<PanelEditorProps<TOptions>>;
customFieldConfigs?: FieldConfigEditorRegistry;
defaults?: TOptions;
onPanelMigration?: PanelMigrationHandler<TOptions>;
onPanelTypeChanged?: PanelTypeChangedHandler<TOptions>;
@@ -121,6 +123,11 @@ export class PanelPlugin<TOptions = any> extends GrafanaPlugin<PanelPluginMeta>
this.onPanelTypeChanged = handler;
return this;
}
setCustomFieldConfigs(registry: FieldConfigEditorRegistry) {
this.customFieldConfigs = registry;
return this;
}
}
export interface PanelMenuItem {