chore(analytics): converts more performance view analytics (#42875)

static/app/utils/analytics/performanceAnalyticsEvents.tsx

@@ -16,11 +16,14 @@ type PageLayoutParams = {
 export type PerformanceEventParameters = {
   'performance_views.all_events.open_in_discover': {};
   'performance_views.anomalies.anomalies_tab_clicked': PageLayoutParams;
+  'performance_views.change_view': {
+    project_platforms: string;
+    view_name: string;
+  };
   'performance_views.create_sample_transaction': SampleTransactionParam;
   'performance_views.event_details.anchor_span': {
     span_id: string;
   };
-
   'performance_views.event_details.filter_by_op': {
     operation: string;
   };
@@ -34,6 +37,11 @@ export type PerformanceEventParameters = {
   'performance_views.filter_dropdown.selection': {
     action: string;
   };
+  'performance_views.landingv2.display.filter_change': {
+    field: string;
+    max_value: number;
+    min_value: number;
+  };
   'performance_views.landingv2.transactions.sort': {
     direction?: string;
     field?: string;
@@ -67,6 +75,9 @@ export type PerformanceEventParameters = {
     is_on_metrics: boolean;
   };
   'performance_views.overview.cellaction': {action?: string};
+  'performance_views.overview.change_chart': {
+    metric: string;
+  };
   'performance_views.overview.navigate.summary': {
     project_platforms: string;
   };
@@ -90,6 +101,7 @@ export type PerformanceEventParameters = {
     sort_column?: string;
   };
   'performance_views.spans.spans_tab_clicked': PageLayoutParams;
+  'performance_views.summary.create_alert_clicked': {};
   'performance_views.summary.tag_explorer.cell_action': {};
   'performance_views.summary.tag_explorer.change_page': {};
   'performance_views.summary.tag_explorer.sort': {
@@ -120,6 +132,19 @@ export type PerformanceEventParameters = {
     transaction: string;
   };
   'performance_views.trace_view.view': {};
+  'performance_views.transactionEvents.cellaction': {
+    action: string;
+  };
+  'performance_views.transactionEvents.display_filter_dropdown.selection': {
+    action: string;
+  };
+  'performance_views.transactionEvents.ops_filter_dropdown.selection': {
+    action: string;
+  };
+  'performance_views.transactionEvents.sort': {
+    direction?: string;
+    field?: string;
+  };
   'performance_views.transaction_summary.change_chart_display': {
     from_chart: string;
     to_chart: string;
@@ -156,8 +181,11 @@ export const performanceEventMap: Record<PerformanceEventKey, string | null> = {
   'performance_views.tour.start': 'Performance Views: Tour Start',
   'performance_views.tour.advance': 'Performance Views: Tour Advance',
   'performance_views.tour.close': 'Performance Views: Tour Close',
+  'performance_views.change_view': 'Performance Views: Change View',
   'performance_views.landingv2.transactions.sort':
     'Performance Views: Landing Transactions Sorted',
+  'performance_views.landingv2.display.filter_change':
+    'Performance Views: Landing v2 Display Filter Change',
   'performance_views.overview.navigate.summary':
     'Performance Views: Overview view summary',
   'performance_views.overview.cellaction': 'Performance Views: Cell Action Clicked',
@@ -170,10 +198,13 @@ export const performanceEventMap: Record<PerformanceEventKey, string | null> = {
   'performance_views.landingv3.display_change': 'Performance Views: Switch Landing Tabs',
   'performance_views.landingv3.table_pagination':
     'Performance Views: Landing Page Transactions Table Page Changed',
+  'performance_views.overview.change_chart': 'Performance Views: Change Overview Chart',
   'performance_views.span_summary.change_chart':
     'Performance Views: Span Summary displayed chart changed',
   'performance_views.spans.change_op': 'Performance Views: Change span operation name',
   'performance_views.spans.change_sort': 'Performance Views: Change span sort column',
+  'performance_views.summary.create_alert_clicked':
+    'Performance Views: Create alert clicked',
   'performance_views.summary.tag_explorer.tag_value':
     'Performance Views: Tag Explorer Value Clicked',
   'performance_views.summary.tag_explorer.cell_action':
@@ -226,6 +257,14 @@ export const performanceEventMap: Record<PerformanceEventKey, string | null> = {
     'Performance Views: Event Details span anchored',
   'performance_views.event_details.json_button_click':
     'Performance Views: Event Details JSON button clicked',
+  'performance_views.transactionEvents.cellaction':
+    'Performance Views: Transaction Events Tab Cell Action Clicked',
+  'performance_views.transactionEvents.sort':
+    'Performance Views: Transaction Events Tab Sorted',
+  'performance_views.transactionEvents.display_filter_dropdown.selection':
+    'Performance Views: Transaction Events Display Filter Dropdown',
+  'performance_views.transactionEvents.ops_filter_dropdown.selection':
+    'Performance Views: Transaction Events Ops Breakdown Filter Dropdown',
   'performance_views.transaction_summary.view':
     'Performance Views: Transaction Summary View',
   'performance_views.filter_dropdown.selection': 'Performance Views: Filter Dropdown',

static/app/views/performance/charts/footer.tsx

@@ -14,7 +14,7 @@ import {
 } from 'sentry/components/charts/styles';
 import {t} from 'sentry/locale';
 import {Organization} from 'sentry/types';
-import {trackAnalyticsEvent} from 'sentry/utils/analytics';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import EventView, {isAPIPayloadSimilar} from 'sentry/utils/discover/eventView';
 
 import {getAxisOptions, TooltipOption} from '../data';
@@ -67,10 +67,8 @@ class ChartFooter extends Component<Props, State> {
 
   handleSelectorChange(key: string, value: string) {
     const {location, organization} = this.props;
-    trackAnalyticsEvent({
-      eventKey: 'performance_views.overview.change_chart',
-      eventName: 'Performance Views: Change Overview Chart',
-      organization_id: parseInt(organization.id, 10),
+    trackAdvancedAnalyticsEvent('performance_views.overview.change_chart', {
+      organization,
       metric: value,
     });
 

static/app/views/performance/landing/display/doubleAxisDisplay.tsx

@@ -6,7 +6,7 @@ import {Location} from 'history';
 import {Panel} from 'sentry/components/panels';
 import space from 'sentry/styles/space';
 import {Organization} from 'sentry/types';
-import {trackAnalyticsEvent} from 'sentry/utils/analytics';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import EventView from 'sentry/utils/discover/eventView';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import withApi from 'sentry/utils/withApi';
@@ -41,11 +41,9 @@ function DoubleAxisDisplay(props: Props) {
       `<${Math.round(maxValue)}`,
     ]);
     const query = conditions.formatString();
+    trackAdvancedAnalyticsEvent('performance_views.landingv2.display.filter_change', {
+      organization,
 
-    trackAnalyticsEvent({
-      eventKey: 'performance_views.landingv2.display.filter_change',
-      eventName: 'Performance Views: Landing v2 Display Filter Change',
-      organization_id: parseInt(organization.id, 10),
       field,
       min_value: parseInt(minValue, 10),
       max_value: parseInt(maxValue, 10),

static/app/views/performance/transactionSummary/header.tsx

@@ -17,7 +17,7 @@ import {Item, TabList} from 'sentry/components/tabs';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Organization, Project} from 'sentry/types';
-import {trackAnalyticsEvent} from 'sentry/utils/analytics';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import EventView from 'sentry/utils/discover/eventView';
 import {MetricsCardinalityContext} from 'sentry/utils/performance/contexts/metricsCardinality';
 import HasMeasurementsQuery from 'sentry/utils/performance/vitals/hasMeasurementsQuery';
@@ -57,10 +57,8 @@ function TransactionHeader({
   hasWebVitals,
 }: Props) {
   function handleCreateAlertSuccess() {
-    trackAnalyticsEvent({
-      eventKey: 'performance_views.summary.create_alert_clicked',
-      eventName: 'Performance Views: Create alert clicked',
-      organization_id: organization.id,
+    trackAdvancedAnalyticsEvent('performance_views.summary.create_alert_clicked', {
+      organization,
     });
   }
 

static/app/views/performance/transactionSummary/transactionEvents/eventsTable.tsx

@@ -17,7 +17,7 @@ import Tooltip from 'sentry/components/tooltip';
 import {t, tct} from 'sentry/locale';
 import {IssueAttachment, Organization, Project} from 'sentry/types';
 import {defined} from 'sentry/utils';
-import {trackAnalyticsEvent} from 'sentry/utils/analytics';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import DiscoverQuery, {
   TableData,
   TableDataRow,
@@ -116,10 +116,8 @@ class EventsTable extends Component<Props, State> {
     return (action: Actions, value: React.ReactText) => {
       const {eventView, location, organization, excludedTags} = this.props;
 
-      trackAnalyticsEvent({
-        eventKey: 'performance_views.transactionEvents.cellaction',
-        eventName: 'Performance Views: Transaction Events Tab Cell Action Clicked',
-        organization_id: parseInt(organization.id, 10),
+      trackAdvancedAnalyticsEvent('performance_views.transactionEvents.cellaction', {
+        organization,
         action,
       });
 
@@ -258,10 +256,8 @@ class EventsTable extends Component<Props, State> {
 
   onSortClick(currentSortKind?: string, currentSortField?: string) {
     const {organization} = this.props;
-    trackAnalyticsEvent({
-      eventKey: 'performance_views.transactionEvents.sort',
-      eventName: 'Performance Views: Transaction Events Tab Sorted',
-      organization_id: parseInt(organization.id, 10),
+    trackAdvancedAnalyticsEvent('performance_views.transactionEvents.sort', {
+      organization,
       field: currentSortField,
       direction: currentSortKind,
     });

static/app/views/performance/transactionSummary/transactionEvents/index.tsx

@@ -5,7 +5,7 @@ import * as Layout from 'sentry/components/layouts/thirds';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {t} from 'sentry/locale';
 import {Organization, Project} from 'sentry/types';
-import {trackAnalyticsEvent} from 'sentry/utils/analytics';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import DiscoverQuery from 'sentry/utils/discover/discoverQuery';
 import EventView from 'sentry/utils/discover/eventView';
 import {
@@ -95,12 +95,13 @@ function EventsContentWrapper(props: ChildProps) {
   const onChangeSpanOperationBreakdownFilter = (
     newFilter: SpanOperationBreakdownFilter
   ) => {
-    trackAnalyticsEvent({
-      eventName: 'Performance Views: Transaction Events Ops Breakdown Filter Dropdown',
-      eventKey: 'performance_views.transactionEvents.ops_filter_dropdown.selection',
-      organization_id: parseInt(organization.id, 10),
-      action: newFilter as string,
-    });
+    trackAdvancedAnalyticsEvent(
+      'performance_views.transactionEvents.ops_filter_dropdown.selection',
+      {
+        organization,
+        action: newFilter as string,
+      }
+    );
 
     // Check to see if the current table sort matches the EventsDisplayFilter.
     // If it does, we can re-sort using the new SpanOperationBreakdownFilter
@@ -133,12 +134,13 @@ function EventsContentWrapper(props: ChildProps) {
   };
 
   const onChangeEventsDisplayFilter = (newFilterName: EventsDisplayFilterName) => {
-    trackAnalyticsEvent({
-      eventName: 'Performance Views: Transaction Events Display Filter Dropdown',
-      eventKey: 'performance_views.transactionEvents.display_filter_dropdown.selection',
-      organization_id: parseInt(organization.id, 10),
-      action: newFilterName as string,
-    });
+    trackAdvancedAnalyticsEvent(
+      'performance_views.transactionEvents.display_filter_dropdown.selection',
+      {
+        organization,
+        action: newFilterName as string,
+      }
+    );
 
     const nextQuery: Location['query'] = {
       ...removeHistogramQueryStrings(location, [ZOOM_START, ZOOM_END]),

static/app/views/performance/utils.tsx

@@ -12,7 +12,7 @@ import {
   Project,
   ReleaseProject,
 } from 'sentry/types';
-import {trackAnalyticsEvent} from 'sentry/utils/analytics';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import {statsPeriodToDays} from 'sentry/utils/dates';
 import EventView from 'sentry/utils/discover/eventView';
 import {TRACING_FIELDS} from 'sentry/utils/discover/fields';
@@ -194,10 +194,8 @@ export function handleTrendsClick({
   organization: Organization;
   projectPlatforms: string;
 }) {
-  trackAnalyticsEvent({
-    eventKey: 'performance_views.change_view',
-    eventName: 'Performance Views: Change View',
-    organization_id: parseInt(organization.id, 10),
+  trackAdvancedAnalyticsEvent('performance_views.change_view', {
+    organization,
     view_name: 'TRENDS',
     project_platforms: projectPlatforms,
   });