Traces to Logs: Use onclick for navigation if function is not defined (#70197)

* Use onclick for navigation if function is not defined

* Use locationService, provide clarification comments
This commit is contained in:
Kristina
2023-06-26 11:17:27 -05:00
committed by GitHub
parent f023c4d27a
commit 72f34524d7

View File

@@ -18,7 +18,7 @@ import cx from 'classnames';
import React from 'react'; import React from 'react';
import { dateTimeFormat, GrafanaTheme2, LinkModel, TimeZone } from '@grafana/data'; import { dateTimeFormat, GrafanaTheme2, LinkModel, TimeZone } from '@grafana/data';
import { config, reportInteraction } from '@grafana/runtime'; import { config, locationService, reportInteraction } from '@grafana/runtime';
import { Button, DataLinkButton, Icon, TextArea, useStyles2 } from '@grafana/ui'; import { Button, DataLinkButton, Icon, TextArea, useStyles2 } from '@grafana/ui';
import { autoColor } from '../../Theme'; import { autoColor } from '../../Theme';
@@ -254,13 +254,21 @@ export default function SpanDetail(props: SpanDetailProps) {
target: '_blank', target: '_blank',
origin: logLinks[0].field, origin: logLinks[0].field,
onClick: (event: React.MouseEvent) => { onClick: (event: React.MouseEvent) => {
// DataLinkButton assumes if you provide an onClick event you would want to prevent default behavior like navigation
// In this case, if an onClick is not defined, restore navigation to the provided href while keeping the tracking
// this interaction will not be tracked with link right clicks
reportInteraction('grafana_traces_trace_view_span_link_clicked', { reportInteraction('grafana_traces_trace_view_span_link_clicked', {
datasourceType: datasourceType, datasourceType: datasourceType,
grafana_version: config.buildInfo.version, grafana_version: config.buildInfo.version,
type: 'log', type: 'log',
location: 'spanDetails', location: 'spanDetails',
}); });
logLinks?.[0].onClick?.(event);
if (logLinks?.[0].onClick) {
logLinks?.[0].onClick?.(event);
} else {
locationService.push(logLinks?.[0].href);
}
}, },
}} }}
buttonProps={{ icon: 'gf-logs' }} buttonProps={{ icon: 'gf-logs' }}