diff --git a/public/app/core/components/AppChrome/AppChromeService.tsx b/public/app/core/components/AppChrome/AppChromeService.tsx index 3a0690b8abd..3e0cf2b2a0d 100644 --- a/public/app/core/components/AppChrome/AppChromeService.tsx +++ b/public/app/core/components/AppChrome/AppChromeService.tsx @@ -12,6 +12,7 @@ import { KioskMode } from 'app/types'; import { RouteDescriptor } from '../../navigation/types'; import { buildBreadcrumbs } from '../Breadcrumbs/utils'; +import { logDuplicateUnifiedHistoryEntryEvent } from './History/eventsTracking'; import { ReturnToPreviousProps } from './ReturnToPrevious/ReturnToPrevious'; import { HistoryEntry, TOP_BAR_LEVEL_HEIGHT } from './types'; @@ -153,6 +154,13 @@ export class AppChromeService { if (isSamePath) { entries[0] = newEntry; } else { + if (lastEntry && lastEntry.name === newEntry.name) { + logDuplicateUnifiedHistoryEntryEvent({ + entryName: newEntry.name, + lastEntryURL: lastEntry.url, + newEntryURL: newEntry.url, + }); + } entries = [newEntry, ...entries]; } diff --git a/public/app/core/components/AppChrome/History/HistoryContainer.tsx b/public/app/core/components/AppChrome/History/HistoryContainer.tsx index 917be510f45..95d95e708b2 100644 --- a/public/app/core/components/AppChrome/History/HistoryContainer.tsx +++ b/public/app/core/components/AppChrome/History/HistoryContainer.tsx @@ -13,6 +13,7 @@ import { NavToolbarSeparator } from '../NavToolbar/NavToolbarSeparator'; import { HistoryEntry } from '../types'; import { HistoryWrapper } from './HistoryWrapper'; +import { logUnifiedHistoryDrawerInteractionEvent } from './eventsTracking'; export function HistoryContainer() { const [showHistoryDrawer, onToggleShowHistoryDrawer] = useToggle(false); @@ -50,7 +51,10 @@ export function HistoryContainer() { return ( <> { + onToggleShowHistoryDrawer(); + logUnifiedHistoryDrawerInteractionEvent({ type: 'open' }); + }} iconOnly icon="history" aria-label={t('nav.history-container.drawer-tittle', 'History')} @@ -59,7 +63,10 @@ export function HistoryContainer() { {showHistoryDrawer && ( { + onToggleShowHistoryDrawer(); + logUnifiedHistoryDrawerInteractionEvent({ type: 'close' }); + }} size="sm" > onToggleShowHistoryDrawer(false)} /> diff --git a/public/app/core/components/AppChrome/History/HistoryWrapper.tsx b/public/app/core/components/AppChrome/History/HistoryWrapper.tsx index d1a873b61cc..da8a048f9cd 100644 --- a/public/app/core/components/AppChrome/History/HistoryWrapper.tsx +++ b/public/app/core/components/AppChrome/History/HistoryWrapper.tsx @@ -9,6 +9,8 @@ import { t } from 'app/core/internationalization'; import { HISTORY_LOCAL_STORAGE_KEY } from '../AppChromeService'; import { HistoryEntry } from '../types'; +import { logClickUnifiedHistoryEntryEvent, logUnifiedHistoryShowMoreEvent } from './eventsTracking'; + export function HistoryWrapper({ onClose }: { onClose: () => void }) { const history = store.getObject(HISTORY_LOCAL_STORAGE_KEY, []).filter((entry) => { return moment(entry.time).isAfter(moment().subtract(2, 'day').startOf('day')); @@ -60,7 +62,14 @@ export function HistoryWrapper({ onClose }: { onClose: () => void }) { {history.length > numItemsToShow && ( - @@ -115,6 +124,7 @@ function HistoryEntryAppView({ entry, isSelected, onClick }: ItemProps) { onClick={() => { store.setObject('CLICKING_HISTORY', true); onClick(); + logClickUnifiedHistoryEntryEvent({ entryURL: url }); }} href={url} isCompact={true} @@ -170,6 +180,7 @@ function HistoryEntryAppView({ entry, isSelected, onClick }: ItemProps) { onClick={() => { store.setObject('CLICKING_HISTORY', true); onClick(); + logClickUnifiedHistoryEntryEvent({ entryURL: view.url, subEntry: 'timeRange' }); }} isCompact={true} className={view.time === selectedViewTime ? undefined : styles.subCard} diff --git a/public/app/core/components/AppChrome/History/eventsTracking.ts b/public/app/core/components/AppChrome/History/eventsTracking.ts new file mode 100644 index 00000000000..5d49bd1c978 --- /dev/null +++ b/public/app/core/components/AppChrome/History/eventsTracking.ts @@ -0,0 +1,64 @@ +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'; + +//Currently just 'timeRange' is supported +//in short term, we could add 'templateVariables' for example +type subEntryTypes = 'timeRange'; + +//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 + entryURL: string; + //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 + entryName: string; + // URL of the last entry + lastEntryURL: string; + // 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, + }); +}; + +//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, + }); +}; + +//We keep track of users open and closing the drawer +export const logUnifiedHistoryDrawerInteractionEvent = ({ type }: { type: UnifiedHistoryDrawerInteraction }) => { + reportInteraction(UNIFIED_HISTORY_DRAWER_INTERACTION, { + type, + }); +}; + +//We keep track of users clicking on the `Show more` button +export const logUnifiedHistoryShowMoreEvent = () => { + reportInteraction(UNIFIED_HISTORY_DRAWER_SHOW_MORE); +};