[Chore] Refactor Panel Menu Rudderstack events and add missing instrumentation (#66850)

public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx

@@ -229,6 +229,7 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
           hoverHeader={panelChromeProps.hasOverlayHeader()}
           displayMode={transparent ? 'transparent' : 'default'}
           onCancelQuery={panelChromeProps.onCancelQuery}
+          onOpenMenu={panelChromeProps.onOpenMenu}
         >
           {() => <div ref={(element) => (this.element = element)} className="panel-height-helper" />}
         </PanelChrome>

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { DataLink, GrafanaTheme2, PanelData } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { reportInteraction } from '@grafana/runtime';
 import { Icon, useStyles2, ClickOutsideWrapper } from '@grafana/ui';
 import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
@@ -33,6 +34,10 @@ export function PanelHeader({ panel, error, isViewing, isEditing, data, alertSta
   const className = cx('panel-header', !(isViewing || isEditing) ? 'grid-drag-handle' : '');
   const styles = useStyles2(panelStyles);
 
+  const onOpenMenu = () => {
+    reportInteraction('dashboards_panelheader_menu', { item: 'menu' });
+  };
+
   return (
     <>
       <PanelHeaderLoadingIndicator state={data.state} onClick={onCancelQuery} />
@@ -45,7 +50,7 @@ export function PanelHeader({ panel, error, isViewing, isEditing, data, alertSta
         error={error}
       />
       <div className={className}>
-        <PanelHeaderMenuTrigger data-testid={selectors.components.Panels.Panel.title(title)}>
+        <PanelHeaderMenuTrigger data-testid={selectors.components.Panels.Panel.title(title)} onOpenMenu={onOpenMenu}>
           {({ closeMenu, panelMenuOpen }) => {
             return (
               <ClickOutsideWrapper onClick={closeMenu} parent={document}>

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx

@@ -9,9 +9,10 @@ interface PanelHeaderMenuTriggerApi {
 
 interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   children: (props: PanelHeaderMenuTriggerApi) => ReactElement;
+  onOpenMenu?: () => void;
 }
 
-export function PanelHeaderMenuTrigger({ children, ...divProps }: Props) {
+export function PanelHeaderMenuTrigger({ children, onOpenMenu, ...divProps }: Props) {
   const clickCoordinates = useRef<CartesianCoords2D>({ x: 0, y: 0 });
   const [panelMenuOpen, setPanelMenuOpen] = useState<boolean>(false);
 
@@ -22,8 +23,11 @@ export function PanelHeaderMenuTrigger({ children, ...divProps }: Props) {
       }
 
       setPanelMenuOpen(!panelMenuOpen);
+      if (panelMenuOpen) {
+        onOpenMenu?.();
+      }
     },
-    [panelMenuOpen, setPanelMenuOpen]
+    [panelMenuOpen, setPanelMenuOpen, onOpenMenu]
   );
 
   const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) => {

public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx

@@ -646,6 +646,7 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
           hoverHeader={panelChromeProps.hasOverlayHeader()}
           displayMode={transparent ? 'transparent' : 'default'}
           onCancelQuery={panelChromeProps.onCancelQuery}
+          onOpenMenu={panelChromeProps.onOpenMenu}
         >
           {(innerWidth, innerHeight) => (
             <>

public/app/features/dashboard/utils/getPanelChromeProps.tsx

@@ -106,6 +106,10 @@ export function getPanelChromeProps(props: CommonProps) {
 
   const title = props.panel.getDisplayTitle();
 
+  const onOpenMenu = () => {
+    reportInteraction('dashboards_panelheader_menu', { item: 'menu' });
+  };
+
   return {
     hasOverlayHeader,
     onShowPanelDescription,
@@ -118,5 +122,6 @@ export function getPanelChromeProps(props: CommonProps) {
     dragClass,
     title,
     titleItems,
+    onOpenMenu,
   };
 }

public/app/features/dashboard/utils/getPanelMenu.ts

@@ -40,7 +40,7 @@ export function getPanelMenu(
     locationService.partial({
       viewPanel: panel.id,
     });
-    reportInteraction('dashboards_panelheader_view_clicked');
+    reportInteraction('dashboards_panelheader_menu', { item: 'view' });
   };
 
   const onEditPanel = (event: React.MouseEvent<any>) => {
@@ -48,25 +48,26 @@ export function getPanelMenu(
     locationService.partial({
       editPanel: panel.id,
     });
-    reportInteraction('dashboards_panelheader_edit_clicked');
+
+    reportInteraction('dashboards_panelheader_menu', { item: 'edit' });
   };
 
   const onSharePanel = (event: React.MouseEvent<any>) => {
     event.preventDefault();
     sharePanel(dashboard, panel);
-    reportInteraction('dashboards_panelheader_share_clicked');
+    reportInteraction('dashboards_panelheader_menu', { item: 'share' });
   };
 
   const onAddLibraryPanel = (event: React.MouseEvent<any>) => {
     event.preventDefault();
     addLibraryPanel(dashboard, panel);
-    reportInteraction('dashboards_panelheader_createlibrarypanel_clicked');
+    reportInteraction('dashboards_panelheader_menu', { item: 'createLibraryPanel' });
   };
 
   const onUnlinkLibraryPanel = (event: React.MouseEvent<any>) => {
     event.preventDefault();
     unlinkLibraryPanel(panel);
-    reportInteraction('dashboards_panelheader_unlinklibrarypanel_clicked');
+    reportInteraction('dashboards_panelheader_menu', { item: 'unlinkLibraryPanel' });
   };
 
   const onInspectPanel = (tab?: InspectTab) => {
@@ -74,7 +75,7 @@ export function getPanelMenu(
       inspect: panel.id,
       inspectTab: tab,
     });
-    reportInteraction('dashboards_panelheader_inspect_clicked', { tab: tab ?? InspectTab.Data });
+    reportInteraction('dashboards_panelheader_menu', { item: 'inspect', tab: tab ?? InspectTab.Data });
   };
 
   const onMore = (event: React.MouseEvent<any>) => {
@@ -84,19 +85,19 @@ export function getPanelMenu(
   const onDuplicatePanel = (event: React.MouseEvent<any>) => {
     event.preventDefault();
     duplicatePanel(dashboard, panel);
-    reportInteraction('dashboards_panelheader_duplicate_clicked');
+    reportInteraction('dashboards_panelheader_menu', { item: 'duplicate' });
   };
 
   const onCopyPanel = (event: React.MouseEvent<any>) => {
     event.preventDefault();
     copyPanel(panel);
-    reportInteraction('dashboards_panelheader_copy_clicked');
+    reportInteraction('dashboards_panelheader_menu', { item: 'copy' });
   };
 
   const onRemovePanel = (event: React.MouseEvent<any>) => {
     event.preventDefault();
     removePanel(dashboard, panel, true);
-    reportInteraction('dashboards_panelheader_remove_clicked');
+    reportInteraction('dashboards_panelheader_menu', { item: 'remove' });
   };
 
   const onNavigateToExplore = (event: React.MouseEvent<any>) => {
@@ -104,13 +105,13 @@ export function getPanelMenu(
     const openInNewWindow =
       event.ctrlKey || event.metaKey ? (url: string) => window.open(`${config.appSubUrl}${url}`) : undefined;
     store.dispatch(navigateToExplore(panel, { getDataSourceSrv, getTimeSrv, getExploreUrl, openInNewWindow }) as any);
-    reportInteraction('dashboards_panelheader_explore_clicked');
+    reportInteraction('dashboards_panelheader_menu', { item: 'explore' });
   };
 
   const onToggleLegend = (event: React.MouseEvent) => {
     event.preventDefault();
     toggleLegend(panel);
-    reportInteraction('dashboards_panelheader_togglelegend_clicked');
+    reportInteraction('dashboards_panelheader_menu', { item: 'toggleLegend' });
   };
 
   const menu: PanelMenuItem[] = [];