POC real example

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,

public/app/core/components/AppChrome/History/HistoryContainer.tsx

@@ -53,6 +53,7 @@ export function HistoryContainer() {
       <ToolbarButton
         onClick={() => {
           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"

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}

public/app/core/components/AppChrome/History/eventsTracking.ts

@@ -1,64 +1,56 @@
-import { reportInteraction } from '@grafana/runtime';
+import { createEventFactory, TrackingEventProps } from 'app/core/services/echo/Echo';
-
-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';
+type SubEntryTypes = 'timeRange';
+type UnifiedHistoryDrawerActions = 'open' | 'close';
 
-//Whether the user opens or closes the `HistoryDrawer`
+interface UnifiedHistoryEntryClicked extends TrackingEventProps {
-type UnifiedHistoryDrawerInteraction = 'open' | 'close';
+  /** We will also work with the current URL but we will get this from Rudderstack data
-
+   *  URL to return to
-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
+  /** In the case we want to go back to a specific query param, currently just a specific time range */
-  subEntry?: subEntryTypes;
+  subEntry?: SubEntryTypes;
 }
 
-interface UnifiedHistoryEntryDuplicated {
+interface UnifiedHistoryEntryDuplicated extends TrackingEventProps {
-  // Common name of the history entries
+  /** 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`
+interface UnifiedHistoryDrawerInteraction extends TrackingEventProps {
-export const logClickUnifiedHistoryEntryEvent = ({ entryURL, subEntry }: UnifiedHistoryEntryClicked) => {
+  /** Whether the user opens or closes the HistoryDrawer */
-  reportInteraction(UNIFIED_HISTORY_ENTRY_CLICKED, {
+  type: UnifiedHistoryDrawerActions;
-    entryURL,
+}
-    subEntry,
-  });
-};
 
-//Event triggered when history entry name matches the previous one
+const createUnifiedHistoryEvent = createEventFactory('grafana', 'unified_history');
-//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 }) => {
+ * Event triggered when a user clicks on an entry of the `HistoryDrawer`
-  reportInteraction(UNIFIED_HISTORY_DRAWER_INTERACTION, {
+ * @owner grafana-frontend-platform
-    type,
+ */
-  });
+export const logClickUnifiedHistoryEntryEvent = createUnifiedHistoryEvent<UnifiedHistoryEntryClicked>('entry_clicked');
-};
 
-//We keep track of users clicking on the `Show more` button
+/**
-export const logUnifiedHistoryShowMoreEvent = () => {
+ * Event triggered when history entry name matches the previous one
-  reportInteraction(UNIFIED_HISTORY_DRAWER_SHOW_MORE);
+ * so we keep track of duplicated entries and be able to analyze them
-};
+ * @owner grafana-frontend-platform
+ */
+export const logDuplicateUnifiedHistoryEntryEvent =
+  createUnifiedHistoryEvent<UnifiedHistoryEntryDuplicated>('duplicated_entry_rendered');
+
+/** We keep track of users open and closing the drawer
+ * @owner grafana-frontend-platform
+ */
+export const logUnifiedHistoryDrawerInteractionEvent =
+  createUnifiedHistoryEvent<UnifiedHistoryDrawerInteraction>('drawer_interaction');
+
+/**We keep track of users clicking on the `Show more` button
+ * @owner grafana-frontend-platform
+ */
+export const logUnifiedHistoryShowMoreEvent = createUnifiedHistoryEvent('show_more');