From fc49c8d47a526c9665aa6a30f0ee8983a270ec4f Mon Sep 17 00:00:00 2001 From: eledobleefe Date: Tue, 9 Dec 2025 11:42:41 +0100 Subject: [PATCH] POC real example --- .../components/AppChrome/AppChromeService.tsx | 1 + .../AppChrome/History/HistoryContainer.tsx | 2 + .../AppChrome/History/HistoryWrapper.tsx | 3 + .../AppChrome/History/eventsTracking.ts | 90 +++++++++---------- 4 files changed, 47 insertions(+), 49 deletions(-) diff --git a/public/app/core/components/AppChrome/AppChromeService.tsx b/public/app/core/components/AppChrome/AppChromeService.tsx index e340e8276b8..eec8b8dfeb8 100644 --- a/public/app/core/components/AppChrome/AppChromeService.tsx +++ b/public/app/core/components/AppChrome/AppChromeService.tsx @@ -141,6 +141,7 @@ export class AppChromeService { entries[0] = newEntry; } else { if (lastEntry && lastEntry.name === newEntry.name) { + //Using new tracking event process logDuplicateUnifiedHistoryEntryEvent({ entryName: newEntry.name, lastEntryURL: lastEntry.url, diff --git a/public/app/core/components/AppChrome/History/HistoryContainer.tsx b/public/app/core/components/AppChrome/History/HistoryContainer.tsx index 88cbde02856..0d08466fceb 100644 --- a/public/app/core/components/AppChrome/History/HistoryContainer.tsx +++ b/public/app/core/components/AppChrome/History/HistoryContainer.tsx @@ -53,6 +53,7 @@ export function HistoryContainer() { { onToggleShowHistoryDrawer(); + //Using new tracking event process logUnifiedHistoryDrawerInteractionEvent({ type: 'open' }); }} iconOnly @@ -65,6 +66,7 @@ export function HistoryContainer() { title={t('nav.history-container.drawer-tittle', 'History')} onClose={() => { onToggleShowHistoryDrawer(); + //Using new tracking event process logUnifiedHistoryDrawerInteractionEvent({ type: 'close' }); }} size="sm" diff --git a/public/app/core/components/AppChrome/History/HistoryWrapper.tsx b/public/app/core/components/AppChrome/History/HistoryWrapper.tsx index d25c86d6f3d..2197e20cf02 100644 --- a/public/app/core/components/AppChrome/History/HistoryWrapper.tsx +++ b/public/app/core/components/AppChrome/History/HistoryWrapper.tsx @@ -68,6 +68,7 @@ export function HistoryWrapper({ onClose }: { onClose: () => void }) { fill="text" onClick={() => { setNumItemsToShow(numItemsToShow + 5); + //Using new tracking event process logUnifiedHistoryShowMoreEvent(); }} > @@ -127,6 +128,7 @@ function HistoryEntryAppView({ entry, isSelected, onClick }: ItemProps) { onClick={() => { store.setObject('CLICKING_HISTORY', true); onClick(); + //Using new tracking event process logClickUnifiedHistoryEntryEvent({ entryURL: url }); }} href={url} @@ -188,6 +190,7 @@ function HistoryEntryAppView({ entry, isSelected, onClick }: ItemProps) { onClick={() => { store.setObject('CLICKING_HISTORY', true); onClick(); + //Using new tracking event process logClickUnifiedHistoryEntryEvent({ entryURL: view.url, subEntry: 'timeRange' }); }} isCompact={true} diff --git a/public/app/core/components/AppChrome/History/eventsTracking.ts b/public/app/core/components/AppChrome/History/eventsTracking.ts index 5d49bd1c978..1c3338823de 100644 --- a/public/app/core/components/AppChrome/History/eventsTracking.ts +++ b/public/app/core/components/AppChrome/History/eventsTracking.ts @@ -1,64 +1,56 @@ -import { reportInteraction } from '@grafana/runtime'; - -const UNIFIED_HISTORY_ENTRY_CLICKED = 'grafana_unified_history_entry_clicked'; -const UNIFIED_HISTORY_ENTRY_DUPLICATED = 'grafana_unified_history_duplicated_entry_rendered'; -const UNIFIED_HISTORY_DRAWER_INTERACTION = 'grafana_unified_history_drawer_interaction'; -const UNIFIED_HISTORY_DRAWER_SHOW_MORE = 'grafana_unified_history_show_more'; +import { createEventFactory, TrackingEventProps } from 'app/core/services/echo/Echo'; //Currently just 'timeRange' is supported //in short term, we could add 'templateVariables' for example -type subEntryTypes = 'timeRange'; +type SubEntryTypes = 'timeRange'; +type UnifiedHistoryDrawerActions = 'open' | 'close'; -//Whether the user opens or closes the `HistoryDrawer` -type UnifiedHistoryDrawerInteraction = 'open' | 'close'; - -interface UnifiedHistoryEntryClicked { - //We will also work with the current URL but we will get this from Rudderstack data - //URL to return to +interface UnifiedHistoryEntryClicked extends TrackingEventProps { + /** We will also work with the current URL but we will get this from Rudderstack data + * URL to return to + */ entryURL: string; - //In the case we want to go back to a specific query param, currently just a specific time range - subEntry?: subEntryTypes; + /** In the case we want to go back to a specific query param, currently just a specific time range */ + subEntry?: SubEntryTypes; } -interface UnifiedHistoryEntryDuplicated { - // Common name of the history entries +interface UnifiedHistoryEntryDuplicated extends TrackingEventProps { + /** Common name of the history entries */ entryName: string; - // URL of the last entry + /** URL of the last entry */ lastEntryURL: string; - // URL of the new entry + /** URL of the new entry */ newEntryURL: string; } -//Event triggered when a user clicks on an entry of the `HistoryDrawer` -export const logClickUnifiedHistoryEntryEvent = ({ entryURL, subEntry }: UnifiedHistoryEntryClicked) => { - reportInteraction(UNIFIED_HISTORY_ENTRY_CLICKED, { - entryURL, - subEntry, - }); -}; +interface UnifiedHistoryDrawerInteraction extends TrackingEventProps { + /** Whether the user opens or closes the HistoryDrawer */ + type: UnifiedHistoryDrawerActions; +} -//Event triggered when history entry name matches the previous one -//so we keep track of duplicated entries and be able to analyze them -export const logDuplicateUnifiedHistoryEntryEvent = ({ - entryName, - lastEntryURL, - newEntryURL, -}: UnifiedHistoryEntryDuplicated) => { - reportInteraction(UNIFIED_HISTORY_ENTRY_DUPLICATED, { - entryName, - lastEntryURL, - newEntryURL, - }); -}; +const createUnifiedHistoryEvent = createEventFactory('grafana', 'unified_history'); -//We keep track of users open and closing the drawer -export const logUnifiedHistoryDrawerInteractionEvent = ({ type }: { type: UnifiedHistoryDrawerInteraction }) => { - reportInteraction(UNIFIED_HISTORY_DRAWER_INTERACTION, { - type, - }); -}; +/** + * Event triggered when a user clicks on an entry of the `HistoryDrawer` + * @owner grafana-frontend-platform + */ +export const logClickUnifiedHistoryEntryEvent = createUnifiedHistoryEvent('entry_clicked'); -//We keep track of users clicking on the `Show more` button -export const logUnifiedHistoryShowMoreEvent = () => { - reportInteraction(UNIFIED_HISTORY_DRAWER_SHOW_MORE); -}; +/** + * Event triggered when history entry name matches the previous one + * so we keep track of duplicated entries and be able to analyze them + * @owner grafana-frontend-platform + */ +export const logDuplicateUnifiedHistoryEntryEvent = + createUnifiedHistoryEvent('duplicated_entry_rendered'); + +/** We keep track of users open and closing the drawer + * @owner grafana-frontend-platform + */ +export const logUnifiedHistoryDrawerInteractionEvent = + createUnifiedHistoryEvent('drawer_interaction'); + +/**We keep track of users clicking on the `Show more` button + * @owner grafana-frontend-platform + */ +export const logUnifiedHistoryShowMoreEvent = createUnifiedHistoryEvent('show_more');