Merge branch '276949-kill-yr-darlings' into 'master'

Pipeline Graph Structural Update: Adjust Links Rendering

See merge request gitlab-org/gitlab!56554

app/assets/javascripts/pipelines/components/graph/graph_component.vue

@@ -158,6 +158,7 @@ export default {
               :container-measurements="measurements"
               :highlighted-job="hoveredJobName"
               :metrics-config="metricsConfig"
+              :never-show-links="true"
               default-link-color="gl-stroke-transparent"
               @error="onError"
               @highlightedJobsChange="updateHighlightedJobs"

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 { 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 {
@@ -20,6 +32,16 @@ export default {
       type: Array,
       required: true,
     },
+    metricsConfig: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    neverShowLinks: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -42,10 +64,29 @@ 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
+        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)
       );
@@ -54,7 +95,62 @@ 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;
     },
@@ -62,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>
@@ -71,6 +178,7 @@ export default {
     :container-measurements="containerMeasurements"
     :pipeline-data="pipelineData"
     :total-groups="numGroups"
+    :metrics-config="metricsConfig"
     v-bind="$attrs"
     v-on="$listeners"
   >

spec/frontend/pipelines/graph_shared/links_inner_spec.js

@@ -284,7 +284,7 @@ describe('Links Inner component', () => {
       const numLinks = 1;
       const metricsData = {
         histograms: [
-          { name: PIPELINES_DETAIL_LINK_DURATION, value: duration },
+          { name: PIPELINES_DETAIL_LINK_DURATION, value: duration / 1000 },
           { name: PIPELINES_DETAIL_LINKS_TOTAL, value: numLinks },
           {
             name: PIPELINES_DETAIL_LINKS_JOB_RATIO,