feat(workflow): Add analytics for alert rules details view (#27631)

static/app/views/alerts/rules/details/index.tsx

@@ -9,6 +9,7 @@ import Feature from 'app/components/acl/feature';
 import DateTime from 'app/components/dateTime';
 import {t} from 'app/locale';
 import {DateString, Organization} from 'app/types';
+import {trackAnalyticsEvent} from 'app/utils/analytics';
 import {getUtcDateString} from 'app/utils/dates';
 import withApi from 'app/utils/withApi';
 import {IncidentRule, TimePeriod, TimeWindow} from 'app/views/alerts/incidentRules/types';
@@ -43,6 +44,7 @@ class AlertRuleDetails extends Component<Props, State> {
 
     fetchOrgMembers(api, params.orgId);
     this.fetchData();
+    this.trackView();
   }
 
   componentDidUpdate(prevProps: Props) {
@@ -52,9 +54,22 @@ class AlertRuleDetails extends Component<Props, State> {
       prevProps.params.ruleId !== this.props.params.ruleId
     ) {
       this.fetchData();
+      this.trackView();
     }
   }
 
+  trackView() {
+    const {params, organization, location} = this.props;
+
+    trackAnalyticsEvent({
+      eventKey: 'alert_rule_details.viewed',
+      eventName: 'Alert Rule Details: Viewed',
+      organization_id: organization.id,
+      rule_id: parseInt(params.ruleId, 10),
+      alert: location.query.alert ?? '',
+    });
+  }
+
   getTimePeriod(): TimePeriodType {
     const {location} = this.props;
     const {rule} = this.state;

tests/js/spec/views/alerts/details/index.spec.jsx

@@ -2,8 +2,11 @@ import {mountWithTheme} from 'sentry-test/enzyme';
 import {initializeOrg} from 'sentry-test/initializeOrg';
 
 import ProjectsStore from 'app/stores/projectsStore';
+import {trackAnalyticsEvent} from 'app/utils/analytics';
 import IncidentDetails from 'app/views/alerts/details';
 
+jest.mock('app/utils/analytics');
+
 describe('IncidentDetails', function () {
   const params = {orgId: 'org-slug', alertId: '123'};
   const {organization, project, routerContext} = initializeOrg({
@@ -71,6 +74,7 @@ describe('IncidentDetails', function () {
   });
 
   beforeEach(function () {
+    trackAnalyticsEvent.mockClear();
     activitiesList.mockClear();
   });
 
@@ -90,6 +94,12 @@ describe('IncidentDetails', function () {
     // Number of events
     expect(wrapper.find('ItemValue').at(3).text()).toBe('100');
     expect(wrapper.find('ItemValue').at(4).text()).toBe('2 weeks');
+    expect(trackAnalyticsEvent).toHaveBeenCalledWith({
+      eventKey: 'alert_details.viewed',
+      eventName: 'Alert Details: Viewed',
+      organization_id: 3,
+      alert_id: 123,
+    });
   });
 
   it('renders open in discover button', async function () {

tests/js/spec/views/alerts/rules/index.spec.jsx

@@ -2,9 +2,12 @@ import {mountWithTheme} from 'sentry-test/enzyme';
 import {initializeOrg} from 'sentry-test/initializeOrg';
 
 import ProjectsStore from 'app/stores/projectsStore';
+import {trackAnalyticsEvent} from 'app/utils/analytics';
 import AlertRulesList from 'app/views/alerts/rules';
 import {IncidentStatus} from 'app/views/alerts/types';
 
+jest.mock('app/utils/analytics');
+
 describe('OrganizationRuleList', () => {
   const {routerContext, organization, router} = initializeOrg();
   let rulesMock;
@@ -63,6 +66,7 @@ describe('OrganizationRuleList', () => {
     wrapper.unmount();
     ProjectsStore.reset();
     MockApiClient.clearMockResponses();
+    trackAnalyticsEvent.mockClear();
   });
 
   it('displays list', async () => {
@@ -86,6 +90,12 @@ describe('OrganizationRuleList', () => {
     expect(wrapper.find('IdBadge').at(0).prop('project')).toMatchObject({
       slug: 'earth',
     });
+    expect(trackAnalyticsEvent).toHaveBeenCalledWith({
+      eventKey: 'alert_rules.viewed',
+      eventName: 'Alert Rules: Viewed',
+      organization_id: '3',
+      sort: undefined,
+    });
   });
 
   it('displays empty state', async () => {