Instrument transformations (#64960)

* Instrument transformations

* Fix any

* Fix any

* Fix unit test

public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { useToggle } from 'react-use';
 
 import { DataFrame, DataTransformerConfig, TransformerRegistryItem, FrameMatcherID } from '@grafana/data';
+import { reportInteraction } from '@grafana/runtime';
 import { HorizontalGroup } from '@grafana/ui';
 import { OperationRowHelp } from 'app/core/components/QueryOperationRow/OperationRowHelp';
 import { QueryOperationAction } from 'app/core/components/QueryOperationRow/QueryOperationAction';
@@ -19,7 +20,7 @@ interface TransformationOperationRowProps {
   id: string;
   index: number;
   data: DataFrame[];
-  uiConfig: TransformerRegistryItem<any>;
+  uiConfig: TransformerRegistryItem<null>;
   configs: TransformationsEditorTransformation[];
   onRemove: (index: number) => void;
   onChange: (index: number, config: DataTransformerConfig) => void;
@@ -65,6 +66,21 @@ export const TransformationOperationRow = ({
     onChange(index, current);
   }, [onChange, index, configs]);
 
+  // Instrument toggle callback
+  const instrumentToggleCallback = useCallback(
+    (callback: (e: React.MouseEvent) => void, toggleId: string, active: boolean | undefined) =>
+      (e: React.MouseEvent) => {
+        reportInteraction('panel_editor_tabs_transformations_toggle', {
+          action: active ? 'off' : 'on',
+          toggleId,
+          transformationId: configs[index].transformation.id,
+        });
+
+        callback(e);
+      },
+    [configs, index]
+  );
+
   const renderActions = ({ isOpen }: QueryOperationRowRenderProps) => {
     return (
       <HorizontalGroup align="center" width="auto">
@@ -72,15 +88,28 @@ export const TransformationOperationRow = ({
         <QueryOperationAction
           title="Show/hide transform help"
           icon="info-circle"
-          onClick={toggleHelp}
+          onClick={instrumentToggleCallback(toggleHelp, 'help', showHelp)}
           active={showHelp}
         />
-        {showFilter && <QueryOperationAction title="Filter" icon="filter" onClick={toggleFilter} active={filter} />}
-        <QueryOperationAction title="Debug" disabled={!isOpen} icon="bug" onClick={toggleDebug} active={showDebug} />
+        {showFilter && (
+          <QueryOperationAction
+            title="Filter"
+            icon="filter"
+            onClick={instrumentToggleCallback(toggleFilter, 'filter', filter)}
+            active={filter}
+          />
+        )}
+        <QueryOperationAction
+          title="Debug"
+          disabled={!isOpen}
+          icon="bug"
+          onClick={instrumentToggleCallback(toggleDebug, 'debug', showDebug)}
+          active={showDebug}
+        />
         <QueryOperationAction
           title="Disable/Enable transformation"
           icon={disabled ? 'eye-slash' : 'eye'}
-          onClick={() => onDisableToggle(index)}
+          onClick={instrumentToggleCallback(() => onDisableToggle(index), 'disabled', disabled)}
           active={disabled}
         />
         <QueryOperationAction title="Remove" icon="trash-alt" onClick={() => onRemove(index)} />
@@ -113,7 +142,7 @@ export const TransformationOperationRow = ({
   );
 };
 
-function prepMarkdown(uiConfig: TransformerRegistryItem<any>) {
+function prepMarkdown(uiConfig: TransformerRegistryItem<null>) {
   let helpMarkdown = uiConfig.help ?? uiConfig.description;
 
   return `

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

@@ -14,6 +14,7 @@ import {
   TransformerRegistryItem,
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { reportInteraction } from '@grafana/runtime';
 import {
   Alert,
   Button,
@@ -144,6 +145,10 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
   };
 
   onTransformationAdd = (selectable: SelectableValue<string>) => {
+    reportInteraction('panel_editor_tabs_transformations_management', {
+      action: 'add',
+      transformationId: selectable.value,
+    });
     const { transformations } = this.state;
 
     const nextId = this.getTransformationNextId(selectable.value!);
@@ -163,6 +168,10 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
   onTransformationChange = (idx: number, config: DataTransformerConfig) => {
     const { transformations } = this.state;
     const next = Array.from(transformations);
+    reportInteraction('panel_editor_tabs_transformations_management', {
+      action: 'change',
+      transformationId: next[idx].transformation.id,
+    });
     next[idx].transformation = config;
     this.onChange(next);
   };
@@ -170,6 +179,10 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
   onTransformationRemove = (idx: number) => {
     const { transformations } = this.state;
     const next = Array.from(transformations);
+    reportInteraction('panel_editor_tabs_transformations_management', {
+      action: 'remove',
+      transformationId: next[idx].transformation.id,
+    });
     next.splice(idx, 1);
     this.onChange(next);
   };