1 files changed, 12 insertions, 77 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph_shared/links_inner.vue b/app/assets/javascripts/pipelines/components/graph_shared/links_inner.vue
index 0ed5b8a5f09..5c775df7b48 100644
--- a/app/assets/javascripts/pipelines/components/graph_shared/links_inner.vue
+++ b/app/assets/javascripts/pipelines/components/graph_shared/links_inner.vue
@@ -1,19 +1,8 @@
 <script>
 import { isEmpty } from 'lodash';
-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 { DRAW_FAILURE } from '../../constants';
 import { createJobsHash, generateJobNeedsDict, reportToSentry } from '../../utils';
 import { STAGE_VIEW } from '../graph/constants';
-import { parseData } from '../parsing_utils';
-import { reportPerformance } from './api';
 import { generateLinksData } from './drawing_utils';
 
 export default {
@@ -28,6 +17,10 @@ export default {
       type: Object,
       required: true,
     },
+    parsedData: {
+      type: Object,
+      required: true,
+    },
     pipelineId: {
       type: Number,
       required: true,
@@ -36,15 +29,6 @@ export default {
       type: Array,
       required: true,
     },
-    totalGroups: {
-      type: Number,
-      required: true,
-    },
-    metricsConfig: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
     defaultLinkColor: {
       type: String,
       required: false,
@@ -65,13 +49,9 @@ export default {
     return {
       links: [],
       needsObject: null,
-      parsedData: {},
     };
   },
   computed: {
-    shouldCollectMetrics() {
-      return this.metricsConfig.collectMetrics && this.metricsConfig.path;
-    },
     hasHighlightedJob() {
       return Boolean(this.highlightedJob);
     },
@@ -115,13 +95,16 @@ export default {
     highlightedJobs(jobs) {
       this.$emit('highlightedJobsChange', jobs);
     },
+    parsedData() {
+      this.calculateLinkData();
+    },
     viewType() {
       /*
         We need to wait a tick so that the layout reflows
         before the links refresh.
       */
       this.$nextTick(() => {
-        this.refreshLinks();
+        this.calculateLinkData();
       });
     },
   },
@@ -129,69 +112,21 @@ export default {
     reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
   },
   mounted() {
-    if (!isEmpty(this.pipelineData)) {
-      this.prepareLinkData();
+    if (!isEmpty(this.parsedData)) {
+      this.calculateLinkData();
     }
   },
   methods: {
-    beginPerfMeasure() {
-      if (this.shouldCollectMetrics) {
-        performanceMarkAndMeasure({ mark: PIPELINES_DETAIL_LINKS_MARK_CALCULATE_START });
-      }
-    },
-    finishPerfMeasureAndSend() {
-      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: this.links.length },
-            {
-              name: PIPELINES_DETAIL_LINKS_JOB_RATIO,
-              value: this.links.length / this.totalGroups,
-            },
-          ],
-        };
-
-        reportPerformance(this.metricsConfig.path, data);
-      });
-    },
     isLinkHighlighted(linkRef) {
       return this.highlightedLinks.includes(linkRef);
     },
-    prepareLinkData() {
-      this.beginPerfMeasure();
+    calculateLinkData() {
       try {
-        const arrayOfJobs = this.pipelineData.flatMap(({ groups }) => groups);
-        this.parsedData = parseData(arrayOfJobs);
-        this.refreshLinks();
+        this.links = generateLinksData(this.parsedData, this.containerId, `-${this.pipelineId}`);
       } catch (err) {
         this.$emit('error', { type: DRAW_FAILURE, reportToSentry: false });
         reportToSentry(this.$options.name, err);
       }
-      this.finishPerfMeasureAndSend();
-    },
-    refreshLinks() {
-      this.links = generateLinksData(this.parsedData, this.containerId, `-${this.pipelineId}`);
     },
     getLinkClasses(link) {
       return [