Track add metric action in dashboard

New metrics can be added via the monitoring
dashboard. This MR tracks such user actions

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -22,7 +22,8 @@ import MonitorTimeSeriesChart from './charts/time_series.vue';
 import MonitorSingleStatChart from './charts/single_stat.vue';
 import GraphGroup from './graph_group.vue';
 import EmptyState from './empty_state.vue';
-import { getTimeDiff, isValidDate } from '../utils';
+import TrackEventDirective from '~/vue_shared/directives/track_event';
+import { getTimeDiff, isValidDate, getAddMetricTrackingOptions } from '../utils';
 
 export default {
   components: {
@@ -43,6 +44,7 @@ export default {
   directives: {
     GlModal: GlModalDirective,
     GlTooltip: GlTooltipDirective,
+    TrackEvent: TrackEventDirective,
   },
   props: {
     externalDashboardUrl: {
@@ -298,6 +300,7 @@ export default {
     onDateTimePickerApply(timeWindowUrlParams) {
       return redirectTo(mergeUrlParams(timeWindowUrlParams, window.location.href));
     },
+    getAddMetricTrackingOptions,
   },
   addMetric: {
     title: s__('Metrics|Add metric'),
@@ -411,7 +414,9 @@ export default {
               <div slot="modal-footer">
                 <gl-button @click="hideAddMetricModal">{{ __('Cancel') }}</gl-button>
                 <gl-button
+                  v-track-event="getAddMetricTrackingOptions()"
                   :disabled="!formIsValid"
+                  class="js-submit-custom-metrics-form"
                   variant="success"
                   @click="submitCustomMetricsForm"
                 >

app/assets/javascripts/monitoring/utils.js

@@ -115,6 +115,7 @@ export const generateLinkToChartOptions = chartLink => {
 /**
  * Tracks snowplow event when user downloads CSV of cluster metric
  * @param {String}  chart title that will be sent as a property for the event
+ * @return {Object} config object for event tracking
  */
 export const downloadCSVOptions = title => {
   const isCLusterHealthBoard = isClusterHealthBoard();
@@ -129,6 +130,18 @@ export const downloadCSVOptions = title => {
   return { category, action, label: 'Chart title', property: title };
 };
 
+/**
+ * Generate options for snowplow to track adding a new metric via the dashboard
+ * custom metric modal
+ * @return {Object} config object for event tracking
+ */
+export const getAddMetricTrackingOptions = () => ({
+  category: document.body.dataset.page,
+  action: 'click_button',
+  label: 'add_new_metric',
+  property: 'modal',
+});
+
 /**
  * This function validates the graph data contains exactly 3 metrics plus
  * value validations from graphDataValidatorForValues.

changelogs/unreleased/36955-snowplow-custom-events-for-monitor-apm-add-metric-button-fe.yml

+---
+title: Track adding metric via monitoring dashboard
+merge_request: 20818
+author:
+type: added

ee/spec/javascripts/monitoring/components/dashboard_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import { GlModal } from '@gitlab/ui';
+import { GlModal, GlButton } from '@gitlab/ui';
+import Tracking from '~/tracking';
 import Dashboard from 'ee/monitoring/components/dashboard.vue';
 import { createStore } from '~/monitoring/stores';
 import axios from '~/lib/utils/axios_utils';
@@ -20,14 +21,19 @@ describe('Dashboard', () => {
   let Component;
   let mock;
   let store;
-  let vm;
+  let wrapper;
+
+  const findAddMetricButton = () => wrapper.find('.js-add-metric-button');
 
   const createComponent = (props = {}) => {
-    vm = shallowMount(localVue.extend(Component), {
+    wrapper = shallowMount(localVue.extend(Component), {
       propsData: {
         ...propsData,
         ...props,
       },
+      stubs: {
+        GlButton,
+      },
       store,
       sync: false,
       localVue,
@@ -83,12 +89,16 @@ describe('Dashboard', () => {
       });
 
       it('does not render add button on the dashboard', () => {
-        expect(vm.element.querySelector('.js-add-metric-button')).toBe(null);
+        expect(findAddMetricButton().exists()).toBe(false);
       });
     });
 
     describe('when available', () => {
+      let origPage;
+
       beforeEach(done => {
+        spyOn(Tracking, 'event');
+
         createComponent({
           customMetricsAvailable: true,
           customMetricsPath: '/endpoint',
@@ -97,22 +107,49 @@ describe('Dashboard', () => {
           alertsEndpoint: '/endpoint',
         });
 
-        setupComponentStore(vm);
+        setupComponentStore(wrapper);
+
+        origPage = document.body.dataset.page;
+        document.body.dataset.page = 'projects:environments:metrics';
+
+        wrapper.vm.$nextTick(done);
+      });
 
-        vm.vm.$nextTick(done);
+      afterEach(() => {
+        document.body.dataset.page = origPage;
       });
 
       it('renders add button on the dashboard', () => {
-        expect(vm.element.querySelector('.js-add-metric-button').innerText).toContain('Add metric');
+        expect(findAddMetricButton().exists()).toBe(true);
       });
 
       it('uses modal for custom metrics form', () => {
-        expect(vm.find(GlModal).exists()).toBe(true);
-        expect(vm.find(GlModal).attributes().modalid).toBe('add-metric');
+        expect(wrapper.find(GlModal).exists()).toBe(true);
+        expect(wrapper.find(GlModal).attributes().modalid).toBe('add-metric');
+      });
+
+      it('adding new metric is tracked', done => {
+        const submitButton = wrapper.find('.js-submit-custom-metrics-form');
+        wrapper.setData({ formIsValid: true });
+        wrapper.vm.$nextTick(() => {
+          submitButton.trigger('click');
+          wrapper.vm.$nextTick(() => {
+            expect(Tracking.event).toHaveBeenCalledWith(
+              document.body.dataset.page,
+              'click_button',
+              {
+                label: 'add_new_metric',
+                property: 'modal',
+                value: undefined,
+              },
+            );
+            done();
+          });
+        });
       });
 
       it('renders custom metrics form fields', () => {
-        expect(vm.find(CustomMetricsFormFields).exists()).toBe(true);
+        expect(wrapper.find(CustomMetricsFormFields).exists()).toBe(true);
       });
     });
   });