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

add user tracking for navigation elements
This commit is contained in:
Ashley Harrison 2023-01-31 13:03:31 +00:00 committed by GitHub
parent f77853f91e
commit 77a186879d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 2 deletions

View File

@ -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) => {

View File

@ -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}

View File

@ -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)}