Traces: Upgraded feature tracking (#62181)

Upgraded feature tracking

packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx

@@ -17,7 +17,7 @@ import cx from 'classnames';
 import React, { memo, Dispatch, SetStateAction } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { reportInteraction } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 import { Button, useStyles2 } from '@grafana/ui';
 
 import UiFindInput from '../common/UiFindInput';
@@ -117,6 +117,7 @@ export default memo(function TracePageSearchBar(props: TracePageSearchBarProps)
   const nextResult = () => {
     reportInteraction('grafana_traces_trace_view_find_next_prev_clicked', {
       datasourceType: datasourceType,
+      grafana_version: config.buildInfo.version,
       direction: 'next',
     });
 
@@ -140,6 +141,7 @@ export default memo(function TracePageSearchBar(props: TracePageSearchBarProps)
   const prevResult = () => {
     reportInteraction('grafana_traces_trace_view_find_next_prev_clicked', {
       datasourceType: datasourceType,
+      grafana_version: config.buildInfo.version,
       direction: 'prev',
     });
 

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import IoLink from 'react-icons/lib/io/link';
 
 import { dateTimeFormat, GrafanaTheme2, LinkModel, TimeZone } from '@grafana/data';
-import { reportInteraction } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 import { Button, DataLinkButton, TextArea, useStyles2 } from '@grafana/ui';
 
 import { autoColor } from '../../Theme';
@@ -209,6 +209,7 @@ export default function SpanDetail(props: SpanDetailProps) {
             onClick: (event: React.MouseEvent) => {
               reportInteraction('grafana_traces_trace_view_span_link_clicked', {
                 datasourceType: datasourceType,
+                grafana_version: config.buildInfo.version,
                 type: 'log',
                 location: 'spanDetails',
               });

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanLinks.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import React, { useState } from 'react';
 
-import { reportInteraction } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 import { useStyles2, MenuGroup, MenuItem, Icon, ContextMenu } from '@grafana/ui';
 
 import { SpanLinks } from '../types/links';
@@ -30,6 +30,7 @@ const renderMenuItems = (
                   ? (event) => {
                       reportInteraction('grafana_traces_trace_view_span_link_clicked', {
                         datasourceType: datasourceType,
+                        grafana_version: config.buildInfo.version,
                         type: 'log',
                         location: 'menu',
                       });
@@ -56,6 +57,7 @@ const renderMenuItems = (
                   ? (event) => {
                       reportInteraction('grafana_traces_trace_view_span_link_clicked', {
                         datasourceType: datasourceType,
+                        grafana_version: config.buildInfo.version,
                         type: 'metric',
                         location: 'menu',
                       });
@@ -82,6 +84,7 @@ const renderMenuItems = (
                   ? (event) => {
                       reportInteraction('grafana_traces_trace_view_span_link_clicked', {
                         datasourceType: datasourceType,
+                        grafana_version: config.buildInfo.version,
                         type: 'trace',
                         location: 'menu',
                       });

packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx

@@ -19,7 +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 { config, reportInteraction } from '@grafana/runtime';
 import { stylesFactory, withTheme2, ToolbarButton } from '@grafana/ui';
 
 import { Accessors } from '../ScrollManager';
@@ -541,6 +541,7 @@ export class UnthemedVirtualizedTraceView extends React.Component<VirtualizedTra
     topOfViewRef?.current?.scrollIntoView({ behavior: 'smooth' });
     reportInteraction('grafana_traces_trace_view_scroll_to_top_clicked', {
       datasourceType: datasourceType,
+      grafana_version: config.buildInfo.version,
       numServices: trace.services.length,
       numSpans: trace.spans.length,
     });

packages/jaeger-ui-components/src/TraceTimelineViewer/index.tsx

@@ -16,7 +16,7 @@ import { css } from '@emotion/css';
 import React, { RefObject } from 'react';
 
 import { GrafanaTheme2, LinkModel, TimeZone } from '@grafana/data';
-import { reportInteraction } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 import { stylesFactory, withTheme2 } from '@grafana/ui';
 
 import { Accessors } from '../ScrollManager';
@@ -147,6 +147,7 @@ export class UnthemedTraceTimelineViewer extends React.PureComponent<TProps, Sta
     this.props.collapseAll(this.props.trace.spans);
     reportInteraction('grafana_traces_traceID_expand_collapse_clicked', {
       datasourceType: this.props.datasourceType,
+      grafana_version: config.buildInfo.version,
       type: 'collapseAll',
     });
   };
@@ -155,6 +156,7 @@ export class UnthemedTraceTimelineViewer extends React.PureComponent<TProps, Sta
     this.props.collapseOne(this.props.trace.spans);
     reportInteraction('grafana_traces_traceID_expand_collapse_clicked', {
       datasourceType: this.props.datasourceType,
+      grafana_version: config.buildInfo.version,
       type: 'collapseOne',
     });
   };
@@ -163,6 +165,7 @@ export class UnthemedTraceTimelineViewer extends React.PureComponent<TProps, Sta
     this.props.expandAll();
     reportInteraction('grafana_traces_traceID_expand_collapse_clicked', {
       datasourceType: this.props.datasourceType,
+      grafana_version: config.buildInfo.version,
       type: 'expandAll',
     });
   };
@@ -171,6 +174,7 @@ export class UnthemedTraceTimelineViewer extends React.PureComponent<TProps, Sta
     this.props.expandOne(this.props.trace.spans);
     reportInteraction('grafana_traces_traceID_expand_collapse_clicked', {
       datasourceType: this.props.datasourceType,
+      grafana_version: config.buildInfo.version,
       type: 'expandOne',
     });
   };

public/app/features/explore/NodeGraphContainer.tsx

@@ -4,7 +4,7 @@ import { connect, ConnectedProps } from 'react-redux';
 import { useToggle, useWindowSize } from 'react-use';
 
 import { applyFieldOverrides, DataFrame, GrafanaTheme2, SplitOpen } from '@grafana/data';
-import { reportInteraction } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 import { Collapse, useStyles2, useTheme2 } from '@grafana/ui';
 
 import { NodeGraph } from '../../plugins/panel/nodeGraph';
@@ -59,6 +59,7 @@ export function UnconnectedNodeGraphContainer(props: Props) {
     toggleOpen();
     reportInteraction('grafana_traces_node_graph_panel_clicked', {
       datasourceType: datasourceType,
+      grafana_version: config.buildInfo.version,
       isExpanded: !open,
     });
   };

public/app/features/inspector/InspectDataTab.tsx

@@ -113,7 +113,8 @@ export class InspectDataTab extends PureComponent<Props, State> {
   };
 
   exportTracesAsJson = () => {
-    const { data, panel } = this.props;
+    const { data, panel, app } = this.props;
+
     if (!data) {
       return;
     }
@@ -123,16 +124,19 @@ export class InspectDataTab extends PureComponent<Props, State> {
       if (df.meta?.preferredVisualisationType !== 'trace') {
         continue;
       }
+      let traceFormat = 'otlp';
 
       switch (df.meta?.custom?.traceFormat) {
         case 'jaeger': {
           let res = transformToJaeger(new MutableDataFrame(df));
           downloadAsJson(res, (panel ? panel.getDisplayTitle() : 'Explore') + '-traces');
+          traceFormat = 'jaeger';
           break;
         }
         case 'zipkin': {
           let res = transformToZipkin(new MutableDataFrame(df));
           downloadAsJson(res, (panel ? panel.getDisplayTitle() : 'Explore') + '-traces');
+          traceFormat = 'zipkin';
           break;
         }
         case 'otlp':
@@ -142,11 +146,24 @@ export class InspectDataTab extends PureComponent<Props, State> {
           break;
         }
       }
+
+      reportInteraction('grafana_traces_download_traces_clicked', {
+        app,
+        grafana_version: config.buildInfo.version,
+        trace_format: traceFormat,
+        location: 'inspector',
+      });
     }
   };
 
   exportServiceGraph = () => {
-    const { data, panel } = this.props;
+    const { data, panel, app } = this.props;
+    reportInteraction('grafana_traces_download_service_graph_clicked', {
+      app,
+      grafana_version: config.buildInfo.version,
+      location: 'inspector',
+    });
+
     if (!data) {
       return;
     }

public/app/plugins/datasource/tempo/CheatSheet.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import { reportInteraction } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 
 export default function CheatSheet() {
   reportInteraction('grafana_traces_cheatsheet_clicked', {
     datasourceType: 'tempo',
+    grafana_version: config.buildInfo.version,
   });
 
   return (

public/app/plugins/datasource/tempo/QueryEditor/QueryField.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
 
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
-import { reportInteraction } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 import {
   FileDropzone,
   InlineField,
@@ -107,6 +107,7 @@ class TempoQueryFieldComponent extends React.PureComponent<Props> {
                 reportInteraction('grafana_traces_query_type_changed', {
                   datasourceType: 'tempo',
                   app: app ?? '',
+                  grafana_version: config.buildInfo.version,
                   newQueryType: v,
                   previousQueryType: query.queryType ?? '',
                 });

public/app/plugins/datasource/tempo/datasource.ts

@@ -108,7 +108,9 @@ export class TempoDatasource extends DataSourceWithBackend<TempoQuery, TempoJson
       reportInteraction('grafana_traces_loki_search_queried', {
         datasourceType: 'tempo',
         app: options.app ?? '',
-        linkedQueryExpr: targets.search[0].linkedQuery?.expr ?? '',
+        grafana_version: config.buildInfo.version,
+        hasLinkedQueryExpr:
+          targets.search[0].linkedQuery?.expr && targets.search[0].linkedQuery?.expr !== '' ? true : false,
       });
 
       const dsSrv = getDatasourceSrv();
@@ -148,10 +150,13 @@ export class TempoDatasource extends DataSourceWithBackend<TempoQuery, TempoJson
         reportInteraction('grafana_traces_search_queried', {
           datasourceType: 'tempo',
           app: options.app ?? '',
-          serviceName: targets.nativeSearch[0].serviceName ?? '',
+          grafana_version: config.buildInfo.version,
-          spanName: targets.nativeSearch[0].spanName ?? '',
+          hasServiceName: targets.nativeSearch[0].serviceName ? true : false,
+          hasSpanName: targets.nativeSearch[0].spanName ? true : false,
           resultLimit: targets.nativeSearch[0].limit ?? '',
-          search: targets.nativeSearch[0].search ?? '',
+          hasSearch: targets.nativeSearch[0].search ? true : false,
+          minDuration: targets.nativeSearch[0].minDuration ?? '',
+          maxDuration: targets.nativeSearch[0].maxDuration ?? '',
         });
 
         const timeRange = { startTime: options.range.from.unix(), endTime: options.range.to.unix() };
@@ -184,7 +189,8 @@ export class TempoDatasource extends DataSourceWithBackend<TempoQuery, TempoJson
           reportInteraction('grafana_traces_traceID_queried', {
             datasourceType: 'tempo',
             app: options.app ?? '',
-            query: queryValue ?? '',
+            grafana_version: config.buildInfo.version,
+            hasQuery: queryValue !== '' ? true : false,
           });
 
           subQueries.push(this.handleTraceIdQuery(options, targets.traceql));
@@ -192,6 +198,7 @@ export class TempoDatasource extends DataSourceWithBackend<TempoQuery, TempoJson
           reportInteraction('grafana_traces_traceql_queried', {
             datasourceType: 'tempo',
             app: options.app ?? '',
+            grafana_version: config.buildInfo.version,
             query: queryValue ?? '',
           });
           subQueries.push(
@@ -222,6 +229,7 @@ export class TempoDatasource extends DataSourceWithBackend<TempoQuery, TempoJson
         reportInteraction('grafana_traces_json_file_uploaded', {
           datasourceType: 'tempo',
           app: options.app ?? '',
+          grafana_version: config.buildInfo.version,
         });
 
         const jsonData = JSON.parse(this.uploadedJson as string);
@@ -245,7 +253,8 @@ export class TempoDatasource extends DataSourceWithBackend<TempoQuery, TempoJson
       reportInteraction('grafana_traces_service_graph_queried', {
         datasourceType: 'tempo',
         app: options.app ?? '',
-        serviceMapQuery: targets.serviceMap[0].serviceMapQuery ?? '',
+        grafana_version: config.buildInfo.version,
+        hasServiceMapQuery: targets.serviceMap[0].serviceMapQuery ? true : false,
       });
 
       const dsId = this.serviceMap.datasourceUid;
@@ -477,6 +486,7 @@ function serviceMapQuery(request: DataQueryRequest<TempoQuery>, datasourceUid: s
 
         reportInteraction('grafana_traces_service_graph_size', {
           datasourceType: 'tempo',
+          grafana_version: config.buildInfo.version,
           nodeLength,
           edgeLength,
         });