Dashboard: Add suggestion box for Flame Graph (#70763)

Co-authored-by: Andrej Ocenas <mr.ocenas@gmail.com>

public/app/features/panel/state/getAllSuggestions.ts

@@ -20,6 +20,7 @@ export const panelsToCheckFirst = [
   'status-history',
   'logs',
   'candlestick',
+  'flamegraph',
 ];
 
 export async function getAllSuggestions(data?: PanelData, panel?: PanelModel): Promise<VisualizationSuggestion[]> {

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

@@ -1,5 +1,6 @@
 import { PanelPlugin } from '@grafana/data';
 
 import { FlameGraphPanel } from './FlameGraphPanel';
+import { FlameGraphSuggestionsSupplier } from './suggestions';
 
-export const plugin = new PanelPlugin(FlameGraphPanel);
+export const plugin = new PanelPlugin(FlameGraphPanel).setSuggestionsSupplier(new FlameGraphSuggestionsSupplier());

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

@@ -0,0 +1,37 @@
+import { VisualizationSuggestionsBuilder } from '@grafana/data';
+import { config } from '@grafana/runtime';
+import { SuggestionName } from 'app/types/suggestions';
+
+import { FlameGraphDataContainer as FlameGraphDataContainer } from './components/FlameGraph/dataTransform';
+import { FlameGraphDataContainer as FlameGraphDataContainerV2 } from './flamegraphV2/components/FlameGraph/dataTransform';
+
+export class FlameGraphSuggestionsSupplier {
+  getListWithDefaults(builder: VisualizationSuggestionsBuilder) {
+    return builder.getListAppender<{}, {}>({
+      name: SuggestionName.FlameGraph,
+      pluginId: 'flamegraph',
+    });
+  }
+
+  getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
+    if (!builder.data) {
+      return;
+    }
+
+    // Try to instantiate FlameGraphDataContainer (depending on the version), since the instantiation can fail due
+    // to the format of the data - meaning that a Flame Graph cannot be used to visualize those data.
+    // Without this check, a suggestion containing an error is shown to the user.
+    const dataFrame = builder.data.series[0];
+    try {
+      config.featureToggles.flameGraphV2
+        ? new FlameGraphDataContainerV2(dataFrame)
+        : new FlameGraphDataContainer(dataFrame);
+    } catch (err) {
+      return;
+    }
+
+    this.getListWithDefaults(builder).append({
+      name: SuggestionName.FlameGraph,
+    });
+  }
+}

public/app/types/suggestions.ts

@@ -27,4 +27,5 @@ export enum SuggestionName {
   TextPanel = 'Text',
   DashboardList = 'Dashboard list',
   Logs = 'Logs',
+  FlameGraph = 'Flame graph',
 }