Add page load tracking for vulnerability details

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/355479

ee/app/assets/javascripts/vulnerabilities/components/vulnerability_training.vue

@@ -8,7 +8,10 @@ import { TYPE_VULNERABILITY } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import Tracking from '~/tracking';
-import { TRACK_CLICK_TRAINING_LINK_ACTION } from '~/security_configuration/constants';
+import {
+  TRACK_CLICK_TRAINING_LINK_ACTION,
+  TRACK_TRAINING_LOADED_ACTION,
+} from '~/security_configuration/constants';
 import { TEMP_PROVIDER_LOGOS } from '~/security_configuration/components/constants';
 import { SUPPORTED_IDENTIFIER_TYPES, SECURITY_TRAINING_URL_STATUS_COMPLETED } from '../constants';
 
@@ -101,7 +104,13 @@ export default {
       );
     },
     hasSecurityTrainingUrls() {
-      return this.vulnerability?.securityTrainingUrls?.length > 0;
+      const hasSecurityTrainingUrls = this.vulnerability?.securityTrainingUrls?.length > 0;
+      if (hasSecurityTrainingUrls) {
+        this.track(TRACK_TRAINING_LOADED_ACTION, {
+          property: this.projectFullPath,
+        });
+      }
+      return hasSecurityTrainingUrls;
     },
     securityTrainingUrls() {
       return this.vulnerability?.securityTrainingUrls;
@@ -116,13 +125,10 @@ export default {
     },
   },
   methods: {
-    clickTrainingLink(name, url) {
-      this.triggerMetric(TRACK_CLICK_TRAINING_LINK_ACTION, name, url);
-    },
-    triggerMetric(action, name, url) {
-      this.track(action, {
-        property: url,
+    clickTrainingLink(name) {
+      this.track(TRACK_CLICK_TRAINING_LINK_ACTION, {
         label: `vendor_${name}`,
+        property: this.projectFullPath,
       });
     },
   },
@@ -149,7 +155,7 @@ export default {
           </span>
           <span class="gl-font-weight-bold gl-font-base">{{ name }}</span>
         </div>
-        <gl-link :href="url" target="_blank" @click="clickTrainingLink(name, url)">
+        <gl-link :href="url" target="_blank" @click="clickTrainingLink(name)">
           {{ $options.i18n.viewTraining }}
           <gl-icon class="gl-ml-2" name="external-link" :size="12" />
         </gl-link>

ee/spec/frontend/vulnerabilities/vulnerability_training_spec.js

@@ -13,7 +13,10 @@ import {
   SUPPORTED_IDENTIFIER_TYPES,
   SECURITY_TRAINING_URL_STATUS_PENDING,
 } from 'ee/vulnerabilities/constants';
-import { TRACK_CLICK_TRAINING_LINK_ACTION } from '~/security_configuration/constants';
+import {
+  TRACK_CLICK_TRAINING_LINK_ACTION,
+  TRACK_TRAINING_LOADED_ACTION,
+} from '~/security_configuration/constants';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import {
@@ -40,6 +43,8 @@ const createTrainingData = (first = {}, second = {}, urls) =>
     },
   });
 
+const projectFullPath = 'namespace/project';
+
 const TEST_TRAINING_PROVIDERS_ALL_DISABLED = getSecurityTrainingProvidersData();
 const TEST_TRAINING_PROVIDERS_FIRST_ENABLED = getSecurityTrainingProvidersData({
   providerOverrides: { first: { isEnabled: true } },
@@ -76,7 +81,7 @@ describe('VulnerabilityTraining component', () => {
       slots,
       apolloProvider,
       provide: {
-        projectFullPath: 'namespace/project',
+        projectFullPath,
         glFeatures: {
           secureVulnerabilityTraining,
         },
@@ -297,11 +302,8 @@ describe('VulnerabilityTraining component', () => {
   describe('metrics', () => {
     let trackingSpy;
 
-    beforeEach(async () => {
+    beforeEach(() => {
       trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
-      createApolloProvider();
-      createComponent();
-      await waitForQueryToBeLoaded();
     });
 
     afterEach(() => {
@@ -309,11 +311,30 @@ describe('VulnerabilityTraining component', () => {
     });
 
     const expectedTrackingOptions = (index) => ({
-      property: testTrainingUrls[index],
       label: `vendor_${testProviderName[index]}`,
+      property: projectFullPath,
+    });
+
+    it('tracks when the training link is loading', async () => {
+      createApolloProvider({
+        vulnerabilityQueryHandler: jest.fn().mockResolvedValue(
+          createTrainingData({
+            status: SECURITY_TRAINING_URL_STATUS_PENDING,
+          }).response,
+        ),
+      });
+      createComponent();
+      await waitForQueryToBeLoaded();
+
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, TRACK_TRAINING_LOADED_ACTION, {
+        property: projectFullPath,
+      });
     });
 
     it.each([0, 1])('tracks when training link %s gets clicked', async (index) => {
+      createApolloProvider();
+      createComponent();
+      await waitForQueryToBeLoaded();
       await findTrainingItemLinks().at(index).vm.$emit('click');
 
       expect(trackingSpy).toHaveBeenCalledWith(