Adjust link performance

app/assets/javascripts/pipelines/components/graph_shared/links_inner.vue

@@ -148,7 +148,7 @@ export default {
 
         const data = {
           histograms: [
-            { name: PIPELINES_DETAIL_LINK_DURATION, value: duration },
+            { name: PIPELINES_DETAIL_LINK_DURATION, value: duration / 1000 },
             { name: PIPELINES_DETAIL_LINKS_TOTAL, value: this.links.length },
             {
               name: PIPELINES_DETAIL_LINKS_JOB_RATIO,

app/assets/javascripts/pipelines/components/graph_shared/links_layer.vue

 <script>
+import { isEmpty } from 'lodash';
 import { GlAlert } from '@gitlab/ui';
 import { __ } from '~/locale';
+import {
+  PIPELINES_DETAIL_LINKS_MARK_CALCULATE_START,
+  PIPELINES_DETAIL_LINKS_MARK_CALCULATE_END,
+  PIPELINES_DETAIL_LINKS_MEASURE_CALCULATION,
+  PIPELINES_DETAIL_LINK_DURATION,
+  PIPELINES_DETAIL_LINKS_TOTAL,
+  PIPELINES_DETAIL_LINKS_JOB_RATIO,
+} from '~/performance/constants';
+import { performanceMarkAndMeasure } from '~/performance/utils';
 import { reportToSentry } from '../graph/utils';
 import LinksInner from './links_inner.vue';
+import { parseData } from '../parsing_utils';
+import { reportPerformance } from './api';
 
 export default {
   name: 'LinksLayer',
@@ -20,6 +32,11 @@ export default {
       type: Array,
       required: true,
     },
+    metricsConfig: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
     neverShowLinks: {
       type: Boolean,
       required: false,
@@ -47,6 +64,9 @@ export default {
         return acc + Number(groups.length);
       }, 0);
     },
+    shouldCollectMetrics() {
+      return this.metricsConfig.collectMetrics && this.metricsConfig.path;
+    },
     showAlert() {
       /*
         This is a hard override that allows us to turn off the links without
@@ -75,7 +95,64 @@ export default {
   errorCaptured(err, _vm, info) {
     reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
   },
+  mounted(){
+    /*
+      This is code to get metrics for the graph (to observe links performance).
+      It is currently here because we want values for links without drawing them.
+      It can be removed when https://gitlab.com/gitlab-org/gitlab/-/issues/298930
+      is closed and functionality is enabled by default.
+    */
+
+    if (this.neverShowLinks && !isEmpty(this.pipelineData)) {
+      window.requestAnimationFrame(() => {
+        this.prepareLinkData();
+      })
+    }
+
+  },
   methods: {
+    beginPerfMeasure() {
+      if (this.shouldCollectMetrics) {
+        performanceMarkAndMeasure({ mark: PIPELINES_DETAIL_LINKS_MARK_CALCULATE_START });
+      }
+    },
+    finishPerfMeasureAndSend(numLinks) {
+
+      if (this.shouldCollectMetrics) {
+        performanceMarkAndMeasure({
+          mark: PIPELINES_DETAIL_LINKS_MARK_CALCULATE_END,
+          measures: [
+            {
+              name: PIPELINES_DETAIL_LINKS_MEASURE_CALCULATION,
+              start: PIPELINES_DETAIL_LINKS_MARK_CALCULATE_START,
+            },
+          ],
+        });
+      }
+
+      window.requestAnimationFrame(() => {
+        const duration = window.performance.getEntriesByName(
+          PIPELINES_DETAIL_LINKS_MEASURE_CALCULATION,
+        )[0]?.duration;
+
+        if (!duration) {
+          return;
+        }
+
+        const data = {
+          histograms: [
+            { name: PIPELINES_DETAIL_LINK_DURATION, value: duration / 1000 },
+            { name: PIPELINES_DETAIL_LINKS_TOTAL, value: numLinks },
+            {
+              name: PIPELINES_DETAIL_LINKS_JOB_RATIO,
+              value: numLinks / this.numGroups,
+            },
+          ],
+        };
+
+        reportPerformance(this.metricsConfig.path, data);
+      });
+    },
     dismissAlert() {
       this.alertDismissed = true;
     },
@@ -83,6 +160,17 @@ export default {
       this.dismissAlert();
       this.showLinksOverride = true;
     },
+    prepareLinkData() {
+      this.beginPerfMeasure();
+      let numLinks;
+      try {
+        const arrayOfJobs = this.pipelineData.flatMap(({ groups }) => groups);
+        numLinks = parseData(arrayOfJobs).links.length;
+      } catch (err) {
+        reportToSentry(this.$options.name, err);
+      }
+      this.finishPerfMeasureAndSend(numLinks);
+    },
   },
 };
 </script>
@@ -92,6 +180,7 @@ export default {
     :container-measurements="containerMeasurements"
     :pipeline-data="pipelineData"
     :total-groups="numGroups"
+    :metrics-config="metricsConfig"
     v-bind="$attrs"
     v-on="$listeners"
   >