SingleStat: add a gauge migration call to action button in the editor (#18604)

public/app/plugins/panel/bargauge/BarGaugeMigrations.test.ts

@@ -1,5 +1,5 @@
 import { PanelModel } from '@grafana/ui';
-import { barGaugePanelMigrationCheck } from './BarGaugeMigrations';
+import { barGaugePanelMigrationHandler } from './BarGaugeMigrations';
 
 describe('BarGauge Panel Migrations', () => {
   it('from 6.2', () => {
@@ -45,6 +45,6 @@ describe('BarGauge Panel Migrations', () => {
       type: 'bargauge',
     } as PanelModel;
 
-    expect(barGaugePanelMigrationCheck(panel)).toMatchSnapshot();
+    expect(barGaugePanelMigrationHandler(panel)).toMatchSnapshot();
   });
 });

public/app/plugins/panel/bargauge/BarGaugeMigrations.ts

@@ -1,7 +1,6 @@
-import { PanelModel } from '@grafana/ui';
-import { sharedSingleStatMigrationCheck } from '@grafana/ui/src/components/SingleStatShared/SingleStatBaseOptions';
+import { PanelModel, sharedSingleStatMigrationHandler } from '@grafana/ui';
 import { BarGaugeOptions } from './types';
 
-export const barGaugePanelMigrationCheck = (panel: PanelModel<BarGaugeOptions>): Partial<BarGaugeOptions> => {
-  return sharedSingleStatMigrationCheck(panel);
+export const barGaugePanelMigrationHandler = (panel: PanelModel<BarGaugeOptions>): Partial<BarGaugeOptions> => {
+  return sharedSingleStatMigrationHandler(panel);
 };

public/app/plugins/panel/bargauge/module.tsx

@@ -1,11 +1,11 @@
-import { PanelPlugin, sharedSingleStatOptionsCheck } from '@grafana/ui';
+import { PanelPlugin, sharedSingleStatPanelChangedHandler } from '@grafana/ui';
 import { BarGaugePanel } from './BarGaugePanel';
 import { BarGaugePanelEditor } from './BarGaugePanelEditor';
 import { BarGaugeOptions, defaults } from './types';
-import { barGaugePanelMigrationCheck } from './BarGaugeMigrations';
+import { barGaugePanelMigrationHandler } from './BarGaugeMigrations';
 
 export const plugin = new PanelPlugin<BarGaugeOptions>(BarGaugePanel)
   .setDefaults(defaults)
   .setEditor(BarGaugePanelEditor)
-  .setPanelChangeHandler(sharedSingleStatOptionsCheck)
-  .setMigrationHandler(barGaugePanelMigrationCheck);
+  .setPanelChangeHandler(sharedSingleStatPanelChangedHandler)
+  .setMigrationHandler(barGaugePanelMigrationHandler);

public/app/plugins/panel/gauge/GaugeMigrations.test.ts

@@ -1,5 +1,5 @@
 import { PanelModel } from '@grafana/ui';
-import { gaugePanelMigrationCheck } from './GaugeMigrations';
+import { gaugePanelMigrationHandler, gaugePanelChangedHandler } from './GaugeMigrations';
 
 describe('Gauge Panel Migrations', () => {
   it('from 6.1.1', () => {
@@ -77,6 +77,30 @@ describe('Gauge Panel Migrations', () => {
       type: 'gauge',
     } as PanelModel;
 
-    expect(gaugePanelMigrationCheck(panel)).toMatchSnapshot();
+    expect(gaugePanelMigrationHandler(panel)).toMatchSnapshot();
+  });
+
+  it('change from angular singlestat to gauge', () => {
+    const old: any = {
+      angular: {
+        format: 'ms',
+        decimals: 7,
+        gauge: {
+          maxValue: 150,
+          minValue: -10,
+          show: true,
+          thresholdLabels: true,
+          thresholdMarkers: true,
+        },
+      },
+    };
+
+    const newOptions = gaugePanelChangedHandler({} as any, 'singlestat', old);
+    expect(newOptions.fieldOptions.defaults.unit).toBe('ms');
+    expect(newOptions.fieldOptions.defaults.min).toBe(-10);
+    expect(newOptions.fieldOptions.defaults.max).toBe(150);
+    expect(newOptions.fieldOptions.defaults.decimals).toBe(7);
+    expect(newOptions.showThresholdMarkers).toBe(true);
+    expect(newOptions.showThresholdLabels).toBe(true);
   });
 });

public/app/plugins/panel/gauge/GaugeMigrations.ts

@@ -1,7 +1,27 @@
-import { PanelModel } from '@grafana/ui';
+import { PanelModel, sharedSingleStatPanelChangedHandler, sharedSingleStatMigrationHandler } from '@grafana/ui';
 import { GaugeOptions } from './types';
-import { sharedSingleStatMigrationCheck } from '@grafana/ui/src/components/SingleStatShared/SingleStatBaseOptions';
 
-export const gaugePanelMigrationCheck = (panel: PanelModel<GaugeOptions>): Partial<GaugeOptions> => {
-  return sharedSingleStatMigrationCheck(panel);
+// This is called when the panel first loads
+export const gaugePanelMigrationHandler = (panel: PanelModel<GaugeOptions>): Partial<GaugeOptions> => {
+  return sharedSingleStatMigrationHandler(panel);
+};
+
+// This is called when the panel changes from another panel
+export const gaugePanelChangedHandler = (
+  options: Partial<GaugeOptions> | any,
+  prevPluginId: string,
+  prevOptions: any
+) => {
+  // This handles most config changes
+  const opts = sharedSingleStatPanelChangedHandler(options, prevPluginId, prevOptions) as GaugeOptions;
+
+  // Changing from angular singlestat
+  if (prevPluginId === 'singlestat' && prevOptions.angular) {
+    const gauge = prevOptions.angular.gauge;
+    if (gauge) {
+      opts.showThresholdMarkers = gauge.thresholdMarkers;
+      opts.showThresholdLabels = gauge.thresholdLabels;
+    }
+  }
+  return opts;
 };

public/app/plugins/panel/gauge/module.tsx

@@ -1,10 +1,11 @@
-import { PanelPlugin, sharedSingleStatMigrationCheck, sharedSingleStatOptionsCheck } from '@grafana/ui';
+import { PanelPlugin } from '@grafana/ui';
 import { GaugePanelEditor } from './GaugePanelEditor';
 import { GaugePanel } from './GaugePanel';
 import { GaugeOptions, defaults } from './types';
+import { gaugePanelMigrationHandler, gaugePanelChangedHandler } from './GaugeMigrations';
 
 export const plugin = new PanelPlugin<GaugeOptions>(GaugePanel)
   .setDefaults(defaults)
   .setEditor(GaugePanelEditor)
-  .setPanelChangeHandler(sharedSingleStatOptionsCheck)
-  .setMigrationHandler(sharedSingleStatMigrationCheck);
+  .setPanelChangeHandler(gaugePanelChangedHandler)
+  .setMigrationHandler(gaugePanelMigrationHandler);

public/app/plugins/panel/singlestat/editor.html

@@ -1,4 +1,41 @@
 <div class="editor-row">
+
+  <div class="grafana-info-box" ng-if="ctrl.panel.gauge.show">
+    <h5>Gauge Migration</h5>
+    <p>
+      Gauge visualizations within the Singlestat panel are deprecated.  Please
+      migrate this panel to use the Gauge panel
+    
+      <div class="gf-form-button-row">
+        <button class="btn btn-primary" ng-click="ctrl.migrateToGaugePanel(true)">
+          Migrate to Gauge Panel
+        </button>
+        <button class="btn btn-inverse" ng-click="ctrl.migrateToGaugePanel(false)">
+          Show as single stat
+        </button>
+      </div>
+    
+      <br/>
+      
+      <div ng-if="ctrl.panel.sparkline.show">
+        <b>NOTE:</b> Sparklines are not supported in the gauge panel
+      </div>
+
+      <div ng-if="ctrl.panel.prefix">
+        <b>NOTE:</b> Prefix will not be show in the gauge panel
+      </div>
+
+      <div ng-if="ctrl.panel.postfix">
+        <b>NOTE:</b> Postfix will not be show in the gauge panel
+      </div>
+
+      <div ng-if="ctrl.panel.links && ctrl.panel.links.length">
+        <b>NOTE:</b> Links will be in the upper left corner, rather than anywhere on the gauge
+      </div>
+    </p>
+  </div>
+    
+
   <div class="section gf-form-group">
     <h5 class="section-heading">Value</h5>
 

public/app/plugins/panel/singlestat/module.ts

@@ -113,6 +113,15 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     this.unitFormats = kbn.getUnitFormats();
   }
 
+  migrateToGaugePanel(migrate: boolean) {
+    if (migrate) {
+      this.onPluginTypeChange(config.panels['gauge']);
+    } else {
+      this.panel.gauge.show = false;
+      this.render();
+    }
+  }
+
   setUnitFormat(subItem: { value: any }) {
     this.panel.format = subItem.value;
     this.refresh();

public/app/plugins/panel/singlestat2/module.tsx

@@ -1,4 +1,4 @@
-import { PanelPlugin, sharedSingleStatMigrationCheck, sharedSingleStatOptionsCheck } from '@grafana/ui';
+import { PanelPlugin, sharedSingleStatMigrationHandler, sharedSingleStatPanelChangedHandler } from '@grafana/ui';
 import { SingleStatOptions, defaults } from './types';
 import { SingleStatPanel } from './SingleStatPanel';
 import { SingleStatEditor } from './SingleStatEditor';
@@ -6,5 +6,5 @@ import { SingleStatEditor } from './SingleStatEditor';
 export const plugin = new PanelPlugin<SingleStatOptions>(SingleStatPanel)
   .setDefaults(defaults)
   .setEditor(SingleStatEditor)
-  .setPanelChangeHandler(sharedSingleStatOptionsCheck)
-  .setMigrationHandler(sharedSingleStatMigrationCheck);
+  .setPanelChangeHandler(sharedSingleStatPanelChangedHandler)
+  .setMigrationHandler(sharedSingleStatMigrationHandler);