1 files changed, 114 insertions, 1 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph_shared/links_layer.vue b/app/assets/javascripts/pipelines/components/graph_shared/links_layer.vue
index 1c1bc7ecb2a..42eab13b0bd 100644
--- a/app/assets/javascripts/pipelines/components/graph_shared/links_layer.vue
+++ b/app/assets/javascripts/pipelines/components/graph_shared/links_layer.vue
@@ -1,6 +1,19 @@
 <script>
 import { GlAlert } from '@gitlab/ui';
+import { isEmpty } from 'lodash';
 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 { parseData } from '../parsing_utils';
+import { reportPerformance } from './api';
 import LinksInner from './links_inner.vue';
 
 export default {
@@ -19,6 +32,16 @@ export default {
       type: Array,
       required: true,
     },
+    metricsConfig: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    neverShowLinks: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -41,16 +64,93 @@ export default {
         return acc + Number(groups.length);
       }, 0);
     },
+    shouldCollectMetrics() {
+      return this.metricsConfig.collectMetrics && this.metricsConfig.path;
+    },
     showAlert() {
-      return !this.showLinkedLayers && !this.alertDismissed;
+      /*
+        This is a hard override that allows us to turn off the links without
+        needing to remove the component entirely for iteration or based on graph type.
+      */
+      if (this.neverShowLinks) {
+        return false;
+      }
+
+      return !this.containerZero && !this.showLinkedLayers && !this.alertDismissed;
     },
     showLinkedLayers() {
+      /*
+        This is a hard override that allows us to turn off the links without
+        needing to remove the component entirely for iteration or based on graph type.
+      */
+      if (this.neverShowLinks) {
+        return false;
+      }
+
       return (
         !this.containerZero && (this.showLinksOverride || this.numGroups < this.$options.MAX_GROUPS)
       );
     },
   },
+  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;
     },
@@ -58,6 +158,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>
@@ -66,6 +177,8 @@ export default {
     v-if="showLinkedLayers"
     :container-measurements="containerMeasurements"
     :pipeline-data="pipelineData"
+    :total-groups="numGroups"
+    :metrics-config="metricsConfig"
     v-bind="$attrs"
     v-on="$listeners"
   >