diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/graph_shared/links_layer.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/graph_shared/links_layer.vue | 117 |
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" > |