diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanLinks.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanLinks.tsx
new file mode 100644
index 00000000000..27fbf1cc3fd
--- /dev/null
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanLinks.tsx
@@ -0,0 +1,121 @@
+import { css } from '@emotion/css';
+import React, { useState } from 'react';
+
+import { useStyles2, MenuGroup, MenuItem, Icon, ContextMenu } from '@grafana/ui';
+
+import { SpanLinks } from '../types/links';
+
+interface SpanLinksProps {
+ links: SpanLinks;
+}
+
+const renderMenuItems = (links: SpanLinks, styles: ReturnType
, closeMenu: () => void) => {
+ return (
+ <>
+ {!!links.logLinks?.length ? (
+
+ {links.logLinks.map((link, i) => (
+ {
+ if (link.onClick) {
+ link.onClick(e);
+ }
+ closeMenu();
+ }}
+ url={link.href}
+ className={styles.menuItem}
+ />
+ ))}
+
+ ) : null}
+ {!!links.metricLinks?.length ? (
+
+ {links.metricLinks.map((link, i) => (
+ {
+ if (link.onClick) {
+ link.onClick(e);
+ }
+ closeMenu();
+ }}
+ url={link.href}
+ className={styles.menuItem}
+ />
+ ))}
+
+ ) : null}
+ {!!links.traceLinks?.length ? (
+
+ {links.traceLinks.map((link, i) => (
+ {
+ if (link.onClick) {
+ link.onClick(e);
+ }
+ closeMenu();
+ }}
+ url={link.href}
+ className={styles.menuItem}
+ />
+ ))}
+
+ ) : null}
+
+ );
+};
+
+export const SpanLinksMenu = ({ links }: SpanLinksProps) => {
+ const styles = useStyles2(getStyles);
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
+
+ const closeMenu = () => setIsMenuOpen(false);
+
+ return (
+ <>
+ {
+ setIsMenuOpen(true);
+ setMenuPosition({
+ x: e.pageX,
+ y: e.pageY,
+ });
+ }}
+ className={styles.button}
+ >
+
+
+ {isMenuOpen ? (
+ setIsMenuOpen(false)}
+ renderMenuItems={() => renderMenuItems(links, styles, closeMenu)}
+ focusOnOpen={true}
+ x={menuPosition.x}
+ y={menuPosition.y}
+ />
+ ) : null}
+
+ );
+};
+
+const getStyles = () => {
+ return {
+ button: css`
+ background: transparent;
+ border: none;
+ padding: 0;
+ margin: 0 3px 0 0;
+ `,
+ menuItem: css`
+ max-width: 60ch;
+ overflow: hidden;
+ `,
+ };
+};
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx
index bf3411015f8..bb71a941b29 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx
@@ -387,7 +387,6 @@ export class UnthemedVirtualizedTraceView extends React.Component void;
content: React.ReactNode;
+ title?: string;
};
-export type SpanLinkFunc = (span: TraceSpan) => SpanLinkDef | undefined;
+export type SpanLinks = {
+ logLinks?: SpanLinkDef[];
+ traceLinks?: SpanLinkDef[];
+ metricLinks?: SpanLinkDef[];
+};
+
+export type SpanLinkFunc = (span: TraceSpan) => SpanLinks | undefined;
diff --git a/pkg/services/featuremgmt/registry.go b/pkg/services/featuremgmt/registry.go
index 5080805e73a..bc60b9b5ca9 100644
--- a/pkg/services/featuremgmt/registry.go
+++ b/pkg/services/featuremgmt/registry.go
@@ -248,5 +248,11 @@ var (
RequiresDevMode: true,
FrontendOnly: true,
},
+ {
+ Name: "traceToMetrics",
+ Description: "Enable trace to metrics links",
+ State: FeatureStateAlpha,
+ FrontendOnly: true,
+ },
}
)
diff --git a/pkg/services/featuremgmt/toggles_gen.go b/pkg/services/featuremgmt/toggles_gen.go
index ded1ce2e065..8d21cf68d13 100644
--- a/pkg/services/featuremgmt/toggles_gen.go
+++ b/pkg/services/featuremgmt/toggles_gen.go
@@ -182,4 +182,8 @@ const (
// FlagAzureMonitorExperimentalUI
// Use grafana-experimental UI in Azure Monitor
FlagAzureMonitorExperimentalUI = "azureMonitorExperimentalUI"
+
+ // FlagTraceToMetrics
+ // Enable trace to metrics links
+ FlagTraceToMetrics = "traceToMetrics"
)
diff --git a/public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx b/public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx
index bfafdfee442..0dd4f62c50a 100644
--- a/public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx
+++ b/public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx
@@ -40,7 +40,7 @@ export function TraceToLogsSettings({ options, onOptionsChange }: Props) {
Trace to logs
- Trace to logs lets you navigate from a trace span to the selected data source's log.
+ Trace to logs lets you navigate from a trace span to the selected data source's logs.
diff --git a/public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx b/public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx
new file mode 100644
index 00000000000..fc450315580
--- /dev/null
+++ b/public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx
@@ -0,0 +1,80 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import {
+ DataSourceJsonData,
+ DataSourcePluginOptionsEditorProps,
+ GrafanaTheme,
+ updateDatasourcePluginJsonDataOption,
+} from '@grafana/data';
+import { DataSourcePicker } from '@grafana/runtime';
+import { Button, InlineField, InlineFieldRow, useStyles } from '@grafana/ui';
+
+export interface TraceToMetricsOptions {
+ datasourceUid?: string;
+}
+
+export interface TraceToMetricsData extends DataSourceJsonData {
+ tracesToMetrics?: TraceToMetricsOptions;
+}
+
+interface Props extends DataSourcePluginOptionsEditorProps {}
+
+export function TraceToMetricsSettings({ options, onOptionsChange }: Props) {
+ const styles = useStyles(getStyles);
+
+ return (
+
+
Trace to metrics
+
+
+ Trace to metrics lets you navigate from a trace span to the selected data source.
+
+
+
+
+
+ updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', {
+ ...options.jsonData.tracesToMetrics,
+ datasourceUid: ds.uid,
+ })
+ }
+ />
+
+ {options.jsonData.tracesToMetrics?.datasourceUid ? (
+ {
+ updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', {
+ ...options.jsonData.tracesToMetrics,
+ datasourceUid: undefined,
+ });
+ }}
+ >
+ Clear
+
+ ) : null}
+
+
= {}, datasourceUid = 'lokiUid') {
@@ -353,6 +478,11 @@ function setupSpanLinkFactory(options: Partial = {}, datasou
datasourceUid,
...options,
},
+ createFocusSpanLink: (traceId, spanId) => {
+ return {
+ href: `${traceId}-${spanId}`,
+ } as any;
+ },
});
}
diff --git a/public/app/features/explore/TraceView/createSpanLink.tsx b/public/app/features/explore/TraceView/createSpanLink.tsx
index a036eeb05d8..9eb6e5f075a 100644
--- a/public/app/features/explore/TraceView/createSpanLink.tsx
+++ b/public/app/features/explore/TraceView/createSpanLink.tsx
@@ -1,3 +1,4 @@
+import { SpanLinks } from '@jaegertracing/jaeger-ui-components/src/types/links';
import React from 'react';
import {
@@ -5,6 +6,7 @@ import {
DataLink,
DataQuery,
DataSourceInstanceSettings,
+ DataSourceJsonData,
dateTime,
Field,
KeyValue,
@@ -16,9 +18,11 @@ import {
} from '@grafana/data';
import { getTemplateSrv } from '@grafana/runtime';
import { Icon } from '@grafana/ui';
-import { SpanLinkDef, SpanLinkFunc, TraceSpan } from '@jaegertracing/jaeger-ui-components';
+import { SpanLinkFunc, TraceSpan } from '@jaegertracing/jaeger-ui-components';
import { TraceToLogsOptions } from 'app/core/components/TraceToLogs/TraceToLogsSettings';
+import { TraceToMetricsOptions } from 'app/core/components/TraceToMetrics/TraceToMetricsSettings';
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { PromQuery } from 'app/plugins/datasource/prometheus/types';
import { LokiQuery } from '../../../plugins/datasource/loki/types';
import { getFieldLinksForExplore } from '../utils/links';
@@ -31,18 +35,22 @@ import { getFieldLinksForExplore } from '../utils/links';
export function createSpanLinkFactory({
splitOpenFn,
traceToLogsOptions,
+ traceToMetricsOptions,
dataFrame,
+ createFocusSpanLink,
}: {
splitOpenFn: SplitOpen;
traceToLogsOptions?: TraceToLogsOptions;
+ traceToMetricsOptions?: TraceToMetricsOptions;
dataFrame?: DataFrame;
+ createFocusSpanLink?: (traceId: string, spanId: string) => LinkModel;
}): SpanLinkFunc | undefined {
if (!dataFrame || dataFrame.fields.length === 1 || !dataFrame.fields.some((f) => Boolean(f.config.links?.length))) {
// if the dataframe contains just a single blob of data (legacy format) or does not have any links configured,
// let's try to use the old legacy path.
- return legacyCreateSpanLinkFactory(splitOpenFn, traceToLogsOptions);
+ return legacyCreateSpanLinkFactory(splitOpenFn, traceToLogsOptions, traceToMetricsOptions, createFocusSpanLink);
} else {
- return function SpanLink(span: TraceSpan): SpanLinkDef | undefined {
+ return function SpanLink(span: TraceSpan): SpanLinks | undefined {
// We should be here only if there are some links in the dataframe
const field = dataFrame.fields.find((f) => Boolean(f.config.links?.length))!;
try {
@@ -55,9 +63,13 @@ export function createSpanLinkFactory({
});
return {
- href: links[0].href,
- onClick: links[0].onClick,
- content:
+) {
+ let logsDataSourceSettings: DataSourceInstanceSettings | undefined;
+ const isSplunkDS = logsDataSourceSettings?.type === 'grafana-splunk-datasource';
+ if (traceToLogsOptions?.datasourceUid) {
+ logsDataSourceSettings = getDatasourceSrv().getInstanceSettings(traceToLogsOptions.datasourceUid);
}
- const dataSourceSettings = getDatasourceSrv().getInstanceSettings(traceToLogsOptions.datasourceUid);
- const isSplunkDS = dataSourceSettings?.type === 'grafana-splunk-datasource';
-
- if (!dataSourceSettings) {
- return undefined;
+ let metricsDataSourceSettings: DataSourceInstanceSettings | undefined;
+ if (traceToMetricsOptions?.datasourceUid) {
+ metricsDataSourceSettings = getDatasourceSrv().getInstanceSettings(traceToMetricsOptions.datasourceUid);
}
- return function SpanLink(span: TraceSpan): SpanLinkDef | undefined {
+ return function SpanLink(span: TraceSpan): SpanLinks {
+ const links: SpanLinks = { traceLinks: [] };
// This is reusing existing code from derived fields which may not be ideal match so some data is a bit faked at
// the moment. Issue is that the trace itself isn't clearly mapped to dataFrame (right now it's just a json blob
// inside a single field) so the dataLinks as config of that dataFrame abstraction breaks down a bit and we do
// it manually here instead of leaving it for the data source to supply the config.
let dataLink: DataLink | undefined = {} as DataLink | undefined;
- let link: LinkModel;
- switch (dataSourceSettings?.type) {
- case 'loki':
- dataLink = getLinkForLoki(span, traceToLogsOptions, dataSourceSettings);
- if (!dataLink) {
- return undefined;
- }
- break;
- case 'grafana-splunk-datasource':
- dataLink = getLinkForSplunk(span, traceToLogsOptions, dataSourceSettings);
- break;
- default:
- return undefined;
+ // Get logs link
+ if (logsDataSourceSettings && traceToLogsOptions) {
+ switch (logsDataSourceSettings?.type) {
+ case 'loki':
+ dataLink = getLinkForLoki(span, traceToLogsOptions, logsDataSourceSettings);
+ break;
+ case 'grafana-splunk-datasource':
+ dataLink = getLinkForSplunk(span, traceToLogsOptions, logsDataSourceSettings);
+ break;
+ }
+
+ if (dataLink) {
+ const link = mapInternalLinkToExplore({
+ link: dataLink,
+ internalLink: dataLink.internal!,
+ scopedVars: {},
+ range: getTimeRangeFromSpan(
+ span,
+ {
+ startMs: traceToLogsOptions.spanStartTimeShift
+ ? rangeUtil.intervalToMs(traceToLogsOptions.spanStartTimeShift)
+ : 0,
+ endMs: traceToLogsOptions.spanEndTimeShift
+ ? rangeUtil.intervalToMs(traceToLogsOptions.spanEndTimeShift)
+ : 0,
+ },
+ isSplunkDS
+ ),
+ field: {} as Field,
+ onClickFn: splitOpenFn,
+ replaceVariables: getTemplateSrv().replace.bind(getTemplateSrv()),
+ });
+
+ links.logLinks = [
+ {
+ href: link.href,
+ onClick: link.onClick,
+ content: = {
+ title: metricsDataSourceSettings.name,
+ url: '',
+ internal: {
+ datasourceUid: metricsDataSourceSettings.uid,
+ datasourceName: metricsDataSourceSettings.name,
+ query: {
+ expr: `histogram_quantile(0.5, sum(rate(tempo_spanmetrics_latency_bucket{operation="${span.operationName}"}[5m])) by (le))`,
+ refId: '',
+ },
},
- isSplunkDS
- ),
- field: {} as Field,
- onClickFn: splitOpenFn,
- replaceVariables: getTemplateSrv().replace.bind(getTemplateSrv()),
- });
+ };
- return {
- href: link.href,
- onClick: link.onClick,
- content: = ({ options, onOptionsChange }) => {
+
+ {config.featureToggles.traceToMetrics ? (
+
+
+ ) : null}
+
diff --git a/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
index fc21868589b..618c0bc28a3 100644
--- a/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
@@ -5,6 +5,7 @@ import { config } from '@grafana/runtime';
import { DataSourceHttpSettings } from '@grafana/ui';
import { NodeGraphSettings } from 'app/core/components/NodeGraphSettings';
import { TraceToLogsSettings } from 'app/core/components/TraceToLogs/TraceToLogsSettings';
+import { TraceToMetricsSettings } from 'app/core/components/TraceToMetrics/TraceToMetricsSettings';
import { LokiSearchSettings } from './LokiSearchSettings';
import { SearchSettings } from './SearchSettings';
@@ -25,19 +26,29 @@ export const ConfigEditor: React.FC = ({ options, onOptionsChange }) => {
+
+ {config.featureToggles.traceToMetrics ? (
+
+
+ ) : null}
+
{config.featureToggles.tempoServiceGraph && (
)}
+
{config.featureToggles.tempoSearch && (
)}
+
+
diff --git a/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx b/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx
index 8e5712ef9f7..b5c40fc8464 100644
--- a/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx
@@ -39,19 +39,21 @@ export function ServiceGraphSettings({ options, onOptionsChange }: Props) {
}
/>
- {
- updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'serviceMap', {
- datasourceUid: undefined,
- });
- }}
- >
- Clear
-
+ {options.jsonData.serviceMap?.datasourceUid ? (
+ {
+ updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'serviceMap', {
+ datasourceUid: undefined,
+ });
+ }}
+ >
+ Clear
+
+ ) : null}