Panel Inspect JSON: Add instrumentation for "Apply" feature (#55179)

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

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<Props, State> {
     };
   }
 
+  componentDidMount() {
+    // when opening the inspector we want to report the interaction
+    reportPanelInspectInteraction(InspectTab.JSON, 'panelJSON');
+  }
+
   onSelectChanged = async (item: SelectableValue<ShowContent>) => {
     const show = await this.getJSONObject(item.value!);
     const text = getPrettyJSON(show);
@@ -87,10 +94,13 @@ export class InspectJSONTab extends PureComponent<Props, State> {
   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<Props, State> {
     }
 
     if (this.hasPanelJSON && show === ShowContent.PanelJSON) {
+      reportPanelInspectInteraction(InspectTab.JSON, 'panelJSON');
       return panel!.getSaveModel();
     }
 
@@ -121,6 +132,15 @@ export class InspectJSONTab extends PureComponent<Props, State> {
         } 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<Props, State> {
   };
 
   onShowHelpWizard = () => {
+    reportPanelInspectInteraction(InspectTab.JSON, 'supportWizard');
     const queryParms = locationService.getSearch();
     queryParms.set('inspectTab', InspectTab.Help.toString());
     locationService.push('?' + queryParms.toString());

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<string, boolean | string>
+) => {
+  reportInteraction(`grafana_panel_inspect_${PanelInspectType}_${name}_clicked`, properties);
+};
+
 const getQuerySearchContext = (query: QueryProps) => {
   const showPreviews = query.layout === SearchLayout.Grid;
   const previewsEnabled = Boolean(config.featureToggles.panelTitleSearch);