Navigation: add event tracking for navigation elements (#62563)

add user tracking for navigation elements

public/app/core/components/AppChrome/AppChromeService.tsx

@@ -2,7 +2,7 @@ import { useObservable } from 'react-use';
 import { BehaviorSubject } from 'rxjs';
 
 import { AppEvents, NavModelItem, UrlQueryValue } from '@grafana/data';
-import { locationService } from '@grafana/runtime';
+import { locationService, reportInteraction } from '@grafana/runtime';
 import appEvents from 'app/core/app_events';
 import { t } from 'app/core/internationalization';
 import store from 'app/core/store';
@@ -71,7 +71,9 @@ export class AppChromeService {
   }
 
   onToggleMegaMenu = () => {
-    this.update({ megaMenuOpen: !this.state.getValue().megaMenuOpen });
+    const isOpen = !this.state.getValue().megaMenuOpen;
+    reportInteraction('grafana_toggle_menu_clicked', { action: isOpen ? 'open' : 'close' });
+    this.update({ megaMenuOpen: isOpen });
   };
 
   setMegaMenu = (megaMenuOpen: boolean) => {

public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Components } from '@grafana/e2e-selectors';
+import { reportInteraction } from '@grafana/runtime';
 import { Icon, useStyles2 } from '@grafana/ui';
 
 import { Breadcrumb } from './types';
@@ -13,6 +14,11 @@ type Props = Breadcrumb & {
 
 export function BreadcrumbItem({ href, isCurrent, text }: Props) {
   const styles = useStyles2(getStyles);
+
+  const onBreadcrumbClick = () => {
+    reportInteraction('grafana_breadcrumb_clicked', { url: href });
+  };
+
   return (
     <li className={styles.breadcrumbWrapper}>
       {isCurrent ? (
@@ -22,6 +28,7 @@ export function BreadcrumbItem({ href, isCurrent, text }: Props) {
       ) : (
         <>
           <a
+            onClick={onBreadcrumbClick}
             data-testid={Components.Breadcrumbs.breadcrumb(text)}
             className={cx(styles.breadcrumb, styles.breadcrumbLink)}
             href={href}

public/app/core/components/PageNew/SectionNavItem.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { reportInteraction } from '@grafana/runtime';
 import { useStyles2, Icon } from '@grafana/ui';
 
 import { getNavTitle } from '../NavBar/navBarItem-translations';
@@ -36,9 +37,17 @@ export function SectionNavItem({ item, isSectionRoot = false }: Props) {
     icon = <Icon data-testid="section-icon" name={item.icon} />;
   }
 
+  const onItemClicked = () => {
+    reportInteraction('grafana_navigation_item_clicked', {
+      path: item.url ?? item.id,
+      sectionNav: true,
+    });
+  };
+
   return (
     <>
       <a
+        onClick={onItemClicked}
         href={item.url}
         className={linkClass}
         aria-label={selectors.components.Tab.title(item.text)}