Count of incident details views

app/assets/javascripts/incidents/components/incidents_list.vue

@@ -310,7 +310,7 @@ export default {
           category="primary"
           variant="success"
           :href="newIncidentPath"
-          @click="redirecting = true"
+          @click="navigateToCreateNewIncident"
         >
           {{ $options.i18n.createIncidentBtnLabel }}
         </gl-button>

app/assets/javascripts/incidents/constants.js

@@ -34,6 +34,13 @@ export const INCIDENT_STATUS_TABS = [
   },
 ];
 
+export const DEFAULT_PAGE_SIZE = 20;
+export const TH_CREATED_AT_TEST_ID = { 'data-testid': 'incident-management-created-at-sort' };
+export const TH_SEVERITY_TEST_ID = { 'data-testid': 'incident-management-severity-sort' };
+export const TH_INCIDENT_SLA_TEST_ID = { 'data-testid': 'incident-management-sla' };
+export const TH_PUBLISHED_TEST_ID = { 'data-testid': 'incident-management-published-sort' };
+export const INCIDENT_DETAILS_PATH = 'incident';
+
 /**
  * Tracks snowplow event when user clicks create new incident
  */
@@ -43,16 +50,17 @@ export const trackIncidentCreateNewOptions = {
 };
 
 /**
- * Tracks snowplow event when user views incident list
+ * Tracks snowplow event when user views incidents list
  */
 export const trackIncidentListViewsOptions = {
   category: 'Incident Management',
   action: 'view_incidents_list',
 };
 
-export const DEFAULT_PAGE_SIZE = 20;
-export const TH_CREATED_AT_TEST_ID = { 'data-testid': 'incident-management-created-at-sort' };
-export const TH_SEVERITY_TEST_ID = { 'data-testid': 'incident-management-severity-sort' };
-export const TH_INCIDENT_SLA_TEST_ID = { 'data-testid': 'incident-management-sla' };
-export const TH_PUBLISHED_TEST_ID = { 'data-testid': 'incident-management-published-sort' };
-export const INCIDENT_DETAILS_PATH = 'incident';
+/**
+ * Tracks snowplow event when user views incident details
+ */
+export const trackIncidentDetailsViewsOptions = {
+  category: 'Incident Management',
+  action: 'view_incident_details',
+};

app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue

@@ -5,8 +5,10 @@ import HighlightBar from './highlight_bar.vue';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
+import Tracking from '~/tracking';
 
 import getAlert from './graphql/queries/get_alert.graphql';
+import { trackIncidentDetailsViewsOptions } from '~/incidents/constants';
 
 export default {
   components: {
@@ -46,6 +48,15 @@ export default {
       return this.$apollo.queries.alert.loading;
     },
   },
+  mounted() {
+    this.trackPageViews();
+  },
+  methods: {
+    trackPageViews() {
+      const { category, action } = trackIncidentDetailsViewsOptions;
+      Tracking.event(category, action);
+    },
+  },
 };
 </script>
 

changelogs/unreleased/233722-snowplow-incidents-list-details-views.yml

+---
+title: Snowplow tracking of Incident details views
+merge_request: 45011
+author:
+type: added

spec/frontend/incidents/components/incidents_list_spec.js

@@ -10,6 +10,8 @@ import {
   TH_CREATED_AT_TEST_ID,
   TH_SEVERITY_TEST_ID,
   TH_PUBLISHED_TEST_ID,
+  trackIncidentCreateNewOptions,
+  trackIncidentListViewsOptions,
 } from '~/incidents/constants';
 import mockIncidents from '../mocks/incidents.json';
 
@@ -291,4 +293,25 @@ describe('Incidents List', () => {
       expect(columnHeader().attributes('aria-sort')).toBe(nextSort);
     });
   });
+
+  describe('Snowplow tracking', () => {
+    beforeEach(() => {
+      mountComponent({
+        data: { incidents: { list: mockIncidents }, incidentsCount: {} },
+        loading: false,
+      });
+    });
+
+    it('should track incident list views', () => {
+      const { category, action } = trackIncidentListViewsOptions;
+      expect(Tracking.event).toHaveBeenCalledWith(category, action);
+    });
+
+    it('should track incident creation events', async () => {
+      findCreateIncidentBtn().vm.$emit('click');
+      await wrapper.vm.$nextTick();
+      const { category, action } = trackIncidentCreateNewOptions;
+      expect(Tracking.event).toHaveBeenCalledWith(category, action);
+    });
+  });
 });

spec/frontend/issue_show/components/incidents/incident_tabs_spec.js

@@ -6,6 +6,8 @@ import { descriptionProps } from '../../mock_data';
 import DescriptionComponent from '~/issue_show/components/description.vue';
 import HighlightBar from '~/issue_show/components/incidents/highlight_bar.vue';
 import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
+import Tracking from '~/tracking';
+import { trackIncidentDetailsViewsOptions } from '~/incidents/constants';
 
 const mockAlert = {
   __typename: 'AlertManagementAlert',
@@ -97,4 +99,16 @@ describe('Incident Tabs component', () => {
       expect(findDescriptionComponent().props()).toMatchObject(descriptionProps);
     });
   });
+
+  describe('Snowplow tracking', () => {
+    beforeEach(() => {
+      jest.spyOn(Tracking, 'event');
+      mountComponent();
+    });
+
+    it('should track incident details views', () => {
+      const { category, action } = trackIncidentDetailsViewsOptions;
+      expect(Tracking.event).toHaveBeenCalledWith(category, action);
+    });
+  });
 });