From 46a34451d59ebeff90604e8554aea84ed0502d4a Mon Sep 17 00:00:00 2001
From: Artur Wierzbicki <artur.wierzbicki@grafana.com>
Date: Wed, 2 Feb 2022 13:41:10 +0400
Subject: [PATCH] Analytics: add more properties to dashboard list viewed event
 (#44739)

---
 .../search/hooks/useDashboardSearch.ts        | 27 ++++++++++--
 .../search/hooks/useManageDashboards.ts       | 41 ++++++++++++++++---
 2 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/public/app/features/search/hooks/useDashboardSearch.ts b/public/app/features/search/hooks/useDashboardSearch.ts
index a50f34f5615..6b267d9b743 100644
--- a/public/app/features/search/hooks/useDashboardSearch.ts
+++ b/public/app/features/search/hooks/useDashboardSearch.ts
@@ -1,4 +1,4 @@
-import { KeyboardEvent, useEffect, useReducer } from 'react';
+import { KeyboardEvent, useReducer } from 'react';
 import { getLocationSrv } from '@grafana/runtime';
 import { DashboardQuery, DashboardSearchItemType, DashboardSection } from '../types';
 import { MOVE_SELECTION_DOWN, MOVE_SELECTION_UP } from '../reducers/actionTypes';
@@ -8,6 +8,7 @@ import { useSearch } from './useSearch';
 import { locationUtil } from '@grafana/data';
 import { useShowDashboardPreviews } from './useShowDashboardPreviews';
 import { reportDashboardListViewed } from './useManageDashboards';
+import { useDebounce } from 'react-use';
 
 export const useDashboardSearch = (query: DashboardQuery, onCloseSearch: () => void) => {
   const reducer = useReducer(searchReducer, dashboardsSearchState);
@@ -18,9 +19,27 @@ export const useDashboardSearch = (query: DashboardQuery, onCloseSearch: () => v
     dispatch,
   } = useSearch<DashboardsSearchState>(query, reducer, { queryParsing: true });
 
-  useEffect(() => {
-    reportDashboardListViewed('dashboard_search', showPreviews, previewFeatureEnabled, query.layout);
-  }, [showPreviews, previewFeatureEnabled, query.layout]);
+  useDebounce(
+    () => {
+      reportDashboardListViewed('dashboard_search', showPreviews, previewFeatureEnabled, {
+        layout: query.layout,
+        starred: query.starred,
+        sortValue: query.sort?.value,
+        query: query.query,
+        tagCount: query.tag?.length,
+      });
+    },
+    1000,
+    [
+      showPreviews,
+      previewFeatureEnabled,
+      query.layout,
+      query.starred,
+      query.sort?.value,
+      query.query?.length,
+      query.tag?.length,
+    ]
+  );
 
   const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     switch (event.key) {
diff --git a/public/app/features/search/hooks/useManageDashboards.ts b/public/app/features/search/hooks/useManageDashboards.ts
index 6e80aa881b1..12a5e61422c 100644
--- a/public/app/features/search/hooks/useManageDashboards.ts
+++ b/public/app/features/search/hooks/useManageDashboards.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useReducer } from 'react';
+import { useCallback, useMemo, useReducer } from 'react';
 import { FolderDTO } from 'app/types';
 import { contextSrv } from 'app/core/services/context_srv';
 import { DashboardQuery, DashboardSection, OnDeleteItems, OnMoveItems, OnToggleChecked, SearchLayout } from '../types';
@@ -8,6 +8,7 @@ import { useSearch } from './useSearch';
 import { GENERAL_FOLDER_ID } from '../constants';
 import { useShowDashboardPreviews } from './useShowDashboardPreviews';
 import { reportInteraction } from '@grafana/runtime/src';
+import { useDebounce } from 'react-use';
 
 const hasChecked = (section: DashboardSection) => {
   return section.checked || section.items.some((item) => item.checked);
@@ -17,12 +18,22 @@ export const reportDashboardListViewed = (
   dashboardListType: 'manage_dashboards' | 'dashboard_search',
   showPreviews: boolean,
   previewsEnabled: boolean,
-  searchLayout: SearchLayout
+  query: {
+    layout?: SearchLayout;
+    starred?: boolean;
+    sortValue?: string;
+    query?: string;
+    tagCount?: number;
+  }
 ) => {
   const previews = previewsEnabled ? (showPreviews ? 'on' : 'off') : 'feature_disabled';
   reportInteraction(`${dashboardListType}_viewed`, {
     previews,
-    layout: searchLayout,
+    layout: query.layout,
+    starredFilter: query.starred ?? false,
+    sort: query.sortValue ?? '',
+    tagCount: query.tagCount ?? 0,
+    queryLength: query.query?.length ?? 0,
   });
 };
 
@@ -37,9 +48,27 @@ export const useManageDashboards = (
   });
 
   const { showPreviews, onShowPreviewsChange, previewFeatureEnabled } = useShowDashboardPreviews();
-  useEffect(() => {
-    reportDashboardListViewed('manage_dashboards', showPreviews, previewFeatureEnabled, query.layout);
-  }, [showPreviews, previewFeatureEnabled, query.layout]);
+  useDebounce(
+    () => {
+      reportDashboardListViewed('manage_dashboards', showPreviews, previewFeatureEnabled, {
+        layout: query.layout,
+        starred: query.starred,
+        sortValue: query.sort?.value,
+        query: query.query,
+        tagCount: query.tag?.length,
+      });
+    },
+    1000,
+    [
+      showPreviews,
+      previewFeatureEnabled,
+      query.layout,
+      query.starred,
+      query.sort?.value,
+      query.query?.length,
+      query.tag?.length,
+    ]
+  );
 
   const {
     state: { results, loading, initialLoading, allChecked },