feat(ddm): Add amplitude events (#64177)

Extend basic analytics on metrics page.

- closes https://github.com/getsentry/sentry/issues/63584

static/app/utils/analytics/ddmAnalyticsEvents.tsx

@@ -1,9 +1,21 @@
 export type DDMEventParameters = {
+  'ddm.add-to-dashboard': {
+    source: 'global' | 'widget';
+  };
+  'ddm.code-location': {};
+  'ddm.create-alert': {
+    source: 'global' | 'widget';
+  };
   'ddm.page-view': {};
+  'ddm.sample-table-interaction': {
+    target: 'event-id' | 'transaction' | 'trace-id' | 'profile';
+  };
   'ddm.scratchpad.remove': {};
   'ddm.scratchpad.save': {};
   'ddm.scratchpad.set-default': {};
   'ddm.widget.add': {};
+  'ddm.widget.duplicate': {};
+  'ddm.widget.metric-settings': {};
   'ddm.widget.sort': {
     by: string;
     order: string;
@@ -17,4 +29,10 @@ export const ddmEventMap: Record<keyof DDMEventParameters, string> = {
   'ddm.scratchpad.set-default': 'DDM: Scratchpad Set as Default',
   'ddm.widget.add': 'DDM: Widget Added',
   'ddm.widget.sort': 'DDM: Group By Sort Changed',
+  'ddm.widget.duplicate': 'DDM: Widget Duplicated',
+  'ddm.widget.metric-settings': 'DDM: Widget Metric Settings',
+  'ddm.create-alert': 'DDM: Create Alert',
+  'ddm.add-to-dashboard': 'DDM: Add to Dashboard',
+  'ddm.code-location': 'DDM: Code Location',
+  'ddm.sample-table-interaction': 'DDM: Sample Table Interaction',
 };

static/app/views/ddm/contextMenu.tsx

@@ -15,6 +15,7 @@ import {
 } from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Organization} from 'sentry/types';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import {isCustomMeasurement, isCustomMetric} from 'sentry/utils/metrics';
 import {
   convertToDashboardWidget,
@@ -63,6 +64,9 @@ export function MetricQueryContextMenu({
         key: 'duplicate',
         label: t('Duplicate'),
         onAction: () => {
+          trackAnalytics('ddm.widget.duplicate', {
+            organization,
+          });
           Sentry.metrics.increment('ddm.widget.duplicate');
           duplicateWidget(widgetIndex);
         },
@@ -73,6 +77,10 @@ export function MetricQueryContextMenu({
         label: t('Create Alert'),
         disabled: !createAlert,
         onAction: () => {
+          trackAnalytics('ddm.create-alert', {
+            organization,
+            source: 'widget',
+          });
           Sentry.metrics.increment('ddm.widget.alert');
           createAlert?.();
         },
@@ -83,6 +91,10 @@ export function MetricQueryContextMenu({
         label: t('Add to Dashboard'),
         disabled: !createDashboardWidget,
         onAction: () => {
+          trackAnalytics('ddm.add-to-dashboard', {
+            organization,
+            source: 'widget',
+          });
           Sentry.metrics.increment('ddm.widget.dashboard');
           createDashboardWidget?.();
         },
@@ -93,6 +105,9 @@ export function MetricQueryContextMenu({
         label: t('Metric Settings'),
         disabled: !isCustomMetric({mri: metricsQuery.mri}),
         onAction: () => {
+          trackAnalytics('ddm.widget.settings', {
+            organization,
+          });
           Sentry.metrics.increment('ddm.widget.settings');
           navigateTo(
             `/settings/projects/:projectId/metrics/${encodeURIComponent(
@@ -116,12 +131,13 @@ export function MetricQueryContextMenu({
     [
       createAlert,
       createDashboardWidget,
+      metricsQuery.mri,
+      canDelete,
+      organization,
       duplicateWidget,
-      removeWidget,
       widgetIndex,
-      canDelete,
-      metricsQuery.mri,
       router,
+      removeWidget,
     ]
   );
 

static/app/views/ddm/pageHeaderActions.tsx

@@ -66,7 +66,13 @@ export function PageHeaderActions({showCustomMetricButton, addCustomMetric}: Pro
         leadingItems: [<IconDashboard key="icon" />],
         key: 'add-dashboard',
         label: t('Add to Dashboard'),
-        onAction: createDashboard,
+        onAction: () => {
+          trackAnalytics('ddm.add-to-dashboard', {
+            organization,
+            source: 'global',
+          });
+          createDashboard();
+        },
       },
       {
         leadingItems: [<IconSettings key="icon" />],
@@ -108,7 +114,13 @@ export function PageHeaderActions({showCustomMetricButton, addCustomMetric}: Pro
             ? t('Custom measurements cannot be used to create alerts')
             : undefined,
           disabled: !createAlert,
-          onAction: createAlert,
+          onAction: () => {
+            trackAnalytics('ddm.create-alert', {
+              organization,
+              source: 'global',
+            });
+            createAlert?.();
+          },
         };
       }),
     [

static/app/views/ddm/sampleTable.tsx

@@ -17,6 +17,7 @@ import {IconArrow, IconProfiling} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {MRI} from 'sentry/types';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import {getDuration} from 'sentry/utils/formatters';
 import {getMetricsCorrelationSpanUrl} from 'sentry/utils/metrics';
 import type {MetricCorrelation, SelectionRange} from 'sentry/utils/metrics/types';
@@ -86,6 +87,13 @@ export function SampleTable({
     // We only want to show the first 10 correlations
     .slice(0, 10) as MetricCorrelation[];
 
+  function trackClick(target: 'event-id' | 'transaction' | 'trace-id' | 'profile') {
+    trackAnalytics('ddm.sample-table-interaction', {
+      organization,
+      target,
+    });
+  }
+
   function renderHeadCell(col: Column) {
     if (col.key === 'profileId') {
       return <AlignCenter>{col.name}</AlignCenter>;
@@ -125,6 +133,7 @@ export function SampleTable({
               row.transactionId,
               row.transactionSpanId
             )}
+            onClick={() => trackClick('event-id')}
             target="_blank"
           >
             {row.transactionId.slice(0, 8)}
@@ -152,6 +161,7 @@ export function SampleTable({
                   referrer: 'metrics',
                 })}`
               )}
+              onClick={() => trackClick('transaction')}
             >
               {row.segmentName}
             </Link>
@@ -182,6 +192,7 @@ export function SampleTable({
             to={normalizeUrl(
               `/organizations/${organization.slug}/performance/trace/${row.traceId}/`
             )}
+            onClick={() => trackClick('trace-id')}
           >
             {row.traceId.slice(0, 8)}
           </Link>
@@ -251,6 +262,7 @@ export function SampleTable({
               to={normalizeUrl(
                 `/organizations/${organization.slug}/profiling/profile/${project?.slug}/${row.profileId}/flamegraph/`
               )}
+              onClick={() => trackClick('profile')}
               size="xs"
             >
               <IconProfiling size="xs" />

static/app/views/ddm/widgetDetails.tsx

@@ -1,12 +1,14 @@
-import {useState} from 'react';
+import {useCallback, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {TabList, TabPanels, Tabs} from 'sentry/components/tabs';
 import {Tooltip} from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import {isCustomMetric} from 'sentry/utils/metrics';
 import type {MetricWidgetQueryParams} from 'sentry/utils/metrics/types';
+import useOrganization from 'sentry/utils/useOrganization';
 import {CodeLocations} from 'sentry/views/ddm/codeLocations';
 import {useDDMContext} from 'sentry/views/ddm/context';
 import {SampleTable} from 'sentry/views/ddm/sampleTable';
@@ -23,6 +25,7 @@ const constructQueryString = (queryObject: Record<string, string>) => {
 };
 
 export function WidgetDetails() {
+  const organization = useOrganization();
   const {
     selectedWidgetIndex,
     widgets,
@@ -46,9 +49,21 @@ export function WidgetDetails() {
     setHighlightedSampleId(sampleId);
   };
 
+  const handleTabChange = useCallback(
+    (tab: Tab) => {
+      if (tab === Tab.CODE_LOCATIONS) {
+        trackAnalytics('ddm.code-locations', {
+          organization,
+        });
+      }
+      setSelectedTab(tab);
+    },
+    [organization]
+  );
+
   return (
     <TrayWrapper>
-      <Tabs value={selectedTab} onChange={setSelectedTab}>
+      <Tabs value={selectedTab} onChange={handleTabChange}>
         <TabList>
           <TabList.Item key={Tab.SAMPLES}>{t('Samples')}</TabList.Item>
           <TabList.Item