From 2258e6bd16b830c12af7fc830a253b02d171418f Mon Sep 17 00:00:00 2001 From: Joey <90795735+joey-grafana@users.noreply.github.com> Date: Wed, 21 Feb 2024 13:49:41 +0000 Subject: [PATCH] Traces: Add traces panel suggestion (#83089) * Add traces panel suggestion * Render suggestion * Update styling * Update styling --- .betterer.results | 10 +--- .betterer.results.json | 8 +-- .../Actions/TracePageActions.tsx | 31 +++++------ .../TracePageHeader/TracePageHeader.tsx | 52 ++++++++++--------- .../features/panel/state/getAllSuggestions.ts | 1 + public/app/plugins/panel/traces/module.tsx | 3 +- .../app/plugins/panel/traces/suggestions.ts | 29 +++++++++++ public/app/types/suggestions.ts | 1 + 8 files changed, 79 insertions(+), 56 deletions(-) create mode 100644 public/app/plugins/panel/traces/suggestions.ts diff --git a/.betterer.results b/.betterer.results index 8666780475f..bc20a910898 100644 --- a/.betterer.results +++ b/.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"], diff --git a/.betterer.results.json b/.betterer.results.json index 599a975db18..d5db475d6b1 100644 --- a/.betterer.results.json +++ b/.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": [ diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/Actions/TracePageActions.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/Actions/TracePageActions.tsx index d71b4977ce0..5595caf1e9a 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/Actions/TracePageActions.tsx +++ b/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, + }, + }), }; }; diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx index dc310cc4bca..a39672f9652 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx +++ b/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; `, diff --git a/public/app/features/panel/state/getAllSuggestions.ts b/public/app/features/panel/state/getAllSuggestions.ts index a9d8efdb85f..ee092d3b586 100644 --- a/public/app/features/panel/state/getAllSuggestions.ts +++ b/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 { diff --git a/public/app/plugins/panel/traces/module.tsx b/public/app/plugins/panel/traces/module.tsx index 06b2f4fee43..19fae657d5f 100644 --- a/public/app/plugins/panel/traces/module.tsx +++ b/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()); diff --git a/public/app/plugins/panel/traces/suggestions.ts b/public/app/plugins/panel/traces/suggestions.ts new file mode 100644 index 00000000000..bda2e463927 --- /dev/null +++ b/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, + }); + } + } +} diff --git a/public/app/types/suggestions.ts b/public/app/types/suggestions.ts index 95a10a419fc..5d6c813d349 100644 --- a/public/app/types/suggestions.ts +++ b/public/app/types/suggestions.ts @@ -28,4 +28,5 @@ export enum SuggestionName { DashboardList = 'Dashboard list', Logs = 'Logs', FlameGraph = 'Flame graph', + Trace = 'Trace', }