From 950f3571759fb8d6303a1a9d4f6e2150584f20eb Mon Sep 17 00:00:00 2001 From: Andre Pereira Date: Mon, 2 Jan 2023 14:23:50 +0000 Subject: [PATCH] Tempo: TraceQL editor bug fixes (#60414) * Set width of common columns between trace and span rows * Better syntax highlighting for non string constants * Apply variables to traceql query * Fix test --- .../datasource/tempo/datasource.test.ts | 11 +++- .../plugins/datasource/tempo/datasource.ts | 3 +- .../tempo/resultTransformer.test.ts | 14 ++--- .../datasource/tempo/resultTransformer.ts | 52 ++++++++++++++++--- .../datasource/tempo/traceql/traceql.ts | 6 ++- 5 files changed, 66 insertions(+), 20 deletions(-) diff --git a/public/app/plugins/datasource/tempo/datasource.test.ts b/public/app/plugins/datasource/tempo/datasource.test.ts index 49fd3e93362..48ce58b2cf2 100644 --- a/public/app/plugins/datasource/tempo/datasource.test.ts +++ b/public/app/plugins/datasource/tempo/datasource.test.ts @@ -13,7 +13,13 @@ import { MutableDataFrame, PluginType, } from '@grafana/data'; -import { BackendDataSourceResponse, FetchResponse, setBackendSrv, setDataSourceSrv } from '@grafana/runtime'; +import { + BackendDataSourceResponse, + FetchResponse, + setBackendSrv, + setDataSourceSrv, + TemplateSrv, +} from '@grafana/runtime'; import config from 'app/core/config'; import { @@ -49,7 +55,8 @@ describe('Tempo data source', () => { beforeEach(() => (console.error = consoleErrorMock)); it('returns empty response when traceId is empty', async () => { - const ds = new TempoDatasource(defaultSettings); + const templateSrv: TemplateSrv = { replace: jest.fn() } as unknown as TemplateSrv; + const ds = new TempoDatasource(defaultSettings, templateSrv); const response = await lastValueFrom( ds.query({ targets: [{ refId: 'refid1', queryType: 'traceql', query: '' } as Partial] } as any), { defaultValue: 'empty' } diff --git a/public/app/plugins/datasource/tempo/datasource.ts b/public/app/plugins/datasource/tempo/datasource.ts index 98fbcc84fb4..99dc23f8e3c 100644 --- a/public/app/plugins/datasource/tempo/datasource.ts +++ b/public/app/plugins/datasource/tempo/datasource.ts @@ -175,7 +175,8 @@ export class TempoDatasource extends DataSourceWithBackend { expect(frame.fields[0].values.get(0)).toBe('b1586c3c8c34d'); expect(frame.fields[0].config.unit).toBe('string'); expect(frame.fields[0].values).toBeInstanceOf(ArrayVector); - // Trace name field - expect(frame.fields[1].name).toBe('traceName'); - expect(frame.fields[1].type).toBe('string'); - expect(frame.fields[1].values.get(0)).toBe('lb HTTP Client'); - expect(frame.fields[1].values).toBeInstanceOf(ArrayVector); // Start time field - expect(frame.fields[2].name).toBe('startTime'); + expect(frame.fields[1].name).toBe('startTime'); + expect(frame.fields[1].type).toBe('string'); + expect(frame.fields[1].values.get(1)).toBe('2022-01-27 22:56:06'); + expect(frame.fields[1].values).toBeInstanceOf(ArrayVector); + // Trace name field + expect(frame.fields[2].name).toBe('traceName'); expect(frame.fields[2].type).toBe('string'); - expect(frame.fields[2].values.get(1)).toBe('2022-01-27 22:56:06'); + expect(frame.fields[2].values.get(0)).toBe('lb HTTP Client'); expect(frame.fields[2].values).toBeInstanceOf(ArrayVector); // Duration field expect(frame.fields[3].name).toBe('traceDuration'); diff --git a/public/app/plugins/datasource/tempo/resultTransformer.ts b/public/app/plugins/datasource/tempo/resultTransformer.ts index 25c83da1b1f..c043c807740 100644 --- a/public/app/plugins/datasource/tempo/resultTransformer.ts +++ b/public/app/plugins/datasource/tempo/resultTransformer.ts @@ -630,6 +630,9 @@ export function createTableFrameFromTraceQlQuery( config: { unit: 'string', displayNameFromDS: 'Trace ID', + custom: { + width: 200, + }, links: [ { title: 'Trace: ${__value.raw}', @@ -646,9 +649,28 @@ export function createTableFrameFromTraceQlQuery( ], }, }, + { + name: 'startTime', + type: FieldType.string, + config: { + displayNameFromDS: 'Start time', + custom: { + width: 200, + }, + }, + }, { name: 'traceName', type: FieldType.string, config: { displayNameFromDS: 'Name' } }, - { name: 'startTime', type: FieldType.string, config: { displayNameFromDS: 'Start time' } }, - { name: 'traceDuration', type: FieldType.number, config: { displayNameFromDS: 'Duration', unit: 'ms' } }, + { + name: 'traceDuration', + type: FieldType.number, + config: { + displayNameFromDS: 'Duration', + unit: 'ms', + custom: { + width: 120, + }, + }, + }, ], meta: { preferredVisualisationType: 'table', @@ -710,6 +732,9 @@ const traceSubFrame = ( config: { unit: 'string', displayNameFromDS: 'Span ID', + custom: { + width: 200, + }, links: [ { title: 'Span: ${__value.raw}', @@ -731,21 +756,32 @@ const traceSubFrame = ( ], }, }, + { + name: 'spanStartTime', + type: FieldType.string, + config: { + displayNameFromDS: 'Start time', + custom: { + width: 200, + }, + }, + }, { name: 'name', type: FieldType.string, config: { displayNameFromDS: 'Name', custom: { hidden: !hasNameAttribute } }, }, - { - name: 'spanStartTime', - type: FieldType.string, - config: { displayNameFromDS: 'Start time' }, - }, ...Object.values(spanDynamicAttrs), { name: 'duration', type: FieldType.number, - config: { displayNameFromDS: 'Duration', unit: 'ns' }, + config: { + displayNameFromDS: 'Duration', + unit: 'ns', + custom: { + width: 120, + }, + }, }, ], meta: { diff --git a/public/app/plugins/datasource/tempo/traceql/traceql.ts b/public/app/plugins/datasource/tempo/traceql/traceql.ts index b43c219e2a0..9f6df3c165f 100644 --- a/public/app/plugins/datasource/tempo/traceql/traceql.ts +++ b/public/app/plugins/datasource/tempo/traceql/traceql.ts @@ -26,9 +26,9 @@ const intrinsics = ['duration', 'name', 'status', 'parent']; const scopes: string[] = ['resource', 'span']; -const booleans = ['false', 'true']; +const keywords = intrinsics.concat(scopes); -const keywords = intrinsics.concat(scopes).concat(booleans); +const statusValues = ['ok', 'unset', 'error', 'false', 'true']; export const language = { ignoreCase: false, @@ -37,6 +37,7 @@ export const language = { keywords, operators, + statusValues, // we include these common regular expressions symbols: /[=>