RecentlyViewedDashboards: Add instrumentations (#116036)

RecentlyViewedDashboards: Add instrumentation

public/app/features/browse-dashboards/components/RecentlyViewedDashboards.tsx

@@ -4,6 +4,7 @@ import { useAsyncRetry } from 'react-use';
 
 import { GrafanaTheme2, store } from '@grafana/data';
 import { t, Trans } from '@grafana/i18n';
+import { reportInteraction } from '@grafana/runtime';
 import { evaluateBooleanFlag } from '@grafana/runtime/internal';
 import { Button, CollapsableSection, Spinner, Stack, Text, useStyles2, Grid } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
@@ -35,10 +36,18 @@ export function RecentlyViewedDashboards() {
   const { foldersByUid } = useDashboardLocationInfo(recentDashboards.length > 0);
 
   const handleClearHistory = () => {
+    reportInteraction('grafana_recently_viewed_dashboards_clear_history');
     store.set(recentDashboardsKey, JSON.stringify([]));
     retry();
   };
 
+  const handleSectionToggle = () => {
+    reportInteraction('grafana_recently_viewed_dashboards_toggle_section', {
+      expanded: !isOpen,
+    });
+    setIsOpen(!isOpen);
+  };
+
   if (!evaluateBooleanFlag('recentlyViewedDashboards', false) || recentDashboards.length === 0) {
     return null;
   }
@@ -48,7 +57,7 @@ export function RecentlyViewedDashboards() {
       headerDataTestId="browseDashboardsRecentlyViewedTitle"
       label={
         <Stack direction="row" justifyContent="space-between" alignItems="baseline" width="100%">
-          <Text variant="h5" element="h3" onClick={() => setIsOpen(!isOpen)}>
+          <Text variant="h5" element="h3" onClick={handleSectionToggle}>
             <Trans i18nKey="browse-dashboards.recently-viewed.title">Recently viewed</Trans>
           </Text>
           <Button icon="times" size="xs" variant="secondary" fill="text" onClick={handleClearHistory}>
@@ -80,9 +89,10 @@ export function RecentlyViewedDashboards() {
       {!loading && recentDashboards.length > 0 && (
         <ul className={styles.list}>
           <Grid columns={{ xs: 1, sm: 2, md: 3, lg: 5 }} gap={2}>
-            {recentDashboards.map((dash) => (
+            {recentDashboards.map((dash, idx) => (
               <li key={dash.uid} className={styles.listItem}>
                 <DashListItem
+                  order={idx + 1}
                   key={dash.uid}
                   dashboard={dash}
                   url={dash.url}

public/app/plugins/panel/dashlist/DashListItem.tsx

@@ -1,3 +1,4 @@
+import { reportInteraction } from '@grafana/runtime';
 import { Box, Card, Icon, Link, Stack, Text, useStyles2 } from '@grafana/ui';
 import { LocationInfo } from 'app/features/search/service/types';
 import { StarToolbarButton } from 'app/features/stars/StarToolbarButton';
@@ -11,11 +12,26 @@ interface Props {
   showFolderNames: boolean;
   locationInfo?: LocationInfo;
   layoutMode: 'list' | 'card';
+  order?: number; // for rudderstack analytics to track position in card list
   onStarChange?: (id: string, isStarred: boolean) => void;
 }
-export function DashListItem({ dashboard, url, showFolderNames, locationInfo, layoutMode, onStarChange }: Props) {
+export function DashListItem({
+  dashboard,
+  url,
+  showFolderNames,
+  locationInfo,
+  layoutMode,
+  order,
+  onStarChange,
+}: Props) {
   const css = useStyles2(getStyles);
 
+  const onCardLinkClick = () => {
+    reportInteraction('grafana_recently_viewed_dashboards_click_card', {
+      cardOrder: order,
+    });
+  };
+
   return (
     <>
       {layoutMode === 'list' ? (
@@ -39,7 +55,9 @@ export function DashListItem({ dashboard, url, showFolderNames, locationInfo, la
       ) : (
         <Card className={css.dashlistCard} noMargin>
           <Stack justifyContent="space-between" alignItems="center">
-            <Link href={url}>{dashboard.name}</Link>
+            <Link href={url} onClick={onCardLinkClick}>
+              {dashboard.name}
+            </Link>
             <StarToolbarButton
               title={dashboard.name}
               group="dashboard.grafana.app"