Merge branch '36955-snowplow-custom-events-for-monitor-apm-add-metric-button-fe' into 'master'

Snowplow: Track adding new metric

See merge request gitlab-org/gitlab!20818

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

@@ -11,18 +11,19 @@ import {
   GlModalDirective,
   GlTooltipDirective,
 } from '@gitlab/ui';
+import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
 import { s__ } from '~/locale';
 import createFlash from '~/flash';
 import Icon from '~/vue_shared/components/icon.vue';
 import { getParameterValues, mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
-import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
 import DateTimePicker from './date_time_picker/date_time_picker.vue';
 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'),
@@ -389,9 +392,10 @@ export default {
             </gl-button>
             <gl-button
               v-if="addingMetricsAvailable"
+              ref="addMetricBtn"
               v-gl-modal="$options.addMetric.modalId"
               variant="outline-success"
-              class="mr-2 mt-1 js-add-metric-button"
+              class="mr-2 mt-1"
             >
               {{ $options.addMetric.title }}
             </gl-button>
@@ -411,6 +415,8 @@ export default {
               <div slot="modal-footer">
                 <gl-button @click="hideAddMetricModal">{{ __('Cancel') }}</gl-button>
                 <gl-button
+                  ref="submitCustomMetricsFormBtn"
+                  v-track-event="getAddMetricTrackingOptions()"
                   :disabled="!formIsValid"
                   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 Dashboard from 'ee/monitoring/components/dashboard.vue';
-import { createStore } from '~/monitoring/stores';
-import axios from '~/lib/utils/axios_utils';
 import {
   metricsGroupsAPIResponse,
   mockApiEndpoint,
@@ -12,6 +10,9 @@ import {
 } from 'spec/monitoring/mock_data';
 import propsData from 'spec/monitoring/components/dashboard_spec';
 import CustomMetricsFormFields from 'ee/custom_metrics/components/custom_metrics_form_fields.vue';
+import Tracking from '~/tracking';
+import { createStore } from '~/monitoring/stores';
+import axios from '~/lib/utils/axios_utils';
 import * as types from '~/monitoring/stores/mutation_types';
 
 const localVue = createLocalVue();
@@ -20,14 +21,19 @@ describe('Dashboard', () => {
   let Component;
   let mock;
   let store;
-  let vm;
+  let wrapper;
+
+  const findAddMetricButton = () => wrapper.vm.$refs.addMetricBtn;
 
   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()).toBeUndefined();
       });
     });
 
     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()).toBeDefined();
       });
 
       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.vm.$refs.submitCustomMetricsFormBtn;
+        wrapper.setData({ formIsValid: true });
+        wrapper.vm.$nextTick(() => {
+          submitButton.$el.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);
       });
     });
   });