Plugins: Introduce new Flame graph panel (#56376)

* Flamegraph

* Updated flame graph width/height values

* Fix top table rendering issue

* Add feature toggle for flamegraph in explore

* Update tests

* Hide flamegraph from dash panel viz list if feature toggle not enabled

* Show table if no flameGraphFrames

* Add flame graph to testdata ds

* Minor improvement

pkg/api/frontendsettings.go

@@ -9,6 +9,7 @@ import (
 	"github.com/grafana/grafana/pkg/plugins"
 	"github.com/grafana/grafana/pkg/services/accesscontrol"
 	"github.com/grafana/grafana/pkg/services/datasources"
+	"github.com/grafana/grafana/pkg/services/featuremgmt"
 	"github.com/grafana/grafana/pkg/services/licensing"
 	"github.com/grafana/grafana/pkg/services/pluginsettings"
 	"github.com/grafana/grafana/pkg/services/secrets/kvstore"
@@ -62,6 +63,11 @@ func (hs *HTTPServer) getFrontendSettingsMap(c *models.ReqContext) (map[string]i
 			continue
 		}
 
+		hideFromList := panel.HideFromList
+		if panel.ID == "flamegraph" {
+			hideFromList = !hs.Features.IsEnabled(featuremgmt.FlagFlameGraph)
+		}
+
 		panels[panel.ID] = plugins.PanelDTO{
 			ID:            panel.ID,
 			Name:          panel.Name,
@@ -69,7 +75,7 @@ func (hs *HTTPServer) getFrontendSettingsMap(c *models.ReqContext) (map[string]i
 			Module:        panel.Module,
 			BaseURL:       panel.BaseURL,
 			SkipDataQuery: panel.SkipDataQuery,
-			HideFromList:  panel.HideFromList,
+			HideFromList:  hideFromList,
 			ReleaseState:  string(panel.State),
 			Signature:     string(panel.Signature),
 			Sort:          getPanelSort(panel.ID),

pkg/plugins/manager/manager_integration_test.go

@@ -164,6 +164,7 @@ func verifyCorePluginCatalogue(t *testing.T, ctx context.Context, ps *store.Serv
 		"candlestick":    {},
 		"news":           {},
 		"nodeGraph":      {},
+		"flamegraph":     {},
 		"traces":         {},
 		"piechart":       {},
 		"stat":           {},

pkg/plugins/pfs/corelist/loadlist_gen.go

@@ -65,6 +65,7 @@ func coreTreeList(lib thema.Library) pfs.TreeList {
 		makeTreeOrPanic("public/app/plugins/panel/bargauge", "bargauge", lib),
 		makeTreeOrPanic("public/app/plugins/panel/dashlist", "dashlist", lib),
 		makeTreeOrPanic("public/app/plugins/panel/debug", "debug", lib),
+		makeTreeOrPanic("public/app/plugins/panel/flamegraph", "flamegraph", lib),
 		makeTreeOrPanic("public/app/plugins/panel/gauge", "gauge", lib),
 		makeTreeOrPanic("public/app/plugins/panel/geomap", "geomap", lib),
 		makeTreeOrPanic("public/app/plugins/panel/gettingstarted", "gettingstarted", lib),

pkg/services/featuremgmt/registry.go

@@ -289,6 +289,11 @@ var (
 			Description: "Show the TraceQL editor in the explore page",
 			State:       FeatureStateAlpha,
 		},
+		{
+			Name:        "flameGraph",
+			Description: "Show the flame graph",
+			State:       FeatureStateAlpha,
+		},
 		{
 			Name:         "redshiftAsyncQueryDataSupport",
 			Description:  "Enable async query data support for Redshift",

pkg/services/featuremgmt/toggles_gen.go

@@ -215,6 +215,10 @@ const (
 	// Show the TraceQL editor in the explore page
 	FlagTraceqlEditor = "traceqlEditor"
 
+	// FlagFlameGraph
+	// Show the flame graph
+	FlagFlameGraph = "flameGraph"
+
 	// FlagRedshiftAsyncQueryDataSupport
 	// Enable async query data support for Redshift
 	FlagRedshiftAsyncQueryDataSupport = "redshiftAsyncQueryDataSupport"

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

@@ -427,6 +427,42 @@
     "signatureType": "",
     "signatureOrg": ""
   },
+  {
+    "name": "Flame Graph",
+    "type": "panel",
+    "id": "flamegraph",
+    "enabled": true,
+    "pinned": false,
+    "info": {
+      "author": {
+        "name": "Grafana Labs",
+        "url": "https://grafana.com"
+      },
+      "description": "",
+      "links": null,
+      "logos": {
+        "small": "public/img/icn-panel.svg",
+        "large": "public/img/icn-panel.svg"
+      },
+      "build": {},
+      "screenshots": null,
+      "version": "",
+      "updated": ""
+    },
+    "dependencies": {
+      "grafanaDependency": "",
+      "grafanaVersion": "*",
+      "plugins": []
+    },
+    "latestVersion": "",
+    "hasUpdate": false,
+    "defaultNavUrl": "/plugins/flamegraph/",
+    "category": "",
+    "state": "beta",
+    "signature": "internal",
+    "signatureType": "",
+    "signatureOrg": ""
+  },
   {
     "name": "Gauge",
     "type": "panel",
@@ -1702,4 +1738,4 @@
     "signatureType": "",
     "signatureOrg": ""
   }
-]
+]

pkg/tsdb/testdatasource/scenarios.go

@@ -39,6 +39,7 @@ const (
 	serverError500Query               queryType = "server_error_500"
 	logsQuery                         queryType = "logs"
 	nodeGraphQuery                    queryType = "node_graph"
+	flameGraphQuery                   queryType = "flame_graph"
 	rawFrameQuery                     queryType = "raw_frame"
 	csvFileQueryType                  queryType = "csv_file"
 	csvContentQueryType               queryType = "csv_content"
@@ -195,6 +196,11 @@ Timestamps will line up evenly on timeStepSeconds (For example, 60 seconds means
 		Name: "Node Graph",
 	})
 
+	s.registerScenario(&Scenario{
+		ID:   string(flameGraphQuery),
+		Name: "Flame Graph",
+	})
+
 	s.registerScenario(&Scenario{
 		ID:   string(rawFrameQuery),
 		Name: "Raw Frames",