Variables: Adds user interaction reports (#42802)

* Variables: Adds user interaction reports

* Chore: updates after PR feedback

public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx

@@ -6,7 +6,7 @@ import config from 'app/core/config';
 import { contextSrv } from 'app/core/services/context_srv';
 import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
 import { DashboardModel } from '../../state/DashboardModel';
-import { SaveDashboardButton, SaveDashboardAsButton } from '../SaveDashboard/SaveDashboardButton';
+import { SaveDashboardAsButton, SaveDashboardButton } from '../SaveDashboard/SaveDashboardButton';
 import { VariableEditorContainer } from '../../../variables/editor/VariableEditorContainer';
 import { DashboardPermissions } from '../DashboardPermissions/DashboardPermissions';
 import { GeneralSettings } from './GeneralSettings';
@@ -15,7 +15,7 @@ import { LinksSettings } from './LinksSettings';
 import { VersionsSettings } from './VersionsSettings';
 import { JsonEditorSettings } from './JsonEditorSettings';
 import { GrafanaTheme2, locationUtil } from '@grafana/data';
-import { locationService } from '@grafana/runtime';
+import { locationService, reportInteraction } from '@grafana/runtime';
 
 export interface Props {
   dashboard: DashboardModel;
@@ -138,7 +138,10 @@ export function DashboardSettings({ dashboard, editview }: Props) {
             <aside className="dashboard-settings__aside">
               {pages.map((page) => (
                 <Link
-                  to={(loc) => locationUtil.updateSearchParams(loc.search, `editview=${page.id}`)}
+                  to={(loc) => {
+                    reportInteraction(`Dashboard settings navigation to ${page.id}`);
+                    return locationUtil.updateSearchParams(loc.search, `editview=${page.id}`);
+                  }}
                   className={cx('dashboard-settings__nav-item', { active: page.id === editview })}
                   key={page.id}
                 >

public/app/features/variables/editor/VariableEditorList.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 import { selectors } from '@grafana/e2e-selectors';
+import { reportInteraction } from '@grafana/runtime';
 
 import { VariableModel } from '../types';
 import { VariableIdentifier } from '../state/types';
@@ -33,6 +34,7 @@ export function VariableEditorList({
     if (!result.destination || !result.source) {
       return;
     }
+    reportInteraction('Variable drag and drop');
     const identifier = JSON.parse(result.draggableId);
     onChangeOrder(identifier, result.source.index, result.destination.index);
   };

public/app/features/variables/editor/VariableEditorListRow.tsx

@@ -4,6 +4,7 @@ import { Draggable } from 'react-beautiful-dnd';
 import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, IconButton, useStyles2, useTheme2 } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
+import { reportInteraction } from '@grafana/runtime';
 
 import { getVariableUsages, UsagesToNetwork, VariableUsageTree } from '../inspect/utils';
 import { hasOptions, isAdHoc, isQuery } from '../guard';
@@ -84,6 +85,7 @@ export function VariableEditorListRow({
             <IconButton
               onClick={(event) => {
                 event.preventDefault();
+                reportInteraction('Duplicate variable');
                 propsOnDuplicate(identifier);
               }}
               name="copy"
@@ -96,6 +98,7 @@ export function VariableEditorListRow({
             <IconButton
               onClick={(event) => {
                 event.preventDefault();
+                reportInteraction('Delete variable');
                 propsOnDelete(identifier);
               }}
               name="trash-alt"

public/app/features/variables/inspect/VariableUsagesButton.tsx

@@ -1,5 +1,6 @@
 import React, { FC, useMemo } from 'react';
 import { IconButton } from '@grafana/ui';
+import { reportInteraction } from '@grafana/runtime';
 
 import { UsagesToNetwork } from './utils';
 import { NetworkGraphModal } from './NetworkGraphModal';
@@ -26,7 +27,16 @@ export const VariableUsagesButton: FC<Props> = ({ id, usages, isAdhoc }) => {
   return (
     <NetworkGraphModal show={false} title={`Showing usages for: $${id}`} nodes={nodes} edges={network.edges}>
       {({ showModal }) => {
-        return <IconButton onClick={() => showModal()} name="code-branch" title="Show usages" />;
+        return (
+          <IconButton
+            onClick={() => {
+              reportInteraction('Show variable usages');
+              showModal();
+            }}
+            name="code-branch"
+            title="Show usages"
+          />
+        );
       }}
     </NetworkGraphModal>
   );

public/app/features/variables/inspect/VariablesDependenciesButton.tsx

@@ -1,7 +1,8 @@
 import React, { FC, useMemo } from 'react';
 import { Provider } from 'react-redux';
-// @ts-ignore
 import { Button } from '@grafana/ui';
+import { reportInteraction } from '@grafana/runtime';
+
 import { createDependencyEdges, createDependencyNodes, filterNodesWithDependencies } from './utils';
 import { store } from '../../../store/store';
 import { VariableModel } from '../types';
@@ -34,7 +35,14 @@ export const UnProvidedVariablesDependenciesButton: FC<Props> = ({ variables })
     >
       {({ showModal }) => {
         return (
-          <Button onClick={() => showModal()} icon="channel-add" variant="secondary">
+          <Button
+            onClick={() => {
+              reportInteraction('Show variable dependencies');
+              showModal();
+            }}
+            icon="channel-add"
+            variant="secondary"
+          >
             Show dependencies
           </Button>
         );