From 1994c5718232c178bf3acc07a3824282e407d7d0 Mon Sep 17 00:00:00 2001 From: Laura Date: Wed, 31 Aug 2022 09:56:54 +0200 Subject: [PATCH 01/19] feat: add tracking in query row button group --- public/app/features/explore/QueryRows.tsx | 7 ++++ .../query/components/QueryEditorRow.tsx | 35 +++++++++++++++---- .../query/components/QueryEditorRows.tsx | 7 ++-- 3 files changed, 39 insertions(+), 10 deletions(-) diff --git a/public/app/features/explore/QueryRows.tsx b/public/app/features/explore/QueryRows.tsx index 772202c93492..f34c41fde059 100644 --- a/public/app/features/explore/QueryRows.tsx +++ b/public/app/features/explore/QueryRows.tsx @@ -44,6 +44,12 @@ export const QueryRows = ({ exploreId }: Props) => { const history = useSelector(getHistory); const eventBridge = useSelector(getEventBridge); + const trackActions = { + duplicateQuery: 'grafana_explore_duplicate_query', + disableEnableQuery: 'grafana_explore_disable_enable_query', + remove: 'grafana_explore_remove_query_row', + }; + const onRunQueries = useCallback(() => { dispatch(runQueries(exploreId)); }, [dispatch, exploreId]); @@ -85,6 +91,7 @@ export const QueryRows = ({ exploreId }: Props) => { app={CoreApp.Explore} history={history} eventBus={eventBridge} + trackActions={trackActions} /> ); }; diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx index 360c2ffa24c6..96dac9fdd90b 100644 --- a/public/app/features/query/components/QueryEditorRow.tsx +++ b/public/app/features/query/components/QueryEditorRow.tsx @@ -21,7 +21,7 @@ import { toLegacyResponseData, } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { AngularComponent, getAngularLoader } from '@grafana/runtime'; +import { AngularComponent, getAngularLoader, reportInteraction } from '@grafana/runtime'; import { Badge, ErrorBoundaryAlert, HorizontalGroup } from '@grafana/ui'; import { OperationRowHelp } from 'app/core/components/QueryOperationRow/OperationRowHelp'; import { QueryOperationAction } from 'app/core/components/QueryOperationRow/QueryOperationAction'; @@ -38,6 +38,12 @@ import { RowActionComponents } from './QueryActionComponent'; import { QueryEditorRowHeader } from './QueryEditorRowHeader'; import { QueryErrorAlert } from './QueryErrorAlert'; +export interface TrackActions { + duplicateQuery: string; + disableEnableQuery: string; + remove: string; +} + interface Props { data: PanelData; query: TQuery; @@ -57,6 +63,7 @@ interface Props { history?: Array>; eventBus?: EventBusExtended; alerting?: boolean; + trackActions?: TrackActions; } interface State { @@ -273,18 +280,32 @@ export class QueryEditorRow extends PureComponent { - this.props.onRemoveQuery(this.props.query); + const { onRemoveQuery, query, trackActions } = this.props; + onRemoveQuery(query); + + if (trackActions) { + reportInteraction(trackActions.remove); + } }; onCopyQuery = () => { - const copy = cloneDeep(this.props.query); - this.props.onAddQuery(copy); + const { query, onAddQuery, trackActions } = this.props; + const copy = cloneDeep(query); + onAddQuery(copy); + + if (trackActions) { + reportInteraction(trackActions.duplicateQuery); + } }; onDisableQuery = () => { - const { query } = this.props; - this.props.onChange({ ...query, hide: !query.hide }); - this.props.onRunQuery(); + const { query, onChange, onRunQuery, trackActions } = this.props; + onChange({ ...query, hide: !query.hide }); + onRunQuery(); + + if (trackActions) { + reportInteraction(trackActions.disableEnableQuery); + } }; onToggleHelp = () => { diff --git a/public/app/features/query/components/QueryEditorRows.tsx b/public/app/features/query/components/QueryEditorRows.tsx index b99ed48a0409..b3a54e54b58d 100644 --- a/public/app/features/query/components/QueryEditorRows.tsx +++ b/public/app/features/query/components/QueryEditorRows.tsx @@ -12,7 +12,7 @@ import { } from '@grafana/data'; import { getDataSourceSrv, reportInteraction } from '@grafana/runtime'; -import { QueryEditorRow } from './QueryEditorRow'; +import { QueryEditorRow, TrackActions } from './QueryEditorRow'; interface Props { // The query configuration @@ -31,7 +31,7 @@ interface Props { app?: CoreApp; history?: Array>; eventBus?: EventBusExtended; - + trackActions?: TrackActions; onDatasourceChange?: (dataSource: DataSourceInstanceSettings, query: DataQuery) => void; } @@ -135,7 +135,7 @@ export class QueryEditorRows extends PureComponent { }; render() { - const { dsSettings, data, queries, app, history, eventBus } = this.props; + const { dsSettings, data, queries, app, history, eventBus, trackActions } = this.props; return ( @@ -166,6 +166,7 @@ export class QueryEditorRows extends PureComponent { app={app} history={history} eventBus={eventBus} + trackActions={trackActions} /> ); })} From 6521e952fadab424be46ab4179fdd6e0dd616753 Mon Sep 17 00:00:00 2001 From: Laura Date: Wed, 31 Aug 2022 11:17:08 +0200 Subject: [PATCH 02/19] feat: add tracking for split view --- public/app/features/explore/ExploreToolbar.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx index 2098ccde72c2..1f5970054e12 100644 --- a/public/app/features/explore/ExploreToolbar.tsx +++ b/public/app/features/explore/ExploreToolbar.tsx @@ -60,6 +60,18 @@ class UnConnectedExploreToolbar extends PureComponent { syncTimes(exploreId); }; + 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 +104,6 @@ class UnConnectedExploreToolbar extends PureComponent { render() { const { datasourceMissing, - closeSplit, exploreId, loading, range, @@ -102,7 +113,6 @@ class UnConnectedExploreToolbar extends PureComponent { syncedTimes, refreshInterval, onChangeTime, - split, hasLiveOption, isLive, isPaused, @@ -149,11 +159,11 @@ class UnConnectedExploreToolbar extends PureComponent { > <> {!splitted ? ( - split()} icon="columns" disabled={isLive}> + Split ) : ( - closeSplit(exploreId)} icon="times"> + Close )} From 6238874187cdecb448ebdd81222cbd4cae7f69f0 Mon Sep 17 00:00:00 2001 From: Laura Date: Wed, 31 Aug 2022 13:57:52 +0200 Subject: [PATCH 03/19] feat: add tracking for query inspector tab open --- public/app/features/explore/ExploreQueryInspector.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/public/app/features/explore/ExploreQueryInspector.tsx b/public/app/features/explore/ExploreQueryInspector.tsx index bc39f5ea0ebf..dd9dac0891a3 100644 --- a/public/app/features/explore/ExploreQueryInspector.tsx +++ b/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,11 @@ export function ExploreQueryInspector(props: Props) { const dataFrames = queryResponse?.series || []; const error = queryResponse?.error; + useEffect(() => { + reportInteraction('grafana_explore_query_inspector_opened'); + console.log('grafana_explore_query_inspector_opened'); + }, []); + const statsTab: TabConfig = { label: 'Stats', value: 'stats', From 3f06c32800fecbf0d4ddfa66ff9195ba58bb373c Mon Sep 17 00:00:00 2001 From: Laura Date: Wed, 31 Aug 2022 14:13:12 +0200 Subject: [PATCH 04/19] feat: add tracking for shortened link button --- public/app/features/explore/ExploreToolbar.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx index 1f5970054e12..93a6f0266697 100644 --- a/public/app/features/explore/ExploreToolbar.tsx +++ b/public/app/features/explore/ExploreToolbar.tsx @@ -60,6 +60,11 @@ class UnConnectedExploreToolbar extends PureComponent { syncTimes(exploreId); }; + onCopyShortLink = async () => { + await createAndCopyShortLink(window.location.href); + reportInteraction('grafana_explore_shortened_link_clicked'); + }; + onOpenSplitView = () => { const { split } = this.props; split(); @@ -141,7 +146,7 @@ class UnConnectedExploreToolbar extends PureComponent { key="share" tooltip="Copy shortened link" icon="share-alt" - onClick={() => createAndCopyShortLink(window.location.href)} + onClick={this.onCopyShortLink} aria-label="Copy shortened link" /> ), From 991cffe0a772abfcf16d8f8c153f23dd9d51b682 Mon Sep 17 00:00:00 2001 From: Laura Date: Wed, 31 Aug 2022 14:30:30 +0200 Subject: [PATCH 05/19] feat: add tracking for change of datasource --- public/app/features/explore/ExploreToolbar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx index 93a6f0266697..183bd732ad94 100644 --- a/public/app/features/explore/ExploreToolbar.tsx +++ b/public/app/features/explore/ExploreToolbar.tsx @@ -39,6 +39,7 @@ type Props = OwnProps & ConnectedProps; class UnConnectedExploreToolbar extends PureComponent { onChangeDatasource = async (dsSettings: DataSourceInstanceSettings) => { this.props.changeDatasource(this.props.exploreId, dsSettings.uid, { importQueries: true }); + reportInteraction('grafana_explore_ds_picker_ds_change'); }; onRunQuery = (loading = false) => { From 7b9d2e4628a4812687fea8a54570ac66db1f0989 Mon Sep 17 00:00:00 2001 From: Laura Date: Thu, 1 Sep 2022 14:05:00 +0200 Subject: [PATCH 06/19] feat: add tracking for time range options --- public/app/features/explore/ExploreTimeControls.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/public/app/features/explore/ExploreTimeControls.tsx b/public/app/features/explore/ExploreTimeControls.tsx index aa32dbde1567..7fb22a0dbc26 100644 --- a/public/app/features/explore/ExploreTimeControls.tsx +++ b/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,13 @@ export class ExploreTimeControls extends Component { from: adjustedFrom, to: adjustedTo, }); + + if (typeof adjustedFrom === 'string' && adjustedFrom.startsWith('now-')) { + reportInteraction('grafana_explore_ds_picker_ds_change', { + selectedTimeRange: adjustedFrom, + }); + console.log('grafana_explore_ds_picker_ds_change'); + } }; onZoom = () => { From b549e3d2b19c5e46cda0ef3e196544d13bfa41c4 Mon Sep 17 00:00:00 2001 From: Laura Date: Thu, 1 Sep 2022 14:06:03 +0200 Subject: [PATCH 07/19] refactor: clean up --- public/app/features/explore/ExploreTimeControls.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/public/app/features/explore/ExploreTimeControls.tsx b/public/app/features/explore/ExploreTimeControls.tsx index 7fb22a0dbc26..667773ff71e6 100644 --- a/public/app/features/explore/ExploreTimeControls.tsx +++ b/public/app/features/explore/ExploreTimeControls.tsx @@ -50,7 +50,6 @@ export class ExploreTimeControls extends Component { reportInteraction('grafana_explore_ds_picker_ds_change', { selectedTimeRange: adjustedFrom, }); - console.log('grafana_explore_ds_picker_ds_change'); } }; From e85564e316939d5d1efe3db570e75eca2e58c5a1 Mon Sep 17 00:00:00 2001 From: Laura Date: Fri, 2 Sep 2022 13:27:59 +0200 Subject: [PATCH 08/19] refactor: repair tests --- public/app/features/explore/ExploreQueryInspector.test.tsx | 5 +++++ public/app/features/explore/ExploreQueryInspector.tsx | 1 - public/app/features/explore/QueryRows.test.tsx | 5 +++++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/public/app/features/explore/ExploreQueryInspector.test.tsx b/public/app/features/explore/ExploreQueryInspector.test.tsx index 49af7ff1a678..2265599e8183 100644 --- a/public/app/features/explore/ExploreQueryInspector.test.tsx +++ b/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, diff --git a/public/app/features/explore/ExploreQueryInspector.tsx b/public/app/features/explore/ExploreQueryInspector.tsx index dd9dac0891a3..681f7e7a747f 100644 --- a/public/app/features/explore/ExploreQueryInspector.tsx +++ b/public/app/features/explore/ExploreQueryInspector.tsx @@ -30,7 +30,6 @@ export function ExploreQueryInspector(props: Props) { useEffect(() => { reportInteraction('grafana_explore_query_inspector_opened'); - console.log('grafana_explore_query_inspector_opened'); }, []); const statsTab: TabConfig = { diff --git a/public/app/features/explore/QueryRows.test.tsx b/public/app/features/explore/QueryRows.test.tsx index d4ddb45221f2..48b4d4ca6502 100644 --- a/public/app/features/explore/QueryRows.test.tsx +++ b/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', From c7e1118a50fe712a9b7398f93b49b65ca9b99a09 Mon Sep 17 00:00:00 2001 From: Laura Date: Fri, 2 Sep 2022 14:05:57 +0200 Subject: [PATCH 09/19] refactor: clean up --- public/app/features/explore/ExploreTimeControls.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/features/explore/ExploreTimeControls.tsx b/public/app/features/explore/ExploreTimeControls.tsx index 667773ff71e6..b960219de882 100644 --- a/public/app/features/explore/ExploreTimeControls.tsx +++ b/public/app/features/explore/ExploreTimeControls.tsx @@ -47,7 +47,7 @@ export class ExploreTimeControls extends Component { }); if (typeof adjustedFrom === 'string' && adjustedFrom.startsWith('now-')) { - reportInteraction('grafana_explore_ds_picker_ds_change', { + reportInteraction('grafana_explore_time_picker_time_range', { selectedTimeRange: adjustedFrom, }); } From 48c199673e063f133f6739fee9cb0a49ea761419 Mon Sep 17 00:00:00 2001 From: Laura Date: Fri, 2 Sep 2022 14:41:22 +0200 Subject: [PATCH 10/19] feat: add details to change of data source --- public/app/features/explore/ExploreToolbar.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx index 183bd732ad94..62f4babf4173 100644 --- a/public/app/features/explore/ExploreToolbar.tsx +++ b/public/app/features/explore/ExploreToolbar.tsx @@ -38,8 +38,12 @@ type Props = OwnProps & ConnectedProps; class UnConnectedExploreToolbar extends PureComponent { onChangeDatasource = async (dsSettings: DataSourceInstanceSettings) => { - this.props.changeDatasource(this.props.exploreId, dsSettings.uid, { importQueries: true }); - reportInteraction('grafana_explore_ds_picker_ds_change'); + const { changeDatasource, datasourceRef } = this.props; + changeDatasource(this.props.exploreId, dsSettings.uid, { importQueries: true }); + reportInteraction('grafana_explore_ds_picker_ds_change', { + newDsType: dsSettings.type, + oldDsType: datasourceRef.type, + }); }; onRunQuery = (loading = false) => { From 0df01a3e3a80eeb2e22142ae8728cafd04fd1761 Mon Sep 17 00:00:00 2001 From: Laura Date: Tue, 6 Sep 2022 14:47:48 +0200 Subject: [PATCH 11/19] refactor: remove duplicate tracking --- public/app/features/explore/ExploreToolbar.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx index 62f4babf4173..dfaced53e30e 100644 --- a/public/app/features/explore/ExploreToolbar.tsx +++ b/public/app/features/explore/ExploreToolbar.tsx @@ -38,12 +38,8 @@ type Props = OwnProps & ConnectedProps; class UnConnectedExploreToolbar extends PureComponent { onChangeDatasource = async (dsSettings: DataSourceInstanceSettings) => { - const { changeDatasource, datasourceRef } = this.props; - changeDatasource(this.props.exploreId, dsSettings.uid, { importQueries: true }); - reportInteraction('grafana_explore_ds_picker_ds_change', { - newDsType: dsSettings.type, - oldDsType: datasourceRef.type, - }); + const { changeDatasource, exploreId } = this.props; + changeDatasource(exploreId, dsSettings.uid, { importQueries: true }); }; onRunQuery = (loading = false) => { From 056cc103603b5bfe2cc713228cb22ee6c798ad6c Mon Sep 17 00:00:00 2001 From: Laura Date: Wed, 7 Sep 2022 09:36:04 +0200 Subject: [PATCH 12/19] refactor: make tracking reusable in an easier way --- public/app/features/explore/QueryRows.tsx | 8 +----- .../query/components/QueryEditorRow.tsx | 26 +++++++------------ .../query/components/QueryEditorRows.tsx | 8 +++--- 3 files changed, 15 insertions(+), 27 deletions(-) diff --git a/public/app/features/explore/QueryRows.tsx b/public/app/features/explore/QueryRows.tsx index f34c41fde059..fd71d38deb9c 100644 --- a/public/app/features/explore/QueryRows.tsx +++ b/public/app/features/explore/QueryRows.tsx @@ -44,12 +44,6 @@ export const QueryRows = ({ exploreId }: Props) => { const history = useSelector(getHistory); const eventBridge = useSelector(getEventBridge); - const trackActions = { - duplicateQuery: 'grafana_explore_duplicate_query', - disableEnableQuery: 'grafana_explore_disable_enable_query', - remove: 'grafana_explore_remove_query_row', - }; - const onRunQueries = useCallback(() => { dispatch(runQueries(exploreId)); }, [dispatch, exploreId]); @@ -91,7 +85,7 @@ export const QueryRows = ({ exploreId }: Props) => { app={CoreApp.Explore} history={history} eventBus={eventBridge} - trackActions={trackActions} + trackingContext="explore" /> ); }; diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx index 96dac9fdd90b..faa70a90dadd 100644 --- a/public/app/features/query/components/QueryEditorRow.tsx +++ b/public/app/features/query/components/QueryEditorRow.tsx @@ -38,12 +38,6 @@ import { RowActionComponents } from './QueryActionComponent'; import { QueryEditorRowHeader } from './QueryEditorRowHeader'; import { QueryErrorAlert } from './QueryErrorAlert'; -export interface TrackActions { - duplicateQuery: string; - disableEnableQuery: string; - remove: string; -} - interface Props { data: PanelData; query: TQuery; @@ -63,7 +57,7 @@ interface Props { history?: Array>; eventBus?: EventBusExtended; alerting?: boolean; - trackActions?: TrackActions; + trackingContext?: string; } interface State { @@ -280,31 +274,31 @@ export class QueryEditorRow extends PureComponent { - const { onRemoveQuery, query, trackActions } = this.props; + const { onRemoveQuery, query, trackingContext } = this.props; onRemoveQuery(query); - if (trackActions) { - reportInteraction(trackActions.remove); + if (trackingContext) { + reportInteraction('grafana_queryRow_remove_query', { context: trackingContext }); } }; onCopyQuery = () => { - const { query, onAddQuery, trackActions } = this.props; + const { query, onAddQuery, trackingContext } = this.props; const copy = cloneDeep(query); onAddQuery(copy); - if (trackActions) { - reportInteraction(trackActions.duplicateQuery); + if (trackingContext) { + reportInteraction('grafana_queryRow_duplicate_query', { context: trackingContext }); } }; onDisableQuery = () => { - const { query, onChange, onRunQuery, trackActions } = this.props; + const { query, onChange, onRunQuery, trackingContext } = this.props; onChange({ ...query, hide: !query.hide }); onRunQuery(); - if (trackActions) { - reportInteraction(trackActions.disableEnableQuery); + if (trackingContext) { + reportInteraction('grafana_queryRow_disable_enable_query', { context: trackingContext }); } }; diff --git a/public/app/features/query/components/QueryEditorRows.tsx b/public/app/features/query/components/QueryEditorRows.tsx index b3a54e54b58d..367b304fc848 100644 --- a/public/app/features/query/components/QueryEditorRows.tsx +++ b/public/app/features/query/components/QueryEditorRows.tsx @@ -12,7 +12,7 @@ import { } from '@grafana/data'; import { getDataSourceSrv, reportInteraction } from '@grafana/runtime'; -import { QueryEditorRow, TrackActions } from './QueryEditorRow'; +import { QueryEditorRow } from './QueryEditorRow'; interface Props { // The query configuration @@ -31,7 +31,7 @@ interface Props { app?: CoreApp; history?: Array>; eventBus?: EventBusExtended; - trackActions?: TrackActions; + trackingContext?: string; onDatasourceChange?: (dataSource: DataSourceInstanceSettings, query: DataQuery) => void; } @@ -135,7 +135,7 @@ export class QueryEditorRows extends PureComponent { }; render() { - const { dsSettings, data, queries, app, history, eventBus, trackActions } = this.props; + const { dsSettings, data, queries, app, history, eventBus, trackingContext } = this.props; return ( @@ -166,7 +166,7 @@ export class QueryEditorRows extends PureComponent { app={app} history={history} eventBus={eventBus} - trackActions={trackActions} + trackingContext={trackingContext} /> ); })} From a6103726645fd8d84045a0b055fa4237d6742d2a Mon Sep 17 00:00:00 2001 From: Laura Date: Wed, 7 Sep 2022 11:52:32 +0200 Subject: [PATCH 13/19] refactor: add property --- public/app/features/query/components/QueryEditorRow.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx index faa70a90dadd..0a5e025a26f7 100644 --- a/public/app/features/query/components/QueryEditorRow.tsx +++ b/public/app/features/query/components/QueryEditorRow.tsx @@ -298,7 +298,10 @@ export class QueryEditorRow extends PureComponent Date: Wed, 7 Sep 2022 15:34:51 +0200 Subject: [PATCH 14/19] refactor: change data for time picker --- public/app/features/explore/ExploreTimeControls.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/public/app/features/explore/ExploreTimeControls.tsx b/public/app/features/explore/ExploreTimeControls.tsx index b960219de882..3d9ea2e4ae26 100644 --- a/public/app/features/explore/ExploreTimeControls.tsx +++ b/public/app/features/explore/ExploreTimeControls.tsx @@ -46,11 +46,10 @@ export class ExploreTimeControls extends Component { to: adjustedTo, }); - if (typeof adjustedFrom === 'string' && adjustedFrom.startsWith('now-')) { - reportInteraction('grafana_explore_time_picker_time_range', { - selectedTimeRange: adjustedFrom, - }); - } + reportInteraction('grafana_explore_time_picker_time_range', { + timeRangeFrom: adjustedFrom, + timeRangeTo: adjustedTo, + }); }; onZoom = () => { From 20eac0f3bf14996e923de69110677133c848459a Mon Sep 17 00:00:00 2001 From: Laura Benz <48948963+L-M-K-B@users.noreply.github.com> Date: Fri, 16 Sep 2022 16:16:53 +0200 Subject: [PATCH 15/19] refactor: change tracking label for time picker Co-authored-by: Ivan Ortega Alba --- public/app/features/explore/ExploreTimeControls.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/features/explore/ExploreTimeControls.tsx b/public/app/features/explore/ExploreTimeControls.tsx index 3d9ea2e4ae26..1f38d470659a 100644 --- a/public/app/features/explore/ExploreTimeControls.tsx +++ b/public/app/features/explore/ExploreTimeControls.tsx @@ -46,7 +46,7 @@ export class ExploreTimeControls extends Component { to: adjustedTo, }); - reportInteraction('grafana_explore_time_picker_time_range', { + reportInteraction('grafana_explore_time_picker_time_range_changed', { timeRangeFrom: adjustedFrom, timeRangeTo: adjustedTo, }); From 5a690fe5a262f6e4da7414278bf8de6100c217a6 Mon Sep 17 00:00:00 2001 From: Laura Date: Fri, 16 Sep 2022 17:31:05 +0200 Subject: [PATCH 16/19] refactor: store tracking in explore component --- public/app/features/explore/QueryRows.tsx | 16 +++++++++--- .../query/components/QueryEditorRow.tsx | 25 ++++++++----------- .../query/components/QueryEditorRows.tsx | 11 ++++---- 3 files changed, 30 insertions(+), 22 deletions(-) diff --git a/public/app/features/explore/QueryRows.tsx b/public/app/features/explore/QueryRows.tsx index fd71d38deb9c..f5f08ea90dee 100644 --- a/public/app/features/explore/QueryRows.tsx +++ b/public/app/features/explore/QueryRows.tsx @@ -3,7 +3,7 @@ import React, { useCallback, useMemo } from 'react'; import { useDispatch, useSelector } from 'react-redux'; 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 { ExploreId } from 'app/types/explore'; @@ -73,19 +73,29 @@ export const QueryRows = ({ exploreId }: Props) => { dispatch(importQueries(exploreId, queries, queryDatasource, targetDS, query.refId)); }; + const onTriggerTracking = (action: string, queryStatus?: boolean) => { + const trackingLabels = { + remove: 'grafana_explore_query_row_remove', + copy: 'grafana_explore_query_row_copy', + enableDisable: 'grafana_query-row_disable_enable', + }; + + reportInteraction(trackingLabels[action], queryStatus === undefined ? {} : { queryEnabled: queryStatus }); + }; + return ( onMixedDataSourceChange(ds, query)} + onDatasourceChange={(ds: DataSourceInstanceSettings, query?: DataQuery) => onMixedDataSourceChange(ds, query)} queries={queries} onQueriesChange={onChange} onAddQuery={onAddQuery} onRunQueries={onRunQueries} + onTriggerTracking={onTriggerTracking} data={queryResponse} app={CoreApp.Explore} history={history} eventBus={eventBridge} - trackingContext="explore" /> ); }; diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx index 0a5e025a26f7..2c28d69351e8 100644 --- a/public/app/features/query/components/QueryEditorRow.tsx +++ b/public/app/features/query/components/QueryEditorRow.tsx @@ -21,7 +21,7 @@ import { toLegacyResponseData, } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { AngularComponent, getAngularLoader, reportInteraction } from '@grafana/runtime'; +import { AngularComponent, getAngularLoader } from '@grafana/runtime'; import { Badge, ErrorBoundaryAlert, HorizontalGroup } from '@grafana/ui'; import { OperationRowHelp } from 'app/core/components/QueryOperationRow/OperationRowHelp'; import { QueryOperationAction } from 'app/core/components/QueryOperationRow/QueryOperationAction'; @@ -57,7 +57,7 @@ interface Props { history?: Array>; eventBus?: EventBusExtended; alerting?: boolean; - trackingContext?: string; + onTriggerTracking?: (action: string, queryStatus?: boolean | undefined) => void; } interface State { @@ -274,34 +274,31 @@ export class QueryEditorRow extends PureComponent { - const { onRemoveQuery, query, trackingContext } = this.props; + const { onRemoveQuery, query, onTriggerTracking } = this.props; onRemoveQuery(query); - if (trackingContext) { - reportInteraction('grafana_queryRow_remove_query', { context: trackingContext }); + if (onTriggerTracking) { + onTriggerTracking('remove'); } }; onCopyQuery = () => { - const { query, onAddQuery, trackingContext } = this.props; + const { query, onAddQuery, onTriggerTracking } = this.props; const copy = cloneDeep(query); onAddQuery(copy); - if (trackingContext) { - reportInteraction('grafana_queryRow_duplicate_query', { context: trackingContext }); + if (onTriggerTracking) { + onTriggerTracking('copy'); } }; onDisableQuery = () => { - const { query, onChange, onRunQuery, trackingContext } = this.props; + const { query, onChange, onRunQuery, onTriggerTracking } = this.props; onChange({ ...query, hide: !query.hide }); onRunQuery(); - if (trackingContext) { - reportInteraction('grafana_queryRow_disable_enable_query', { - context: trackingContext, - queryEnabled: query.hide, - }); + if (onTriggerTracking) { + onTriggerTracking('enableDisable', query.hide); } }; diff --git a/public/app/features/query/components/QueryEditorRows.tsx b/public/app/features/query/components/QueryEditorRows.tsx index 367b304fc848..7b2854c29d92 100644 --- a/public/app/features/query/components/QueryEditorRows.tsx +++ b/public/app/features/query/components/QueryEditorRows.tsx @@ -31,7 +31,7 @@ interface Props { app?: CoreApp; history?: Array>; eventBus?: EventBusExtended; - trackingContext?: string; + onTriggerTracking?: (action: string, queryStatus?: boolean | undefined) => void; onDatasourceChange?: (dataSource: DataSourceInstanceSettings, query: DataQuery) => void; } @@ -135,7 +135,8 @@ export class QueryEditorRows extends PureComponent { }; render() { - const { dsSettings, data, queries, app, history, eventBus, trackingContext } = this.props; + const { dsSettings, data, queries, app, history, eventBus, onAddQuery, onRunQueries, onTriggerTracking } = + this.props; return ( @@ -160,13 +161,13 @@ export class QueryEditorRows extends PureComponent { onChangeDataSource={onChangeDataSourceSettings} onChange={(query) => this.onChangeQuery(query, index)} onRemoveQuery={this.onRemoveQuery} - onAddQuery={this.props.onAddQuery} - onRunQuery={this.props.onRunQueries} + onAddQuery={onAddQuery} + onRunQuery={onRunQueries} + onTriggerTracking={onTriggerTracking} queries={queries} app={app} history={history} eventBus={eventBus} - trackingContext={trackingContext} /> ); })} From fbe84ccc933ecec6dab13ad774bcee1a1cda33d0 Mon Sep 17 00:00:00 2001 From: Laura Date: Mon, 19 Sep 2022 10:14:42 +0200 Subject: [PATCH 17/19] refactor: add index signature --- public/app/features/explore/QueryRows.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/features/explore/QueryRows.tsx b/public/app/features/explore/QueryRows.tsx index f5f08ea90dee..a4c4e3f29958 100644 --- a/public/app/features/explore/QueryRows.tsx +++ b/public/app/features/explore/QueryRows.tsx @@ -74,7 +74,7 @@ export const QueryRows = ({ exploreId }: Props) => { }; const onTriggerTracking = (action: string, queryStatus?: boolean) => { - const trackingLabels = { + const trackingLabels: { [key: string]: string } = { remove: 'grafana_explore_query_row_remove', copy: 'grafana_explore_query_row_copy', enableDisable: 'grafana_query-row_disable_enable', From 3dbb834d60d5e89bd836dd6a766cc3bc11231855 Mon Sep 17 00:00:00 2001 From: Laura Date: Mon, 19 Sep 2022 10:24:02 +0200 Subject: [PATCH 18/19] refactor: remove ? --- public/app/features/explore/QueryRows.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/features/explore/QueryRows.tsx b/public/app/features/explore/QueryRows.tsx index a4c4e3f29958..49373ee9ba35 100644 --- a/public/app/features/explore/QueryRows.tsx +++ b/public/app/features/explore/QueryRows.tsx @@ -86,7 +86,7 @@ export const QueryRows = ({ exploreId }: Props) => { return ( onMixedDataSourceChange(ds, query)} + onDatasourceChange={(ds: DataSourceInstanceSettings, query: DataQuery) => onMixedDataSourceChange(ds, query)} queries={queries} onQueriesChange={onChange} onAddQuery={onAddQuery} From 1d0fc33ba9f08c6297f16daa09c61815518c7196 Mon Sep 17 00:00:00 2001 From: Laura Date: Tue, 20 Sep 2022 08:56:23 +0200 Subject: [PATCH 19/19] refactor: split into 3 callbacks --- public/app/features/explore/QueryRows.tsx | 22 ++++++++++-------- .../query/components/QueryEditorRow.tsx | 22 ++++++++++-------- .../query/components/QueryEditorRows.tsx | 23 +++++++++++++++---- 3 files changed, 44 insertions(+), 23 deletions(-) diff --git a/public/app/features/explore/QueryRows.tsx b/public/app/features/explore/QueryRows.tsx index 49373ee9ba35..489922184968 100644 --- a/public/app/features/explore/QueryRows.tsx +++ b/public/app/features/explore/QueryRows.tsx @@ -73,14 +73,16 @@ export const QueryRows = ({ exploreId }: Props) => { dispatch(importQueries(exploreId, queries, queryDatasource, targetDS, query.refId)); }; - const onTriggerTracking = (action: string, queryStatus?: boolean) => { - const trackingLabels: { [key: string]: string } = { - remove: 'grafana_explore_query_row_remove', - copy: 'grafana_explore_query_row_copy', - enableDisable: 'grafana_query-row_disable_enable', - }; - - reportInteraction(trackingLabels[action], queryStatus === undefined ? {} : { queryEnabled: queryStatus }); + 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 ( @@ -91,7 +93,9 @@ export const QueryRows = ({ exploreId }: Props) => { onQueriesChange={onChange} onAddQuery={onAddQuery} onRunQueries={onRunQueries} - onTriggerTracking={onTriggerTracking} + onQueryCopied={onQueryCopied} + onQueryRemoved={onQueryRemoved} + onQueryToggled={onQueryToggled} data={queryResponse} app={CoreApp.Explore} history={history} diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx index 7cb156b2dd55..8034777cd52f 100644 --- a/public/app/features/query/components/QueryEditorRow.tsx +++ b/public/app/features/query/components/QueryEditorRow.tsx @@ -57,7 +57,9 @@ interface Props { history?: Array>; eventBus?: EventBusExtended; alerting?: boolean; - onTriggerTracking?: (action: string, queryStatus?: boolean | undefined) => void; + onQueryCopied?: () => void; + onQueryRemoved?: () => void; + onQueryToggled?: (queryStatus?: boolean | undefined) => void; } interface State { @@ -275,31 +277,31 @@ export class QueryEditorRow extends PureComponent { - const { onRemoveQuery, query, onTriggerTracking } = this.props; + const { onRemoveQuery, query, onQueryRemoved } = this.props; onRemoveQuery(query); - if (onTriggerTracking) { - onTriggerTracking('remove'); + if (onQueryRemoved) { + onQueryRemoved(); } }; onCopyQuery = () => { - const { query, onAddQuery, onTriggerTracking } = this.props; + const { query, onAddQuery, onQueryCopied } = this.props; const copy = cloneDeep(query); onAddQuery(copy); - if (onTriggerTracking) { - onTriggerTracking('copy'); + if (onQueryCopied) { + onQueryCopied(); } }; onDisableQuery = () => { - const { query, onChange, onRunQuery, onTriggerTracking } = this.props; + const { query, onChange, onRunQuery, onQueryToggled } = this.props; onChange({ ...query, hide: !query.hide }); onRunQuery(); - if (onTriggerTracking) { - onTriggerTracking('enableDisable', query.hide); + if (onQueryToggled) { + onQueryToggled(query.hide); } }; diff --git a/public/app/features/query/components/QueryEditorRows.tsx b/public/app/features/query/components/QueryEditorRows.tsx index 7b2854c29d92..05eec743cb89 100644 --- a/public/app/features/query/components/QueryEditorRows.tsx +++ b/public/app/features/query/components/QueryEditorRows.tsx @@ -31,7 +31,9 @@ interface Props { app?: CoreApp; history?: Array>; eventBus?: EventBusExtended; - onTriggerTracking?: (action: string, queryStatus?: boolean | undefined) => void; + onQueryCopied?: () => void; + onQueryRemoved?: () => void; + onQueryToggled?: (queryStatus?: boolean | undefined) => void; onDatasourceChange?: (dataSource: DataSourceInstanceSettings, query: DataQuery) => void; } @@ -135,8 +137,19 @@ export class QueryEditorRows extends PureComponent { }; render() { - const { dsSettings, data, queries, app, history, eventBus, onAddQuery, onRunQueries, onTriggerTracking } = - this.props; + const { + dsSettings, + data, + queries, + app, + history, + eventBus, + onAddQuery, + onRunQueries, + onQueryCopied, + onQueryRemoved, + onQueryToggled, + } = this.props; return ( @@ -163,7 +176,9 @@ export class QueryEditorRows extends PureComponent { onRemoveQuery={this.onRemoveQuery} onAddQuery={onAddQuery} onRunQuery={onRunQueries} - onTriggerTracking={onTriggerTracking} + onQueryCopied={onQueryCopied} + onQueryRemoved={onQueryRemoved} + onQueryToggled={onQueryToggled} queries={queries} app={app} history={history}