Skip to content

Commit

Permalink
Fix query generation for link to explore and add to investigations. A…
Browse files Browse the repository at this point in the history
…dd step to links
  • Loading branch information
adrapereira committed Feb 14, 2025
1 parent 63171eb commit 9c509bd
Show file tree
Hide file tree
Showing 9 changed files with 158 additions and 102 deletions.
4 changes: 2 additions & 2 deletions src/components/Explore/TracesByService/MiniREDPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { EmptyStateScene } from 'components/states/EmptyState/EmptyStateScene';
import { LoadingStateScene } from 'components/states/LoadingState/LoadingStateScene';
import { SkeletonComponent } from '../ByFrameRepeater';
import { barsPanelConfig } from '../panels/barsPanel';
import { rateByWithStatus } from '../queries/rateByWithStatus';
import { metricByWithStatus } from '../queries/generateMetricsQuery';
import { StepQueryRunner } from '../queries/StepQueryRunner';
import { RadioButtonList, useStyles2 } from '@grafana/ui';
import { css } from '@emotion/css';
Expand Down Expand Up @@ -87,7 +87,7 @@ export class MiniREDPanel extends SceneObjectBase<MiniREDPanelState> {
$data: new StepQueryRunner({
maxDataPoints: this.state.metric === 'duration' ? 24 : 64,
datasource: explorationDS,
queries: [this.state.metric === 'duration' ? buildHistogramQuery() : rateByWithStatus(this.state.metric)],
queries: [this.state.metric === 'duration' ? buildHistogramQuery() : metricByWithStatus(this.state.metric)],
}),
transformations: [...exemplarsTransformations(traceExploration.state.locationService)],
}),
Expand Down
4 changes: 2 additions & 2 deletions src/components/Explore/TracesByService/REDPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { EmptyStateScene } from 'components/states/EmptyState/EmptyStateScene';
import { LoadingStateScene } from 'components/states/LoadingState/LoadingStateScene';
import { SkeletonComponent } from '../ByFrameRepeater';
import { barsPanelConfig } from '../panels/barsPanel';
import { rateByWithStatus } from '../queries/rateByWithStatus';
import { metricByWithStatus } from '../queries/generateMetricsQuery';
import { StepQueryRunner } from '../queries/StepQueryRunner';
import { css } from '@emotion/css';
import { RadioButtonList, useStyles2 } from '@grafana/ui';
Expand Down Expand Up @@ -179,7 +179,7 @@ export class REDPanel extends SceneObjectBase<RateMetricsPanelState> {
$data: new StepQueryRunner({
maxDataPoints: this.isDuration() ? 24 : 64,
datasource: explorationDS,
queries: [this.isDuration() ? buildHistogramQuery() : rateByWithStatus(metric)],
queries: [this.isDuration() ? buildHistogramQuery() : metricByWithStatus(metric)],
}),
transformations: [...exemplarsTransformations(traceExploration.state.locationService)],
}),
Expand Down
4 changes: 0 additions & 4 deletions src/components/Explore/actions/AddToInvestigationButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,6 @@ import { DataQuery, DataSourceRef } from '@grafana/schema';
import Logo from '../../../../src/img/logo.svg';
import { VAR_DATASOURCE_EXPR } from 'utils/shared';

export const investigationPluginId = 'grafana-explorations-app';
export const extensionPointId = 'grafana-exploretraces-app/exploration/v1';
export const addToInvestigationButtonLabel = 'add panel to investigation';

export interface AddToInvestigationButtonState extends SceneObjectState {
dsUid?: string;
query?: string;
Expand Down
19 changes: 13 additions & 6 deletions src/components/Explore/layouts/attributeBreakdown.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ import {
VizPanelState,
} from '@grafana/scenes';
import { LayoutSwitcher } from '../LayoutSwitcher';
import { explorationDS, GRID_TEMPLATE_COLUMNS, MetricFunction, VAR_FILTERS_EXPR } from '../../../utils/shared';
import { explorationDS, GRID_TEMPLATE_COLUMNS, MetricFunction } from '../../../utils/shared';
import { ByFrameRepeater } from '../ByFrameRepeater';
import { formatLabelValue, getLabelValue, getTraceExplorationScene } from '../../../utils/utils';
import { map, Observable } from 'rxjs';
import { DataFrame, PanelData, reduceField, ReducerID } from '@grafana/data';
import { rateByWithStatus } from '../queries/rateByWithStatus';
import { generateMetricsQuery, metricByWithStatus } from '../queries/generateMetricsQuery';
import { barsPanelConfig } from '../panels/barsPanel';
import { linesPanelConfig } from '../panels/linesPanel';
import { StepQueryRunner } from '../queries/StepQueryRunner';
Expand All @@ -31,7 +31,7 @@ export function buildNormalLayout(
) {
const traceExploration = getTraceExplorationScene(scene);
const metric = traceExploration.getMetricVariable().getValue() as MetricFunction;
const query = rateByWithStatus(metric, variable.getValueText());
const query = metricByWithStatus(metric, variable.getValueText());

return new LayoutSwitcher({
$behaviors: [syncYAxis()],
Expand Down Expand Up @@ -98,11 +98,18 @@ export function buildNormalLayout(
export function getLayoutChild(
getTitle: (df: DataFrame, labelName: string) => string,
variable: CustomVariable,
metric: string,
metric: MetricFunction,
actionsFn: (df: DataFrame) => VizPanelState['headerActions']
) {
) {
return (data: PanelData, frame: DataFrame) => {
const query = `{${sceneGraph.interpolate(variable, `${VAR_FILTERS_EXPR} && ${variable.getValueText()}=${formatLabelValue(getLabelValue(frame))}`)}}`;
const query = sceneGraph.interpolate(
variable,
generateMetricsQuery({
metric,
extraFilters: `${variable.getValueText()}=${formatLabelValue(getLabelValue(frame))}`,
groupByStatus: true,
})
);

const panel = (metric === 'duration' ? linesPanelConfig().setUnit('s') : barsPanelConfig())
.setTitle(getTitle(frame, variable.getValueText()))
Expand Down
39 changes: 25 additions & 14 deletions src/components/Explore/panels/PanelMenu.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
import { PanelMenuItem, toURLRange, urlUtil } from "@grafana/data";
import { SceneObjectBase, VizPanelMenu, SceneObject, SceneComponentProps, sceneGraph, SceneObjectState } from "@grafana/scenes";
import React from "react";
import { AddToInvestigationButton } from "../actions/AddToInvestigationButton";
import { config, getPluginLinkExtensions } from "@grafana/runtime";
import { reportAppInteraction, USER_EVENTS_PAGES, USER_EVENTS_ACTIONS } from "utils/analytics";
import { getDataSource, getTraceExplorationScene } from "utils/utils";
import { PanelMenuItem, toURLRange, urlUtil } from '@grafana/data';
import {
SceneObjectBase,
VizPanelMenu,
SceneObject,
SceneComponentProps,
sceneGraph,
SceneObjectState,
} from '@grafana/scenes';
import React from 'react';
import { AddToInvestigationButton } from '../actions/AddToInvestigationButton';
import { config, getPluginLinkExtensions } from '@grafana/runtime';
import { reportAppInteraction, USER_EVENTS_PAGES, USER_EVENTS_ACTIONS } from 'utils/analytics';
import { getCurrentStep, getDataSource, getTraceExplorationScene } from 'utils/utils';

const ADD_TO_INVESTIGATION_MENU_TEXT = 'Add to investigation';
const extensionPointId = 'grafana-exploretraces-app/exploration/v1';
Expand Down Expand Up @@ -44,7 +51,7 @@ export class PanelMenu extends SceneObjectBase<PanelMenuState> implements VizPan
const addToInvestigationButton = new AddToInvestigationButton({
query: this.state.query,
labelValue: this.state.labelValue,
})
});
this._subs.add(
addToInvestigationButton?.subscribeToState(() => {
subscribeToAddToExploration(this);
Expand All @@ -63,6 +70,7 @@ export class PanelMenu extends SceneObjectBase<PanelMenuState> implements VizPan
this.state.body.addItem(item);
}
}

setItems(items: PanelMenuItem[]): void {
if (this.state.body) {
this.state.body.setItems(items);
Expand All @@ -73,9 +81,7 @@ export class PanelMenu extends SceneObjectBase<PanelMenuState> implements VizPan
const { body } = model.useState();

if (body) {
return (
<body.Component model={body} />
);
return <body.Component model={body} />;
}

return <></>;
Expand All @@ -86,10 +92,12 @@ const getExploreHref = (model: SceneObject<PanelMenuState>) => {
const traceExploration = getTraceExplorationScene(model);
const datasource = getDataSource(traceExploration);
const timeRange = sceneGraph.getTimeRange(model).state.value;
const step = getCurrentStep(model);

const exploreState = JSON.stringify({
['traces-explore']: {
range: toURLRange(timeRange.raw),
queries: [{ refId: 'A', datasource, query: model.state.query}],
queries: [{ refId: 'A', datasource, query: model.state.query, step }],
},
});
const subUrl = config.appSubUrl ?? '';
Expand All @@ -99,7 +107,7 @@ const getExploreHref = (model: SceneObject<PanelMenuState>) => {

const onExploreClick = () => {
reportAppInteraction(USER_EVENTS_PAGES.analyse_traces, USER_EVENTS_ACTIONS.analyse_traces.open_in_explore_clicked);
}
};

const getInvestigationLink = (addToExplorations: AddToInvestigationButton) => {
const links = getPluginLinkExtensions({
Expand All @@ -116,7 +124,10 @@ const onAddToInvestigationClick = (event: React.MouseEvent, addToInvestigationBu
link.onClick(event);
}

reportAppInteraction(USER_EVENTS_PAGES.analyse_traces, USER_EVENTS_ACTIONS.analyse_traces.add_to_investigation_clicked);
reportAppInteraction(
USER_EVENTS_PAGES.analyse_traces,
USER_EVENTS_ACTIONS.analyse_traces.add_to_investigation_clicked
);
};

function subscribeToAddToExploration(menu: PanelMenu) {
Expand Down
62 changes: 62 additions & 0 deletions src/components/Explore/queries/generateMetricsQuery.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { ALL, MetricFunction, VAR_FILTERS_EXPR } from '../../../utils/shared';

interface QueryOptions {
metric: MetricFunction;
extraFilters?: string;
groupByKey?: string;
groupByStatus?: boolean;
}

export function generateMetricsQuery({ metric, groupByKey, extraFilters, groupByStatus }: QueryOptions) {
// Generate span set filters
let filters = `${VAR_FILTERS_EXPR}`;

if (metric === 'errors') {
filters += ' && status=error';
}

if (extraFilters) {
filters += ` && ${extraFilters}`;
}

if (groupByKey && groupByKey !== ALL) {
filters += ` && ${groupByKey} != nil`;
}

// Generate metrics function
let metricFn = 'rate()';
switch (metric) {
case 'errors':
metricFn = 'rate()';
break;
case 'duration':
metricFn = 'quantile_over_time(duration, 0.9)';
break;
}

// Generate group by section
let groupByAttrs = [];
if (groupByKey && groupByKey !== ALL) {
groupByAttrs.push(groupByKey);
}

if (metric !== 'duration' && groupByStatus) {
groupByAttrs.push('status');
}

const groupBy = groupByAttrs.length ? `by(${groupByAttrs.join(', ')})` : '';

return `{${filters}} | ${metricFn} ${groupBy}`;
}

export function metricByWithStatus(metric: MetricFunction, tagKey?: string) {
return {
refId: 'A',
query: generateMetricsQuery({ metric, groupByKey: tagKey, groupByStatus: true }),
queryType: 'traceql',
tableType: 'spans',
limit: 100,
spss: 10,
filters: [],
};
}
90 changes: 45 additions & 45 deletions src/components/Explore/queries/queries.test.ts
Original file line number Diff line number Diff line change
@@ -1,90 +1,90 @@
import { comparisonQuery } from "./comparisonQuery";
import { buildHistogramQuery } from "./histogram";
import { rateByWithStatus } from "./rateByWithStatus";
import { comparisonQuery } from './comparisonQuery';
import { buildHistogramQuery } from './histogram';
import { metricByWithStatus } from './generateMetricsQuery';

describe('comparisonQuery', () => {
it('should return correct query for no selection', () => {
const query = comparisonQuery();
expect(query).toBe("{}");
expect(query).toBe('{}');
});
it('should return correct query for a selection', () => {
const query = comparisonQuery({
type: "manual",
type: 'manual',
raw: {
x: {
from: 1728987790508.9485,
to: 1728988005770.9075
to: 1728988005770.9075,
},
y: {
from: 8.29360465116279,
to: 21.85174418604651
}
to: 21.85174418604651,
},
},
timeRange: {
from: 1728987791,
to: 1728988006
to: 1728988006,
},
duration: {
from: "0ms",
to: "2s"
}
from: '0ms',
to: '2s',
},
});
expect(query).toBe("{duration >= 0ms && duration <= 2s}, 10, 1728987791000000000, 1728988006000000000");
expect(query).toBe('{duration >= 0ms && duration <= 2s}, 10, 1728987791000000000, 1728988006000000000');
});
});

describe('buildHistogramQuery', () => {
it('should return correct query', () => {
const query = buildHistogramQuery();
expect(query).toEqual({
filters: [],
limit: 1000,
query: "{${filters}} | histogram_over_time(duration)",
queryType: "traceql",
refId: "A",
spss: 10,
tableType: "spans"
filters: [],
limit: 1000,
query: '{${filters}} | histogram_over_time(duration)',
queryType: 'traceql',
refId: 'A',
spss: 10,
tableType: 'spans',
});
});
});

describe('rateByWithStatus', () => {
describe('metricByWithStatus', () => {
it('should return correct query for no tag', () => {
const query = rateByWithStatus('errors');
const query = metricByWithStatus('errors');
expect(query).toEqual({
filters: [],
limit: 100,
query: "{${filters} && status=error} | rate() ",
queryType: "traceql",
refId: "A",
spss: 10,
tableType: "spans"
filters: [],
limit: 100,
query: '{${filters} && status=error} | rate() by(status)',
queryType: 'traceql',
refId: 'A',
spss: 10,
tableType: 'spans',
});
});

it('should return correct query for errors', () => {
const query = rateByWithStatus('errors', 'service');
const query = metricByWithStatus('errors', 'service');
expect(query).toEqual({
filters: [],
limit: 100,
query: "{${filters} && status=error} | rate() by(service, status)",
queryType: "traceql",
refId: "A",
spss: 10,
tableType: "spans"
filters: [],
limit: 100,
query: '{${filters} && status=error && service != nil} | rate() by(service, status)',
queryType: 'traceql',
refId: 'A',
spss: 10,
tableType: 'spans',
});
});

it('should return correct query for duration', () => {
const query = rateByWithStatus('duration', 'service');
const query = metricByWithStatus('duration', 'service');
expect(query).toEqual({
filters: [],
limit: 100,
query: "{${filters}} | quantile_over_time(duration, 0.9) by(service)",
queryType: "traceql",
refId: "A",
spss: 10,
tableType: "spans"
filters: [],
limit: 100,
query: '{${filters} && service != nil} | quantile_over_time(duration, 0.9) by(service)',
queryType: 'traceql',
refId: 'A',
spss: 10,
tableType: 'spans',
});
});
});
Loading

0 comments on commit 9c509bd

Please sign in to comment.