Added snowplow for the logs page

This adds snowplow to the Operations >
Logs page, it only tracks succesful
page loads with logs in them as well
as when a user refreshes the page
or a search has been conducted

app/assets/javascripts/logs/logs_tracking_helper.js

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

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

@@ -3,6 +3,7 @@ import httpStatusCodes from '~/lib/utils/http_status';
 import axios from '~/lib/utils/axios_utils';
 import { convertToFixedRange } from '~/lib/utils/datetime_range';
 import { TOKEN_TYPE_POD_NAME } from '../constants';
+import trackLogs from '../logs_tracking_helper';
 
 import * as types from './mutation_types';
 
@@ -81,22 +82,22 @@ export const showFilteredLogs = ({ dispatch, commit }, filters = []) => {
   commit(types.SET_CURRENT_POD_NAME, podName);
   commit(types.SET_SEARCH, search);
 
-  dispatch('fetchLogs');
+  dispatch('fetchLogs', 'used_search_bar');
 };
 
 export const showPodLogs = ({ dispatch, commit }, podName) => {
   commit(types.SET_CURRENT_POD_NAME, podName);
-  dispatch('fetchLogs');
+  dispatch('fetchLogs', 'pod_log_changed');
 };
 
 export const setTimeRange = ({ dispatch, commit }, timeRange) => {
   commit(types.SET_TIME_RANGE, timeRange);
-  dispatch('fetchLogs');
+  dispatch('fetchLogs', 'time_range_set');
 };
 
 export const showEnvironment = ({ dispatch, commit }, environmentName) => {
   commit(types.SET_PROJECT_ENVIRONMENT, environmentName);
-  dispatch('fetchLogs');
+  dispatch('fetchLogs', 'enviroment_selected');
 };
 
 /**
@@ -111,19 +112,25 @@ export const fetchEnvironments = ({ commit, dispatch }, environmentsPath) => {
     .get(environmentsPath)
     .then(({ data }) => {
       commit(types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS, data.environments);
-      dispatch('fetchLogs');
+      dispatch('fetchLogs', 'environment_selected');
     })
     .catch(() => {
       commit(types.RECEIVE_ENVIRONMENTS_DATA_ERROR);
     });
 };
 
-export const fetchLogs = ({ commit, state }) => {
+export const fetchLogs = ({ commit, state }, label) => {
   commit(types.REQUEST_LOGS_DATA);
 
   return requestLogsUntilData({ commit, state })
     .then(({ data }) => {
       const { pod_name, pods, logs, cursor } = data;
+      if (logs && logs.length > 0) {
+        trackLogs({
+          label,
+          value: 1,
+        });
+      }
       commit(types.RECEIVE_LOGS_DATA_SUCCESS, { logs, cursor });
       commit(types.SET_CURRENT_POD_NAME, pod_name);
       commit(types.RECEIVE_PODS_DATA_SUCCESS, pods);

changelogs/unreleased/jivanvl-add-snowplow-logs.yml

+---
+title: Add snowplow tracking for logs page
+merge_request: 32704
+author:
+type: other

spec/frontend/logs/stores/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
-
 import testAction from 'helpers/vuex_action_helper';
+import Tracking from '~/tracking';
 import * as types from '~/logs/stores/mutation_types';
 import { convertToFixedRange } from '~/lib/utils/datetime_range';
 import logsPageState from '~/logs/stores/state';
@@ -104,7 +104,7 @@ describe('Logs Store actions', () => {
           { type: types.SET_CURRENT_POD_NAME, payload: null },
           { type: types.SET_SEARCH, payload: '' },
         ],
-        [{ type: 'fetchLogs' }],
+        [{ type: 'fetchLogs', payload: 'used_search_bar' }],
       ));
 
     it('text search should filter with a search term', () =>
@@ -116,7 +116,7 @@ describe('Logs Store actions', () => {
           { type: types.SET_CURRENT_POD_NAME, payload: null },
           { type: types.SET_SEARCH, payload: mockSearch },
         ],
-        [{ type: 'fetchLogs' }],
+        [{ type: 'fetchLogs', payload: 'used_search_bar' }],
       ));
 
     it('pod search should filter with a search term', () =>
@@ -128,7 +128,7 @@ describe('Logs Store actions', () => {
           { type: types.SET_CURRENT_POD_NAME, payload: mockPodName },
           { type: types.SET_SEARCH, payload: '' },
         ],
-        [{ type: 'fetchLogs' }],
+        [{ type: 'fetchLogs', payload: 'used_search_bar' }],
       ));
 
     it('pod search should filter with a pod selection and a search term', () =>
@@ -140,7 +140,7 @@ describe('Logs Store actions', () => {
           { type: types.SET_CURRENT_POD_NAME, payload: mockPodName },
           { type: types.SET_SEARCH, payload: mockSearch },
         ],
-        [{ type: 'fetchLogs' }],
+        [{ type: 'fetchLogs', payload: 'used_search_bar' }],
       ));
 
     it('pod search should filter with a pod selection and two search terms', () =>
@@ -152,7 +152,7 @@ describe('Logs Store actions', () => {
           { type: types.SET_CURRENT_POD_NAME, payload: null },
           { type: types.SET_SEARCH, payload: `term1 term2` },
         ],
-        [{ type: 'fetchLogs' }],
+        [{ type: 'fetchLogs', payload: 'used_search_bar' }],
       ));
 
     it('pod search should filter with a pod selection and a search terms before and after', () =>
@@ -168,7 +168,7 @@ describe('Logs Store actions', () => {
           { type: types.SET_CURRENT_POD_NAME, payload: mockPodName },
           { type: types.SET_SEARCH, payload: `term1 term2` },
         ],
-        [{ type: 'fetchLogs' }],
+        [{ type: 'fetchLogs', payload: 'used_search_bar' }],
       ));
   });
 
@@ -179,7 +179,7 @@ describe('Logs Store actions', () => {
         mockPodName,
         state,
         [{ type: types.SET_CURRENT_POD_NAME, payload: mockPodName }],
-        [{ type: 'fetchLogs' }],
+        [{ type: 'fetchLogs', payload: 'pod_log_changed' }],
       ));
   });
 
@@ -198,7 +198,7 @@ describe('Logs Store actions', () => {
           { type: types.REQUEST_ENVIRONMENTS_DATA },
           { type: types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS, payload: mockEnvironments },
         ],
-        [{ type: 'fetchLogs' }],
+        [{ type: 'fetchLogs', payload: 'environment_selected' }],
       );
     });
 
@@ -471,3 +471,58 @@ describe('Logs Store actions', () => {
     });
   });
 });
+
+describe('Tracking user interaction', () => {
+  let commit;
+  let dispatch;
+  let state;
+  let mock;
+
+  beforeEach(() => {
+    jest.spyOn(Tracking, 'event');
+    commit = jest.fn();
+    dispatch = jest.fn();
+    state = logsPageState();
+    state.environments.options = mockEnvironments;
+    state.environments.current = mockEnvName;
+
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    mock.reset();
+  });
+
+  describe('Logs with data', () => {
+    beforeEach(() => {
+      mock.onGet(mockLogsEndpoint).reply(200, mockResponse);
+      mock.onGet(mockLogsEndpoint).replyOnce(202); // mock reactive cache
+    });
+
+    it('tracks fetched logs with data', () => {
+      return fetchLogs({ state, commit, dispatch }, 'environment_selected').then(() => {
+        expect(Tracking.event).toHaveBeenCalledWith(document.body.dataset.page, 'logs_view', {
+          label: 'environment_selected',
+          property: 'count',
+          value: 1,
+        });
+      });
+    });
+  });
+
+  describe('Logs without data', () => {
+    beforeEach(() => {
+      mock.onGet(mockLogsEndpoint).reply(200, {
+        ...mockResponse,
+        logs: [],
+      });
+      mock.onGet(mockLogsEndpoint).replyOnce(202); // mock reactive cache
+    });
+
+    it('does not track empty log responses', () => {
+      return fetchLogs({ state, commit, dispatch }).then(() => {
+        expect(Tracking.event).not.toHaveBeenCalled();
+      });
+    });
+  });
+});