Tracing: Add node graph panel suggestion (#83311)

* Add node graph panel suggestion

* Update logic

* Add comment

* Check for correct fields

* Simplify logic

* Also check for viz type

* Remove extra logic on boolean

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

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

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

@@ -2,41 +2,44 @@ import { PanelPlugin } from '@grafana/data';
 
 import { NodeGraphPanel } from './NodeGraphPanel';
 import { ArcOptionsEditor } from './editor/ArcOptionsEditor';
+import { NodeGraphSuggestionsSupplier } from './suggestions';
 import { NodeGraphOptions } from './types';
 
-export const plugin = new PanelPlugin<NodeGraphOptions>(NodeGraphPanel).setPanelOptions((builder, context) => {
-  builder.addNestedOptions({
-    category: ['Nodes'],
-    path: 'nodes',
-    build: (builder) => {
-      builder.addUnitPicker({
-        name: 'Main stat unit',
-        path: 'mainStatUnit',
-      });
-      builder.addUnitPicker({
-        name: 'Secondary stat unit',
-        path: 'secondaryStatUnit',
-      });
-      builder.addCustomEditor({
-        name: 'Arc sections',
-        path: 'arcs',
-        id: 'arcs',
-        editor: ArcOptionsEditor,
-      });
-    },
-  });
-  builder.addNestedOptions({
-    category: ['Edges'],
-    path: 'edges',
-    build: (builder) => {
-      builder.addUnitPicker({
-        name: 'Main stat unit',
-        path: 'mainStatUnit',
-      });
-      builder.addUnitPicker({
-        name: 'Secondary stat unit',
-        path: 'secondaryStatUnit',
-      });
-    },
-  });
-});
+export const plugin = new PanelPlugin<NodeGraphOptions>(NodeGraphPanel)
+  .setPanelOptions((builder, context) => {
+    builder.addNestedOptions({
+      category: ['Nodes'],
+      path: 'nodes',
+      build: (builder) => {
+        builder.addUnitPicker({
+          name: 'Main stat unit',
+          path: 'mainStatUnit',
+        });
+        builder.addUnitPicker({
+          name: 'Secondary stat unit',
+          path: 'secondaryStatUnit',
+        });
+        builder.addCustomEditor({
+          name: 'Arc sections',
+          path: 'arcs',
+          id: 'arcs',
+          editor: ArcOptionsEditor,
+        });
+      },
+    });
+    builder.addNestedOptions({
+      category: ['Edges'],
+      path: 'edges',
+      build: (builder) => {
+        builder.addUnitPicker({
+          name: 'Main stat unit',
+          path: 'mainStatUnit',
+        });
+        builder.addUnitPicker({
+          name: 'Secondary stat unit',
+          path: 'secondaryStatUnit',
+        });
+      },
+    });
+  })
+  .setSuggestionsSupplier(new NodeGraphSuggestionsSupplier());

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

@@ -0,0 +1,71 @@
+import { DataFrame, FieldType, VisualizationSuggestionsBuilder, VisualizationSuggestionScore } from '@grafana/data';
+import { SuggestionName } from 'app/types/suggestions';
+
+export class NodeGraphSuggestionsSupplier {
+  getListWithDefaults(builder: VisualizationSuggestionsBuilder) {
+    return builder.getListAppender<{}, {}>({
+      name: SuggestionName.NodeGraph,
+      pluginId: 'nodeGraph',
+    });
+  }
+
+  hasCorrectFields(frames: DataFrame[]): boolean {
+    let hasNodesFrame = false;
+    let hasEdgesFrame = false;
+
+    const nodeFields: Array<[string, FieldType]> = [
+      ['id', FieldType.string],
+      ['title', FieldType.string],
+      ['mainstat', FieldType.number],
+    ];
+    const edgeFields: Array<[string, FieldType]> = [
+      ['id', FieldType.string],
+      ['source', FieldType.string],
+      ['target', FieldType.string],
+    ];
+
+    for (const frame of frames) {
+      if (this.checkFields(nodeFields, frame)) {
+        hasNodesFrame = true;
+      }
+      if (this.checkFields(edgeFields, frame)) {
+        hasEdgesFrame = true;
+      }
+    }
+
+    return hasNodesFrame && hasEdgesFrame;
+  }
+
+  checkFields(fields: Array<[string, FieldType]>, frame: DataFrame): boolean {
+    let hasCorrectFields = true;
+
+    for (const field of fields) {
+      const [name, type] = field;
+      const frameField = frame.fields.find((f) => f.name === name);
+      if (!frameField || type !== frameField.type) {
+        hasCorrectFields = false;
+        break;
+      }
+    }
+
+    return hasCorrectFields;
+  }
+
+  getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
+    if (!builder.data) {
+      return;
+    }
+
+    const hasCorrectFields = this.hasCorrectFields(builder.data.series);
+    const nodeGraphFrames = builder.data.series.filter(
+      (df) => df.meta && df.meta.preferredVisualisationType === 'nodeGraph'
+    );
+
+    if (hasCorrectFields || nodeGraphFrames.length === 2) {
+      this.getListWithDefaults(builder).append({
+        name: SuggestionName.NodeGraph,
+        score: VisualizationSuggestionScore.Best,
+      });
+    }
+  }
+}

public/app/types/suggestions.ts

@@ -29,4 +29,5 @@ export enum SuggestionName {
   Logs = 'Logs',
   FlameGraph = 'Flame graph',
   Trace = 'Trace',
+  NodeGraph = 'Node graph',
 }