UnifiedHistory: add event tracking (#100975)

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];
     }
 

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 (
     <>
       <ToolbarButton
-        onClick={onToggleShowHistoryDrawer}
+        onClick={() => {
+          onToggleShowHistoryDrawer();
+          logUnifiedHistoryDrawerInteractionEvent({ type: 'open' });
+        }}
         iconOnly
         icon="history"
         aria-label={t('nav.history-container.drawer-tittle', 'History')}
@@ -59,7 +63,10 @@ export function HistoryContainer() {
       {showHistoryDrawer && (
         <Drawer
           title={t('nav.history-container.drawer-tittle', 'History')}
-          onClose={onToggleShowHistoryDrawer}
+          onClose={() => {
+            onToggleShowHistoryDrawer();
+            logUnifiedHistoryDrawerInteractionEvent({ type: 'close' });
+          }}
           size="sm"
         >
           <HistoryWrapper onClose={() => onToggleShowHistoryDrawer(false)} />

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<HistoryEntry[]>(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 }) {
       </Box>
       {history.length > numItemsToShow && (
         <Box paddingLeft={2}>
-          <Button variant="secondary" fill="text" onClick={() => setNumItemsToShow(numItemsToShow + 5)}>
+          <Button
+            variant="secondary"
+            fill="text"
+            onClick={() => {
+              setNumItemsToShow(numItemsToShow + 5);
+              logUnifiedHistoryShowMoreEvent();
+            }}
+          >
             {t('nav.history-wrapper.show-more', 'Show more')}
           </Button>
         </Box>
@@ -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}

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);
+};