From 4076933e6657b58732ad93395af04239b4ce69de Mon Sep 17 00:00:00 2001 From: Joey Tawadrous <90795735+joey-grafana@users.noreply.github.com> Date: Tue, 17 Jan 2023 14:43:28 +0000 Subject: [PATCH] Traces: extra feature tracking (#61348) * grafana_traces_service_graph_size * grafana_traces_trace_view_find_next_prev_clicked * grafana_traces_trace_view_scroll_to_top_clicked * grafana_traces_cheatsheet_clicked --- .../src/TracePageHeader/TracePageSearchBar.tsx | 13 +++++++++++++ .../TraceTimelineViewer/VirtualizedTraceView.tsx | 8 +++++++- .../src/TraceTimelineViewer/index.tsx | 1 + public/app/features/explore/NodeGraphContainer.tsx | 2 +- .../explore/TraceView/TraceViewContainer.tsx | 2 ++ public/app/plugins/datasource/tempo/CheatSheet.tsx | 6 ++++++ public/app/plugins/datasource/tempo/datasource.ts | 10 ++++++++++ public/app/plugins/panel/traces/TracesPanel.tsx | 2 ++ 8 files changed, 42 insertions(+), 2 deletions(-) diff --git a/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx b/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx index b8fa71464eb..186e0d2b074 100644 --- a/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx +++ b/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx @@ -17,6 +17,7 @@ import cx from 'classnames'; import React, { memo, Dispatch, SetStateAction } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; +import { reportInteraction } from '@grafana/runtime'; import { Button, useStyles2 } from '@grafana/ui'; import UiFindInput from '../common/UiFindInput'; @@ -77,6 +78,7 @@ export type TracePageSearchBarProps = { focusedSpanIdForSearch: string; setSearchBarSuffix: Dispatch>; setFocusedSpanIdForSearch: Dispatch>; + datasourceType: string; }; export default memo(function TracePageSearchBar(props: TracePageSearchBarProps) { @@ -89,6 +91,7 @@ export default memo(function TracePageSearchBar(props: TracePageSearchBarProps) focusedSpanIdForSearch, setSearchBarSuffix, setFocusedSpanIdForSearch, + datasourceType, } = props; const styles = useStyles2(getStyles); @@ -112,6 +115,11 @@ export default memo(function TracePageSearchBar(props: TracePageSearchBarProps) }; const nextResult = () => { + reportInteraction('grafana_traces_trace_view_find_next_prev_clicked', { + datasourceType: datasourceType, + direction: 'next', + }); + const spanMatches = Array.from(spanFindMatches!); const prevMatchedIndex = spanMatches.indexOf(focusedSpanIdForSearch) ? spanMatches.indexOf(focusedSpanIdForSearch) @@ -130,6 +138,11 @@ export default memo(function TracePageSearchBar(props: TracePageSearchBarProps) }; const prevResult = () => { + reportInteraction('grafana_traces_trace_view_find_next_prev_clicked', { + datasourceType: datasourceType, + direction: 'prev', + }); + const spanMatches = Array.from(spanFindMatches!); const prevMatchedIndex = spanMatches.indexOf(focusedSpanIdForSearch) ? spanMatches.indexOf(focusedSpanIdForSearch) diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx index f36bcbc03dc..b789298dae8 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx @@ -19,6 +19,7 @@ import * as React from 'react'; import { createRef, RefObject } from 'react'; import { GrafanaTheme2, LinkModel, TimeZone } from '@grafana/data'; +import { reportInteraction } from '@grafana/runtime'; import { stylesFactory, withTheme2, ToolbarButton } from '@grafana/ui'; import { Accessors } from '../ScrollManager'; @@ -536,8 +537,13 @@ export class UnthemedVirtualizedTraceView extends React.Component { - const { topOfViewRef } = this.props; + const { topOfViewRef, datasourceType, trace } = this.props; topOfViewRef?.current?.scrollIntoView({ behavior: 'smooth' }); + reportInteraction('grafana_traces_trace_view_scroll_to_top_clicked', { + datasourceType: datasourceType, + numServices: trace.services.length, + numSpans: trace.spans.length, + }); }; render() { diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/index.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/index.tsx index fcae2626799..c27231564e4 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/index.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/index.tsx @@ -216,6 +216,7 @@ export class UnthemedTraceTimelineViewer extends React.PureComponent ); diff --git a/public/app/features/explore/NodeGraphContainer.tsx b/public/app/features/explore/NodeGraphContainer.tsx index 0a0821bfd60..b15870dd27f 100644 --- a/public/app/features/explore/NodeGraphContainer.tsx +++ b/public/app/features/explore/NodeGraphContainer.tsx @@ -59,7 +59,7 @@ export function UnconnectedNodeGraphContainer(props: Props) { toggleOpen(); reportInteraction('grafana_traces_node_graph_panel_clicked', { datasourceType: datasourceType, - expanded: !open, + isExpanded: !open, }); }; diff --git a/public/app/features/explore/TraceView/TraceViewContainer.tsx b/public/app/features/explore/TraceView/TraceViewContainer.tsx index e5bbdce5b2e..1d908a0ed64 100644 --- a/public/app/features/explore/TraceView/TraceViewContainer.tsx +++ b/public/app/features/explore/TraceView/TraceViewContainer.tsx @@ -29,6 +29,7 @@ export function TraceViewContainer(props: Props) { const datasource = useSelector( (state: StoreState) => state.explore[props.exploreId!]?.datasourceInstance ?? undefined ); + const datasourceType = datasource ? datasource?.type : 'unknown'; if (!traceProp) { return null; @@ -45,6 +46,7 @@ export function TraceViewContainer(props: Props) { setSearchBarSuffix={setSearchBarSuffix} focusedSpanIdForSearch={focusedSpanIdForSearch} setFocusedSpanIdForSearch={setFocusedSpanIdForSearch} + datasourceType={datasourceType} />

Tempo Cheat Sheet

diff --git a/public/app/plugins/datasource/tempo/datasource.ts b/public/app/plugins/datasource/tempo/datasource.ts index b29b51fedba..4bad7bb23ec 100644 --- a/public/app/plugins/datasource/tempo/datasource.ts +++ b/public/app/plugins/datasource/tempo/datasource.ts @@ -471,6 +471,16 @@ function serviceMapQuery(request: DataQueryRequest, datasourceUid: s } const { nodes, edges } = mapPromMetricsToServiceMap(responses, request.range); + if (nodes.fields.length > 0 && edges.fields.length > 0) { + const nodeLength = nodes.fields[0].values.length; + const edgeLength = edges.fields[0].values.length; + + reportInteraction('grafana_traces_service_graph_size', { + datasourceType: 'tempo', + nodeLength, + edgeLength, + }); + } // No handling of multiple targets assume just one. NodeGraph does not support it anyway, but still should be // fixed at some point. diff --git a/public/app/plugins/panel/traces/TracesPanel.tsx b/public/app/plugins/panel/traces/TracesPanel.tsx index 5643354cd85..b39b8b1aee1 100644 --- a/public/app/plugins/panel/traces/TracesPanel.tsx +++ b/public/app/plugins/panel/traces/TracesPanel.tsx @@ -27,6 +27,7 @@ export const TracesPanel: React.FunctionComponent = ({ data }) => { return await getDataSourceSrv().get(data.request?.targets[0].datasource?.uid); }); const scrollElement = document.getElementsByClassName(styles.wrapper)[0]; + const datasourceType = dataSource && dataSource.value ? dataSource.value.type : 'unknown'; if (!data || !data.series.length || !traceProp) { return ( @@ -49,6 +50,7 @@ export const TracesPanel: React.FunctionComponent = ({ data }) => { setSearchBarSuffix={setSearchBarSuffix} focusedSpanIdForSearch={focusedSpanIdForSearch} setFocusedSpanIdForSearch={setFocusedSpanIdForSearch} + datasourceType={datasourceType} /> ) : null}