diff --git a/public/app/features/inspector/InspectJSONTab.tsx b/public/app/features/inspector/InspectJSONTab.tsx index 6ebcd4f146e3..79ddf67184fd 100644 --- a/public/app/features/inspector/InspectJSONTab.tsx +++ b/public/app/features/inspector/InspectJSONTab.tsx @@ -1,4 +1,5 @@ import { t } from '@lingui/macro'; +import { isEqual } from 'lodash'; import React, { PureComponent } from 'react'; import AutoSizer from 'react-virtualized-auto-sizer'; import { firstValueFrom } from 'rxjs'; @@ -12,6 +13,7 @@ import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; import { getPanelDataFrames } from '../dashboard/components/HelpWizard/utils'; import { getPanelInspectorStyles } from '../inspector/styles'; +import { reportPanelInspectInteraction } from '../search/page/reporting'; import { InspectTab } from './types'; @@ -73,6 +75,11 @@ export class InspectJSONTab extends PureComponent { }; } + componentDidMount() { + // when opening the inspector we want to report the interaction + reportPanelInspectInteraction(InspectTab.JSON, 'panelJSON'); + } + onSelectChanged = async (item: SelectableValue) => { const show = await this.getJSONObject(item.value!); const text = getPrettyJSON(show); @@ -87,10 +94,13 @@ export class InspectJSONTab extends PureComponent { async getJSONObject(show: ShowContent) { const { data, panel } = this.props; if (show === ShowContent.PanelData) { + reportPanelInspectInteraction(InspectTab.JSON, 'panelData'); return data; } if (show === ShowContent.DataFrames) { + reportPanelInspectInteraction(InspectTab.JSON, 'dataFrame'); + let d = data; // do not include transforms and @@ -106,6 +116,7 @@ export class InspectJSONTab extends PureComponent { } if (this.hasPanelJSON && show === ShowContent.PanelJSON) { + reportPanelInspectInteraction(InspectTab.JSON, 'panelJSON'); return panel!.getSaveModel(); } @@ -121,6 +132,15 @@ export class InspectJSONTab extends PureComponent { } else { const updates = JSON.parse(this.state.text); dashboard!.shouldUpdateDashboardPanelFromJSON(updates, panel!); + + //Report relevant updates + reportPanelInspectInteraction(InspectTab.JSON, 'apply', { + panel_type_changed: panel!.type !== updates.type, + panel_id_changed: panel!.id !== updates.id, + panel_grid_pos_changed: !isEqual(panel!.gridPos, updates.gridPos), + panel_targets_changed: !isEqual(panel!.targets, updates.targets), + }); + panel!.restoreModel(updates); panel!.refresh(); appEvents.emit(AppEvents.alertSuccess, ['Panel model updated']); @@ -135,6 +155,7 @@ export class InspectJSONTab extends PureComponent { }; onShowHelpWizard = () => { + reportPanelInspectInteraction(InspectTab.JSON, 'supportWizard'); const queryParms = locationService.getSearch(); queryParms.set('inspectTab', InspectTab.Help.toString()); locationService.push('?' + queryParms.toString()); diff --git a/public/app/features/search/page/reporting.ts b/public/app/features/search/page/reporting.ts index 482764004214..5e6c5bd947e7 100644 --- a/public/app/features/search/page/reporting.ts +++ b/public/app/features/search/page/reporting.ts @@ -1,4 +1,5 @@ import { config, reportInteraction } from '@grafana/runtime'; +import { InspectTab } from 'app/features/inspector/types'; import { SearchLayout } from '../types'; @@ -32,6 +33,14 @@ export const reportSearchFailedQueryInteraction = ( reportInteraction(`${dashboardListType}_query_failed`, { ...getQuerySearchContext(query), error }); }; +export const reportPanelInspectInteraction = ( + PanelInspectType: InspectTab, + name: string, + properties?: Record +) => { + reportInteraction(`grafana_panel_inspect_${PanelInspectType}_${name}_clicked`, properties); +}; + const getQuerySearchContext = (query: QueryProps) => { const showPreviews = query.layout === SearchLayout.Grid; const previewsEnabled = Boolean(config.featureToggles.panelTitleSearch);