diff --git a/packages/grafana-data/src/field/overrides/processors.ts b/packages/grafana-data/src/field/overrides/processors.ts index 2d79553a05d..17619cc19d5 100644 --- a/packages/grafana-data/src/field/overrides/processors.ts +++ b/packages/grafana-data/src/field/overrides/processors.ts @@ -60,6 +60,8 @@ export interface StringFieldConfigSettings { placeholder?: string; maxLength?: number; expandTemplateVars?: boolean; + useTextarea?: boolean; + rows?: number; } export const stringOverrideProcessor = ( diff --git a/packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts b/packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts index 55be700bcd2..0de51b87647 100644 --- a/packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts +++ b/packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts @@ -10,6 +10,7 @@ export interface OptionsEditorItem ex editor: ComponentType; settings?: TSettings; defaultValue?: TValue; + showIf?: (currentConfig: TOptions) => boolean; } /** diff --git a/packages/grafana-data/src/types/fieldOverrides.ts b/packages/grafana-data/src/types/fieldOverrides.ts index b8e335f02b8..1795775a556 100644 --- a/packages/grafana-data/src/types/fieldOverrides.ts +++ b/packages/grafana-data/src/types/fieldOverrides.ts @@ -60,6 +60,7 @@ export interface FieldConfigEditorConfig boolean; defaultValue?: TValue; + showIf?: (currentConfig: TOptions) => boolean; } export interface FieldConfigPropertyItem diff --git a/packages/grafana-data/src/types/panel.ts b/packages/grafana-data/src/types/panel.ts index 0051e4c8a2b..527552e0c7b 100644 --- a/packages/grafana-data/src/types/panel.ts +++ b/packages/grafana-data/src/types/panel.ts @@ -124,6 +124,7 @@ export interface PanelOptionsEditorConfig boolean; } export interface PanelMenuItem { diff --git a/packages/grafana-ui/src/components/OptionsUI/string.tsx b/packages/grafana-ui/src/components/OptionsUI/string.tsx index 6c5710c33a9..01e210970c1 100644 --- a/packages/grafana-ui/src/components/OptionsUI/string.tsx +++ b/packages/grafana-ui/src/components/OptionsUI/string.tsx @@ -1,17 +1,20 @@ import React from 'react'; import { FieldConfigEditorProps, StringFieldConfigSettings } from '@grafana/data'; import { Input } from '../Input/Input'; +import { TextArea } from '../Forms/TextArea/TextArea'; export const StringValueEditor: React.FC> = ({ value, onChange, item, }) => { + const Component = item.settings?.useTextarea ? TextArea : Input; return ( - onChange(e.currentTarget.value)} + rows={item.settings?.useTextarea && item.settings.rows} + onChange={(e: React.FormEvent) => onChange(e.currentTarget.value)} /> ); }; diff --git a/public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx b/public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx index 6247c26e44f..f4d88ab227b 100644 --- a/public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx @@ -143,6 +143,9 @@ export const DefaultFieldConfigEditor: React.FC = ({ data, onChange, conf const renderEditor = useCallback( (item: FieldConfigPropertyItem) => { + if (item.isCustom && item.showIf && !item.showIf(config.defaults.custom)) { + return null; + } const defaults = config.defaults; const value = item.isCustom ? defaults.custom diff --git a/public/app/features/dashboard/components/PanelEditor/PanelOptionsEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelOptionsEditor.tsx index 8344ce599f3..faae4176e81 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelOptionsEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelOptionsEditor.tsx @@ -20,6 +20,10 @@ export const PanelOptionsEditor: React.FC> = ({ plu return ( <> {optionEditors.list().map(e => { + if (e.showIf && !e.showIf(options)) { + return null; + } + return ( onOptionChange(e.path, value)} item={e} /> diff --git a/public/app/features/dashboard/state/PanelModel.test.ts b/public/app/features/dashboard/state/PanelModel.test.ts index 258c30556b0..bd0c872e6b6 100644 --- a/public/app/features/dashboard/state/PanelModel.test.ts +++ b/public/app/features/dashboard/state/PanelModel.test.ts @@ -4,6 +4,7 @@ import { FieldConfigProperty, identityOverrideProcessor, PanelProps, + standardEditorsRegistry, standardFieldConfigEditorRegistry, } from '@grafana/data'; import { ComponentClass } from 'react'; @@ -37,33 +38,30 @@ export const mockStandardProperties = () => { shouldApply: () => true, }; - return [unit, decimals]; + const boolean = { + id: 'boolean', + path: 'boolean', + name: 'Boolean', + description: '', + // @ts-ignore + editor: () => null, + // @ts-ignore + override: () => null, + process: identityOverrideProcessor, + shouldApply: () => true, + }; + + return [unit, decimals, boolean]; }; + standardFieldConfigEditorRegistry.setInit(() => mockStandardProperties()); +standardEditorsRegistry.setInit(() => mockStandardProperties()); describe('PanelModel', () => { describe('when creating new panel model', () => { let model: any; let modelJson: any; let persistedOptionsMock; - const defaultOptionsMock = { - fieldOptions: { - thresholds: [ - { - color: '#F2495C', - index: 1, - value: 50, - }, - { - color: '#73BF69', - index: 0, - value: null, - }, - ], - }, - arrayWith2Values: [{ value: 'name' }, { value: 'name2' }], - showThresholds: true, - }; beforeEach(() => { persistedOptionsMock = { @@ -114,11 +112,16 @@ describe('PanelModel', () => { (null as unknown) as ComponentClass, // react TablePanelCtrl // angular ); - panelPlugin.setDefaults(defaultOptionsMock); - /* panelPlugin.useStandardFieldConfig([FieldConfigOptionId.Unit, FieldConfigOptionId.Decimals], { - [FieldConfigOptionId.Unit]: 'flop', - [FieldConfigOptionId.Decimals]: 2, - }); */ + + panelPlugin.setPanelOptions(builder => { + builder.addBooleanSwitch({ + name: 'Show thresholds', + path: 'showThresholds', + defaultValue: true, + description: '', + }); + }); + panelPlugin.useFieldConfig({ standardOptions: [FieldConfigProperty.Unit, FieldConfigProperty.Decimals], standardOptionsDefaults: { @@ -200,13 +203,17 @@ describe('PanelModel', () => { }); describe('when changing panel type', () => { - const newPanelPluginDefaults = { - showThresholdLabels: false, - }; - beforeEach(() => { const newPlugin = getPanelPlugin({ id: 'graph' }); - newPlugin.setDefaults(newPanelPluginDefaults); + newPlugin.setPanelOptions(builder => { + builder.addBooleanSwitch({ + name: 'Show thresholds labels', + path: 'showThresholdLabels', + defaultValue: false, + description: '', + }); + }); + model.changePlugin(newPlugin); model.alert = { id: 2 }; }); diff --git a/public/app/plugins/panel/annolist/AnnoListEditor.tsx b/public/app/plugins/panel/annolist/AnnoListEditor.tsx deleted file mode 100644 index b6ea26425b3..00000000000 --- a/public/app/plugins/panel/annolist/AnnoListEditor.tsx +++ /dev/null @@ -1,195 +0,0 @@ -// Libraries -import React, { PureComponent, ChangeEvent } from 'react'; - -// Components -import { PanelOptionsGroup, PanelOptionsGrid, FormField, FormLabel, LegacyForms } from '@grafana/ui'; -const { Switch } = LegacyForms; - -import { PanelEditorProps, toIntegerOrUndefined, toNumberString } from '@grafana/data'; - -// Types -import { AnnoOptions } from './types'; -import { TagBadge } from 'app/core/components/TagFilter/TagBadge'; - -interface State { - tag: string; -} - -export class AnnoListEditor extends PureComponent, State> { - constructor(props: PanelEditorProps) { - super(props); - - this.state = { - tag: '', - }; - } - - // Display - //----------- - - onToggleShowUser = () => - this.props.onOptionsChange({ ...this.props.options, showUser: !this.props.options.showUser }); - - onToggleShowTime = () => - this.props.onOptionsChange({ ...this.props.options, showTime: !this.props.options.showTime }); - - onToggleShowTags = () => - this.props.onOptionsChange({ ...this.props.options, showTags: !this.props.options.showTags }); - - // Navigate - //----------- - - onNavigateBeforeChange = (event: ChangeEvent) => { - this.props.onOptionsChange({ ...this.props.options, navigateBefore: event.target.value }); - }; - - onNavigateAfterChange = (event: ChangeEvent) => { - this.props.onOptionsChange({ ...this.props.options, navigateAfter: event.target.value }); - }; - - onToggleNavigateToPanel = () => - this.props.onOptionsChange({ ...this.props.options, navigateToPanel: !this.props.options.navigateToPanel }); - - // Search - //----------- - onLimitChange = (event: ChangeEvent) => { - const v = toIntegerOrUndefined(event.target.value); - this.props.onOptionsChange({ ...this.props.options, limit: v }); - }; - - onToggleOnlyFromThisDashboard = () => - this.props.onOptionsChange({ - ...this.props.options, - onlyFromThisDashboard: !this.props.options.onlyFromThisDashboard, - }); - - onToggleOnlyInTimeRange = () => - this.props.onOptionsChange({ ...this.props.options, onlyInTimeRange: !this.props.options.onlyInTimeRange }); - - // Tags - //----------- - - onTagTextChange = (event: ChangeEvent) => { - this.setState({ tag: event.target.value }); - }; - - onTagClick = (e: React.SyntheticEvent, tag: string) => { - e.stopPropagation(); - - const tags = this.props.options.tags.filter(item => item !== tag); - this.props.onOptionsChange({ - ...this.props.options, - tags, - }); - }; - - renderTags = (tags: string[]): JSX.Element => { - if (!tags || !tags.length) { - return null; - } - return ( - <> - {tags.map(tag => { - return ( - this.onTagClick(e, tag)} className="pointer"> - - - ); - })} - - ); - }; - - render() { - const { options } = this.props; - const labelWidth = 8; - - return ( - - - - - - - - - - - - - - -
- Tags - {this.renderTags(options.tags)} - { - if (this.state.tag && ev.key === 'Enter') { - const tags = [...options.tags, this.state.tag]; - this.props.onOptionsChange({ - ...this.props.options, - tags, - }); - this.setState({ tag: '' }); - ev.preventDefault(); - } - }} - /> -
- - - - - ); - } -} diff --git a/public/app/plugins/panel/annolist/module.ts b/public/app/plugins/panel/annolist/module.ts deleted file mode 100644 index 6bee00cea8e..00000000000 --- a/public/app/plugins/panel/annolist/module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { AnnoListPanel } from './AnnoListPanel'; -import { AnnoOptions, defaults } from './types'; -import { AnnoListEditor } from './AnnoListEditor'; -import { PanelModel, PanelPlugin } from '@grafana/data'; - -export const plugin = new PanelPlugin(AnnoListPanel) - .setDefaults(defaults) - .setEditor(AnnoListEditor) - - // TODO, we should support this directly in the plugin infrastructure - .setPanelChangeHandler((panel: PanelModel, prevPluginId: string, prevOptions: any) => { - if (prevPluginId === 'ryantxu-annolist-panel') { - return prevOptions as AnnoOptions; - } - return panel.options; - }); diff --git a/public/app/plugins/panel/annolist/module.tsx b/public/app/plugins/panel/annolist/module.tsx new file mode 100644 index 00000000000..ed6fcbb5f73 --- /dev/null +++ b/public/app/plugins/panel/annolist/module.tsx @@ -0,0 +1,80 @@ +import React from 'react'; +import { PanelModel, PanelPlugin } from '@grafana/data'; +import { TagsInput } from '@grafana/ui'; +import { AnnoListPanel } from './AnnoListPanel'; +import { AnnoOptions } from './types'; + +export const plugin = new PanelPlugin(AnnoListPanel) + .setPanelOptions(builder => { + builder + .addBooleanSwitch({ + path: 'showUser', + name: 'Show user', + description: '', + defaultValue: true, + }) + .addBooleanSwitch({ + path: 'showTime', + name: 'Show time', + description: '', + defaultValue: true, + }) + .addBooleanSwitch({ + path: 'showTags', + name: 'Show tags', + description: '', + defaultValue: true, + }) + .addTextInput({ + path: 'navigateBefore', + name: 'Before', + defaultValue: '10m', + description: '', + }) + .addTextInput({ + path: 'navigateAfter', + name: 'After', + defaultValue: '10m', + description: '', + }) + .addBooleanSwitch({ + path: 'navigateToPanel', + name: 'To panel', + description: '', + defaultValue: true, + }) + .addBooleanSwitch({ + path: 'onlyFromThisDashboard', + name: 'Only this dashboard', + description: '', + defaultValue: false, + }) + .addBooleanSwitch({ + path: 'onlyInTimeRange', + name: 'Within Time Range', + description: '', + defaultValue: false, + }) + .addCustomEditor({ + id: 'tags', + path: 'tags', + name: 'Tags', + description: '', + editor: props => { + return ; + }, + }) + .addNumberInput({ + path: 'limit', + name: 'Limit', + description: '', + defaultValue: 10, + }); + }) + // TODO, we should support this directly in the plugin infrastructure + .setPanelChangeHandler((panel: PanelModel, prevPluginId: string, prevOptions: any) => { + if (prevPluginId === 'ryantxu-annolist-panel') { + return prevOptions as AnnoOptions; + } + return panel.options; + }); diff --git a/public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx b/public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx deleted file mode 100644 index 841d4874a98..00000000000 --- a/public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx +++ /dev/null @@ -1,170 +0,0 @@ -// Libraries -import React, { PureComponent } from 'react'; - -import { - PanelOptionsGrid, - FieldDisplayEditor, - PanelOptionsGroup, - FormLabel, - LegacyForms, - FieldPropertiesEditor, - ThresholdsEditor, - LegacyValueMappingsEditor, - DataLinksEditor, -} from '@grafana/ui'; -const { Select, Switch } = LegacyForms; -import { - DataLink, - FieldConfig, - ReduceDataOptions, - PanelEditorProps, - ThresholdsConfig, - ValueMapping, -} from '@grafana/data'; -import { BarGaugeOptions, displayModes } from './types'; -import { orientationOptions } from '../gauge/types'; -import { - getCalculationValueDataLinksVariableSuggestions, - getDataLinksVariableSuggestions, -} from '../../../features/panel/panellinks/link_srv'; -import { NewPanelEditorContext } from '../../../features/dashboard/components/PanelEditor/PanelEditor'; - -export class BarGaugePanelEditor extends PureComponent> { - onDisplayOptionsChanged = (fieldOptions: ReduceDataOptions) => - this.props.onOptionsChange({ - ...this.props.options, - reduceOptions: fieldOptions, - }); - - onOrientationChange = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, orientation: value }); - onDisplayModeChange = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, displayMode: value }); - onToggleShowUnfilled = () => { - this.props.onOptionsChange({ ...this.props.options, showUnfilled: !this.props.options.showUnfilled }); - }; - - onThresholdsChanged = (thresholds: ThresholdsConfig) => { - const current = this.props.fieldConfig; - this.props.onFieldConfigChange({ - ...current, - defaults: { - ...current.defaults, - thresholds, - }, - }); - }; - - onValueMappingsChanged = (mappings: ValueMapping[]) => { - const current = this.props.fieldConfig; - this.props.onFieldConfigChange({ - ...current, - defaults: { - ...current.defaults, - mappings, - }, - }); - }; - - onDataLinksChanged = (links: DataLink[]) => { - const current = this.props.fieldConfig; - this.props.onFieldConfigChange({ - ...current, - defaults: { - ...current.defaults, - links, - }, - }); - }; - - onDefaultsChange = (field: FieldConfig, event?: React.SyntheticEvent, callback?: () => void) => { - this.props.onFieldConfigChange({ - ...this.props.fieldConfig, - defaults: field, - }); - }; - - render() { - const { options, fieldConfig } = this.props; - const { reduceOptions: fieldOptions } = options; - const { defaults } = fieldConfig; - - const labelWidth = 6; - const suggestions = fieldOptions.values - ? getDataLinksVariableSuggestions(this.props.data.series) - : getCalculationValueDataLinksVariableSuggestions(this.props.data.series); - - return ( - - {useNewEditor => { - if (useNewEditor) { - return null; - } - - return ( - <> - - - -
- Orientation - item.value === options.displayMode)} - /> -
- <> - {options.displayMode !== 'lcd' && ( - - )} - - - - - - - - - - - - - - - - ); - }} - - ); - } -} diff --git a/public/app/plugins/panel/bargauge/module.tsx b/public/app/plugins/panel/bargauge/module.tsx index 0bea792ad71..7e379109e04 100644 --- a/public/app/plugins/panel/bargauge/module.tsx +++ b/public/app/plugins/panel/bargauge/module.tsx @@ -1,35 +1,29 @@ import { sharedSingleStatPanelChangedHandler } from '@grafana/ui'; import { PanelPlugin } from '@grafana/data'; import { BarGaugePanel } from './BarGaugePanel'; -import { BarGaugeOptions, defaults } from './types'; +import { BarGaugeOptions, displayModes } from './types'; import { addStandardDataReduceOptions } from '../stat/types'; -import { BarGaugePanelEditor } from './BarGaugePanelEditor'; import { barGaugePanelMigrationHandler } from './BarGaugeMigrations'; export const plugin = new PanelPlugin(BarGaugePanel) - .setDefaults(defaults) - .setEditor(BarGaugePanelEditor) .useFieldConfig() .setPanelOptions(builder => { addStandardDataReduceOptions(builder); - builder .addRadio({ path: 'displayMode', name: 'Display mode', description: 'Controls the bar style', settings: { - options: [ - { value: 'basic', label: 'Basic' }, - { value: 'gradient', label: 'Gradient' }, - { value: 'lcd', label: 'Retro LCD' }, - ], + options: displayModes, }, + defaultValue: 'lcd', }) .addBooleanSwitch({ path: 'showUnfilled', name: 'Show unfilled area', description: 'When enabled renders the unfilled region as gray', + defaultValue: true, }); }) .setPanelChangeHandler(sharedSingleStatPanelChangedHandler) diff --git a/public/app/plugins/panel/bargauge/types.ts b/public/app/plugins/panel/bargauge/types.ts index 29adbd770ed..8acb786b088 100644 --- a/public/app/plugins/panel/bargauge/types.ts +++ b/public/app/plugins/panel/bargauge/types.ts @@ -1,6 +1,5 @@ import { SingleStatBaseOptions, BarGaugeDisplayMode } from '@grafana/ui'; -import { commonValueOptionDefaults } from '../stat/types'; -import { VizOrientation, SelectableValue } from '@grafana/data'; +import { SelectableValue } from '@grafana/data'; export interface BarGaugeOptions extends SingleStatBaseOptions { displayMode: BarGaugeDisplayMode; @@ -12,10 +11,3 @@ export const displayModes: Array> = [ { value: BarGaugeDisplayMode.Lcd, label: 'Retro LCD' }, { value: BarGaugeDisplayMode.Basic, label: 'Basic' }, ]; - -export const defaults: BarGaugeOptions = { - displayMode: BarGaugeDisplayMode.Lcd, - orientation: VizOrientation.Horizontal, - reduceOptions: commonValueOptionDefaults, - showUnfilled: true, -}; diff --git a/public/app/plugins/panel/gauge/GaugePanelEditor.tsx b/public/app/plugins/panel/gauge/GaugePanelEditor.tsx deleted file mode 100644 index 9ef96b68d93..00000000000 --- a/public/app/plugins/panel/gauge/GaugePanelEditor.tsx +++ /dev/null @@ -1,163 +0,0 @@ -// Libraries -import React, { PureComponent } from 'react'; -import { - PanelOptionsGrid, - FieldDisplayEditor, - LegacyForms, - PanelOptionsGroup, - FieldPropertiesEditor, - ThresholdsEditor, - LegacyValueMappingsEditor, - DataLinksEditor, -} from '@grafana/ui'; -const { Switch } = LegacyForms; -import { - PanelEditorProps, - ReduceDataOptions, - ThresholdsConfig, - DataLink, - FieldConfig, - ValueMapping, -} from '@grafana/data'; - -import { GaugeOptions } from './types'; -import { - getCalculationValueDataLinksVariableSuggestions, - getDataLinksVariableSuggestions, -} from '../../../features/panel/panellinks/link_srv'; -import { NewPanelEditorContext } from '../../../features/dashboard/components/PanelEditor/PanelEditor'; - -export class GaugePanelEditor extends PureComponent> { - labelWidth = 6; - - onToggleThresholdLabels = () => - this.props.onOptionsChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels }); - - onToggleThresholdMarkers = () => - this.props.onOptionsChange({ - ...this.props.options, - showThresholdMarkers: !this.props.options.showThresholdMarkers, - }); - - onDisplayOptionsChanged = ( - fieldOptions: ReduceDataOptions, - event?: React.SyntheticEvent, - callback?: () => void - ) => { - this.props.onOptionsChange( - { - ...this.props.options, - reduceOptions: fieldOptions, - }, - callback - ); - }; - - onThresholdsChanged = (thresholds: ThresholdsConfig) => { - const current = this.props.fieldConfig; - this.props.onFieldConfigChange({ - ...current, - defaults: { - ...current.defaults, - thresholds, - }, - }); - }; - - onValueMappingsChanged = (mappings: ValueMapping[]) => { - const current = this.props.fieldConfig; - this.props.onFieldConfigChange({ - ...current, - defaults: { - ...current.defaults, - mappings, - }, - }); - }; - - onDataLinksChanged = (links: DataLink[]) => { - const current = this.props.fieldConfig; - this.props.onFieldConfigChange({ - ...current, - defaults: { - ...current.defaults, - links, - }, - }); - }; - - onDefaultsChange = (field: FieldConfig) => { - this.props.onFieldConfigChange({ - ...this.props.fieldConfig, - defaults: field, - }); - }; - - render() { - const { options, fieldConfig } = this.props; - const { showThresholdLabels, showThresholdMarkers, reduceOptions: valueOptions } = options; - - const { defaults } = fieldConfig; - - const suggestions = valueOptions.values - ? getDataLinksVariableSuggestions(this.props.data.series) - : getCalculationValueDataLinksVariableSuggestions(this.props.data.series); - - return ( - - {useNewEditor => { - if (useNewEditor) { - return null; - } - - return ( - <> - - - - - - - - - - - - - - - - - - - - ); - }} - - ); - } -} diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx index e2292bdac4c..de193d1decb 100644 --- a/public/app/plugins/panel/gauge/module.tsx +++ b/public/app/plugins/panel/gauge/module.tsx @@ -1,13 +1,10 @@ import { PanelPlugin } from '@grafana/data'; -import { GaugePanelEditor } from './GaugePanelEditor'; import { GaugePanel } from './GaugePanel'; -import { GaugeOptions, defaults } from './types'; +import { GaugeOptions } from './types'; import { addStandardDataReduceOptions } from '../stat/types'; import { gaugePanelMigrationHandler, gaugePanelChangedHandler } from './GaugeMigrations'; export const plugin = new PanelPlugin(GaugePanel) - .setDefaults(defaults) - .setEditor(GaugePanelEditor) .useFieldConfig() .setPanelOptions(builder => { addStandardDataReduceOptions(builder); @@ -16,11 +13,13 @@ export const plugin = new PanelPlugin(GaugePanel) path: 'showThresholdLabels', name: 'Show threshold Labels', description: 'Render the threshold values around the gauge bar', + defaultValue: false, }) .addBooleanSwitch({ path: 'showThresholdMarkers', name: 'Show threshold markers', description: 'Renders the thresholds as an outer bar', + defaultValue: true, }); }) .setPanelChangeHandler(gaugePanelChangedHandler) diff --git a/public/app/plugins/panel/gauge/types.ts b/public/app/plugins/panel/gauge/types.ts index a2798dc29fc..ba03c033403 100644 --- a/public/app/plugins/panel/gauge/types.ts +++ b/public/app/plugins/panel/gauge/types.ts @@ -1,6 +1,5 @@ import { VizOrientation, SelectableValue } from '@grafana/data'; import { SingleStatBaseOptions } from '@grafana/ui/src/components/SingleStatShared/SingleStatBaseOptions'; -import { commonValueOptionDefaults } from '../stat/types'; export interface GaugeOptions extends SingleStatBaseOptions { showThresholdLabels: boolean; @@ -12,10 +11,3 @@ export const orientationOptions: Array> = [ { value: VizOrientation.Horizontal, label: 'Horizontal' }, { value: VizOrientation.Vertical, label: 'Vertical' }, ]; - -export const defaults: GaugeOptions = { - showThresholdMarkers: true, - showThresholdLabels: false, - reduceOptions: commonValueOptionDefaults, - orientation: VizOrientation.Auto, -}; diff --git a/public/app/plugins/panel/graph2/GraphLegendEditor.tsx b/public/app/plugins/panel/graph2/GraphLegendEditor.tsx deleted file mode 100644 index 284bb09529b..00000000000 --- a/public/app/plugins/panel/graph2/GraphLegendEditor.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import React from 'react'; -import { LegendOptions, PanelOptionsGroup, LegacyForms, StatsPicker } from '@grafana/ui'; -const { Input, Switch } = LegacyForms; - -export interface GraphLegendEditorLegendOptions extends LegendOptions { - stats?: string[]; - decimals?: number; - sortBy?: string; - sortDesc?: boolean; -} - -interface GraphLegendEditorProps { - options: GraphLegendEditorLegendOptions; - onChange: (options: GraphLegendEditorLegendOptions) => void; -} - -export const GraphLegendEditor: React.FunctionComponent = props => { - const { options, onChange } = props; - - const onStatsChanged = (stats: string[]) => { - onChange({ - ...options, - stats, - }); - }; - - const onOptionToggle = (option: keyof LegendOptions) => (event?: React.ChangeEvent) => { - const newOption: Partial = {}; - if (!event) { - return; - } - - if (option === 'placement') { - newOption[option] = event.target.checked ? 'right' : 'under'; - } else { - newOption[option] = event.target.checked; - } - - onChange({ - ...options, - ...newOption, - }); - }; - - const labelWidth = 8; - return ( - -
-

Options

- - - -
- -
-

Show

-
- -
- -
-
Decimals
- { - onChange({ - ...options, - decimals: parseInt(event.target.value, 10), - }); - }} - /> -
-
- -
-

Hidden series

- {/* */} - -
- - ); -}; diff --git a/public/app/plugins/panel/graph2/GraphPanelController.tsx b/public/app/plugins/panel/graph2/GraphPanelController.tsx index 74d6f6a0c21..72c70029450 100644 --- a/public/app/plugins/panel/graph2/GraphPanelController.tsx +++ b/public/app/plugins/panel/graph2/GraphPanelController.tsx @@ -42,7 +42,7 @@ export class GraphPanelController extends React.Component> { - onGraphOptionsChange = (options: Partial) => { - this.props.onOptionsChange({ - ...this.props.options, - graph: { - ...this.props.options.graph, - ...options, - }, - }); - }; - - onLegendOptionsChange = (options: LegendOptions) => { - this.props.onOptionsChange({ ...this.props.options, legend: options }); - }; - - onTooltipOptionsChange = (options: GraphTooltipOptions) => { - this.props.onOptionsChange({ ...this.props.options, tooltipOptions: options }); - }; - - onToggleLines = () => { - this.onGraphOptionsChange({ showLines: !this.props.options.graph.showLines }); - }; - - onToggleBars = () => { - this.onGraphOptionsChange({ showBars: !this.props.options.graph.showBars }); - }; - - onTogglePoints = () => { - this.onGraphOptionsChange({ showPoints: !this.props.options.graph.showPoints }); - }; - - onDefaultsChange = (field: FieldConfig, event?: React.SyntheticEvent, callback?: () => void) => { - this.props.onFieldConfigChange({ - ...this.props.fieldConfig, - defaults: field, - }); - }; - - render() { - const { - graph: { showBars, showPoints, showLines }, - tooltipOptions: { mode }, - } = this.props.options; - - return ( - - {useNewEditor => { - return ( - <> -
-
Draw Modes
- - - -
- - <> - {!useNewEditor && ( - - - - )} - - - - - - - - ); - } -} diff --git a/public/app/plugins/panel/logs/module.tsx b/public/app/plugins/panel/logs/module.tsx index 0cffab9733c..44e7af53768 100644 --- a/public/app/plugins/panel/logs/module.tsx +++ b/public/app/plugins/panel/logs/module.tsx @@ -1,6 +1,38 @@ import { PanelPlugin } from '@grafana/data'; -import { Options, defaults } from './types'; +import { Options } from './types'; import { LogsPanel } from './LogsPanel'; -import { LogsPanelEditor } from './LogsPanelEditor'; +import { SortOrder } from '../../../core/utils/explore'; -export const plugin = new PanelPlugin(LogsPanel).setDefaults(defaults).setEditor(LogsPanelEditor); +export const plugin = new PanelPlugin(LogsPanel).setPanelOptions(builder => { + builder + .addBooleanSwitch({ + path: 'showTime', + name: 'Time', + description: '', + defaultValue: false, + }) + .addBooleanSwitch({ + path: 'showLabels', + name: 'Unique labels', + description: '', + defaultValue: false, + }) + .addBooleanSwitch({ + path: 'wrapLogMessage', + name: 'Wrap lines', + description: '', + defaultValue: false, + }) + .addRadio({ + path: 'sortOrder', + name: 'Order', + description: '', + settings: { + options: [ + { value: SortOrder.Descending, label: 'Descending' }, + { value: SortOrder.Ascending, label: 'Ascending' }, + ], + }, + defaultValue: SortOrder.Descending, + }); +}); diff --git a/public/app/plugins/panel/logs/types.ts b/public/app/plugins/panel/logs/types.ts index 63410c4db1f..7082b382b00 100644 --- a/public/app/plugins/panel/logs/types.ts +++ b/public/app/plugins/panel/logs/types.ts @@ -6,10 +6,3 @@ export interface Options { wrapLogMessage: boolean; sortOrder: SortOrder; } - -export const defaults: Options = { - showLabels: false, - showTime: true, - wrapLogMessage: true, - sortOrder: SortOrder.Descending, -}; diff --git a/public/app/plugins/panel/news/NewsPanel.tsx b/public/app/plugins/panel/news/NewsPanel.tsx index 4184a5c914b..4b75b9de6f4 100755 --- a/public/app/plugins/panel/news/NewsPanel.tsx +++ b/public/app/plugins/panel/news/NewsPanel.tsx @@ -12,7 +12,8 @@ import { loadRSSFeed } from './rss'; // Types import { PanelProps, DataFrameView, dateTime } from '@grafana/data'; -import { NewsOptions, NewsItem, DEFAULT_FEED_URL } from './types'; +import { NewsOptions, NewsItem } from './types'; +import { DEFAULT_FEED_URL, PROXY_PREFIX } from './constants'; interface Props extends PanelProps {} @@ -41,7 +42,11 @@ export class NewsPanel extends PureComponent { async loadFeed() { const { options } = this.props; try { - const url = options.feedUrl ?? DEFAULT_FEED_URL; + const url = options.feedUrl + ? options.useProxy + ? `${PROXY_PREFIX}${options.feedUrl}` + : options.feedUrl + : DEFAULT_FEED_URL; const res = await loadRSSFeed(url); const frame = feedToDataFrame(res); this.setState({ diff --git a/public/app/plugins/panel/news/NewsPanelEditor.tsx b/public/app/plugins/panel/news/NewsPanelEditor.tsx deleted file mode 100755 index 9b7c1d0bd9b..00000000000 --- a/public/app/plugins/panel/news/NewsPanelEditor.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React, { PureComponent } from 'react'; -import { FormField, PanelOptionsGroup, Button } from '@grafana/ui'; -import { PanelEditorProps } from '@grafana/data'; -import { NewsOptions, DEFAULT_FEED_URL } from './types'; - -const PROXY_PREFIX = 'https://cors-anywhere.herokuapp.com/'; - -interface State { - feedUrl?: string; -} - -export class NewsPanelEditor extends PureComponent, State> { - constructor(props: PanelEditorProps) { - super(props); - - this.state = { - feedUrl: props.options.feedUrl, - }; - } - - onUpdatePanel = () => - this.props.onOptionsChange({ - ...this.props.options, - feedUrl: this.state.feedUrl, - }); - - onFeedUrlChange = ({ target }: any) => this.setState({ feedUrl: target.value }); - - onSetProxyPrefix = () => { - const feedUrl = PROXY_PREFIX + this.state.feedUrl; - this.setState({ feedUrl }); - this.props.onOptionsChange({ - ...this.props.options, - feedUrl, - }); - }; - - render() { - const feedUrl = this.state.feedUrl || ''; - const suggestProxy = feedUrl && !feedUrl.startsWith(PROXY_PREFIX); - return ( - <> - - <> -
- -
- {suggestProxy && ( -
-
-
If the feed is unable to connect, consider a CORS proxy
- -
- )} - - - - ); - } -} diff --git a/public/app/plugins/panel/news/constants.ts b/public/app/plugins/panel/news/constants.ts new file mode 100644 index 00000000000..3cdab1a3ab8 --- /dev/null +++ b/public/app/plugins/panel/news/constants.ts @@ -0,0 +1,2 @@ +export const DEFAULT_FEED_URL = 'https://grafana.com/blog/news.xml'; +export const PROXY_PREFIX = 'https://cors-anywhere.herokuapp.com/'; diff --git a/public/app/plugins/panel/news/module.tsx b/public/app/plugins/panel/news/module.tsx index 3b21f68642f..dc9a989adb5 100755 --- a/public/app/plugins/panel/news/module.tsx +++ b/public/app/plugins/panel/news/module.tsx @@ -1,6 +1,24 @@ import { PanelPlugin } from '@grafana/data'; import { NewsPanel } from './NewsPanel'; -import { NewsPanelEditor } from './NewsPanelEditor'; -import { defaults, NewsOptions } from './types'; +import { NewsOptions } from './types'; +import { DEFAULT_FEED_URL, PROXY_PREFIX } from './constants'; -export const plugin = new PanelPlugin(NewsPanel).setDefaults(defaults).setEditor(NewsPanelEditor); +export const plugin = new PanelPlugin(NewsPanel).setPanelOptions(builder => { + builder + .addTextInput({ + path: 'feedUrl', + name: 'URL', + description: 'Only RSS feed formats are supported (not Atom).', + settings: { + placeholder: DEFAULT_FEED_URL, + }, + }) + .addBooleanSwitch({ + path: 'useProxy', + name: 'Use Proxy', + description: 'If the feed is unable to connect, consider a CORS proxy', + showIf: currentConfig => { + return currentConfig.feedUrl && !currentConfig.feedUrl.startsWith(PROXY_PREFIX); + }, + }); +}); diff --git a/public/app/plugins/panel/news/types.ts b/public/app/plugins/panel/news/types.ts index f060b8b202a..a86b973a053 100755 --- a/public/app/plugins/panel/news/types.ts +++ b/public/app/plugins/panel/news/types.ts @@ -1,7 +1,6 @@ -export const DEFAULT_FEED_URL = 'https://grafana.com/blog/news.xml'; - export interface NewsOptions { feedUrl?: string; + useProxy?: boolean; } export const defaults: NewsOptions = { diff --git a/public/app/plugins/panel/piechart/PieChartPanelEditor.tsx b/public/app/plugins/panel/piechart/PieChartPanelEditor.tsx deleted file mode 100644 index 79ef67a8ade..00000000000 --- a/public/app/plugins/panel/piechart/PieChartPanelEditor.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React, { PureComponent } from 'react'; -import { - PanelOptionsGrid, - FieldDisplayEditor, - PanelOptionsGroup, - FieldPropertiesEditor, - LegacyValueMappingsEditor, -} from '@grafana/ui'; -import { PanelEditorProps, ReduceDataOptions, ValueMapping, FieldConfig } from '@grafana/data'; - -import { PieChartOptionsBox } from './PieChartOptionsBox'; -import { PieChartOptions } from './types'; - -export class PieChartPanelEditor extends PureComponent> { - onValueMappingsChanged = (mappings: ValueMapping[]) => { - const current = this.props.fieldConfig; - this.props.onFieldConfigChange({ - ...current, - defaults: { - ...current.defaults, - mappings, - }, - }); - }; - - onDisplayOptionsChanged = (fieldOptions: ReduceDataOptions) => - this.props.onOptionsChange({ - ...this.props.options, - reduceOptions: fieldOptions, - }); - - onDefaultsChange = (field: FieldConfig) => { - this.props.onFieldConfigChange({ - ...this.props.fieldConfig, - defaults: field, - }); - }; - - render() { - const { onOptionsChange, options, data, fieldConfig, onFieldConfigChange } = this.props; - const { reduceOptions: fieldOptions } = options; - const { defaults } = fieldConfig; - - return ( - <> - - - - - - - - - - - - - - ); - } -} diff --git a/public/app/plugins/panel/piechart/module.tsx b/public/app/plugins/panel/piechart/module.tsx index c5dedf9ac67..61681a9454c 100644 --- a/public/app/plugins/panel/piechart/module.tsx +++ b/public/app/plugins/panel/piechart/module.tsx @@ -1,8 +1,29 @@ import { PanelPlugin } from '@grafana/data'; -import { PieChartPanelEditor } from './PieChartPanelEditor'; import { PieChartPanel } from './PieChartPanel'; -import { PieChartOptions, defaults } from './types'; +import { PieChartOptions } from './types'; +import { addStandardDataReduceOptions } from '../stat/types'; +import { PieChartType } from '@grafana/ui'; -export const plugin = new PanelPlugin(PieChartPanel) - .setDefaults(defaults) - .setEditor(PieChartPanelEditor); +export const plugin = new PanelPlugin(PieChartPanel).setPanelOptions(builder => { + addStandardDataReduceOptions(builder, false); + + builder + .addRadio({ + name: 'Piechart type', + description: 'How the piechart should be rendered', + path: 'pieType', + settings: { + options: [ + { value: PieChartType.PIE, label: 'Pie' }, + { value: PieChartType.DONUT, label: 'Donut' }, + ], + }, + defaultValue: PieChartType.PIE, + }) + .addNumberInput({ + name: 'Width', + description: 'Width of the piechart outline', + path: 'strokeWidth', + defaultValue: 1, + }); +}); diff --git a/public/app/plugins/panel/piechart/types.ts b/public/app/plugins/panel/piechart/types.ts index 0f8abc2295e..333361c6f04 100644 --- a/public/app/plugins/panel/piechart/types.ts +++ b/public/app/plugins/panel/piechart/types.ts @@ -1,15 +1,6 @@ import { PieChartType, SingleStatBaseOptions } from '@grafana/ui'; -import { commonValueOptionDefaults } from '../stat/types'; -import { VizOrientation } from '@grafana/data'; export interface PieChartOptions extends SingleStatBaseOptions { pieType: PieChartType; strokeWidth: number; } - -export const defaults: PieChartOptions = { - pieType: PieChartType.PIE, - strokeWidth: 1, - orientation: VizOrientation.Auto, - reduceOptions: commonValueOptionDefaults, -}; diff --git a/public/app/plugins/panel/stat/StatPanelEditor.tsx b/public/app/plugins/panel/stat/StatPanelEditor.tsx deleted file mode 100644 index cf9a4040796..00000000000 --- a/public/app/plugins/panel/stat/StatPanelEditor.tsx +++ /dev/null @@ -1,177 +0,0 @@ -// Libraries -import React, { PureComponent } from 'react'; - -import { - PanelOptionsGrid, - FieldDisplayEditor, - PanelOptionsGroup, - FormLabel, - LegacyForms, - FieldPropertiesEditor, - ThresholdsEditor, - LegacyValueMappingsEditor, - DataLinksEditor, -} from '@grafana/ui'; - -const { Select } = LegacyForms; - -import { - PanelEditorProps, - ReduceDataOptions, - FieldConfig, - ValueMapping, - ThresholdsConfig, - DataLink, -} from '@grafana/data'; - -import { StatPanelOptions, colorModes, graphModes, justifyModes } from './types'; -import { orientationOptions } from '../gauge/types'; -import { - getCalculationValueDataLinksVariableSuggestions, - getDataLinksVariableSuggestions, -} from '../../../features/panel/panellinks/link_srv'; -import { NewPanelEditorContext } from '../../../features/dashboard/components/PanelEditor/PanelEditor'; - -export class StatPanelEditor extends PureComponent> { - onThresholdsChanged = (thresholds: ThresholdsConfig) => { - const current = this.props.fieldConfig; - this.props.onFieldConfigChange({ - ...current, - defaults: { - ...current.defaults, - thresholds, - }, - }); - }; - - onValueMappingsChanged = (mappings: ValueMapping[]) => { - const current = this.props.fieldConfig; - this.props.onFieldConfigChange({ - ...current, - defaults: { - ...current.defaults, - mappings, - }, - }); - }; - - onDisplayOptionsChanged = (fieldOptions: ReduceDataOptions) => - this.props.onOptionsChange({ - ...this.props.options, - reduceOptions: fieldOptions, - }); - - onColorModeChanged = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, colorMode: value }); - onGraphModeChanged = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, graphMode: value }); - onJustifyModeChanged = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, justifyMode: value }); - onOrientationChange = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, orientation: value }); - - onDefaultsChange = (field: FieldConfig) => { - this.props.onFieldConfigChange({ - ...this.props.fieldConfig, - defaults: field, - }); - }; - - onDataLinksChanged = (links: DataLink[]) => { - const current = this.props.fieldConfig; - this.props.onFieldConfigChange({ - ...current, - defaults: { - ...current.defaults, - links, - }, - }); - }; - - render() { - const { options, fieldConfig } = this.props; - const { reduceOptions: valueOptions } = options; - const { defaults } = fieldConfig; - - const suggestions = valueOptions.values - ? getDataLinksVariableSuggestions(this.props.data.series) - : getCalculationValueDataLinksVariableSuggestions(this.props.data.series); - - return ( - - {useNewEditor => { - if (useNewEditor) { - return null; - } - - return ( - <> - - - -
- Orientation - item.value === options.colorMode)} - /> -
-
- Graph - item.value === options.justifyMode)} - /> -
- - - - - - - - - - - - - - - ); - }} - - ); - } -} diff --git a/public/app/plugins/panel/stat/module.tsx b/public/app/plugins/panel/stat/module.tsx index 8c18855525b..fe421361fc4 100644 --- a/public/app/plugins/panel/stat/module.tsx +++ b/public/app/plugins/panel/stat/module.tsx @@ -1,12 +1,9 @@ import { sharedSingleStatMigrationHandler, sharedSingleStatPanelChangedHandler } from '@grafana/ui'; import { PanelPlugin } from '@grafana/data'; -import { StatPanelOptions, defaults, addStandardDataReduceOptions } from './types'; +import { StatPanelOptions, addStandardDataReduceOptions } from './types'; import { StatPanel } from './StatPanel'; -import { StatPanelEditor } from './StatPanelEditor'; export const plugin = new PanelPlugin(StatPanel) - .setDefaults(defaults) - .setEditor(StatPanelEditor) .useFieldConfig() .setPanelOptions(builder => { addStandardDataReduceOptions(builder); @@ -16,6 +13,7 @@ export const plugin = new PanelPlugin(StatPanel) path: 'colorMode', name: 'Color mode', description: 'Color either the value or the background', + defaultValue: 'value', settings: { options: [ { value: 'value', label: 'Value' }, @@ -27,6 +25,7 @@ export const plugin = new PanelPlugin(StatPanel) path: 'graphMode', name: 'Graph mode', description: 'Stat panel graph / sparkline mode', + defaultValue: 'area', settings: { options: [ { value: 'none', label: 'None' }, @@ -38,6 +37,7 @@ export const plugin = new PanelPlugin(StatPanel) path: 'justifyMode', name: 'Justify mode', description: 'Value & title posititioning', + defaultValue: 'auto', settings: { options: [ { value: 'auto', label: 'Auto' }, diff --git a/public/app/plugins/panel/stat/types.ts b/public/app/plugins/panel/stat/types.ts index 7500f66f8f3..20b5552cc38 100644 --- a/public/app/plugins/panel/stat/types.ts +++ b/public/app/plugins/panel/stat/types.ts @@ -1,5 +1,5 @@ import { SingleStatBaseOptions, BigValueColorMode, BigValueGraphMode, BigValueJustifyMode } from '@grafana/ui'; -import { VizOrientation, ReducerID, ReduceDataOptions, SelectableValue, standardEditorsRegistry } from '@grafana/data'; +import { ReducerID, SelectableValue, standardEditorsRegistry } from '@grafana/data'; import { PanelOptionsEditorBuilder } from '@grafana/data/src/utils/OptionsUIBuilders'; // Structure copied from angular @@ -24,12 +24,10 @@ export const justifyModes: Array> = [ { value: BigValueJustifyMode.Center, label: 'Center' }, ]; -export const commonValueOptionDefaults: ReduceDataOptions = { - values: false, - calcs: [ReducerID.mean], -}; - -export function addStandardDataReduceOptions(builder: PanelOptionsEditorBuilder) { +export function addStandardDataReduceOptions( + builder: PanelOptionsEditorBuilder, + includeOrientation = true +) { builder.addRadio({ path: 'reduceOptions.values', name: 'Show', @@ -40,6 +38,7 @@ export function addStandardDataReduceOptions(builder: PanelOptionsEditorBuilder< { value: true, label: 'All values' }, ], }, + defaultValue: false, }); builder.addNumberInput({ @@ -60,26 +59,22 @@ export function addStandardDataReduceOptions(builder: PanelOptionsEditorBuilder< name: 'Value', description: 'Choose a reducer function / calculation', editor: standardEditorsRegistry.get('stats-picker').editor as any, + defaultValue: [ReducerID.mean], }); - builder.addRadio({ - path: 'orientation', - name: 'Orientation', - description: 'Stacking direction in case of multiple series or fields', - settings: { - options: [ - { value: 'auto', label: 'Auto' }, - { value: 'horizontal', label: 'Horizontal' }, - { value: 'vertical', label: 'Vertical' }, - ], - }, - }); + if (includeOrientation) { + builder.addRadio({ + path: 'orientation', + name: 'Orientation', + description: 'Stacking direction in case of multiple series or fields', + settings: { + options: [ + { value: 'auto', label: 'Auto' }, + { value: 'horizontal', label: 'Horizontal' }, + { value: 'vertical', label: 'Vertical' }, + ], + }, + defaultValue: 'auto', + }); + } } - -export const defaults: StatPanelOptions = { - graphMode: BigValueGraphMode.Area, - colorMode: BigValueColorMode.Value, - justifyMode: BigValueJustifyMode.Auto, - reduceOptions: commonValueOptionDefaults, - orientation: VizOrientation.Auto, -}; diff --git a/public/app/plugins/panel/table2/TablePanelEditor.tsx b/public/app/plugins/panel/table2/TablePanelEditor.tsx deleted file mode 100644 index fec7d93cc62..00000000000 --- a/public/app/plugins/panel/table2/TablePanelEditor.tsx +++ /dev/null @@ -1,26 +0,0 @@ -//// Libraries -import React, { PureComponent } from 'react'; -// Types -import { PanelEditorProps } from '@grafana/data'; -import { LegacyForms } from '@grafana/ui'; -const { Switch } = LegacyForms; -import { Options } from './types'; - -export class TablePanelEditor extends PureComponent> { - onToggleShowHeader = () => { - this.props.onOptionsChange({ ...this.props.options, showHeader: !this.props.options.showHeader }); - }; - - render() { - const { showHeader } = this.props.options; - - return ( -
-
-
Header
- -
-
- ); - } -} diff --git a/public/app/plugins/panel/table2/module.tsx b/public/app/plugins/panel/table2/module.tsx index d3aacc6d635..3b115d5f3c7 100644 --- a/public/app/plugins/panel/table2/module.tsx +++ b/public/app/plugins/panel/table2/module.tsx @@ -1,9 +1,8 @@ import { PanelPlugin } from '@grafana/data'; import { TablePanel } from './TablePanel'; -import { CustomFieldConfig, defaults, Options } from './types'; +import { CustomFieldConfig, Options } from './types'; export const plugin = new PanelPlugin(TablePanel) - .setDefaults(defaults) .useFieldConfig({ useCustomConfig: builder => { builder @@ -47,16 +46,17 @@ export const plugin = new PanelPlugin(TablePanel) }, }) .setPanelOptions(builder => { - builder.addBooleanSwitch({ - path: 'showHeader', - name: 'Show header', - description: "To display table's header or not to display", - }); - }) - .setPanelOptions(builder => { - builder.addBooleanSwitch({ - path: 'resizable', - name: 'Resizable', - description: 'Toggles if table columns are resizable or not', - }); + builder + .addBooleanSwitch({ + path: 'showHeader', + name: 'Show header', + description: "To display table's header or not to display", + defaultValue: true, + }) + .addBooleanSwitch({ + path: 'resizable', + name: 'Resizable', + description: 'Toggles if table columns are resizable or not', + defaultValue: false, + }); }); diff --git a/public/app/plugins/panel/table2/types.ts b/public/app/plugins/panel/table2/types.ts index fff20eedb9d..3c1073f4ac3 100644 --- a/public/app/plugins/panel/table2/types.ts +++ b/public/app/plugins/panel/table2/types.ts @@ -7,8 +7,3 @@ export interface CustomFieldConfig { width: number; displayMode: string; } - -export const defaults: Options = { - showHeader: true, - resizable: false, -}; diff --git a/public/app/plugins/panel/text2/TextPanelEditor.tsx b/public/app/plugins/panel/text2/TextPanelEditor.tsx deleted file mode 100644 index e9351188dd2..00000000000 --- a/public/app/plugins/panel/text2/TextPanelEditor.tsx +++ /dev/null @@ -1,41 +0,0 @@ -// Libraries -import React, { PureComponent, ChangeEvent } from 'react'; - -// Components -import { PanelOptionsGroup, LegacyForms } from '@grafana/ui'; -const { Select } = LegacyForms; -import { PanelEditorProps, SelectableValue } from '@grafana/data'; - -// Types -import { TextOptions, TextMode } from './types'; - -export class TextPanelEditor extends PureComponent> { - modes: Array> = [ - { value: 'markdown', label: 'Markdown' }, - { value: 'text', label: 'Text' }, - { value: 'html', label: 'HTML' }, - ]; - - onModeChange = (item: SelectableValue) => - this.props.onOptionsChange({ ...this.props.options, mode: item.value! }); - - onContentChange = (evt: ChangeEvent) => { - this.props.onOptionsChange({ ...this.props.options, content: (evt.target as any).value }); - }; - - render() { - const { mode, content } = this.props.options; - - return ( - -
-
- Mode -