Singlestat: Adds migration button and logic to migrate singlestat to stat panel (#23845)

* Singlestat: Migration button to migrate to new stat panel

* updated test

packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.test.ts

-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);
+  });
 });

packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts

@@ -59,19 +59,22 @@ function migrateFromAngularSinglestat(panel: PanelModel<Partial<SingleStatBaseOp
       calcs: [reducer ? reducer.id : ReducerID.mean],
     },
     orientation: VizOrientation.Horizontal,
-  };
+  } as any;
 
   const defaults: FieldConfig = {};
 
   if (prevPanel.format) {
     defaults.unit = prevPanel.format;
   }
+
   if (prevPanel.nullPointMode) {
     defaults.nullValueMode = prevPanel.nullPointMode;
   }
+
   if (prevPanel.nullText) {
     defaults.noValue = prevPanel.nullText;
   }
+
   if (prevPanel.decimals || prevPanel.decimals === 0) {
     defaults.decimals = prevPanel.decimals;
   }
@@ -92,6 +95,7 @@ function migrateFromAngularSinglestat(panel: PanelModel<Partial<SingleStatBaseOp
         thresholds.push({ value: -Infinity, color });
       }
     }
+
     defaults.thresholds = {
       mode: ThresholdsMode.Absolute,
       steps: thresholds,

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

@@ -163,23 +163,4 @@ describe('Gauge Panel Migrations', () => {
     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);
-  });
 });

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

 <div class="editor-row">
 
   <div class="grafana-info-box" ng-if="ctrl.panel.gauge.show">
-    <h5>Gauge Migration</h5>
+    <h5>Gauge migration</h5>
     <p>
-      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.
 
       <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>
+        <button class="btn btn-primary" ng-click="ctrl.migrateToPanel('gauge')">
+          Migrate to Gauge panel
+        </button>       
       </div>
 
       <br/>
@@ -22,16 +18,35 @@
       </div>
 
       <div ng-if="ctrl.panel.prefix">
-        <b>NOTE:</b> Prefix will not be show in the gauge panel
+        <b>NOTE:</b> Prefix is no longer supported but can be done via a custom unit
       </div>
 
       <div ng-if="ctrl.panel.postfix">
-        <b>NOTE:</b> Postfix will not be show in the gauge panel
+        <b>NOTE:</b> Postfix is no longer supported but can be done via a custom unit
       </div>
+    </p>
+  </div>
+
+  <div class="grafana-info-box" ng-if="!ctrl.panel.gauge.show">
+    <h5>Migration</h5>
+    <p>
+      This panel is deprecated. Please migrate to the new Stat panel.
 
-      <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 class="gf-form-button-row">
+        <button class="btn btn-primary" ng-click="ctrl.migrateToPanel('stat')">
+          Migrate to Stat panel
+        </button>       
       </div>
+      
+      <br/>
+
+      <div ng-if="ctrl.panel.prefix">
+        <b>NOTE:</b> Prefix is no longer supported but can be done via a custom unit
+      </div>
+
+      <div ng-if="ctrl.panel.postfix">
+        <b>NOTE:</b> Postfix is no longer supported but can be done via a custom unit
+      </div>      
     </p>
   </div>
 

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() {

public/app/plugins/panel/stat/StatMigrations.test.ts

+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);
+  });
+});

public/app/plugins/panel/stat/StatMigrations.ts

+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<Partial<StatPanelOptions>> | 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;
+};

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

-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<StatPanelOptions>(StatPanel)
   .useFieldConfig()
@@ -47,5 +48,5 @@ export const plugin = new PanelPlugin<StatPanelOptions>(StatPanel)
       });
   })
   .setNoPadding()
-  .setPanelChangeHandler(sharedSingleStatPanelChangedHandler)
+  .setPanelChangeHandler(statPanelChangedHandler)
   .setMigrationHandler(sharedSingleStatMigrationHandler);