From d6ba6440e46853488487bb2346cdd746451c435b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 25 Apr 2020 11:00:27 +0200 Subject: [PATCH] Singlestat: Adds migration button and logic to migrate singlestat to stat panel (#23845) * Singlestat: Migration button to migrate to new stat panel * updated test --- .../SingleStatBaseOptions.test.ts | 42 ++++++++++++++- .../SingleStatShared/SingleStatBaseOptions.ts | 6 ++- .../panel/gauge/GaugeMigrations.test.ts | 19 ------- .../app/plugins/panel/singlestat/editor.html | 43 +++++++++++----- public/app/plugins/panel/singlestat/module.ts | 9 +--- .../plugins/panel/stat/StatMigrations.test.ts | 51 +++++++++++++++++++ .../app/plugins/panel/stat/StatMigrations.ts | 29 +++++++++++ public/app/plugins/panel/stat/module.tsx | 5 +- 8 files changed, 160 insertions(+), 44 deletions(-) create mode 100644 public/app/plugins/panel/stat/StatMigrations.test.ts create mode 100644 public/app/plugins/panel/stat/StatMigrations.ts diff --git a/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.test.ts b/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.test.ts index c4ca7cf443c..6c86be46055 100644 --- a/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.test.ts +++ b/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.test.ts @@ -1,4 +1,5 @@ -import { sharedSingleStatMigrationHandler } from './SingleStatBaseOptions'; +import { sharedSingleStatMigrationHandler, sharedSingleStatPanelChangedHandler } from './SingleStatBaseOptions'; +import { PanelModel } from '@grafana/data'; describe('sharedSingleStatMigrationHandler', () => { it('from old valueOptions model without pluginVersion', () => { @@ -154,4 +155,43 @@ describe('sharedSingleStatMigrationHandler', () => { } `); }); + + it('change from angular singlestat with no enabled gauge', () => { + const old: any = { + angular: { + format: 'ms', + decimals: 7, + gauge: { + maxValue: 150, + minValue: -10, + show: false, + }, + }, + }; + const panel = {} as PanelModel; + sharedSingleStatPanelChangedHandler(panel, 'singlestat', old); + expect(panel.fieldConfig.defaults.unit).toBe('ms'); + expect(panel.fieldConfig.defaults.min).toBe(undefined); + expect(panel.fieldConfig.defaults.max).toBe(undefined); + }); + + it('change from angular singlestat with no enabled gauge', () => { + const old: any = { + angular: { + format: 'ms', + decimals: 7, + gauge: { + maxValue: 150, + minValue: -10, + show: false, + }, + }, + }; + + const panel = {} as PanelModel; + sharedSingleStatPanelChangedHandler(panel, 'singlestat', old); + expect(panel.fieldConfig.defaults.unit).toBe('ms'); + expect(panel.fieldConfig.defaults.min).toBe(undefined); + expect(panel.fieldConfig.defaults.max).toBe(undefined); + }); }); diff --git a/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts b/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts index e54294911f3..e4cd87c7343 100644 --- a/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts +++ b/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts @@ -59,19 +59,22 @@ function migrateFromAngularSinglestat(panel: PanelModel { expect(newOptions.showThresholdMarkers).toBe(true); expect(newOptions.showThresholdLabels).toBe(true); }); - - it('change from angular singlestatt with no enabled gauge', () => { - const old: any = { - angular: { - format: 'ms', - decimals: 7, - gauge: { - maxValue: 150, - minValue: -10, - show: false, - }, - }, - }; - const panel = {} as PanelModel; - gaugePanelChangedHandler(panel, 'singlestat', old); - expect(panel.fieldConfig.defaults.unit).toBe('ms'); - expect(panel.fieldConfig.defaults.min).toBe(undefined); - expect(panel.fieldConfig.defaults.max).toBe(undefined); - }); }); diff --git a/public/app/plugins/panel/singlestat/editor.html b/public/app/plugins/panel/singlestat/editor.html index 4e83faf3349..4308f6f4510 100644 --- a/public/app/plugins/panel/singlestat/editor.html +++ b/public/app/plugins/panel/singlestat/editor.html @@ -1,18 +1,14 @@
-
Gauge Migration
+
Gauge migration

- Gauge visualizations within the Singlestat panel are deprecated. Please - migrate this panel to use the Gauge panel + This panel is deprecated. Please migrate to the new Gauge panel.

- - +

@@ -22,16 +18,35 @@
- NOTE: Prefix will not be show in the gauge panel + NOTE: Prefix is no longer supported but can be done via a custom unit
- NOTE: Postfix will not be show in the gauge panel + NOTE: Postfix is no longer supported but can be done via a custom unit +
+

+
+ +
+
Migration
+

+ This panel is deprecated. Please migrate to the new Stat panel. + +

+ +
+ +
+ +
+ NOTE: Prefix is no longer supported but can be done via a custom unit
-
- NOTE: Links will be in the upper left corner, rather than anywhere on the gauge -
+
+ NOTE: Postfix is no longer supported but can be done via a custom unit +

diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index abd1aeaa957..bb9dd189300 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/public/app/plugins/panel/singlestat/module.ts @@ -139,13 +139,8 @@ class SingleStatCtrl extends MetricsPanelCtrl { this.addEditorTab('Value Mappings', 'public/app/plugins/panel/singlestat/mappings.html', 3); } - migrateToGaugePanel(migrate: boolean) { - if (migrate) { - this.onPluginTypeChange(config.panels['gauge']); - } else { - this.panel.gauge.show = false; - this.render(); - } + migrateToPanel(type: string) { + this.onPluginTypeChange(config.panels[type]); } setUnitFormat() { diff --git a/public/app/plugins/panel/stat/StatMigrations.test.ts b/public/app/plugins/panel/stat/StatMigrations.test.ts new file mode 100644 index 00000000000..8d5ac73812a --- /dev/null +++ b/public/app/plugins/panel/stat/StatMigrations.test.ts @@ -0,0 +1,51 @@ +import { PanelModel } from '@grafana/data'; +import { statPanelChangedHandler } from './StatMigrations'; +import { BigValueGraphMode, BigValueColorMode } from '@grafana/ui'; + +describe('Stat Panel Migrations', () => { + it('change from angular singlestat sparkline disabled', () => { + const old: any = { + angular: { + format: 'ms', + decimals: 7, + sparkline: { + show: false, + }, + }, + }; + + const panel = {} as PanelModel; + const options = statPanelChangedHandler(panel, 'singlestat', old); + expect(options.graphMode).toBe(BigValueGraphMode.None); + }); + + it('change from angular singlestat sparkline enabled', () => { + const old: any = { + angular: { + format: 'ms', + decimals: 7, + sparkline: { + show: true, + }, + }, + }; + + const panel = {} as PanelModel; + const options = statPanelChangedHandler(panel, 'singlestat', old); + expect(options.graphMode).toBe(BigValueGraphMode.Area); + }); + + it('change from angular singlestat color background', () => { + const old: any = { + angular: { + format: 'ms', + decimals: 7, + colorBackground: true, + }, + }; + + const panel = {} as PanelModel; + const options = statPanelChangedHandler(panel, 'singlestat', old); + expect(options.colorMode).toBe(BigValueColorMode.Background); + }); +}); diff --git a/public/app/plugins/panel/stat/StatMigrations.ts b/public/app/plugins/panel/stat/StatMigrations.ts new file mode 100644 index 00000000000..84f39318d51 --- /dev/null +++ b/public/app/plugins/panel/stat/StatMigrations.ts @@ -0,0 +1,29 @@ +import { sharedSingleStatPanelChangedHandler, BigValueGraphMode, BigValueColorMode } from '@grafana/ui'; +import { PanelModel } from '@grafana/data'; +import { StatPanelOptions } from './types'; + +// This is called when the panel changes from another panel +export const statPanelChangedHandler = ( + panel: PanelModel> | any, + prevPluginId: string, + prevOptions: any +) => { + // This handles most config changes + const options = sharedSingleStatPanelChangedHandler(panel, prevPluginId, prevOptions) as StatPanelOptions; + + // Changing from angular singlestat + if (prevPluginId === 'singlestat' && prevOptions.angular) { + const oldOptions = prevOptions.angular; + + options.graphMode = + oldOptions.sparkline && oldOptions.sparkline.show === true ? BigValueGraphMode.Area : BigValueGraphMode.None; + + if (oldOptions.colorBackground) { + options.colorMode = BigValueColorMode.Background; + } else { + options.colorMode = BigValueColorMode.Value; + } + } + + return options; +}; diff --git a/public/app/plugins/panel/stat/module.tsx b/public/app/plugins/panel/stat/module.tsx index fe421361fc4..ed8aa3a0169 100644 --- a/public/app/plugins/panel/stat/module.tsx +++ b/public/app/plugins/panel/stat/module.tsx @@ -1,7 +1,8 @@ -import { sharedSingleStatMigrationHandler, sharedSingleStatPanelChangedHandler } from '@grafana/ui'; +import { sharedSingleStatMigrationHandler } from '@grafana/ui'; import { PanelPlugin } from '@grafana/data'; import { StatPanelOptions, addStandardDataReduceOptions } from './types'; import { StatPanel } from './StatPanel'; +import { statPanelChangedHandler } from './StatMigrations'; export const plugin = new PanelPlugin(StatPanel) .useFieldConfig() @@ -47,5 +48,5 @@ export const plugin = new PanelPlugin(StatPanel) }); }) .setNoPadding() - .setPanelChangeHandler(sharedSingleStatPanelChangedHandler) + .setPanelChangeHandler(statPanelChangedHandler) .setMigrationHandler(sharedSingleStatMigrationHandler);