Monitor dashboard instrumentation

Tracking the type of dashboard loaded
and number of charts in dashboard

app/assets/javascripts/monitoring/monitoring_tracking_helper.js

+import Tracking from '~/tracking';
+
+const trackDashboardLoad = ({ label, value }) =>
+  Tracking.event(document.body.dataset.page, 'dashboard_fetch', {
+    label,
+    property: 'count',
+    value,
+  });
+
+export default trackDashboardLoad;

app/assets/javascripts/monitoring/stores/actions.js

 import * as types from './mutation_types';
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
+import trackDashboardLoad from '../monitoring_tracking_helper';
 import statusCodes from '../../lib/utils/http_status';
 import { backOff } from '../../lib/utils/common_utils';
 import { s__, __ } from '../../locale';
@@ -45,7 +46,7 @@ export const requestMetricsDashboard = ({ commit }) => {
 export const receiveMetricsDashboardSuccess = ({ commit, dispatch }, { response, params }) => {
   commit(types.SET_ALL_DASHBOARDS, response.all_dashboards);
   commit(types.RECEIVE_METRICS_DATA_SUCCESS, response.dashboard.panel_groups);
-  dispatch('fetchPrometheusMetrics', params);
+  return dispatch('fetchPrometheusMetrics', params);
 };
 export const receiveMetricsDashboardFailure = ({ commit }, error) => {
   commit(types.RECEIVE_METRICS_DATA_FAILURE, error);
@@ -83,10 +84,12 @@ export const fetchDashboard = ({ state, dispatch }, params) => {
 
   return backOffRequest(() => axios.get(state.dashboardEndpoint, { params }))
     .then(resp => resp.data)
-    .then(response => {
-      dispatch('receiveMetricsDashboardSuccess', {
-        response,
-        params,
+    .then(response => dispatch('receiveMetricsDashboardSuccess', { response, params }))
+    .then(() => {
+      const dashboardType = state.currentDashboard === '' ? 'default' : 'custom';
+      return trackDashboardLoad({
+        label: `${dashboardType}_metrics_dashboard`,
+        value: state.metricsWithData.length,
       });
     })
     .catch(error => {

changelogs/unreleased/34157-snowplow-custom-events-for-monitor-apm.yml

+---
+title: Add snowplow events for monitoring dashboard
+merge_request: 19455
+author:
+type: added

spec/frontend/monitoring/store/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
+import Tracking from '~/tracking';
 import { TEST_HOST } from 'helpers/test_constants';
 import testAction from 'helpers/vuex_action_helper';
 import axios from '~/lib/utils/axios_utils';
@@ -226,12 +227,14 @@ describe('Monitoring store actions', () => {
     let state;
     const response = metricsDashboardResponse;
     beforeEach(() => {
+      jest.spyOn(Tracking, 'event');
       dispatch = jest.fn();
       state = storeState();
       state.dashboardEndpoint = '/dashboard';
     });
     it('dispatches receive and success actions', done => {
       const params = {};
+      document.body.dataset.page = 'projects:environments:metrics';
       mock.onGet(state.dashboardEndpoint).reply(200, response);
       fetchDashboard(
         {
@@ -246,6 +249,17 @@ describe('Monitoring store actions', () => {
             response,
             params,
           });
+        })
+        .then(() => {
+          expect(Tracking.event).toHaveBeenCalledWith(
+            document.body.dataset.page,
+            'dashboard_fetch',
+            {
+              label: 'custom_metrics_dashboard',
+              property: 'count',
+              value: 0,
+            },
+          );
           done();
         })
         .catch(done.fail);