Query Library: Interaction events for query library (#92159)

* interaction events for query library

* track adding or editing description

* Update to specify it's in explore

public/app/features/explore/ExplorePage.tsx

@@ -21,6 +21,7 @@ import { ExploreActions } from './ExploreActions';
 import { ExploreDrawer } from './ExploreDrawer';
 import { ExplorePaneContainer } from './ExplorePaneContainer';
 import { QueriesDrawerContextProvider, useQueriesDrawerContext } from './QueriesDrawer/QueriesDrawerContext';
+import { queryLibraryTrackAddFromQueryRow } from './QueryLibrary/QueryLibraryAnalyticsEvents';
 import { QueryTemplateForm } from './QueryLibrary/QueryTemplateForm';
 import RichHistoryContainer from './RichHistory/RichHistoryContainer';
 import { useExplorePageTitle } from './hooks/useExplorePageTitle';
@@ -143,6 +144,7 @@ function ExplorePageContent(props: GrafanaRouteComponentProps<{}, ExploreQueryPa
           onSave={(isSuccess) => {
             if (isSuccess) {
               setQueryToAdd(undefined);
+              queryLibraryTrackAddFromQueryRow(queryToAdd?.datasource?.type || '');
             }
           }}
           queryToAdd={queryToAdd!}

public/app/features/explore/QueriesDrawer/QueriesDrawerDropdown.tsx

@@ -3,6 +3,8 @@ import { css } from '@emotion/css';
 import { Button, ButtonGroup, Dropdown, Menu, ToolbarButton } from '@grafana/ui';
 import { useStyles2 } from '@grafana/ui/';
 
+import { queryLibraryTrackToggle } from '../QueryLibrary/QueryLibraryAnalyticsEvents';
+
 import { Tabs, useQueriesDrawerContext } from './QueriesDrawerContext';
 import { i18n } from './utils';
 
@@ -21,6 +23,8 @@ export function QueriesDrawerDropdown({ variant }: Props) {
   }
 
   function toggle(tab: Tabs) {
+    tab === Tabs.QueryLibrary && queryLibraryTrackToggle(!drawerOpened);
+
     setSelectedTab(tab);
     setDrawerOpened(false);
     setDrawerOpened(true);
@@ -38,7 +42,10 @@ export function QueriesDrawerDropdown({ variant }: Props) {
       <ToolbarButton
         icon="book"
         variant={drawerOpened ? 'active' : 'canvas'}
-        onClick={() => setDrawerOpened(!drawerOpened)}
+        onClick={() => {
+          setDrawerOpened(!drawerOpened);
+          selectedTab === Tabs.QueryLibrary && queryLibraryTrackToggle(!drawerOpened);
+        }}
         aria-label={selectedTab}
       >
         {variant === 'full' ? selectedTab : undefined}
@@ -48,7 +55,10 @@ export function QueriesDrawerDropdown({ variant }: Props) {
           className={styles.close}
           variant="secondary"
           icon="times"
-          onClick={() => setDrawerOpened(false)}
+          onClick={() => {
+            setDrawerOpened(false);
+            selectedTab === Tabs.QueryLibrary && queryLibraryTrackToggle(false);
+          }}
         ></Button>
       ) : (
         <Dropdown overlay={menu}>

public/app/features/explore/QueryLibrary/QueryLibraryAnalyticsEvents.ts

@@ -0,0 +1,50 @@
+import { reportInteraction } from '@grafana/runtime';
+
+const QUERY_LIBRARY_EXPLORE_EVENT = 'query_library_explore_clicked';
+
+export function queryLibraryTrackToggle(open: boolean) {
+  reportInteraction(QUERY_LIBRARY_EXPLORE_EVENT, {
+    item: 'query_library_toggle',
+    type: open ? 'open' : 'close',
+  });
+}
+
+export function queryLibraryTrackAddFromQueryHistory(datasourceType: string) {
+  reportInteraction(QUERY_LIBRARY_EXPLORE_EVENT, {
+    item: 'add_query_from_query_history',
+    type: datasourceType,
+  });
+}
+
+export function queryLibraryTrackAddFromQueryHistoryAddModalShown() {
+  reportInteraction(QUERY_LIBRARY_EXPLORE_EVENT, {
+    item: 'add_query_modal_from_query_history',
+    type: 'open',
+  });
+}
+
+export function queryLibraryTrackAddFromQueryRow(datasourceType: string) {
+  reportInteraction(QUERY_LIBRARY_EXPLORE_EVENT, {
+    item: 'add_query_from_query_row',
+    type: datasourceType,
+  });
+}
+
+export function queryLibaryTrackDeleteQuery() {
+  reportInteraction(QUERY_LIBRARY_EXPLORE_EVENT, {
+    item: 'delete_query',
+  });
+}
+
+export function queryLibraryTrackRunQuery(datasourceType: string) {
+  reportInteraction(QUERY_LIBRARY_EXPLORE_EVENT, {
+    item: 'run_query',
+    type: datasourceType,
+  });
+}
+
+export function queryLibraryTrackAddOrEditDescription() {
+  reportInteraction(QUERY_LIBRARY_EXPLORE_EVENT, {
+    item: 'add_or_edit_description',
+  });
+}

public/app/features/explore/QueryLibrary/QueryTemplatesTable/ActionsCell.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { reportInteraction, getAppEvents } from '@grafana/runtime';
+import { getAppEvents } from '@grafana/runtime';
 import { IconButton, Modal } from '@grafana/ui';
 import { notifyApp } from 'app/core/actions';
 import { createSuccessNotification } from 'app/core/copy/appNotification';
@@ -11,6 +11,11 @@ import { ShowConfirmModalEvent } from 'app/types/events';
 
 import ExploreRunQueryButton from '../../ExploreRunQueryButton';
 import { useQueriesDrawerContext } from '../../QueriesDrawer/QueriesDrawerContext';
+import {
+  queryLibaryTrackDeleteQuery,
+  queryLibraryTrackAddOrEditDescription,
+  queryLibraryTrackRunQuery,
+} from '../QueryLibraryAnalyticsEvents';
 import { QueryTemplateForm } from '../QueryTemplateForm';
 
 import { useQueryLibraryListStyles } from './styles';
@@ -32,7 +37,7 @@ function ActionsCell({ queryTemplate, rootDatasourceUid, queryUid }: ActionsCell
     const performDelete = (queryUid: string) => {
       deleteQueryTemplate({ uid: queryUid });
       dispatch(notifyApp(createSuccessNotification(t('explore.query-library.query-deleted', 'Query deleted'))));
-      reportInteraction('grafana_explore_query_library_deleted');
+      queryLibaryTrackDeleteQuery();
     };
 
     getAppEvents().publish(
@@ -71,12 +76,16 @@ function ActionsCell({ queryTemplate, rootDatasourceUid, queryUid }: ActionsCell
         tooltip={t('explore.query-library.add-edit-description', 'Add/edit description')}
         onClick={() => {
           setEditFormOpen(true);
+          queryLibraryTrackAddOrEditDescription();
         }}
       />
       <ExploreRunQueryButton
         queries={queryTemplate.query ? [queryTemplate.query] : []}
         rootDatasourceUid={rootDatasourceUid}
-        onClick={() => setDrawerOpened(false)}
+        onClick={() => {
+          setDrawerOpened(false);
+          queryLibraryTrackRunQuery(queryTemplate.datasourceType || '');
+        }}
       />
       <Modal
         title={t('explore.query-template-modal.edit-title', 'Edit query')}

public/app/features/explore/RichHistory/RichHistoryAddToLibrary.tsx

@@ -5,6 +5,10 @@ import { DataQuery } from '@grafana/schema';
 import { Button, Modal } from '@grafana/ui';
 import { isQueryLibraryEnabled } from 'app/features/query-library';
 
+import {
+  queryLibraryTrackAddFromQueryHistory,
+  queryLibraryTrackAddFromQueryHistoryAddModalShown,
+} from '../QueryLibrary/QueryLibraryAnalyticsEvents';
 import { QueryTemplateForm } from '../QueryLibrary/QueryTemplateForm';
 
 type Props = {
@@ -19,7 +23,14 @@ export const RichHistoryAddToLibrary = ({ query }: Props) => {
 
   return isQueryLibraryEnabled() && !hasBeenSaved ? (
     <>
-      <Button variant="secondary" aria-label={buttonLabel} onClick={() => setIsOpen(true)}>
+      <Button
+        variant="secondary"
+        aria-label={buttonLabel}
+        onClick={() => {
+          setIsOpen(true);
+          queryLibraryTrackAddFromQueryHistoryAddModalShown();
+        }}
+      >
         {buttonLabel}
       </Button>
       <Modal
@@ -34,6 +45,7 @@ export const RichHistoryAddToLibrary = ({ query }: Props) => {
             if (isSuccess) {
               setIsOpen(false);
               setHasBeenSaved(true);
+              queryLibraryTrackAddFromQueryHistory(query.datasource?.type || '');
             }
           }}
         />