Explore: Add feature tracking events (#54514)

* feat: add tracking in query row button group

* feat: add tracking for split view

* feat: add tracking for query inspector tab open

* feat: add tracking for shortened link button

* feat: add tracking for change of datasource

* feat: add tracking for time range options

* refactor: clean up

* refactor: repair tests

* refactor: clean up

* feat: add details to change of data source

* refactor: remove duplicate tracking

* refactor: make tracking reusable in an easier way

* refactor: add property

* refactor: change data for time picker

* refactor: change tracking label for time picker

Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com>

* refactor: store tracking in explore component

* refactor: add index signature

* refactor: remove ?

* refactor: split into 3 callbacks

* refactor: apply suggestions from code review

Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>

Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com>
Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>

public/app/features/explore/ExploreQueryInspector.test.tsx

@@ -29,6 +29,11 @@ jest.mock('app/core/services/context_srv', () => ({
   },
 }));
 
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  reportInteraction: () => null,
+}));
+
 const setup = (propOverrides = {}) => {
   const props: ExploreQueryInspectorProps = {
     loading: false,

public/app/features/explore/ExploreQueryInspector.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { CoreApp, TimeZone } from '@grafana/data';
+import { reportInteraction } from '@grafana/runtime/src';
 import { TabbedContainer, TabConfig } from '@grafana/ui';
 import { ExploreDrawer } from 'app/features/explore/ExploreDrawer';
 import { InspectDataTab } from 'app/features/inspector/InspectDataTab';
@@ -27,6 +28,10 @@ export function ExploreQueryInspector(props: Props) {
   const dataFrames = queryResponse?.series || [];
   const error = queryResponse?.error;
 
+  useEffect(() => {
+    reportInteraction('grafana_explore_query_inspector_opened');
+  }, []);
+
   const statsTab: TabConfig = {
     label: 'Stats',
     value: 'stats',

public/app/features/explore/ExploreTimeControls.tsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 
 import { TimeRange, TimeZone, RawTimeRange, dateTimeForTimeZone, dateMath } from '@grafana/data';
+import { reportInteraction } from '@grafana/runtime';
 import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';
 import { getShiftedTimeRange, getZoomedTimeRange } from 'app/core/utils/timePicker';
 import { ExploreId } from 'app/types';
@@ -44,6 +45,11 @@ export class ExploreTimeControls extends Component<Props> {
       from: adjustedFrom,
       to: adjustedTo,
     });
+
+    reportInteraction('grafana_explore_time_picker_time_range_changed', {
+      timeRangeFrom: adjustedFrom,
+      timeRangeTo: adjustedTo,
+    });
   };
 
   onZoom = () => {

public/app/features/explore/ExploreToolbar.tsx

@@ -38,7 +38,8 @@ type Props = OwnProps & ConnectedProps<typeof connector>;
 
 class UnConnectedExploreToolbar extends PureComponent<Props> {
   onChangeDatasource = async (dsSettings: DataSourceInstanceSettings) => {
-    this.props.changeDatasource(this.props.exploreId, dsSettings.uid, { importQueries: true });
+    const { changeDatasource, exploreId } = this.props;
+    changeDatasource(exploreId, dsSettings.uid, { importQueries: true });
   };
 
   onRunQuery = (loading = false) => {
@@ -60,6 +61,23 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
     syncTimes(exploreId);
   };
 
+  onCopyShortLink = async () => {
+    await createAndCopyShortLink(window.location.href);
+    reportInteraction('grafana_explore_shortened_link_clicked');
+  };
+
+  onOpenSplitView = () => {
+    const { split } = this.props;
+    split();
+    reportInteraction('grafana_explore_splitView_opened');
+  };
+
+  onCloseSplitView = () => {
+    const { closeSplit, exploreId } = this.props;
+    closeSplit(exploreId);
+    reportInteraction('grafana_explore_splitView_closed');
+  };
+
   renderRefreshPicker = (showSmallTimePicker: boolean) => {
     const { loading, refreshInterval, isLive } = this.props;
 
@@ -92,7 +110,6 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
   render() {
     const {
       datasourceMissing,
-      closeSplit,
       exploreId,
       loading,
       range,
@@ -102,7 +119,6 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
       syncedTimes,
       refreshInterval,
       onChangeTime,
-      split,
       hasLiveOption,
       isLive,
       isPaused,
@@ -131,7 +147,7 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
                 key="share"
                 tooltip="Copy shortened link"
                 icon="share-alt"
-                onClick={() => createAndCopyShortLink(window.location.href)}
+                onClick={this.onCopyShortLink}
                 aria-label="Copy shortened link"
               />
             ),
@@ -149,11 +165,11 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
         >
           <>
             {!splitted ? (
-              <ToolbarButton tooltip="Split the pane" onClick={() => split()} icon="columns" disabled={isLive}>
+              <ToolbarButton tooltip="Split the pane" onClick={this.onOpenSplitView} icon="columns" disabled={isLive}>
                 Split
               </ToolbarButton>
             ) : (
-              <ToolbarButton tooltip="Close split pane" onClick={() => closeSplit(exploreId)} icon="times">
+              <ToolbarButton tooltip="Close split pane" onClick={this.onCloseSplitView} icon="times">
                 Close
               </ToolbarButton>
             )}

public/app/features/explore/QueryRows.test.tsx

@@ -12,6 +12,11 @@ import { UserState } from '../profile/state/reducers';
 import { QueryRows } from './QueryRows';
 import { makeExplorePaneState } from './state/utils';
 
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  reportInteraction: () => null,
+}));
+
 function setup(queries: DataQuery[]) {
   const defaultDs = {
     name: 'newDs',

public/app/features/explore/QueryRows.tsx

@@ -2,7 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import React, { useCallback, useMemo } from 'react';
 
 import { CoreApp, DataQuery, DataSourceInstanceSettings } from '@grafana/data';
-import { getDataSourceSrv } from '@grafana/runtime';
+import { getDataSourceSrv, reportInteraction } from '@grafana/runtime';
 import { getNextRefIdChar } from 'app/core/utils/query';
 import { useDispatch, useSelector } from 'app/types';
 import { ExploreId } from 'app/types/explore';
@@ -73,6 +73,18 @@ export const QueryRows = ({ exploreId }: Props) => {
     dispatch(importQueries(exploreId, queries, queryDatasource, targetDS, query.refId));
   };
 
+  const onQueryCopied = () => {
+    reportInteraction('grafana_explore_query_row_copy');
+  };
+
+  const onQueryRemoved = () => {
+    reportInteraction('grafana_explore_query_row_remove');
+  };
+
+  const onQueryToggled = (queryStatus?: boolean) => {
+    reportInteraction('grafana_query_row_toggle', queryStatus === undefined ? {} : { queryEnabled: queryStatus });
+  };
+
   return (
     <QueryEditorRows
       dsSettings={dsSettings}
@@ -81,6 +93,9 @@ export const QueryRows = ({ exploreId }: Props) => {
       onQueriesChange={onChange}
       onAddQuery={onAddQuery}
       onRunQueries={onRunQueries}
+      onQueryCopied={onQueryCopied}
+      onQueryRemoved={onQueryRemoved}
+      onQueryToggled={onQueryToggled}
       data={queryResponse}
       app={CoreApp.Explore}
       history={history}

public/app/features/query/components/QueryEditorRow.tsx

@@ -57,6 +57,9 @@ interface Props<TQuery extends DataQuery> {
   history?: Array<HistoryItem<TQuery>>;
   eventBus?: EventBusExtended;
   alerting?: boolean;
+  onQueryCopied?: () => void;
+  onQueryRemoved?: () => void;
+  onQueryToggled?: (queryStatus?: boolean | undefined) => void;
 }
 
 interface State<TQuery extends DataQuery> {
@@ -274,18 +277,32 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
   };
 
   onRemoveQuery = () => {
-    this.props.onRemoveQuery(this.props.query);
+    const { onRemoveQuery, query, onQueryRemoved } = this.props;
+    onRemoveQuery(query);
+
+    if (onQueryRemoved) {
+      onQueryRemoved();
+    }
   };
 
   onCopyQuery = () => {
-    const copy = cloneDeep(this.props.query);
+    const { query, onAddQuery, onQueryCopied } = this.props;
-    this.props.onAddQuery(copy);
+    const copy = cloneDeep(query);
+    onAddQuery(copy);
+
+    if (onQueryCopied) {
+      onQueryCopied();
+    }
   };
 
   onDisableQuery = () => {
-    const { query } = this.props;
+    const { query, onChange, onRunQuery, onQueryToggled } = this.props;
-    this.props.onChange({ ...query, hide: !query.hide });
+    onChange({ ...query, hide: !query.hide });
-    this.props.onRunQuery();
+    onRunQuery();
+
+    if (onQueryToggled) {
+      onQueryToggled(query.hide);
+    }
   };
 
   onToggleHelp = () => {

public/app/features/query/components/QueryEditorRows.tsx

@@ -31,7 +31,9 @@ interface Props {
   app?: CoreApp;
   history?: Array<HistoryItem<DataQuery>>;
   eventBus?: EventBusExtended;
-
+  onQueryCopied?: () => void;
+  onQueryRemoved?: () => void;
+  onQueryToggled?: (queryStatus?: boolean | undefined) => void;
   onDatasourceChange?: (dataSource: DataSourceInstanceSettings, query: DataQuery) => void;
 }
 
@@ -135,7 +137,19 @@ export class QueryEditorRows extends PureComponent<Props> {
   };
 
   render() {
-    const { dsSettings, data, queries, app, history, eventBus } = this.props;
+    const {
+      dsSettings,
+      data,
+      queries,
+      app,
+      history,
+      eventBus,
+      onAddQuery,
+      onRunQueries,
+      onQueryCopied,
+      onQueryRemoved,
+      onQueryToggled,
+    } = this.props;
 
     return (
       <DragDropContext onDragStart={this.onDragStart} onDragEnd={this.onDragEnd}>
@@ -160,8 +174,11 @@ export class QueryEditorRows extends PureComponent<Props> {
                       onChangeDataSource={onChangeDataSourceSettings}
                       onChange={(query) => this.onChangeQuery(query, index)}
                       onRemoveQuery={this.onRemoveQuery}
-                      onAddQuery={this.props.onAddQuery}
+                      onAddQuery={onAddQuery}
-                      onRunQuery={this.props.onRunQueries}
+                      onRunQuery={onRunQueries}
+                      onQueryCopied={onQueryCopied}
+                      onQueryRemoved={onQueryRemoved}
+                      onQueryToggled={onQueryToggled}
                       queries={queries}
                       app={app}
                       history={history}