diff --git a/packages/grafana-data/src/types/panel.ts b/packages/grafana-data/src/types/panel.ts index 93c34ed99d6..a195d3fe646 100644 --- a/packages/grafana-data/src/types/panel.ts +++ b/packages/grafana-data/src/types/panel.ts @@ -63,10 +63,10 @@ export interface PanelModel { export type PanelMigrationHandler = (panel: PanelModel) => Partial; /** - * Called before a panel is initialized. Allows panel inspection for any updates before changing the panel type. + * Called before a panel is initialized */ export type PanelTypeChangedHandler = ( - panel: PanelModel, + options: Partial, prevPluginId: string, prevOptions: any ) => Partial; @@ -117,12 +117,8 @@ export class PanelPlugin extends GrafanaPlugin } /** - * This function is called when the visualization was changed. This - * passes in the panel model for previous visualisation options inspection - * and panel model updates. - * - * This is useful for supporting PanelModel API updates when changing - * between Angular and React panels. + * This function is called when the visualization was changed. This + * passes in the options that were used in the previous visualization */ setPanelChangeHandler(handler: PanelTypeChangedHandler) { this.onPanelTypeChanged = handler; diff --git a/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts b/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts index 2526ac39904..559279afa83 100644 --- a/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts +++ b/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts @@ -27,16 +27,15 @@ export interface SingleStatBaseOptions { const optionsToKeep = ['fieldOptions', 'orientation']; export function sharedSingleStatPanelChangedHandler( - panel: PanelModel> | any, + options: Partial | any, prevPluginId: string, prevOptions: any ) { - let options = panel.options; // Migrating from angular singlestat if (prevPluginId === 'singlestat' && prevOptions.angular) { - const prevPanel = prevOptions.angular; - const reducer = fieldReducers.getIfExists(prevPanel.valueName); - options = { + const panel = prevOptions.angular; + const reducer = fieldReducers.getIfExists(panel.valueName); + const options = { fieldOptions: { defaults: {} as FieldConfig, overrides: [] as ConfigOverrideRule[], @@ -46,28 +45,28 @@ export function sharedSingleStatPanelChangedHandler( }; const defaults = options.fieldOptions.defaults; - if (prevPanel.format) { - defaults.unit = prevPanel.format; + if (panel.format) { + defaults.unit = panel.format; } - if (prevPanel.nullPointMode) { - defaults.nullValueMode = prevPanel.nullPointMode; + if (panel.nullPointMode) { + defaults.nullValueMode = panel.nullPointMode; } - if (prevPanel.nullText) { - defaults.noValue = prevPanel.nullText; + if (panel.nullText) { + defaults.noValue = panel.nullText; } - if (prevPanel.decimals || prevPanel.decimals === 0) { - defaults.decimals = prevPanel.decimals; + if (panel.decimals || panel.decimals === 0) { + defaults.decimals = panel.decimals; } // Convert thresholds and color values - if (prevPanel.thresholds && prevPanel.colors) { - const levels = prevPanel.thresholds.split(',').map((strVale: string) => { + if (panel.thresholds && panel.colors) { + const levels = panel.thresholds.split(',').map((strVale: string) => { return Number(strVale.trim()); }); // One more color than threshold const thresholds: Threshold[] = []; - for (const color of prevPanel.colors) { + for (const color of panel.colors) { const idx = thresholds.length - 1; if (idx >= 0) { thresholds.push({ value: levels[idx], color }); @@ -82,14 +81,14 @@ export function sharedSingleStatPanelChangedHandler( } // Convert value mappings - const mappings = convertOldAngularValueMapping(prevPanel); + const mappings = convertOldAngularValueMapping(panel); if (mappings && mappings.length) { defaults.mappings = mappings; } - if (prevPanel.gauge && prevPanel.gauge.show) { - defaults.min = prevPanel.gauge.minValue; - defaults.max = prevPanel.gauge.maxValue; + if (panel.gauge && panel.gauge.show) { + defaults.min = panel.gauge.minValue; + defaults.max = panel.gauge.maxValue; } return options; } diff --git a/public/app/features/dashboard/state/PanelModel.ts b/public/app/features/dashboard/state/PanelModel.ts index 1c36b15ce91..fd89ffaa0ce 100644 --- a/public/app/features/dashboard/state/PanelModel.ts +++ b/public/app/features/dashboard/state/PanelModel.ts @@ -313,7 +313,7 @@ export class PanelModel { old = oldOptions.options; } this.options = this.options || {}; - Object.assign(this.options, newPlugin.onPanelTypeChanged(this, oldPluginId, old)); + Object.assign(this.options, newPlugin.onPanelTypeChanged(this.options, oldPluginId, old)); } // switch diff --git a/public/app/plugins/panel/annolist/module.ts b/public/app/plugins/panel/annolist/module.ts index 6bee00cea8e..f00af0ee65e 100644 --- a/public/app/plugins/panel/annolist/module.ts +++ b/public/app/plugins/panel/annolist/module.ts @@ -1,16 +1,16 @@ import { AnnoListPanel } from './AnnoListPanel'; import { AnnoOptions, defaults } from './types'; import { AnnoListEditor } from './AnnoListEditor'; -import { PanelModel, PanelPlugin } from '@grafana/data'; +import { 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) => { + .setPanelChangeHandler((options: AnnoOptions, prevPluginId: string, prevOptions: any) => { if (prevPluginId === 'ryantxu-annolist-panel') { return prevOptions as AnnoOptions; } - return panel.options; + return options; }); diff --git a/public/app/plugins/panel/gauge/GaugeMigrations.ts b/public/app/plugins/panel/gauge/GaugeMigrations.ts index d4b619aa20c..83e3be05f82 100644 --- a/public/app/plugins/panel/gauge/GaugeMigrations.ts +++ b/public/app/plugins/panel/gauge/GaugeMigrations.ts @@ -9,12 +9,12 @@ export const gaugePanelMigrationHandler = (panel: PanelModel): Par // This is called when the panel changes from another panel export const gaugePanelChangedHandler = ( - panel: PanelModel> | any, + options: Partial | any, prevPluginId: string, prevOptions: any ) => { // This handles most config changes - const opts = sharedSingleStatPanelChangedHandler(panel, prevPluginId, prevOptions) as GaugeOptions; + const opts = sharedSingleStatPanelChangedHandler(options, prevPluginId, prevOptions) as GaugeOptions; // Changing from angular singlestat if (prevPluginId === 'singlestat' && prevOptions.angular) { diff --git a/public/app/plugins/panel/text2/module.tsx b/public/app/plugins/panel/text2/module.tsx index ae48f013f41..babc3713da9 100644 --- a/public/app/plugins/panel/text2/module.tsx +++ b/public/app/plugins/panel/text2/module.tsx @@ -1,4 +1,4 @@ -import { PanelModel, PanelPlugin } from '@grafana/data'; +import { PanelPlugin } from '@grafana/data'; import { TextPanelEditor } from './TextPanelEditor'; import { TextPanel } from './TextPanel'; @@ -7,9 +7,9 @@ import { TextOptions, defaults } from './types'; export const plugin = new PanelPlugin(TextPanel) .setDefaults(defaults) .setEditor(TextPanelEditor) - .setPanelChangeHandler((panel: PanelModel, prevPluginId: string, prevOptions: any) => { + .setPanelChangeHandler((options: TextOptions, prevPluginId: string, prevOptions: any) => { if (prevPluginId === 'text') { return prevOptions as TextOptions; } - return panel.options; + return options; });