1 files changed, 18 insertions, 99 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 81409752621..ef24694e494 100644
--- a/app/assets/javascripts/pipelines/components/graph_shared/links_layer.vue
+++ b/app/assets/javascripts/pipelines/components/graph_shared/links_layer.vue
@@ -1,20 +1,16 @@
 <script>
-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 { memoize } from 'lodash';
 import { reportToSentry } from '../../utils';
 import { parseData } from '../parsing_utils';
-import { reportPerformance } from './api';
 import LinksInner from './links_inner.vue';
 
+const parseForLinksBare = (pipeline) => {
+  const arrayOfJobs = pipeline.flatMap(({ groups }) => groups);
+  return parseData(arrayOfJobs).links;
+};
+
+const parseForLinks = memoize(parseForLinksBare);
+
 export default {
   name: 'LinksLayer',
   components: {
@@ -29,10 +25,10 @@ export default {
       type: Array,
       required: true,
     },
-    metricsConfig: {
-      type: Object,
+    linksData: {
+      type: Array,
       required: false,
-      default: () => ({}),
+      default: () => [],
     },
     showLinks: {
       type: Boolean,
@@ -40,30 +36,16 @@ export default {
       default: true,
     },
   },
-  data() {
-    return {
-      alertDismissed: false,
-      parsedData: {},
-      showLinksOverride: false,
-    };
-  },
-  i18n: {
-    showLinksAnyways: __('Show links anyways'),
-    tooManyJobs: __(
-      'This graph has a large number of jobs and showing the links between them may have performance implications.',
-    ),
-  },
   computed: {
     containerZero() {
       return !this.containerMeasurements.width || !this.containerMeasurements.height;
     },
-    numGroups() {
-      return this.pipelineData.reduce((acc, { groups }) => {
-        return acc + Number(groups.length);
-      }, 0);
-    },
-    shouldCollectMetrics() {
-      return this.metricsConfig.collectMetrics && this.metricsConfig.path;
+    getLinksData() {
+      if (this.linksData.length > 0) {
+        return this.linksData;
+      }
+
+      return parseForLinks(this.pipelineData);
     },
     showLinkedLayers() {
       return this.showLinks && !this.containerZero;
@@ -72,77 +54,14 @@ export default {
   errorCaptured(err, _vm, info) {
     reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
   },
-  mounted() {
-    if (!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);
-      });
-    },
-    prepareLinkData() {
-      this.beginPerfMeasure();
-      let numLinks;
-      try {
-        const arrayOfJobs = this.pipelineData.flatMap(({ groups }) => groups);
-        this.parsedData = parseData(arrayOfJobs);
-        numLinks = this.parsedData.links.length;
-      } catch (err) {
-        reportToSentry(this.$options.name, err);
-      }
-      this.finishPerfMeasureAndSend(numLinks);
-    },
-  },
 };
 </script>
 <template>
   <links-inner
     v-if="showLinkedLayers"
     :container-measurements="containerMeasurements"
-    :parsed-data="parsedData"
+    :links-data="getLinksData"
     :pipeline-data="pipelineData"
-    :total-groups="numGroups"
     v-bind="$attrs"
     v-on="$listeners"
   >