IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -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'; import { RouteDescriptor } from '../../navigation/types';
export type MegaMenuState = 'open' | 'closed' | 'docked';
export interface AppChromeState { export interface AppChromeState {
chromeless?: boolean; chromeless?: boolean;
sectionNav: NavModel; sectionNav: NavModel;
pageNav?: NavModelItem; pageNav?: NavModelItem;
actions?: React.ReactNode; actions?: React.ReactNode;
searchBarHidden?: boolean; searchBarHidden?: boolean;
megaMenu: 'open' | 'closed' | 'docked'; megaMenu: MegaMenuState;
kioskMode: KioskMode | null; kioskMode: KioskMode | null;
layout: PageLayoutType; 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 // Remove profile + help from tree
const navItems = navTree const navItems = navTree
.filter((item) => item.id !== 'profile' && item.id !== 'help') .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); 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 appEvents from '../../../app_events';
import { getFooterLinks } from '../../Footer/Footer'; import { getFooterLinks } from '../../Footer/Footer';
import { HelpModal } from '../../help/HelpModal'; import { HelpModal } from '../../help/HelpModal';
import { MegaMenuState } from '../AppChromeService';
export const enrichHelpItem = (helpItem: NavModelItem) => { export const enrichHelpItem = (helpItem: NavModelItem) => {
let menuItems = helpItem.children || []; let menuItems = helpItem.children || [];
@ -29,19 +30,19 @@ export const enrichHelpItem = (helpItem: NavModelItem) => {
return helpItem; 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 // creating a new object here to not mutate the original item object
const newItem = { ...item }; const newItem = { ...item };
const onClick = newItem.onClick; const onClick = newItem.onClick;
newItem.onClick = () => { newItem.onClick = () => {
reportInteraction('grafana_navigation_item_clicked', { reportInteraction('grafana_navigation_item_clicked', {
path: newItem.url ?? newItem.id, path: newItem.url ?? newItem.id,
state: expandedState ? 'expanded' : 'collapsed', state: megaMenuState,
}); });
onClick?.(); onClick?.();
}; };
if (newItem.children) { if (newItem.children) {
newItem.children = newItem.children.map((item) => enrichWithInteractionTracking(item, expandedState)); newItem.children = newItem.children.map((item) => enrichWithInteractionTracking(item, megaMenuState));
} }
return newItem; return newItem;
}; };