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>
This commit is contained in:
Zoltán Bedi 2021-05-11 10:38:10 +02:00 committed by GitHub
parent f4750fb3c8
commit 1a504ce673
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 547 additions and 425 deletions

View File

@ -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 Grafanas 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
```

View File

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

View File

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

View File

@ -15,6 +15,9 @@ export const Components = {
startValue: 'TestData start value',
},
},
Jaeger: {
traceIDInput: 'Trace ID',
},
},
Menu: {
MenuComponent: (title: string) => `${title} menu`,

View File

@ -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(
<JaegerQueryField
history={[]}
datasource={makeDatasourceMock({})}
query={{ query: '1234' } as JaegerQuery}
onRunQuery={() => {}}
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(
<JaegerQueryField
history={[]}
datasource={makeDatasourceMock({
'service/test': {
op1: [
{
traceID: '12345',
spans: [
{
spanID: 's2',
operationName: 'nonRootOp',
references: [{ refType: 'CHILD_OF', traceID: '12345', spanID: 's1' }],
duration: 10,
},
{
operationName: 'rootOp',
spanID: 's1',
references: [],
duration: 99,
},
],
},
],
},
})}
query={{ query: '1234' } as JaegerQuery}
onRunQuery={() => {}}
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(
<JaegerQueryField
history={[]}
datasource={makeDatasourceMock({
service1: {
op1: [
{
traceID: '12345',
spans: [
{
spanID: 's2',
operationName: 'nonRootOp',
references: [{ refType: 'CHILD_OF', traceID: '12345', spanID: 's1' }],
duration: 10,
},
{
operationName: 'rootOp',
spanID: 's1',
references: [],
duration: 99,
},
],
},
],
},
})}
query={{ query: '1234' } as JaegerQuery}
onRunQuery={() => {}}
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<string, any>) {
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;
}

View File

@ -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<JaegerDatasource, JaegerQuery>;
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<Props, State> {
private _isMounted = false;
constructor(props: Props, context: React.Context<any>) {
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 (
<>
<div className="gf-form-inline gf-form-inline--nowrap">
<div className="gf-form flex-shrink-0">
<ButtonCascader options={cascaderOptions} onChange={this.onSelectTrace} loadData={this.onLoadOptions}>
Traces
</ButtonCascader>
</div>
<div className="gf-form gf-form--grow flex-shrink-1">
<div className="slate-query-field__wrapper">
<div className="slate-query-field" aria-label={selectors.components.QueryField.container}>
<input
style={{ width: '100%' }}
value={query.query || ''}
onChange={(e) =>
onChange({
...query,
query: e.currentTarget.value,
})
}
/>
</div>
</div>
</div>
</div>
</>
);
}
}
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;

View File

@ -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 (
<div>
<InlineFieldRow>
<div className={styles.advancedOptionsContainer} onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}>
<InlineLabel as="div">
Advanced options{' '}
<Icon className={showAdvancedOptions ? styles.angleUp : styles.angleDown} name="angle-down" />
</InlineLabel>
</div>
</InlineFieldRow>
<CSSTransition
in={showAdvancedOptions}
mountOnEnter={true}
unmountOnExit={true}
timeout={300}
classNames={styles}
>
<div>
<InlineFieldRow>
<InlineField label="Min Duration" labelWidth={21} grow>
<Input
value={query.minDuration || ''}
placeholder={durationPlaceholder}
onChange={(v) =>
onChange({
...query,
minDuration: v.currentTarget.value,
})
}
/>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField label="Max Duration" labelWidth={21} grow>
<Input
value={query.maxDuration || ''}
placeholder={durationPlaceholder}
onChange={(v) =>
onChange({
...query,
maxDuration: v.currentTarget.value,
})
}
/>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField label="Limit" labelWidth={21} grow tooltip="Maximum numbers of returned results">
<Input
value={query.limit || ''}
type="number"
onChange={(v) =>
onChange({
...query,
limit: v.currentTarget.value ? parseInt(v.currentTarget.value, 10) : undefined,
})
}
/>
</InlineField>
</InlineFieldRow>
</div>
</CSSTransition>
</div>
);
}
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;
`,
};
}

View File

@ -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<JaegerDatasource, JaegerQuery>;
export function QueryEditor({ datasource, query, onChange }: Props) {
return (
<div className={css({ width: '50%' })}>
<InlineFieldRow>
<InlineField label="Query type">
<RadioButtonGroup<JaegerQueryType>
options={[
{ value: 'search', label: 'Search' },
{ value: undefined, label: 'TraceID' },
]}
value={query.queryType}
onChange={(v) =>
onChange({
...query,
queryType: v,
})
}
size="md"
/>
</InlineField>
</InlineFieldRow>
{query.queryType === 'search' ? (
<SearchForm datasource={datasource} query={query} onChange={onChange} />
) : (
<InlineFieldRow>
<InlineField label="Trace ID" labelWidth={21} grow>
<Input
aria-label={selectors.components.DataSource.Jaeger.traceIDInput}
placeholder="Eg. 4050b8060d659e52"
value={query.query || ''}
onChange={(v) =>
onChange({
...query,
query: v.currentTarget.value,
})
}
/>
</InlineField>
</InlineFieldRow>
)}
</div>
);
}

View File

@ -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<string> = {
label: ALL_OPERATIONS_KEY,
value: undefined,
};
export function SearchForm({ datasource, query, onChange }: Props) {
const [serviceOptions, setServiceOptions] = useState<Array<SelectableValue<string>>>();
const [operationOptions, setOperationOptions] = useState<Array<SelectableValue<string>>>();
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 (
<>
<InlineFieldRow>
<InlineField label="Service" labelWidth={21} grow>
<Select
options={serviceOptions}
value={serviceOptions?.find((v) => v.value === query.service) || null}
onChange={(v) => {
onChange({
...query,
service: v.value!,
operation: query.service !== v.value ? undefined : query.operation,
});
}}
menuPlacement="bottom"
/>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField label="Operation" labelWidth={21} grow disabled={!query.service}>
<Select
options={operationOptions}
value={operationOptions?.find((v) => v.value === query.operation) || null}
onChange={(v) =>
onChange({
...query,
operation: v.value!,
})
}
menuPlacement="bottom"
/>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField label="Tags" labelWidth={21} grow>
<Input
value={transformToLogfmt(query.tags)}
placeholder="http.status_code=200 error=true"
onChange={(v) =>
onChange({
...query,
tags: v.currentTarget.value,
})
}
/>
</InlineField>
</InlineFieldRow>
<AdvancedOptions query={query} onChange={onChange} />
</>
);
}
type Options = { dataSource: JaegerDatasource; url: string; notFoundLabel: string };
const loadServices = async ({ dataSource, url, notFoundLabel }: Options): Promise<Array<SelectableValue<string>>> => {
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;
};

View File

@ -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', () => {

View File

@ -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<JaegerQuery> {
constructor(private instanceSettings: DataSourceInstanceSettings, private readonly timeSrv: TimeSrv = getTimeSrv()) {
@ -34,21 +33,45 @@ export class JaegerDatasource extends DataSourceApi<JaegerQuery> {
query(options: DataQueryRequest<JaegerQuery>): Observable<DataQueryResponse> {
// 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<JaegerQuery> {
}
getQueryDisplayText(query: JaegerQuery) {
return query.query;
return query.query || '';
}
private _request(apiUrl: string, data?: any, options?: Partial<BackendSrvRequest>): Observable<Record<string, any>> {

View File

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

View File

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

View File

@ -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';

View File

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

View File

@ -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=