Task: Add tracking dashboard toolbar options (#77524)

* add tracking for toolbar

* Add favorite

* add timepicker

* add reusable analytics file

* change the refresh and zoom click prop function

* add interaction for timepicker

* decouple tracking code

* update naming of function

* Update packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx

Co-authored-by: Juan Cabanas <juan.cabanas@grafana.com>

* use useEffect

* remove prop from useEffect

* destructure prop

* add dependency on useEffect

---------

Co-authored-by: Juan Cabanas <juan.cabanas@grafana.com>

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import { useDialog } from '@react-aria/dialog';
 import { FocusScope } from '@react-aria/focus';
 import { useOverlay } from '@react-aria/overlays';
-import React, { memo, createRef, useState } from 'react';
+import React, { memo, createRef, useState, useEffect } from 'react';
 
 import {
   isDateTime,
@@ -44,6 +44,7 @@ export interface TimeRangePickerProps {
   hideQuickRanges?: boolean;
   widthOverride?: number;
   isOnCanvas?: boolean;
+  onToolbarTimePickerClick?: () => void;
 }
 
 export interface State {
@@ -68,6 +69,7 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
     hideQuickRanges,
     widthOverride,
     isOnCanvas,
+    onToolbarTimePickerClick,
   } = props;
 
   const onChange = (timeRange: TimeRange) => {
@@ -75,6 +77,12 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
     setOpen(false);
   };
 
+  useEffect(() => {
+    if (isOpen && onToolbarTimePickerClick) {
+      onToolbarTimePickerClick();
+    }
+  }, [isOpen, onToolbarTimePickerClick]);
+
   const onToolbarButtonSwitch = () => {
     setOpen((prevState) => !prevState);
   };

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -35,6 +35,13 @@ import { DashboardMetaChangedEvent, ShowModalReactEvent } from 'app/types/events
 import { DashNavButton } from './DashNavButton';
 import { DashNavTimeControls } from './DashNavTimeControls';
 import { ShareButton } from './ShareButton';
+import {
+  trackToolbarFavoritesClick,
+  trackToolbarRefreshClick,
+  trackToolbarSettingsClick,
+  trackToolbarTimePickerClick,
+  trackToolbarZoomClick,
+} from './analytics';
 
 const mapDispatchToProps = {
   setStarred,
@@ -122,6 +129,7 @@ export const DashNav = React.memo<Props>((props) => {
   };
 
   const onStarDashboard = () => {
+    trackToolbarFavoritesClick();
     const dashboardSrv = getDashboardSrv();
     const { dashboard, setStarred } = props;
 
@@ -133,6 +141,7 @@ export const DashNav = React.memo<Props>((props) => {
   };
 
   const onOpenSettings = () => {
+    trackToolbarSettingsClick();
     locationService.partial({ editview: 'settings' });
   };
 
@@ -242,9 +251,15 @@ export const DashNav = React.memo<Props>((props) => {
     if (hideTimePicker) {
       return null;
     }
-
     return (
-      <DashNavTimeControls dashboard={dashboard} onChangeTimeZone={updateTimeZoneForSession} key="time-controls" />
+      <DashNavTimeControls
+        dashboard={dashboard}
+        onChangeTimeZone={updateTimeZoneForSession}
+        onToolbarRefreshClick={trackToolbarRefreshClick}
+        onToolbarZoomClick={trackToolbarZoomClick}
+        onToolbarTimePickerClick={trackToolbarTimePickerClick}
+        key="time-controls"
+      />
     );
   };
 

public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx

@@ -17,6 +17,9 @@ export interface Props {
   dashboard: DashboardModel;
   onChangeTimeZone: (timeZone: TimeZone) => void;
   isOnCanvas?: boolean;
+  onToolbarRefreshClick?: () => void;
+  onToolbarZoomClick?: () => void;
+  onToolbarTimePickerClick?: () => void;
 }
 
 export class DashNavTimeControls extends Component<Props> {
@@ -75,9 +78,19 @@ export class DashNavTimeControls extends Component<Props> {
   };
 
   onZoom = () => {
+    if (this.props.onToolbarZoomClick) {
+      this.props.onToolbarZoomClick();
+    }
     appEvents.publish(new ZoomOutEvent({ scale: 2 }));
   };
 
+  onRefreshClick = () => {
+    if (this.props.onToolbarRefreshClick) {
+      this.props.onToolbarRefreshClick();
+    }
+    this.onRefresh();
+  };
+
   render() {
     const { dashboard, isOnCanvas } = this.props;
     const { refresh_intervals } = dashboard.timepicker;
@@ -106,10 +119,11 @@ export class DashNavTimeControls extends Component<Props> {
           onChangeTimeZone={this.onChangeTimeZone}
           onChangeFiscalYearStartMonth={this.onChangeFiscalYearStartMonth}
           isOnCanvas={isOnCanvas}
+          onToolbarTimePickerClick={this.props.onToolbarTimePickerClick}
         />
         <RefreshPicker
           onIntervalChanged={this.onChangeRefreshInterval}
-          onRefresh={this.onRefresh}
+          onRefresh={this.onRefreshClick}
           value={dashboard.refresh}
           intervals={intervals}
           isOnCanvas={isOnCanvas}

public/app/features/dashboard/components/DashNav/analytics.ts

@@ -0,0 +1,27 @@
+import { reportInteraction } from '@grafana/runtime';
+
+export const shareAnalyticsEventNames: {
+  [key: string]: string;
+} = {
+  dashboardsToolbarActionsClicked: 'dashboards_toolbar_actions_clicked',
+};
+
+export function trackToolbarFavoritesClick() {
+  reportInteraction(shareAnalyticsEventNames.dashboardsToolbarActionsClicked, { item: 'favorites' });
+}
+
+export function trackToolbarSettingsClick() {
+  reportInteraction(shareAnalyticsEventNames.dashboardsToolbarActionsClicked, { item: 'settings' });
+}
+
+export function trackToolbarRefreshClick() {
+  reportInteraction(shareAnalyticsEventNames.dashboardsToolbarActionsClicked, { item: 'refresh' });
+}
+
+export function trackToolbarTimePickerClick() {
+  reportInteraction(shareAnalyticsEventNames.dashboardsToolbarActionsClicked, { item: 'time_picker' });
+}
+
+export function trackToolbarZoomClick() {
+  reportInteraction(shareAnalyticsEventNames.dashboardsToolbarActionsClicked, { item: 'zoom_out_time_range' });
+}