Add usage ping for generic metrics

Add usage ping to track how many people are
using the generic metrics report in the merge
requests.

app/controllers/projects/merge_requests_controller.rb

@@ -44,6 +44,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
     push_frontend_feature_flag(:remove_resolve_note, @project, default_enabled: true)
     push_frontend_feature_flag(:test_failure_history, @project)
     push_frontend_feature_flag(:diffs_gradual_load, @project, default_enabled: true)
+    push_frontend_feature_flag(:usage_data_group_code_coverage_visit_total, @project, default_enabled: true)
 
     record_experiment_user(:invite_members_version_a)
     record_experiment_user(:invite_members_version_b)

config/feature_flags/development/usage_data_group_code_coverage_visit_total.yml

+---
+name: usage_data_group_code_coverage_visit_total
+introduced_by_url:
+rollout_issue_url:
+milestone: '13.8'
+type: development
+group: group::testing
+default_enabled: true

ee/app/assets/javascripts/vue_shared/metrics_reports/grouped_metrics_reports_app.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
+import { once } from 'lodash';
 import { componentNames } from 'ee/reports/components/issue_body';
+import api from '~/api';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 import ReportSection from '~/reports/components/report_section.vue';
 import ReportItem from '~/reports/components/report_item.vue';
@@ -15,6 +18,7 @@ export default {
     ReportItem,
     SmartVirtualList,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     endpoint: {
       type: String,
@@ -59,6 +63,13 @@ export default {
     hasMetrics() {
       return this.metrics.length > 0;
     },
+    handleToggleEvent() {
+      return once(() => {
+        if (this.glFeatures.usageDataGroupCodeCoverageVisitTotal) {
+          api.trackRedisHllUserEvent(this.$options.expandEvent);
+        }
+      });
+    },
   },
   created() {
     this.setEndpoint(this.endpoint);
@@ -67,6 +78,7 @@ export default {
   methods: {
     ...mapActions(['setEndpoint', 'fetchMetrics']),
   },
+  expandEvent: 'group_code_coverage_visit_total',
 };
 </script>
 <template>
@@ -76,7 +88,9 @@ export default {
     :loading-text="groupedSummaryText"
     :error-text="groupedSummaryText"
     :has-issues="hasMetrics"
+    :should-emit-toggle-event="true"
     class="mr-widget-border-top grouped-security-reports mr-report"
+    @toggleEvent="handleToggleEvent"
   >
     <div slot="body" class="mr-widget-grouped-section report-block">
       <smart-virtual-list

ee/changelogs/unreleased/224617-usage-data-generic-metrics-report.yml

+---
+title: Capture generic metrics report views via usage ping
+merge_request:
+author:
+type: added

ee/spec/frontend/vue_shared/metrics_reports/grouped_metrics_reports_app_spec.js

@@ -3,6 +3,9 @@ import Vuex from 'vuex';
 import MetricsReportsIssueBody from 'ee/vue_shared/metrics_reports/components/metrics_reports_issue_body.vue';
 import GroupedMetricsReportsApp from 'ee/vue_shared/metrics_reports/grouped_metrics_reports_app.vue';
 import { getStoreConfig } from 'ee/vue_shared/metrics_reports/store';
+import Api from '~/api';
+
+jest.mock('~/api.js');
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -11,13 +14,18 @@ describe('Grouped metrics reports app', () => {
   let wrapper;
   let mockStore;
 
-  const mountComponent = () => {
+  const findExpandButton = () => wrapper.find('[data-testid="report-section-expand-button"]');
+
+  const mountComponent = (glFeatures = {}) => {
     wrapper = mount(GroupedMetricsReportsApp, {
       store: mockStore,
       localVue,
       propsData: {
         endpoint: 'metrics.json',
       },
+      provide: {
+        glFeatures,
+      },
     });
   };
 
@@ -62,6 +70,43 @@ describe('Grouped metrics reports app', () => {
   });
 
   describe('with metrics', () => {
+    describe('when user expands to view metrics', () => {
+      beforeEach(() => {
+        mockStore.state.numberOfChanges = 0;
+        mockStore.state.existingMetrics = [
+          {
+            name: 'name',
+            value: 'value',
+          },
+        ];
+      });
+
+      describe('with :usage_data_group_code_coverage_visit_total enabled', () => {
+        beforeEach(() => {
+          mountComponent({ usageDataGroupCodeCoverageVisitTotal: true });
+        });
+
+        it('tracks group_code_coverage_visit_total metric', () => {
+          findExpandButton().trigger('click');
+
+          expect(Api.trackRedisHllUserEvent).toHaveBeenCalledTimes(1);
+          expect(Api.trackRedisHllUserEvent).toHaveBeenCalledWith(wrapper.vm.$options.expandEvent);
+        });
+      });
+
+      describe('with :usage_data_group_code_coverage_visit_total disabled', () => {
+        beforeEach(() => {
+          mountComponent({ usageDataGroupCodeCoverageVisitTotal: false });
+        });
+
+        it('does not track group_code_coverage_visit_total metric', () => {
+          findExpandButton().trigger('click');
+
+          expect(Api.trackRedisHllUserEvent).not.toHaveBeenCalled();
+        });
+      });
+    });
+
     describe('with no changes', () => {
       beforeEach(() => {
         mockStore.state.numberOfChanges = 0;

lib/gitlab/usage_data_counters/known_events/common.yml

@@ -248,6 +248,11 @@
   redis_slot: testing
   aggregation: weekly
   feature_flag: usage_data_i_testing_test_case_parsed
+- name: group_code_coverage_visit_total
+  category: testing
+  redis_slot: testing
+  aggregation: weekly
+  feature_flag: usage_data_group_code_coverage_visit_total
 # Project Management group
 - name: g_project_management_issue_title_changed
   category: issues_edit