Dashboard: Support template variables in Search tab for Tempo (#72867)

This commit is contained in:
Fabrizio 2023-08-24 13:06:46 +02:00 committed by GitHub
parent 7bcb3597fe
commit ed8ca02e0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 4 deletions

View File

@ -14,7 +14,8 @@ interface Props {
operators: string[]; operators: string[];
} }
const validationRegex = /^\d+(?:\.\d)?\d*(?:us|µs|ns|ms|s|m|h)$/; // Support template variables (e.g., `$dur`, `$v_1`) and durations (e.g., `300µs`, `1.2ms`)
const validationRegex = /^(\$\w+)|(\d+(?:\.\d)?\d*(?:us|µs|ns|ms|s|m|h))$/;
const getStyles = () => ({ const getStyles = () => ({
noBoxShadow: css` noBoxShadow: css`

View File

@ -1,6 +1,7 @@
import { render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event'; import userEvent from '@testing-library/user-event';
import React from 'react'; import React from 'react';
import { initTemplateSrv } from 'test/helpers/initTemplateSrv';
import { TraceqlSearchScope } from '../dataquery.gen'; import { TraceqlSearchScope } from '../dataquery.gen';
import { TempoDatasource } from '../datasource'; import { TempoDatasource } from '../datasource';
@ -39,6 +40,8 @@ jest.mock('../language_provider', () => {
}); });
describe('TraceQLSearch', () => { describe('TraceQLSearch', () => {
initTemplateSrv('key', []);
let user: ReturnType<typeof userEvent.setup>; let user: ReturnType<typeof userEvent.setup>;
const datasource: TempoDatasource = { const datasource: TempoDatasource = {

View File

@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { EditorRow } from '@grafana/experimental'; import { EditorRow } from '@grafana/experimental';
import { FetchError } from '@grafana/runtime'; import { FetchError, getTemplateSrv } from '@grafana/runtime';
import { Alert, HorizontalGroup, useStyles2 } from '@grafana/ui'; import { Alert, HorizontalGroup, useStyles2 } from '@grafana/ui';
import { createErrorNotification } from '../../../../core/copy/appNotification'; import { createErrorNotification } from '../../../../core/copy/appNotification';
@ -36,6 +36,8 @@ const TraceQLSearch = ({ datasource, query, onChange }: Props) => {
const [isTagsLoading, setIsTagsLoading] = useState(true); const [isTagsLoading, setIsTagsLoading] = useState(true);
const [traceQlQuery, setTraceQlQuery] = useState<string>(''); const [traceQlQuery, setTraceQlQuery] = useState<string>('');
const templateSrv = getTemplateSrv();
const updateFilter = useCallback( const updateFilter = useCallback(
(s: TraceqlFilter) => { (s: TraceqlFilter) => {
const copy = { ...query }; const copy = { ...query };
@ -166,7 +168,7 @@ const TraceQLSearch = ({ datasource, query, onChange }: Props) => {
</InlineSearchField> </InlineSearchField>
</div> </div>
<EditorRow> <EditorRow>
<RawQuery query={traceQlQuery} lang={{ grammar: traceqlGrammar, name: 'traceql' }} /> <RawQuery query={templateSrv.replace(traceQlQuery)} lang={{ grammar: traceqlGrammar, name: 'traceql' }} />
</EditorRow> </EditorRow>
<TempoQueryBuilderOptions onChange={onChange} query={query} /> <TempoQueryBuilderOptions onChange={onChange} query={query} />
</div> </div>

View File

@ -255,7 +255,11 @@ export class TempoDatasource extends DataSourceWithBackend<TempoQuery, TempoJson
} }
if (targets.traceqlSearch?.length) { if (targets.traceqlSearch?.length) {
try { try {
const queryValue = generateQueryFromFilters(targets.traceqlSearch[0].filters); const queryValueFromFilters = generateQueryFromFilters(targets.traceqlSearch[0].filters);
// We want to support template variables also in Search for consistency with other data sources
const queryValue = this.templateSrv.replace(queryValueFromFilters, options.scopedVars);
reportInteraction('grafana_traces_traceql_search_queried', { reportInteraction('grafana_traces_traceql_search_queried', {
datasourceType: 'tempo', datasourceType: 'tempo',
app: options.app ?? '', app: options.app ?? '',