Instrument transformations (#64960)

* Instrument transformations

* Fix any

* Fix any

* Fix unit test

public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx

@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { Subscription } from 'rxjs';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { config } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 import { Tab, TabContent, TabsBar, toIconName, useForceUpdate, useStyles2 } from '@grafana/ui';
 import AlertTabIndex from 'app/features/alerting/AlertTabIndex';
 import { PanelAlertTab } from 'app/features/alerting/unified/PanelAlertTab';
@@ -26,6 +26,17 @@ export const PanelEditorTabs = React.memo(({ panel, dashboard, tabs, onChangeTab
   const forceUpdate = useForceUpdate();
   const styles = useStyles2(getStyles);
 
+  const instrumentedOnChangeTab = useCallback(
+    (tab) => {
+      if (!tab.active) {
+        reportInteraction('panel_editor_tabs_changed', { tab_id: tab.id });
+      }
+
+      onChangeTab(tab);
+    },
+    [onChangeTab]
+  );
+
   useEffect(() => {
     const eventSubs = new Subscription();
     eventSubs.add(panel.events.subscribe(PanelQueriesChangedEvent, forceUpdate));
@@ -44,14 +55,14 @@ export const PanelEditorTabs = React.memo(({ panel, dashboard, tabs, onChangeTab
       <TabsBar className={styles.tabBar} hideBorder>
         {tabs.map((tab) => {
           if (tab.id === PanelEditorTabId.Alert) {
-            return renderAlertTab(tab, panel, dashboard, onChangeTab);
+            return renderAlertTab(tab, panel, dashboard, instrumentedOnChangeTab);
           }
           return (
             <Tab
               key={tab.id}
               label={tab.text}
               active={tab.active}
-              onChangeTab={() => onChangeTab(tab)}
+              onChangeTab={() => instrumentedOnChangeTab(tab)}
               icon={toIconName(tab.icon)}
               counter={getCounter(panel, tab)}
             />