mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Navigation: add event tracking for navigation elements (#62563)
add user tracking for navigation elements
This commit is contained in:
parent
f77853f91e
commit
77a186879d
@ -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) => {
|
||||
|
@ -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}
|
||||
|
@ -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)}
|
||||
|
Loading…
Reference in New Issue
Block a user