From 907e582ed2b7ca954eb6d079289a96097b66977b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zolt=C3=A1n=20Bedi?= Date: Tue, 11 May 2021 10:38:10 +0200 Subject: [PATCH] Jaeger: Search traces (#32805) * WIP: Search jaeger traces * Add more customizable query params * Fix failing test * Fix e2e test * Add tags input field * Minor changes * Fix tests * Add docs * Make sure linking is working * Add tests to datasource.ts * Apply suggestions from code review Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> * Update Jaeger doc * UI updates * Address review comments * Add new screenshots to docs * Update placeholder text for tags Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> --- docs/sources/datasources/jaeger.md | 42 +-- e2e/suite1/specs/trace-view-scrolling.spec.ts | 2 +- package.json | 2 + .../src/selectors/components.ts | 3 + .../datasource/jaeger/QueryField.test.tsx | 139 ---------- .../plugins/datasource/jaeger/QueryField.tsx | 241 ------------------ .../jaeger/components/AdvancedOptions.tsx | 123 +++++++++ .../jaeger/{ => components}/ConfigEditor.tsx | 0 .../jaeger/components/QueryEditor.tsx | 54 ++++ .../jaeger/components/SearchForm.tsx | 118 +++++++++ .../datasource/jaeger/datasource.test.ts | 59 ++++- .../plugins/datasource/jaeger/datasource.ts | 55 ++-- .../app/plugins/datasource/jaeger/module.ts | 8 +- .../datasource/jaeger/responseTransform.ts | 59 ++++- public/app/plugins/datasource/jaeger/types.ts | 17 ++ public/app/plugins/datasource/jaeger/util.ts | 26 ++ yarn.lock | 24 +- 17 files changed, 547 insertions(+), 425 deletions(-) delete mode 100644 public/app/plugins/datasource/jaeger/QueryField.test.tsx delete mode 100644 public/app/plugins/datasource/jaeger/QueryField.tsx create mode 100644 public/app/plugins/datasource/jaeger/components/AdvancedOptions.tsx rename public/app/plugins/datasource/jaeger/{ => components}/ConfigEditor.tsx (100%) create mode 100644 public/app/plugins/datasource/jaeger/components/QueryEditor.tsx create mode 100644 public/app/plugins/datasource/jaeger/components/SearchForm.tsx create mode 100644 public/app/plugins/datasource/jaeger/util.ts diff --git a/docs/sources/datasources/jaeger.md b/docs/sources/datasources/jaeger.md index 8109edec8b05..3e88c365e269 100644 --- a/docs/sources/datasources/jaeger.md +++ b/docs/sources/datasources/jaeger.md @@ -33,23 +33,26 @@ This is a configuration for the [trace to logs feature]({{< relref "../explore/t - **Data source -** Target data source. - **Tags -** The tags that will be used in the Loki query. Default is `'cluster', 'hostname', 'namespace', 'pod'`. -![Trace to logs settings](/img/docs/explore/trace-to-logs-settings-7-4.png "Screenshot of the trace to logs settings") +![Trace to logs settings](/img/docs/explore/trace-to-logs-settings-7-4.png 'Screenshot of the trace to logs settings') ## Query traces You can query and display traces from Jaeger via [Explore]({{< relref "../explore/_index.md" >}}). -{{< docs-imagebox img="/img/docs/v70/jaeger-query-editor.png" class="docs-image--no-shadow" caption="Screenshot of the Jaeger query editor" >}} +{{< docs-imagebox img="/img/docs/explore/jaeger-search-form.png" class="docs-image--no-shadow" caption="Screenshot of the Jaeger query editor" >}} -The Jaeger query editor allows you to query by trace ID directly or selecting a trace from trace selector. To query by trace ID, insert the ID into the text input. +You can query by trace ID or use the search form to find traces. To query by trace ID, select the TraceID from the Query type selector and insert the ID into the text input. -{{< docs-imagebox img="/img/docs/v70/jaeger-query-editor-open.png" class="docs-image--no-shadow" caption="Screenshot of the Jaeger query editor with trace selector expanded" >}} +{{< docs-imagebox img="/img/docs/explore/jaeger-trace-id.png" class="docs-image--no-shadow" caption="Screenshot of the Jaeger query editor with trace ID selected" >}} -Use the trace selector to pick particular trace from all traces logged in the time range you have selected in Explore. The trace selector has three levels of nesting: +To perform a search, set the query type selector to Search, then use the following fields to find traces: -1. The service you are interested in. -1. Particular operation is part of the selected service. -1. Specific trace in which the selected operation occurred, represented by the root operation name and trace duration. +- Service - Returns a list of services. +- Operation - Field gets populated once you select a service. It then lists the operations related to the selected service. Select `All` option to query all operations. +- Tags - Use values in the [logfmt](https://brandur.org/logfmt) format. For example `error=true db.statement="select * from User"`. +- Min Duration - Filter all traces with a duration higher than the set value. Possible values are `1.2s, 100ms, 500us`. +- Max Duration - Filter all traces with a duration lower than the set value. Possible values are `1.2s, 100ms, 500us`. +- Limit - Limits the number of traces returned. ## Linking Trace ID from logs @@ -57,7 +60,7 @@ You can link to Jaeger trace from logs in Loki by configuring a derived field wi ## Configure the data source with provisioning -You can set up the data source via configuration files with Grafana’s provisioning system. Refer to [provisioning docs page]({{< relref "../administration/provisioning/#datasources" >}}) for information on various settings and how it works. +You can set up the data source via configuration files with Grafana's provisioning system. Refer to [provisioning docs page]({{< relref "../administration/provisioning/#datasources" >}}) for more information on configuring various settings. Here is an example with basic auth and trace-to-logs field. @@ -75,14 +78,15 @@ datasources: editable: true isDefault: false jsonData: - tracesToLogs: - # Field with internal link pointing to a Loki data source in Grafana. - # datasourceUid value must match the `datasourceUid` value of the Loki data source. - datasourceUid: loki - tags: - - cluster - - hostname - - namespace - - pod + tracesToLogs: + # Field with internal link pointing to a Loki data source in Grafana. + # datasourceUid value must match the `datasourceUid` value of the Loki data source. + datasourceUid: loki + tags: + - cluster + - hostname + - namespace + - pod secureJsonData: - basicAuthPassword: my_password + basicAuthPassword: my_password +``` diff --git a/e2e/suite1/specs/trace-view-scrolling.spec.ts b/e2e/suite1/specs/trace-view-scrolling.spec.ts index 95ff1020b701..4f0f7f5026b5 100644 --- a/e2e/suite1/specs/trace-view-scrolling.spec.ts +++ b/e2e/suite1/specs/trace-view-scrolling.spec.ts @@ -19,7 +19,7 @@ describe('Trace view', () => { e2e().contains('gdev-jaeger').scrollIntoView().should('be.visible').click(); }); - e2e.components.QueryField.container().should('be.visible').type('long-trace'); + e2e.components.DataSource.Jaeger.traceIDInput().should('be.visible').type('long-trace'); e2e.components.RefreshPicker.runButton().should('be.visible').click(); diff --git a/package.json b/package.json index 64d537cd0d33..1aa170a58b1a 100644 --- a/package.json +++ b/package.json @@ -102,6 +102,7 @@ "@types/jest": "26.0.15", "@types/jquery": "3.3.38", "@types/lodash": "4.14.149", + "@types/logfmt": "^1.2.1", "@types/lru-cache": "^5.1.0", "@types/moment-timezone": "0.5.13", "@types/mousetrap": "1.6.3", @@ -259,6 +260,7 @@ "json-source-map": "0.6.1", "jsurl": "^0.1.5", "lodash": "4.17.21", + "logfmt": "^1.3.2", "lru-cache": "^5.1.1", "md5": "^2.2.1", "memoize-one": "5.1.1", diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index fcfd0c4524cf..3d4748b1c62d 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/packages/grafana-e2e-selectors/src/selectors/components.ts @@ -15,6 +15,9 @@ export const Components = { startValue: 'TestData start value', }, }, + Jaeger: { + traceIDInput: 'Trace ID', + }, }, Menu: { MenuComponent: (title: string) => `${title} menu`, diff --git a/public/app/plugins/datasource/jaeger/QueryField.test.tsx b/public/app/plugins/datasource/jaeger/QueryField.test.tsx deleted file mode 100644 index 585ad6fd3f3c..000000000000 --- a/public/app/plugins/datasource/jaeger/QueryField.test.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import React from 'react'; -import { JaegerQueryField } from './QueryField'; -import { shallow, mount } from 'enzyme'; -import { JaegerDatasource, JaegerQuery } from './datasource'; -import { ButtonCascader } from '@grafana/ui'; - -describe('JaegerQueryField', function () { - it('shows empty value if no services returned', function () { - const wrapper = shallow( - {}} - onChange={() => {}} - /> - ); - expect(wrapper.find(ButtonCascader).props().options[0].label).toBe('No traces found'); - }); - - it('uses URL encoded service name in metadataRequest request', async function () { - const wrapper = mount( - {}} - onChange={() => {}} - /> - ); - - // Simulating selection options. We need this as the function depends on the intermediate state of the component - await wrapper.find(ButtonCascader)!.props().loadData!([{ value: 'service/test', label: 'service/test' }]); - - wrapper.update(); - expect(wrapper.find(ButtonCascader).props().options[0].label).toEqual('service/test'); - expect(wrapper.find(ButtonCascader).props().options[0].value).toEqual('service/test'); - expect(wrapper.find(ButtonCascader).props().options![0].children![1]).toEqual({ - isLeaf: false, - label: 'op1', - value: 'op1', - }); - }); - - it('shows root span as 3rd level in cascader', async function () { - const wrapper = mount( - {}} - onChange={() => {}} - /> - ); - - // Simulating selection options. We need this as the function depends on the intermediate state of the component - await wrapper.find(ButtonCascader)!.props().loadData!([{ value: 'service1', label: 'service1' }]); - - await wrapper.find(ButtonCascader)!.props().loadData!([ - { value: 'service1', label: 'service1' }, - { value: 'op1', label: 'op1' }, - ]); - - wrapper.update(); - expect(wrapper.find(ButtonCascader)!.props().options![0].children![1].children![0]).toEqual({ - label: 'rootOp [0.099 ms]', - value: '12345', - }); - }); -}); - -function makeDatasourceMock(data: { [service: string]: { [operation: string]: any } }): JaegerDatasource { - return { - metadataRequest(url: string, params: Record) { - if (url.match(/\/services$/)) { - return Promise.resolve(Object.keys(data)); - } - let match = url.match(/\/services\/(.*)\/operations/); - if (match) { - const decodedService = decodeURIComponent(match[1]); - expect(decodedService).toBe(Object.keys(data)[0]); - return Promise.resolve(Object.keys(data[decodedService])); - } - - if (url.match(/\/traces?/)) { - return Promise.resolve(data[params.service][params.operation]); - } - throw new Error(`Unexpected url: ${url}`); - }, - - getTimeRange(): { start: number; end: number } { - return { start: 1, end: 100 }; - }, - } as any; -} diff --git a/public/app/plugins/datasource/jaeger/QueryField.tsx b/public/app/plugins/datasource/jaeger/QueryField.tsx deleted file mode 100644 index 7fd13fb79263..000000000000 --- a/public/app/plugins/datasource/jaeger/QueryField.tsx +++ /dev/null @@ -1,241 +0,0 @@ -import { ExploreQueryFieldProps } from '@grafana/data'; -import { selectors } from '@grafana/e2e-selectors'; -import { ButtonCascader, CascaderOption } from '@grafana/ui'; -import React from 'react'; -import { JaegerDatasource, JaegerQuery } from './datasource'; -import { Span, TraceResponse } from './types'; -import { dispatch } from 'app/store/store'; -import { notifyApp } from 'app/core/actions'; -import { createErrorNotification } from 'app/core/copy/appNotification'; - -const ALL_OPERATIONS_KEY = '__ALL__'; -const NO_TRACES_KEY = '__NO_TRACES__'; - -type Props = ExploreQueryFieldProps; -interface State { - serviceOptions: CascaderOption[]; -} - -function findRootSpan(spans: Span[]): Span | undefined { - return spans.find((s) => !s.references?.length); -} - -function getLabelFromTrace(trace: TraceResponse): string { - const rootSpan = findRootSpan(trace.spans); - if (rootSpan) { - return `${rootSpan.operationName} [${rootSpan.duration / 1000} ms]`; - } - return trace.traceID; -} - -export class JaegerQueryField extends React.PureComponent { - private _isMounted = false; - - constructor(props: Props, context: React.Context) { - super(props, context); - this.state = { - serviceOptions: [], - }; - } - - componentDidMount() { - this._isMounted = true; - // We should probably call this periodically to get new services after mount. - this.getServices(); - } - - componentWillUnmount(): void { - this._isMounted = false; - } - - async getServices() { - const url = '/api/services'; - const { datasource } = this.props; - try { - const services: string[] | null = await datasource.metadataRequest(url); - if (!this._isMounted) { - return; - } - - if (services) { - const serviceOptions: CascaderOption[] = services.sort().map((service) => ({ - label: service, - value: service, - isLeaf: false, - })); - this.setState({ serviceOptions }); - } - } catch (error) { - dispatch(notifyApp(createErrorNotification('Failed to load services from Jaeger', error))); - } - } - - onLoadOptions = async (selectedOptions: CascaderOption[]) => { - const service = selectedOptions[0].value; - if (selectedOptions.length === 1) { - // Load operations - const operations: string[] = await this.findOperations(service); - if (!this._isMounted) { - return; - } - - const allOperationsOption: CascaderOption = { - label: '[ALL]', - value: ALL_OPERATIONS_KEY, - }; - const operationOptions: CascaderOption[] = [ - allOperationsOption, - ...operations.sort().map((operation) => ({ - label: operation, - value: operation, - isLeaf: false, - })), - ]; - this.setState((state) => { - const serviceOptions = state.serviceOptions.map((serviceOption) => { - if (serviceOption.value === service) { - return { - ...serviceOption, - children: operationOptions, - }; - } - return serviceOption; - }); - return { serviceOptions }; - }); - } else if (selectedOptions.length === 2) { - // Load traces - const operationValue = selectedOptions[1].value; - const operation = operationValue === ALL_OPERATIONS_KEY ? '' : operationValue; - const traces: any[] = await this.findTraces(service, operation); - if (!this._isMounted) { - return; - } - - let traceOptions: CascaderOption[] = traces.map((trace) => ({ - label: getLabelFromTrace(trace), - value: trace.traceID, - })); - if (traceOptions.length === 0) { - traceOptions = [ - { - label: '[No traces in time range]', - value: NO_TRACES_KEY, - }, - ]; - } - this.setState((state) => { - // Place new traces into the correct service/operation sub-tree - const serviceOptions = state.serviceOptions.map((serviceOption) => { - if (serviceOption.value === service && serviceOption.children) { - const operationOptions = serviceOption.children.map((operationOption) => { - if (operationOption.value === operationValue) { - return { - ...operationOption, - children: traceOptions, - }; - } - return operationOption; - }); - return { - ...serviceOption, - children: operationOptions, - }; - } - return serviceOption; - }); - return { serviceOptions }; - }); - } - }; - - findOperations = async (service: string) => { - const { datasource } = this.props; - const url = `/api/services/${encodeURIComponent(service)}/operations`; - try { - return await datasource.metadataRequest(url); - } catch (error) { - dispatch(notifyApp(createErrorNotification('Failed to load operations from Jaeger', error))); - } - return []; - }; - - findTraces = async (service: string, operation?: string) => { - const { datasource } = this.props; - const { start, end } = datasource.getTimeRange(); - - const traceSearch = { - start, - end, - service, - operation, - limit: 10, - lookback: '1h', - maxDuration: '', - minDuration: '', - }; - const url = '/api/traces'; - try { - return await datasource.metadataRequest(url, traceSearch); - } catch (error) { - dispatch(notifyApp(createErrorNotification('Failed to load traces from Jaeger', error))); - } - return []; - }; - - onSelectTrace = (values: string[], selectedOptions: CascaderOption[]) => { - const { query, onChange, onRunQuery } = this.props; - if (selectedOptions.length === 3) { - const traceID = selectedOptions[2].value; - onChange({ ...query, query: traceID }); - onRunQuery(); - } - }; - - render() { - const { query, onChange } = this.props; - const { serviceOptions } = this.state; - const cascaderOptions = serviceOptions && serviceOptions.length ? serviceOptions : noTracesFoundOptions; - - return ( - <> -
-
- - Traces - -
-
-
-
- - onChange({ - ...query, - query: e.currentTarget.value, - }) - } - /> -
-
-
-
- - ); - } -} - -const noTracesFoundOptions = [ - { - label: 'No traces found', - value: 'no_traces', - isLeaf: true, - - // Cannot be disabled because then cascader shows 'loading' for some reason. - // disabled: true, - }, -]; - -export default JaegerQueryField; diff --git a/public/app/plugins/datasource/jaeger/components/AdvancedOptions.tsx b/public/app/plugins/datasource/jaeger/components/AdvancedOptions.tsx new file mode 100644 index 000000000000..dddf36829414 --- /dev/null +++ b/public/app/plugins/datasource/jaeger/components/AdvancedOptions.tsx @@ -0,0 +1,123 @@ +import { css } from '@emotion/css'; +import { GrafanaTheme } from '@grafana/data'; +import { Icon, InlineField, InlineFieldRow, InlineLabel, Input, useStyles } from '@grafana/ui'; +import React, { useState } from 'react'; +import { CSSTransition } from 'react-transition-group'; +import { JaegerQuery } from '../types'; + +const durationPlaceholder = 'e.g. 1.2s, 100ms, 500us'; + +type Props = { + query: JaegerQuery; + onChange: (value: JaegerQuery) => void; +}; + +export function AdvancedOptions({ query, onChange }: Props) { + const [showAdvancedOptions, setShowAdvancedOptions] = useState(false); + const styles = useStyles(getStyles); + + return ( +
+ +
setShowAdvancedOptions(!showAdvancedOptions)}> + + Advanced options{' '} + + +
+ + +
+ + + + onChange({ + ...query, + minDuration: v.currentTarget.value, + }) + } + /> + + + + + + onChange({ + ...query, + maxDuration: v.currentTarget.value, + }) + } + /> + + + + + + onChange({ + ...query, + limit: v.currentTarget.value ? parseInt(v.currentTarget.value, 10) : undefined, + }) + } + /> + + +
+ +
+ ); +} + +function getStyles(theme: GrafanaTheme) { + return { + advancedOptionsContainer: css` + margin: 0 ${theme.spacing.xs} ${theme.spacing.xs} 0; + width: 100%; + cursor: pointer; + `, + enter: css` + label: enter; + height: 0; + opacity: 0; + `, + enterActive: css` + label: enterActive; + height: 108px; + opacity: 1; + transition: height 300ms ease, opacity 300ms ease; + `, + exit: css` + label: exit; + height: 108px; + opacity: 1; + `, + exitActive: css` + label: exitActive; + height: 0; + opacity: 0; + transition: height 300ms ease, opacity 300ms ease; + `, + angleUp: css` + transform: rotate(-180deg); + transition: transform 300ms; + `, + angleDown: css` + transform: rotate(0deg); + transition: transform 300ms; + `, + }; +} diff --git a/public/app/plugins/datasource/jaeger/ConfigEditor.tsx b/public/app/plugins/datasource/jaeger/components/ConfigEditor.tsx similarity index 100% rename from public/app/plugins/datasource/jaeger/ConfigEditor.tsx rename to public/app/plugins/datasource/jaeger/components/ConfigEditor.tsx diff --git a/public/app/plugins/datasource/jaeger/components/QueryEditor.tsx b/public/app/plugins/datasource/jaeger/components/QueryEditor.tsx new file mode 100644 index 000000000000..04d9cf0d2299 --- /dev/null +++ b/public/app/plugins/datasource/jaeger/components/QueryEditor.tsx @@ -0,0 +1,54 @@ +import { css } from '@emotion/css'; +import { QueryEditorProps } from '@grafana/data'; +import { selectors } from '@grafana/e2e-selectors'; +import { InlineField, InlineFieldRow, Input, RadioButtonGroup } from '@grafana/ui'; +import React from 'react'; +import { JaegerDatasource } from '../datasource'; +import { JaegerQuery, JaegerQueryType } from '../types'; +import { SearchForm } from './SearchForm'; + +type Props = QueryEditorProps; + +export function QueryEditor({ datasource, query, onChange }: Props) { + return ( +
+ + + + options={[ + { value: 'search', label: 'Search' }, + { value: undefined, label: 'TraceID' }, + ]} + value={query.queryType} + onChange={(v) => + onChange({ + ...query, + queryType: v, + }) + } + size="md" + /> + + + {query.queryType === 'search' ? ( + + ) : ( + + + + onChange({ + ...query, + query: v.currentTarget.value, + }) + } + /> + + + )} +
+ ); +} diff --git a/public/app/plugins/datasource/jaeger/components/SearchForm.tsx b/public/app/plugins/datasource/jaeger/components/SearchForm.tsx new file mode 100644 index 000000000000..7cb510292a84 --- /dev/null +++ b/public/app/plugins/datasource/jaeger/components/SearchForm.tsx @@ -0,0 +1,118 @@ +import { SelectableValue } from '@grafana/data'; +import { InlineField, InlineFieldRow, Input, Select } from '@grafana/ui'; +import React, { useEffect, useState } from 'react'; +import { JaegerDatasource } from '../datasource'; +import { JaegerQuery } from '../types'; +import { transformToLogfmt } from '../util'; +import { AdvancedOptions } from './AdvancedOptions'; + +type Props = { + datasource: JaegerDatasource; + query: JaegerQuery; + onChange: (value: JaegerQuery) => void; +}; + +export const ALL_OPERATIONS_KEY = 'All'; +const allOperationsOption: SelectableValue = { + label: ALL_OPERATIONS_KEY, + value: undefined, +}; + +export function SearchForm({ datasource, query, onChange }: Props) { + const [serviceOptions, setServiceOptions] = useState>>(); + const [operationOptions, setOperationOptions] = useState>>(); + + useEffect(() => { + const getServices = async () => { + const services = await loadServices({ + dataSource: datasource, + url: '/api/services', + notFoundLabel: 'No service found', + }); + setServiceOptions(services); + }; + getServices(); + }, [datasource]); + + useEffect(() => { + const getOperations = async () => { + const operations = await loadServices({ + dataSource: datasource, + url: `/api/services/${encodeURIComponent(query.service!)}/operations`, + notFoundLabel: 'No operation found', + }); + setOperationOptions([allOperationsOption, ...operations]); + }; + if (query.service) { + getOperations(); + } + }, [datasource, query.service]); + + return ( + <> + + + v.value === query.operation) || null} + onChange={(v) => + onChange({ + ...query, + operation: v.value!, + }) + } + menuPlacement="bottom" + /> + + + + + + onChange({ + ...query, + tags: v.currentTarget.value, + }) + } + /> + + + + + ); +} + +type Options = { dataSource: JaegerDatasource; url: string; notFoundLabel: string }; + +const loadServices = async ({ dataSource, url, notFoundLabel }: Options): Promise>> => { + const services: string[] | null = await dataSource.metadataRequest(url); + + if (!services) { + return [{ label: notFoundLabel, value: notFoundLabel }]; + } + + const serviceOptions: SelectableValue[] = services.sort().map((service) => ({ + label: service, + value: service, + })); + + return serviceOptions; +}; diff --git a/public/app/plugins/datasource/jaeger/datasource.test.ts b/public/app/plugins/datasource/jaeger/datasource.test.ts index 7e741e083fc2..3335082d7908 100644 --- a/public/app/plugins/datasource/jaeger/datasource.test.ts +++ b/public/app/plugins/datasource/jaeger/datasource.test.ts @@ -2,19 +2,30 @@ import { DataQueryRequest, DataSourceInstanceSettings, dateTime, FieldType, Plug import { backendSrv } from 'app/core/services/backend_srv'; import { of, throwError } from 'rxjs'; import { createFetchResponse } from 'test/helpers/createFetchResponse'; -import { JaegerDatasource, JaegerQuery } from './datasource'; +import { ALL_OPERATIONS_KEY } from './components/SearchForm'; +import { JaegerDatasource } from './datasource'; import { testResponse, testResponseDataFrameFields, testResponseNodesFields, testResponseEdgesFields, } from './testResponse'; +import { JaegerQuery } from './types'; jest.mock('@grafana/runtime', () => ({ ...((jest.requireActual('@grafana/runtime') as unknown) as object), getBackendSrv: () => backendSrv, })); +const timeSrvStub: any = { + timeRange(): any { + return { + from: dateTime(1531468681), + to: dateTime(1531489712), + }; + }, +}; + describe('JaegerDatasource', () => { beforeEach(() => { jest.clearAllMocks(); @@ -60,6 +71,52 @@ describe('JaegerDatasource', () => { expect(field.type).toBe(FieldType.trace); expect(field.values.length).toBe(0); }); + + it('should return search results when the query type is search', async () => { + const mock = setupFetchMock({ data: [testResponse] }); + const ds = new JaegerDatasource(defaultSettings, timeSrvStub); + const response = await ds + .query({ + ...defaultQuery, + targets: [{ queryType: 'search', refId: 'a', service: 'jaeger-query', operation: '/api/services' }], + }) + .toPromise(); + expect(mock).toBeCalledWith({ + url: `${defaultSettings.url}/api/traces?operation=%2Fapi%2Fservices&service=jaeger-query&start=1531468681000&end=1531489712000&lookback=custom`, + }); + expect(response.data[0].meta.preferredVisualisationType).toBe('table'); + // Make sure that traceID field has data link configured + expect(response.data[0].fields[0].config.links).toHaveLength(1); + expect(response.data[0].fields[0].name).toBe('traceID'); + }); + + it('should remove operation from the query when all is selected', async () => { + const mock = setupFetchMock({ data: [testResponse] }); + const ds = new JaegerDatasource(defaultSettings, timeSrvStub); + await ds + .query({ + ...defaultQuery, + targets: [{ queryType: 'search', refId: 'a', service: 'jaeger-query', operation: ALL_OPERATIONS_KEY }], + }) + .toPromise(); + expect(mock).toBeCalledWith({ + url: `${defaultSettings.url}/api/traces?service=jaeger-query&start=1531468681000&end=1531489712000&lookback=custom`, + }); + }); + + it('should convert tags from logfmt format to an object', async () => { + const mock = setupFetchMock({ data: [testResponse] }); + const ds = new JaegerDatasource(defaultSettings, timeSrvStub); + await ds + .query({ + ...defaultQuery, + targets: [{ queryType: 'search', refId: 'a', service: 'jaeger-query', tags: 'error=true' }], + }) + .toPromise(); + expect(mock).toBeCalledWith({ + url: `${defaultSettings.url}/api/traces?service=jaeger-query&tags=%7B%22error%22%3A%22true%22%7D&start=1531468681000&end=1531489712000&lookback=custom`, + }); + }); }); describe('when performing testDataSource', () => { diff --git a/public/app/plugins/datasource/jaeger/datasource.ts b/public/app/plugins/datasource/jaeger/datasource.ts index e5c6104156c6..3f8d6bc35a95 100644 --- a/public/app/plugins/datasource/jaeger/datasource.ts +++ b/public/app/plugins/datasource/jaeger/datasource.ts @@ -1,5 +1,4 @@ import { - DataQuery, DataQueryRequest, DataQueryResponse, DataSourceApi, @@ -14,12 +13,12 @@ import { serializeParams } from 'app/core/utils/fetch'; import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv'; import { Observable, of } from 'rxjs'; import { catchError, map } from 'rxjs/operators'; -import { createTraceFrame } from './responseTransform'; +import { createTableFrame, createTraceFrame } from './responseTransform'; import { createGraphFrames } from './graphTransform'; - -export type JaegerQuery = { - query: string; -} & DataQuery; +import { JaegerQuery } from './types'; +import { identity, omit, pick, pickBy } from 'lodash'; +import { convertTagsLogfmt } from './util'; +import { ALL_OPERATIONS_KEY } from './components/SearchForm'; export class JaegerDatasource extends DataSourceApi { constructor(private instanceSettings: DataSourceInstanceSettings, private readonly timeSrv: TimeSrv = getTimeSrv()) { @@ -34,21 +33,45 @@ export class JaegerDatasource extends DataSourceApi { query(options: DataQueryRequest): Observable { // At this moment we expect only one target. In case we somehow change the UI to be able to show multiple // traces at one we need to change this. - const id = options.targets[0]?.query; - if (!id) { + const target = options.targets[0]; + if (!target) { return of({ data: [emptyTraceDataFrame] }); } + if (target.queryType !== 'search' && target.query) { + return this._request(`/api/traces/${encodeURIComponent(target.query)}`).pipe( + map((response) => { + const traceData = response?.data?.data?.[0]; + if (!traceData) { + return { data: [emptyTraceDataFrame] }; + } + return { + data: [createTraceFrame(traceData), ...createGraphFrames(traceData)], + }; + }) + ); + } + + let jaegerQuery = pick(target, ['operation', 'service', 'tags', 'minDuration', 'maxDuration', 'limit']); + // remove empty properties + jaegerQuery = pickBy(jaegerQuery, identity); + if (jaegerQuery.tags) { + jaegerQuery = { ...jaegerQuery, tags: convertTagsLogfmt(jaegerQuery.tags) }; + } + + if (jaegerQuery.operation === ALL_OPERATIONS_KEY) { + jaegerQuery = omit(jaegerQuery, 'operation'); + } + // TODO: this api is internal, used in jaeger ui. Officially they have gRPC api that should be used. - return this._request(`/api/traces/${encodeURIComponent(id)}`).pipe( + return this._request(`/api/traces`, { + ...jaegerQuery, + ...this.getTimeRange(), + lookback: 'custom', + }).pipe( map((response) => { - // We assume there is only one trace, as the querying right now does not work to query for multiple traces. - const traceData = response?.data?.data?.[0]; - if (!traceData) { - return { data: [emptyTraceDataFrame] }; - } return { - data: [createTraceFrame(traceData), ...createGraphFrames(traceData)], + data: [createTableFrame(response.data.data, this.instanceSettings)], }; }) ); @@ -101,7 +124,7 @@ export class JaegerDatasource extends DataSourceApi { } getQueryDisplayText(query: JaegerQuery) { - return query.query; + return query.query || ''; } private _request(apiUrl: string, data?: any, options?: Partial): Observable> { diff --git a/public/app/plugins/datasource/jaeger/module.ts b/public/app/plugins/datasource/jaeger/module.ts index 9ed98d289fc5..d81c4807cc47 100644 --- a/public/app/plugins/datasource/jaeger/module.ts +++ b/public/app/plugins/datasource/jaeger/module.ts @@ -1,8 +1,6 @@ import { DataSourcePlugin } from '@grafana/data'; import { JaegerDatasource } from './datasource'; -import { JaegerQueryField } from './QueryField'; -import { ConfigEditor } from './ConfigEditor'; +import { QueryEditor } from './components/QueryEditor'; +import { ConfigEditor } from './components/ConfigEditor'; -export const plugin = new DataSourcePlugin(JaegerDatasource) - .setConfigEditor(ConfigEditor) - .setExploreQueryField(JaegerQueryField); +export const plugin = new DataSourcePlugin(JaegerDatasource).setConfigEditor(ConfigEditor).setQueryEditor(QueryEditor); diff --git a/public/app/plugins/datasource/jaeger/responseTransform.ts b/public/app/plugins/datasource/jaeger/responseTransform.ts index 17bddd9b0bbb..752fb876e8d0 100644 --- a/public/app/plugins/datasource/jaeger/responseTransform.ts +++ b/public/app/plugins/datasource/jaeger/responseTransform.ts @@ -1,5 +1,5 @@ -import { DataFrame, FieldType, MutableDataFrame, TraceSpanRow } from '@grafana/data'; - +import { DataFrame, DataSourceInstanceSettings, FieldType, MutableDataFrame, TraceSpanRow } from '@grafana/data'; +import { transformTraceData } from '@jaegertracing/jaeger-ui-components'; import { Span, TraceProcess, TraceResponse } from './types'; export function createTraceFrame(data: TraceResponse): DataFrame { @@ -52,3 +52,58 @@ function toSpanRow(span: Span, processes: Record): TraceSp serviceTags: processes[span.processID].tags, }; } + +export function createTableFrame(data: TraceResponse[], instanceSettings: DataSourceInstanceSettings): DataFrame { + const frame = new MutableDataFrame({ + fields: [ + { + name: 'traceID', + type: FieldType.string, + config: { + displayNameFromDS: 'Trace ID', + links: [ + { + title: 'Trace: ${__value.raw}', + url: '', + internal: { + datasourceUid: instanceSettings.uid, + datasourceName: instanceSettings.name, + query: { + query: '${__value.raw}', + }, + }, + }, + ], + }, + }, + { name: 'traceName', type: FieldType.string, config: { displayNameFromDS: 'Trace name' } }, + { name: 'startTime', type: FieldType.time, config: { displayNameFromDS: 'Start time' } }, + { name: 'duration', type: FieldType.number, config: { displayNameFromDS: 'Duration', unit: 'µs' } }, + ], + meta: { + preferredVisualisationType: 'table', + }, + }); + // Show the most recent traces + const traceData = data.map(transformToTraceData).sort((a, b) => b?.startTime! - a?.startTime!); + + for (const trace of traceData) { + frame.add(trace); + } + + return frame; +} + +function transformToTraceData(data: TraceResponse) { + const traceData = transformTraceData(data); + if (!traceData) { + return; + } + + return { + traceID: traceData.traceID, + startTime: traceData.startTime / 1000, + duration: traceData.duration, + traceName: traceData.traceName, + }; +} diff --git a/public/app/plugins/datasource/jaeger/types.ts b/public/app/plugins/datasource/jaeger/types.ts index caf358a47a2a..4018a09d2066 100644 --- a/public/app/plugins/datasource/jaeger/types.ts +++ b/public/app/plugins/datasource/jaeger/types.ts @@ -1,3 +1,5 @@ +import { DataQuery } from '@grafana/data'; + export type TraceKeyValuePair = { key: string; type?: string; @@ -47,3 +49,18 @@ export type TraceResponse = { warnings?: string[] | null; spans: Span[]; }; + +export type JaegerQuery = { + // undefined means the old behavior, showing only trace ID input + queryType?: JaegerQueryType; + service?: string; + operation?: string; + // trace ID + query?: string; + tags?: string; + minDuration?: string; + maxDuration?: string; + limit?: number; +} & DataQuery; + +export type JaegerQueryType = 'search'; diff --git a/public/app/plugins/datasource/jaeger/util.ts b/public/app/plugins/datasource/jaeger/util.ts new file mode 100644 index 000000000000..51f01fa929a3 --- /dev/null +++ b/public/app/plugins/datasource/jaeger/util.ts @@ -0,0 +1,26 @@ +import logfmt from 'logfmt'; + +export function convertTagsLogfmt(tags: string | undefined) { + if (!tags) { + return ''; + } + const data: any = logfmt.parse(tags); + Object.keys(data).forEach((key) => { + const value = data[key]; + if (typeof value !== 'string') { + data[key] = String(value); + } + }); + return JSON.stringify(data); +} + +export function transformToLogfmt(tags: string | undefined) { + if (!tags) { + return ''; + } + try { + return logfmt.stringify(JSON.parse(tags)); + } catch { + return tags; + } +} diff --git a/yarn.lock b/yarn.lock index f4c1aa5a245b..737e1243c159 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5613,6 +5613,13 @@ resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008" integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q== +"@types/logfmt@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@types/logfmt/-/logfmt-1.2.1.tgz#981f9821464fc4a82a0aa2884b9c03d90c23ad99" + integrity sha512-kBeA+qbJAoyhIHBCOKEQYRDKPYyvt2m77cl1ZJUGfig8f5kgXZ7KOlPBN3/5whkwkK4nm47GN0bzdeObMWoYXQ== + dependencies: + "@types/node" "*" + "@types/long@^4.0.1": version "4.0.1" resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.1.tgz#459c65fa1867dafe6a8f322c4c51695663cc55e9" @@ -16636,6 +16643,14 @@ log4js@1.1.1: semver "^5.3.0" streamroller "^0.4.0" +logfmt@^1.3.2: + version "1.3.2" + resolved "https://registry.yarnpkg.com/logfmt/-/logfmt-1.3.2.tgz#be34020b7390b8201212a12f533e3cb4c92d70c2" + integrity sha512-U0lelcaGWEfEITZQXs8y5HrJp2xa0BJ+KDfkkLJRmuKbQIEVGNv145FbaNekY4ZYHJSBBx8NLJitaPtRqLEkxQ== + dependencies: + split "0.2.x" + through "2.3.x" + loglevel@^1.6.8: version "1.7.1" resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197" @@ -23078,6 +23093,13 @@ split2@^2.0.0: dependencies: through2 "^2.0.2" +split@0.2.x: + version "0.2.10" + resolved "https://registry.yarnpkg.com/split/-/split-0.2.10.tgz#67097c601d697ce1368f418f06cd201cf0521a57" + integrity sha1-Zwl8YB1pfOE2j0GPBs0gHPBSGlc= + dependencies: + through "2" + split@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9" @@ -24012,7 +24034,7 @@ through2@^4.0.0: dependencies: readable-stream "3" -through@2, "through@>=2.2.7 <3", through@^2.3.4, through@^2.3.6, through@~2.3.6: +through@2, through@2.3.x, "through@>=2.2.7 <3", through@^2.3.4, through@^2.3.6, through@~2.3.6: version "2.3.8" resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=