Traces: Add traces panel suggestion (#83089)

* Add traces panel suggestion

* Render suggestion

* Update styling

* Update styling
This commit is contained in:
Joey 2024-02-21 13:49:41 +00:00 committed by GitHub
parent 9bbb7f67e0
commit 2258e6bd16
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 79 additions and 56 deletions

View File

@ -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"],

View File

@ -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": [

View File

@ -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,
},
}),
};
};

View File

@ -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;
`,

View File

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

View File

@ -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());

View File

@ -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,
});
}
}
}

View File

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