Heatmap: Replace the heatmap panel with new implementation (#50229)

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -58,6 +58,7 @@ export interface FeatureToggles {
   autoMigrateGraphPanels?: boolean;
   prometheusWideSeries?: boolean;
   canvasPanelNesting?: boolean;
+  useLegacyHeatmapPanel?: boolean;
   cloudMonitoringExperimentalUI?: boolean;
   logRequestsInstrumentedAsUnknown?: boolean;
   dataConnectionsConsole?: boolean;

pkg/codegen/pluggen.go

@@ -40,7 +40,8 @@ var skipPaths = []string{
 	"public/app/plugins/panel/barchart/models.cue",
 	"public/app/plugins/panel/canvas/models.cue",
 	"public/app/plugins/panel/histogram/models.cue",
-	"public/app/plugins/panel/heatmap-new/models.cue",
+	"public/app/plugins/panel/heatmap/models.cue",
+	"public/app/plugins/panel/heatmap-old/models.cue",
 	"public/app/plugins/panel/candlestick/models.cue",
 	"public/app/plugins/panel/state-timeline/models.cue",
 	"public/app/plugins/panel/status-history/models.cue",

pkg/plugins/manager/manager_integration_test.go

@@ -120,7 +120,7 @@ func verifyCorePluginCatalogue(t *testing.T, ctx context.Context, pm *PluginMana
 		"gettingstarted": {},
 		"graph":          {},
 		"heatmap":        {},
-		"heatmap-new":    {},
+		"heatmap-old":    {},
 		"histogram":      {},
 		"icon":           {},
 		"live":           {},

pkg/services/featuremgmt/registry.go

@@ -238,6 +238,11 @@ var (
 			State:        FeatureStateAlpha,
 			FrontendOnly: true,
 		},
+		{
+			Name:        "useLegacyHeatmapPanel",
+			Description: "Continue to use the angular/flot based heatmap panel",
+			State:       FeatureStateStable,
+		},
 		{
 			Name:         "cloudMonitoringExperimentalUI",
 			Description:  "Use grafana-experimental UI in Cloud Monitoring",

pkg/services/featuremgmt/toggles_gen.go

@@ -175,6 +175,10 @@ const (
 	// Allow elements nesting
 	FlagCanvasPanelNesting = "canvasPanelNesting"
 
+	// FlagUseLegacyHeatmapPanel
+	// Continue to use the angular/flot based heatmap panel
+	FlagUseLegacyHeatmapPanel = "useLegacyHeatmapPanel"
+
 	// FlagCloudMonitoringExperimentalUI
 	// Use grafana-experimental UI in Cloud Monitoring
 	FlagCloudMonitoringExperimentalUI = "cloudMonitoringExperimentalUI"

pkg/tests/api/plugins/data/expectedListResp.json

@@ -628,16 +628,7 @@
         "url": "https://grafana.com"
       },
       "description": "Like a histogram over time",
-      "links": [
+      "links": null,
-        {
-          "name": "Brendan Gregg - Heatmaps",
-          "url": "http://www.brendangregg.com/heatmaps.html"
-        },
-        {
-          "name": "Brendan Gregg - Latency Heatmaps",
-          "url": " http://www.brendangregg.com/HeatMaps/latency.html"
-        }
-      ],
       "logos": {
         "small": "public/app/plugins/panel/heatmap/img/icn-heatmap-panel.svg",
         "large": "public/app/plugins/panel/heatmap/img/icn-heatmap-panel.svg"
@@ -662,9 +653,9 @@
     "signatureOrg": ""
   },
   {
-    "name": "Heatmap (new)",
+    "name": "Heatmap (legacy)",
     "type": "panel",
-    "id": "heatmap-new",
+    "id": "heatmap-old",
     "enabled": true,
     "pinned": false,
     "info": {
@@ -672,11 +663,20 @@
         "name": "Grafana Labs",
         "url": "https://grafana.com"
       },
-      "description": "This heatmap panel will replace the heatmap panel in 9.1",
+      "description": "Legacy heatmap panel based on angular, d3, and flot",
-      "links": null,
+      "links": [
+        {
+          "name": "Brendan Gregg - Heatmaps",
+          "url": "http://www.brendangregg.com/heatmaps.html"
+        },
+        {
+          "name": "Brendan Gregg - Latency Heatmaps",
+          "url": " http://www.brendangregg.com/HeatMaps/latency.html"
+        }
+      ],
       "logos": {
-        "small": "public/app/plugins/panel/heatmap-new/img/icn-heatmap-panel.svg",
+        "small": "public/app/plugins/panel/heatmap-old/img/icn-heatmap-panel.svg",
-        "large": "public/app/plugins/panel/heatmap-new/img/icn-heatmap-panel.svg"
+        "large": "public/app/plugins/panel/heatmap-old/img/icn-heatmap-panel.svg"
       },
       "build": {},
       "screenshots": null,
@@ -690,9 +690,9 @@
     },
     "latestVersion": "",
     "hasUpdate": false,
-    "defaultNavUrl": "/plugins/heatmap-new/",
+    "defaultNavUrl": "/plugins/heatmap-old/",
     "category": "",
-    "state": "beta",
+    "state": "deprecated",
     "signature": "internal",
     "signatureType": "",
     "signatureOrg": ""

public/app/features/dashboard/state/PanelModel.ts

@@ -224,11 +224,18 @@ export class PanelModel implements DataConfigSource, IPanelModel {
       (this as any)[property] = model[property];
     }
 
-    // Special 'graph' migration logic
+    switch (this.type) {
-    if (this.type === 'graph' && config?.featureToggles?.autoMigrateGraphPanels) {
+      case 'graph':
+        if (config?.featureToggles?.autoMigrateGraphPanels) {
           this.autoMigrateFrom = this.type;
           this.type = 'timeseries';
         }
+        break;
+      case 'heatmap-new':
+        this.autoMigrateFrom = this.type;
+        this.type = 'heatmap';
+        break;
+    }
 
     // defaults
     defaultsDeep(this, cloneDeep(defaults));

public/app/features/plugins/built_in_plugins.ts

@@ -40,6 +40,7 @@ const tempoPlugin = async () =>
 const alertmanagerPlugin = async () =>
   await import(/* webpackChunkName: "alertmanagerPlugin" */ 'app/plugins/datasource/alertmanager/module');
 
+import { config } from '@grafana/runtime';
 import * as alertGroupsPanel from 'app/plugins/panel/alertGroups/module';
 import * as alertListPanel from 'app/plugins/panel/alertlist/module';
 import * as annoListPanel from 'app/plugins/panel/annolist/module';
@@ -50,7 +51,6 @@ import * as dashListPanel from 'app/plugins/panel/dashlist/module';
 import * as debugPanel from 'app/plugins/panel/debug/module';
 import * as gaugePanel from 'app/plugins/panel/gauge/module';
 import * as gettingStartedPanel from 'app/plugins/panel/gettingstarted/module';
-import * as heatmapPanelNG from 'app/plugins/panel/heatmap-new/module';
 import * as histogramPanel from 'app/plugins/panel/histogram/module';
 import * as livePanel from 'app/plugins/panel/live/module';
 import * as logsPanel from 'app/plugins/panel/logs/module';
@@ -73,10 +73,24 @@ const canvasPanel = async () => await import(/* webpackChunkName: "canvasPanel"
 const iconPanel = async () => await import(/* webpackChunkName: "iconPanel" */ 'app/plugins/panel/icon/module');
 const graphPanel = async () => await import(/* webpackChunkName: "graphPlugin" */ 'app/plugins/panel/graph/module');
 const heatmapPanel = async () =>
-  await import(/* webpackChunkName: "heatmapPlugin" */ 'app/plugins/panel/heatmap/module');
+  await import(/* webpackChunkName: "heatmapPanel" */ 'app/plugins/panel/heatmap/module');
+const heatmapPanelOLD = async () =>
+  await import(/* webpackChunkName: "heatmapPanelOLD" */ 'app/plugins/panel/heatmap-old/module');
+
 const tableOldPanel = async () =>
   await import(/* webpackChunkName: "tableOldPlugin" */ 'app/plugins/panel/table-old/module');
 
+// Automatically migrate heatmap panel.
+if (config.featureToggles.useLegacyHeatmapPanel) {
+  const heatmap = config.panels['heatmap'];
+  const legacy = config.panels['heatmap-old'];
+  legacy.id = heatmap.id;
+  legacy.module = heatmap.module;
+  legacy.state = heatmap.state;
+  config.panels['heatmap'] = legacy;
+}
+delete config.panels['heatmap-old'];
+
 const builtInPlugins: any = {
   'app/plugins/datasource/graphite/module': graphitePlugin,
   'app/plugins/datasource/cloudwatch/module': cloudwatchPlugin,
@@ -112,8 +126,7 @@ const builtInPlugins: any = {
   'app/plugins/panel/dashlist/module': dashListPanel,
   'app/plugins/panel/alertlist/module': alertListPanel,
   'app/plugins/panel/annolist/module': annoListPanel,
-  'app/plugins/panel/heatmap/module': heatmapPanel,
+  'app/plugins/panel/heatmap/module': config.featureToggles.useLegacyHeatmapPanel ? heatmapPanelOLD : heatmapPanel,
-  'app/plugins/panel/heatmap-new/module': heatmapPanelNG,
   'app/plugins/panel/table/module': tablePanel,
   'app/plugins/panel/table-old/module': tableOldPanel,
   'app/plugins/panel/news/module': newsPanel,

public/app/plugins/panel/heatmap-new/plugin.json

@@ -1,18 +0,0 @@
-{
-  "type": "panel",
-  "name": "Heatmap (new)",
-  "id": "heatmap-new",
-  "state": "beta",
-
-  "info": {
-    "description": "This heatmap panel will replace the heatmap panel in 9.1",
-    "author": {
-      "name": "Grafana Labs",
-      "url": "https://grafana.com"
-    },
-    "logos": {
-      "small": "img/icn-heatmap-panel.svg",
-      "large": "img/icn-heatmap-panel.svg"
-    }
-  }
-}

public/app/plugins/panel/heatmap-old/README.md

@@ -1,4 +1,4 @@
-# Heatmap Panel (NEXT GEN) - Native Plugin
+# Heatmap Panel - Native Plugin
 
 The Heatmap panel allows you to view histograms over time and is **included** with Grafana.
 

public/app/plugins/panel/heatmap-old/heatmap_ctrl.ts

@@ -155,6 +155,9 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
     this.events.on(PanelEvents.editModeInitialized, this.onInitEditMode.bind(this));
 
     this.onCardColorChange = this.onCardColorChange.bind(this);
+
+    // Make sure we do not save the version so migration to react version is kicked off
+    delete this.panel.pluginVersion;
   }
 
   onInitEditMode() {

public/app/plugins/panel/heatmap-old/plugin.json

@@ -0,0 +1,22 @@
+{
+  "type": "panel",
+  "name": "Heatmap (legacy)",
+  "id": "heatmap-old",
+  "state": "deprecated",
+
+  "info": {
+    "description": "Legacy heatmap panel based on angular, d3, and flot",
+    "author": {
+      "name": "Grafana Labs",
+      "url": "https://grafana.com"
+    },
+    "logos": {
+      "small": "img/icn-heatmap-panel.svg",
+      "large": "img/icn-heatmap-panel.svg"
+    },
+    "links": [
+      { "name": "Brendan Gregg - Heatmaps", "url": "http://www.brendangregg.com/heatmaps.html" },
+      { "name": "Brendan Gregg - Latency Heatmaps", "url": " http://www.brendangregg.com/HeatMaps/latency.html" }
+    ]
+  }
+}

public/app/plugins/panel/heatmap/migrations.test.ts

@@ -47,7 +47,7 @@ describe('Heatmap Migrations', () => {
           },
           "color": Object {
             "exponent": 0.5,
-            "fill": "dark-orange",
+            "fill": "#b4ff00",
             "max": 100,
             "min": 5,
             "mode": "scheme",

public/app/plugins/panel/heatmap/migrations.ts

@@ -140,6 +140,7 @@ export function angularToReactHeatmap(angular: any): { fieldConfig: FieldConfigS
       break;
     }
   }
+  options.color.fill = color.cardColor;
   options.color.min = color.min;
   options.color.max = color.max;
 

public/app/plugins/panel/heatmap/models.cue

@@ -17,7 +17,7 @@ package grafanaschema
 import "github.com/grafana/thema"
 
 Panel: thema.#Lineage & {
-	name: "heatmap-new"
+	name: "heatmap"
 	seqs: [
 		{
 			schemas: [

public/app/plugins/panel/heatmap/plugin.json

@@ -12,10 +12,6 @@
     "logos": {
       "small": "img/icn-heatmap-panel.svg",
       "large": "img/icn-heatmap-panel.svg"
-    },
+    }
-    "links": [
-      { "name": "Brendan Gregg - Heatmaps", "url": "http://www.brendangregg.com/heatmaps.html" },
-      { "name": "Brendan Gregg - Latency Heatmaps", "url": " http://www.brendangregg.com/HeatMaps/latency.html" }
-    ]
   }
 }

public/app/plugins/panel/heatmap/suggestions.ts

@@ -25,7 +25,7 @@ export class HeatmapSuggestionsSupplier {
 
     builder.getListAppender<PanelOptions, {}>({
       name: '',
-      pluginId: 'heatmap-new',
+      pluginId: 'heatmap',
       options: {},
       fieldConfig: {
         defaults: {