From 77a186879dcec927eea1c7a70be6dbe32f097033 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 31 Jan 2023 13:03:31 +0000
Subject: [PATCH] Navigation: add event tracking for navigation elements
 (#62563)

add user tracking for navigation elements
---
 .../app/core/components/AppChrome/AppChromeService.tsx   | 6 ++++--
 .../app/core/components/Breadcrumbs/BreadcrumbItem.tsx   | 7 +++++++
 public/app/core/components/PageNew/SectionNavItem.tsx    | 9 +++++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/public/app/core/components/AppChrome/AppChromeService.tsx b/public/app/core/components/AppChrome/AppChromeService.tsx
index e71b1113923..10a1a28dcb6 100644
--- a/public/app/core/components/AppChrome/AppChromeService.tsx
+++ b/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) => {
diff --git a/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx b/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx
index c514656e4fb..69ebee18adc 100644
--- a/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx
+++ b/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}
diff --git a/public/app/core/components/PageNew/SectionNavItem.tsx b/public/app/core/components/PageNew/SectionNavItem.tsx
index 9a85a66ee76..0a54d12dd3e 100644
--- a/public/app/core/components/PageNew/SectionNavItem.tsx
+++ b/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)}