IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-14 09:33:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: Report megamenu state when clicking a navigation item (#77705)

Browse Source 
report megamenu state when clicking a navigation item
This commit is contained in:
Ashley Harrison 2023-11-06 14:32:29 +00:00 committed by GitHub
parent df7b760f37
commit b6e2db7d91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/core/components/AppChrome/AppChromeService.tsx
View File

@ -11,13 +11,15 @@ import { KioskMode } from 'app/types';
import { RouteDescriptor } from '../../navigation/types';
export type MegaMenuState = 'open' | 'closed' | 'docked';
export interface AppChromeState {
chromeless?: boolean;
sectionNav: NavModel;
pageNav?: NavModelItem;
actions?: React.ReactNode;
searchBarHidden?: boolean;
megaMenu: 'open' | 'closed' | 'docked';
megaMenu: MegaMenuState;
kioskMode: KioskMode | null;
layout: PageLayoutType;
}

2
public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx
View File

@ -30,7 +30,7 @@ export const MegaMenu = React.memo(
// Remove profile + help from tree
const navItems = navTree
.filter((item) => item.id !== 'profile' && item.id !== 'help')
.map((item) => enrichWithInteractionTracking(item, true));
.map((item) => enrichWithInteractionTracking(item, state.megaMenu));
const activeItem = getActiveItem(navItems, location.pathname);

7
public/app/core/components/AppChrome/DockedMegaMenu/utils.ts
View File

@ -6,6 +6,7 @@ import { ShowModalReactEvent } from '../../../../types/events';
import appEvents from '../../../app_events';
import { getFooterLinks } from '../../Footer/Footer';
import { HelpModal } from '../../help/HelpModal';
import { MegaMenuState } from '../AppChromeService';
export const enrichHelpItem = (helpItem: NavModelItem) => {
let menuItems = helpItem.children || [];
@ -29,19 +30,19 @@ export const enrichHelpItem = (helpItem: NavModelItem) => {
return helpItem;
};
export const enrichWithInteractionTracking = (item: NavModelItem, expandedState: boolean) => {
export const enrichWithInteractionTracking = (item: NavModelItem, megaMenuState: MegaMenuState) => {
// creating a new object here to not mutate the original item object
const newItem = { ...item };
const onClick = newItem.onClick;
newItem.onClick = () => {
reportInteraction('grafana_navigation_item_clicked', {
path: newItem.url ?? newItem.id,
state: expandedState ? 'expanded' : 'collapsed',
state: megaMenuState,
});
onClick?.();
};
if (newItem.children) {
newItem.children = newItem.children.map((item) => enrichWithInteractionTracking(item, expandedState));
newItem.children = newItem.children.map((item) => enrichWithInteractionTracking(item, megaMenuState));
}
return newItem;
};