Dashboard: Chore - Remove rudderstack events from panel menu and toolbar (#91376)

* Chore: Remove rudderstack events from panel interactions, and toolbar in dashboards

- dashboards_panelheader_menu
- dashboards_panelheader_description_displayed
- dashboards_toolbar_actions_clicked

* Add back some toolbar events: sharing, settings, favourites, and add

* restore ShareButton

public/app/features/dashboard-scene/scene/NavToolbarActions.tsx

@@ -496,7 +496,6 @@ export function ToolbarActions({ dashboard }: Props) {
         return (
           <Button
             onClick={() => {
-              DashboardInteractions.toolbarSaveClick();
               dashboard.openSaveDrawer({});
             }}
             className={styles.buttonWithExtraMargin}
@@ -516,7 +515,6 @@ export function ToolbarActions({ dashboard }: Props) {
         return (
           <Button
             onClick={() => {
-              DashboardInteractions.toolbarSaveClick();
               dashboard.openSaveDrawer({ saveAsCopy: true });
             }}
             className={styles.buttonWithExtraMargin}
@@ -537,7 +535,6 @@ export function ToolbarActions({ dashboard }: Props) {
             label="Save"
             icon="save"
             onClick={() => {
-              DashboardInteractions.toolbarSaveClick();
               dashboard.openSaveDrawer({});
             }}
           />
@@ -545,7 +542,6 @@ export function ToolbarActions({ dashboard }: Props) {
             label="Save as copy"
             icon="copy"
             onClick={() => {
-              DashboardInteractions.toolbarSaveAsClick();
               dashboard.openSaveDrawer({ saveAsCopy: true });
             }}
           />
@@ -556,7 +552,6 @@ export function ToolbarActions({ dashboard }: Props) {
         <ButtonGroup className={styles.buttonWithExtraMargin} key="save">
           <Button
             onClick={() => {
-              DashboardInteractions.toolbarSaveClick();
               dashboard.openSaveDrawer({});
             }}
             tooltip="Save changes"

public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx

@@ -64,7 +64,6 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
         text: t('panel.header-menu.view', `View`),
         iconClassName: 'eye',
         shortcut: 'v',
-        onClick: () => DashboardInteractions.panelMenuItemClicked('view'),
         href: getViewPanelUrl(panel),
       });
     }
@@ -76,7 +75,6 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
         text: t('panel.header-menu.edit', `Edit`),
         iconClassName: 'edit',
         shortcut: 'e',
-        onClick: () => DashboardInteractions.panelMenuItemClicked('edit'),
         href: getEditPanelUrl(getPanelIdForVizPanel(panel)),
       });
     }
@@ -111,7 +109,6 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
         text: t('panel.header-menu.share', 'Share'),
         iconClassName: 'share-alt',
         onClick: () => {
-          DashboardInteractions.panelMenuItemClicked('share');
           dashboard.showModal(new ShareModal({ panelRef: panel.getRef() }));
         },
         shortcut: 'p s',
@@ -122,7 +119,6 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
       moreSubMenu.push({
         text: t('panel.header-menu.duplicate', `Duplicate`),
         onClick: () => {
-          DashboardInteractions.panelMenuItemClicked('duplicate');
           dashboard.duplicatePanel(panel);
         },
         shortcut: 'p d',
@@ -133,7 +129,6 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
       moreSubMenu.push({
         text: t('panel.header-menu.copy', `Copy`),
         onClick: () => {
-          DashboardInteractions.panelMenuItemClicked('copy');
           dashboard.copyPanel(panel);
         },
       });
@@ -144,7 +139,6 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
         moreSubMenu.push({
           text: t('panel.header-menu.unlink-library-panel', `Unlink library panel`),
           onClick: () => {
-            DashboardInteractions.panelMenuItemClicked('unlinkLibraryPanel');
             dashboard.showModal(
               new UnlinkLibraryPanelModal({
                 panelRef: parent.getRef(),
@@ -156,7 +150,6 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
         moreSubMenu.push({
           text: t('panel.header-menu.replace-library-panel', `Replace library panel`),
           onClick: () => {
-            DashboardInteractions.panelMenuItemClicked('replaceLibraryPanel');
             dashboard.onShowAddLibraryPanelDrawer(parent.getRef());
           },
         });
@@ -164,7 +157,6 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
         moreSubMenu.push({
           text: t('panel.header-menu.create-library-panel', `Create library panel`),
           onClick: () => {
-            DashboardInteractions.panelMenuItemClicked('createLibraryPanel');
             dashboard.showModal(
               new ShareModal({
                 panelRef: panel.getRef(),
@@ -253,7 +245,6 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
         text: t('panel.header-menu.remove', `Remove`),
         iconClassName: 'trash-alt',
         onClick: () => {
-          DashboardInteractions.panelMenuItemClicked('remove');
           onRemovePanel(dashboard, panel);
         },
         shortcut: 'p r',
@@ -278,7 +269,6 @@ async function getExploreMenuItem(panel: VizPanel): Promise<PanelMenuItem | unde
     text: t('panel.header-menu.explore', `Explore`),
     iconClassName: 'compass',
     shortcut: 'p x',
-    onClick: () => DashboardInteractions.panelMenuItemClicked('explore'),
     href: exploreUrl,
   };
 }
@@ -297,7 +287,6 @@ function getInspectMenuItem(
       onClick: (e) => {
         e.preventDefault();
         locationService.partial({ inspect: panel.state.key, inspectTab: InspectTab.Data });
-        DashboardInteractions.panelMenuInspectClicked(InspectTab.Data);
       },
     });
 
@@ -308,7 +297,6 @@ function getInspectMenuItem(
         onClick: (e) => {
           e.preventDefault();
           locationService.partial({ inspect: panel.state.key, inspectTab: InspectTab.Query });
-          DashboardInteractions.panelMenuInspectClicked(InspectTab.Query);
         },
       });
     }
@@ -320,7 +308,6 @@ function getInspectMenuItem(
     onClick: (e) => {
       e.preventDefault();
       locationService.partial({ inspect: panel.state.key, inspectTab: InspectTab.JSON });
-      DashboardInteractions.panelMenuInspectClicked(InspectTab.JSON);
     },
   });
 
@@ -332,7 +319,6 @@ function getInspectMenuItem(
     onClick: (e) => {
       if (!e.isDefaultPrevented()) {
         locationService.partial({ inspect: panel.state.key, inspectTab: InspectTab.Data });
-        DashboardInteractions.panelMenuInspectClicked(InspectTab.Data);
       }
     },
     subMenu: inspectSubMenu.length > 0 ? inspectSubMenu : undefined,
@@ -447,17 +433,12 @@ export function onRemovePanel(dashboard: DashboardScene, panel: VizPanel) {
 }
 
 const onCreateAlert = async (panel: VizPanel) => {
-  DashboardInteractions.panelMenuItemClicked('create-alert');
-
   const formValues = await scenesPanelToRuleFormValues(panel);
   const ruleFormUrl = urlUtil.renderUrl('/alerting/new', {
     defaults: JSON.stringify(formValues),
     returnTo: location.pathname + location.search,
   });
-
   locationService.push(ruleFormUrl);
-
-  DashboardInteractions.panelMenuItemClicked('create-alert');
 };
 
 export function toggleVizPanelLegend(vizPanel: VizPanel): void {
@@ -469,8 +450,6 @@ export function toggleVizPanelLegend(vizPanel: VizPanel): void {
       },
     });
   }
-
-  DashboardInteractions.panelMenuItemClicked('toggleLegend');
 }
 
 function hasLegendOptions(optionsWithLegend: unknown): optionsWithLegend is OptionsWithLegend {
@@ -482,5 +461,4 @@ const onInspectPanel = (vizPanel: VizPanel, tab?: InspectTab) => {
     inspect: vizPanel.state.key,
     inspectTab: tab,
   });
-  DashboardInteractions.panelMenuInspectClicked(tab ?? InspectTab.Data);
 };

public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts

@@ -521,9 +521,6 @@ function registerPanelInteractionsReporter(scene: DashboardScene) {
       case 'panel-cancel-query-clicked':
         DashboardInteractions.panelCancelQueryClicked();
         break;
-      case 'panel-menu-shown':
-        DashboardInteractions.panelMenuShown();
-        break;
     }
   });
 }

public/app/features/dashboard-scene/utils/interactions.ts

@@ -1,5 +1,4 @@
 import { reportInteraction } from '@grafana/runtime';
-import { InspectTab } from 'app/features/inspector/types';
 
 let isScenesContextSet = false;
 
@@ -9,30 +8,6 @@ export const DashboardInteractions = {
     reportDashboardInteraction('init_dashboard_completed', { ...properties });
   },
 
-  // Panel interactions:
-  panelMenuShown: (properties?: Record<string, unknown>) => {
-    reportDashboardInteraction('panelheader_menu', { ...properties, item: 'menu' });
-  },
-  panelMenuItemClicked: (
-    item:
-      | 'view'
-      | 'edit'
-      | 'share'
-      | 'createLibraryPanel'
-      | 'unlinkLibraryPanel'
-      | 'replaceLibraryPanel'
-      | 'duplicate'
-      | 'copy'
-      | 'remove'
-      | 'explore'
-      | 'toggleLegend'
-      | 'create-alert'
-  ) => {
-    reportDashboardInteraction('panelheader_menu', { item });
-  },
-  panelMenuInspectClicked(tab: InspectTab) {
-    reportDashboardInteraction('panelheader_menu', { item: 'inspect', tab });
-  },
   panelLinkClicked: (properties?: Record<string, unknown>) => {
     reportDashboardInteraction('panelheader_datalink_clicked', properties);
   },
@@ -43,6 +18,20 @@ export const DashboardInteractions = {
     reportDashboardInteraction('panelheader_cancelquery_clicked', properties);
   },
 
+  // Dashboard interactions from toolbar
+  toolbarFavoritesClick: () => {
+    reportDashboardInteraction('toolbar_actions_clicked', { item: 'favorites' });
+  },
+  toolbarSettingsClick: () => {
+    reportDashboardInteraction('toolbar_actions_clicked', { item: 'settings' });
+  },
+  toolbarShareClick: () => {
+    reportDashboardInteraction('toolbar_actions_clicked', { item: 'share' });
+  },
+  toolbarAddClick: () => {
+    reportDashboardInteraction('toolbar_actions_clicked', { item: 'add' });
+  },
+
   // Sharing interactions:
   sharingCategoryClicked: (properties?: Record<string, unknown>) => {
     reportDashboardInteraction('sharing_category_clicked', properties);
@@ -111,35 +100,6 @@ export const DashboardInteractions = {
   toolbarAddButtonClicked: (properties?: Record<string, unknown>) => {
     reportDashboardInteraction('toolbar_add_clicked', properties);
   },
-  toolbarFavoritesClick: () => {
-    reportDashboardInteraction('toolbar_actions_clicked', { item: 'favorites' });
-  },
-  toolbarSettingsClick: () => {
-    reportDashboardInteraction('toolbar_actions_clicked', { item: 'settings' });
-  },
-  toolbarRefreshClick: () => {
-    reportDashboardInteraction('toolbar_actions_clicked', { item: 'refresh' });
-  },
-  toolbarTimePickerClick: () => {
-    reportDashboardInteraction('toolbar_actions_clicked', { item: 'time_picker' });
-  },
-  toolbarZoomClick: () => {
-    reportDashboardInteraction('toolbar_actions_clicked', { item: 'zoom_out_time_range' });
-  },
-
-  toolbarShareClick: () => {
-    reportDashboardInteraction('toolbar_actions_clicked', { item: 'share' });
-  },
-  toolbarSaveClick: () => {
-    reportDashboardInteraction('toolbar_actions_clicked', { item: 'save' });
-  },
-  toolbarSaveAsClick: () => {
-    reportDashboardInteraction('toolbar_actions_clicked', { item: 'save_as' });
-  },
-  toolbarAddClick: () => {
-    reportDashboardInteraction('toolbar_actions_clicked', { item: 'add' });
-  },
-
   setScenesContext: () => {
     isScenesContextSet = true;
 

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

@@ -270,14 +270,7 @@ export const DashNav = memo<Props>((props) => {
       return null;
     }
     return (
-      <DashNavTimeControls
-        dashboard={dashboard}
-        onChangeTimeZone={updateTimeZoneForSession}
-        onToolbarRefreshClick={DashboardInteractions.toolbarRefreshClick}
-        onToolbarZoomClick={DashboardInteractions.toolbarZoomClick}
-        onToolbarTimePickerClick={DashboardInteractions.toolbarTimePickerClick}
-        key="time-controls"
-      />
+      <DashNavTimeControls dashboard={dashboard} onChangeTimeZone={updateTimeZoneForSession} key="time-controls" />
     );
   };
 
@@ -315,7 +308,6 @@ export const DashNav = memo<Props>((props) => {
               tooltip={t('dashboard.toolbar.save', 'Save dashboard')}
               icon="save"
               onClick={() => {
-                DashboardInteractions.toolbarSaveClick();
                 showModal(SaveDashboardDrawer, {
                   dashboard,
                   onDismiss: hideModal,
@@ -343,8 +335,8 @@ export const DashNav = memo<Props>((props) => {
     if (canEdit && !isFullscreen) {
       buttons.push(
         <AddPanelButton
-          dashboard={dashboard}
           onToolbarAddMenuOpen={DashboardInteractions.toolbarAddClick}
+          dashboard={dashboard}
           key="panel-add-dropdown"
         />
       );

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

@@ -209,7 +209,6 @@ 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/PanelStateWrapper.tsx

@@ -587,7 +587,6 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
         hoverHeader={panelChromeProps.hasOverlayHeader()}
         displayMode={transparent ? 'transparent' : 'default'}
         onCancelQuery={panelChromeProps.onCancelQuery}
-        onOpenMenu={panelChromeProps.onOpenMenu}
         onFocus={() => this.setPanelAttention()}
         onMouseEnter={() => this.setPanelAttention()}
         onMouseMove={() => this.debouncedSetPanelAttention()}

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

@@ -113,10 +113,6 @@ export function getPanelChromeProps(props: CommonProps) {
 
   const title = props.panel.getDisplayTitle();
 
-  const onOpenMenu = () => {
-    DashboardInteractions.panelMenuShown();
-  };
-
   return {
     hasOverlayHeader,
     onShowPanelDescription,
@@ -129,6 +125,5 @@ export function getPanelChromeProps(props: CommonProps) {
     dragClass,
     title,
     titleItems,
-    onOpenMenu,
   };
 }

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

@@ -21,7 +21,6 @@ import {
   toggleLegend,
   unlinkLibraryPanel,
 } from 'app/features/dashboard/utils/panel';
-import { DashboardInteractions } from 'app/features/dashboard-scene/utils/interactions';
 import { InspectTab } from 'app/features/inspector/types';
 import { isPanelModelLibraryPanel } from 'app/features/library-panels/guard';
 import { createExtensionSubMenu } from 'app/features/plugins/extensions/utils';
@@ -43,7 +42,6 @@ export function getPanelMenu(
     locationService.partial({
       viewPanel: panel.id,
     });
-    DashboardInteractions.panelMenuItemClicked('view');
   };
 
   const onEditPanel = (event: React.MouseEvent) => {
@@ -51,26 +49,21 @@ export function getPanelMenu(
     locationService.partial({
       editPanel: panel.id,
     });
-
-    DashboardInteractions.panelMenuItemClicked('edit');
   };
 
   const onSharePanel = (event: React.MouseEvent) => {
     event.preventDefault();
     sharePanel(dashboard, panel);
-    DashboardInteractions.panelMenuItemClicked('share');
   };
 
   const onAddLibraryPanel = (event: React.MouseEvent) => {
     event.preventDefault();
     addLibraryPanel(dashboard, panel);
-    DashboardInteractions.panelMenuItemClicked('createLibraryPanel');
   };
 
   const onUnlinkLibraryPanel = (event: React.MouseEvent) => {
     event.preventDefault();
     unlinkLibraryPanel(panel);
-    DashboardInteractions.panelMenuItemClicked('unlinkLibraryPanel');
   };
 
   const onInspectPanel = (tab?: InspectTab) => {
@@ -78,7 +71,6 @@ export function getPanelMenu(
       inspect: panel.id,
       inspectTab: tab,
     });
-    DashboardInteractions.panelMenuInspectClicked(tab ?? InspectTab.Data);
   };
 
   const onMore = (event: React.MouseEvent) => {
@@ -88,19 +80,16 @@ export function getPanelMenu(
   const onDuplicatePanel = (event: React.MouseEvent) => {
     event.preventDefault();
     duplicatePanel(dashboard, panel);
-    DashboardInteractions.panelMenuItemClicked('duplicate');
   };
 
   const onCopyPanel = (event: React.MouseEvent) => {
     event.preventDefault();
     copyPanel(panel);
-    DashboardInteractions.panelMenuItemClicked('copy');
   };
 
   const onRemovePanel = (event: React.MouseEvent) => {
     event.preventDefault();
     removePanel(dashboard, panel, true);
-    DashboardInteractions.panelMenuItemClicked('remove');
   };
 
   const onNavigateToExplore = (event: React.MouseEvent) => {
@@ -114,13 +103,11 @@ export function getPanelMenu(
         openInNewWindow,
       }) as any
     );
-    DashboardInteractions.panelMenuItemClicked('explore');
   };
 
   const onToggleLegend = (event: React.MouseEvent) => {
     event.preventDefault();
     toggleLegend(panel);
-    DashboardInteractions.panelMenuItemClicked('toggleLegend');
   };
 
   const menu: PanelMenuItem[] = [];
@@ -224,7 +211,6 @@ export function getPanelMenu(
   const onCreateAlert = (event: React.MouseEvent) => {
     event.preventDefault();
     createAlert();
-    DashboardInteractions.panelMenuItemClicked('create-alert');
   };
 
   const subMenu: PanelMenuItem[] = [];