Traces: Add traces panel suggestion (#83089)

* Add traces panel suggestion

* Render suggestion

* Update styling

* Update styling

Author: joey-grafana

.betterer.results

@@ -3339,10 +3339,6 @@ exports[`better eslint`] = {
     "public/app/features/explore/TraceView/components/TracePageHeader/Actions/ActionButton.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
-    "public/app/features/explore/TraceView/components/TracePageHeader/Actions/TracePageActions.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/NextPrevResult.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],
@@ -3402,11 +3398,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "5"],
       [0, 0, 0, "Styles should be written using objects.", "6"],
       [0, 0, 0, "Styles should be written using objects.", "7"],
-      [0, 0, 0, "Styles should be written using objects.", "8"],
-      [0, 0, 0, "Styles should be written using objects.", "9"],
-      [0, 0, 0, "Styles should be written using objects.", "10"],
-      [0, 0, 0, "Styles should be written using objects.", "11"],
-      [0, 0, 0, "Styles should be written using objects.", "12"]
+      [0, 0, 0, "Styles should be written using objects.", "8"]
     ],
     "public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],

.betterer.results.json

@@ -3838,12 +3838,6 @@
         "count": 1
       }
     ],
-    "/public/app/features/explore/TraceView/components/TracePageHeader/Actions/TracePageActions.tsx": [
-      {
-        "message": "Styles should be written using objects.",
-        "count": 2
-      }
-    ],
     "/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/NextPrevResult.tsx": [
       {
         "message": "Styles should be written using objects.",
@@ -3895,7 +3889,7 @@
     "/public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx": [
       {
         "message": "Styles should be written using objects.",
-        "count": 13
+        "count": 9
       }
     ],
     "/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.tsx": [

public/app/features/explore/TraceView/components/TracePageHeader/Actions/TracePageActions.tsx

@@ -12,21 +12,22 @@ import ActionButton from './ActionButton';
 
 export const getStyles = (theme: GrafanaTheme2) => {
   return {
-    TracePageActions: css`
-      label: TracePageActions;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 4px;
-    `,
-    feedback: css`
-      margin: 6px;
-      color: ${theme.colors.text.secondary};
-      font-size: ${theme.typography.bodySmall.fontSize};
-      &:hover {
-        color: ${theme.colors.text.link};
-      }
-    `,
+    TracePageActions: css({
+      label: 'TracePageActions',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '4px',
+      marginBottom: '10px',
+    }),
+    feedback: css({
+      margin: '6px 6px 6px 0',
+      color: theme.colors.text.secondary,
+      fontSize: theme.typography.bodySmall.fontSize,
+      '&:hover': {
+        color: theme.colors.text.link,
+      },
+    }),
   };
 };
 

public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx

@@ -202,30 +202,34 @@ const getNewStyles = (theme: GrafanaTheme2) => {
         color: unset;
       }
     `,
-    header: css`
-      label: TracePageHeader;
-      background-color: ${theme.colors.background.primary};
-      padding: 0.5em 0 0 0;
-      position: sticky;
-      top: 0;
-      z-index: 5;
-    `,
-    titleRow: css`
-      align-items: flex-start;
-      display: flex;
-      padding: 0 8px;
-    `,
-    title: css`
-      color: inherit;
-      flex: 1;
-      font-size: 1.7em;
-      line-height: 1em;
-    `,
-    subtitle: css`
-      flex: 1;
-      line-height: 1em;
-      margin: -0.5em 0.5em 0.75em 0.5em;
-    `,
+    header: css({
+      label: 'TracePageHeader',
+      backgroundColor: theme.colors.background.primary,
+      padding: '0.5em 0 0 0',
+      position: 'sticky',
+      top: 0,
+      zIndex: 5,
+      textAlign: 'left',
+    }),
+    titleRow: css({
+      alignItems: 'flex-start',
+      display: 'flex',
+      padding: '0 8px',
+      flexWrap: 'wrap',
+    }),
+    title: css({
+      color: 'inherit',
+      flex: 1,
+      fontSize: '1.7em',
+      lineHeight: '1em',
+      marginBottom: 0,
+      minWidth: '200px',
+    }),
+    subtitle: css({
+      flex: 1,
+      lineHeight: '1em',
+      margin: '-0.5em 0.5em 0.75em 0.5em',
+    }),
     tag: css`
       margin: 0 0.5em 0 0;
     `,

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

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

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

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

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

@@ -0,0 +1,29 @@
+import { VisualizationSuggestionsBuilder, VisualizationSuggestionScore } from '@grafana/data';
+import { SuggestionName } from 'app/types/suggestions';
+
+export class TracesSuggestionsSupplier {
+  getListWithDefaults(builder: VisualizationSuggestionsBuilder) {
+    return builder.getListAppender<{}, {}>({
+      name: SuggestionName.Trace,
+      pluginId: 'traces',
+    });
+  }
+
+  getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
+    if (!builder.data) {
+      return;
+    }
+
+    const dataFrame = builder.data.series[0];
+    if (!dataFrame) {
+      return;
+    }
+
+    if (builder.data.series[0].meta?.preferredVisualisationType === 'trace') {
+      this.getListWithDefaults(builder).append({
+        name: SuggestionName.Trace,
+        score: VisualizationSuggestionScore.Best,
+      });
+    }
+  }
+}

public/app/types/suggestions.ts

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