diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-19 12:08:42 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-19 12:08:42 +0300 |
commit | b76ae638462ab0f673e5915986070518dd3f9ad3 (patch) | |
tree | bdab0533383b52873be0ec0eb4d3c66598ff8b91 /app/assets/javascripts/pipelines/components/graph_shared | |
parent | 434373eabe7b4be9593d18a585fb763f1e5f1a6f (diff) |
Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42
Diffstat (limited to 'app/assets/javascripts/pipelines/components/graph_shared')
3 files changed, 24 insertions, 105 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js b/app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js index 83f2466f0bf..d6d9ea94c13 100644 --- a/app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js +++ b/app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js @@ -13,7 +13,7 @@ export const createUniqueLinkId = (stageName, jobName) => `${stageName}-${jobNam * @returns {Array} Links that contain all the information about them */ -export const generateLinksData = ({ links }, containerID, modifier = '') => { +export const generateLinksData = (links, containerID, modifier = '') => { const containerEl = document.getElementById(containerID); return links.map((link) => { 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 5c775df7b48..1189c2ebad8 100644 --- a/app/assets/javascripts/pipelines/components/graph_shared/links_inner.vue +++ b/app/assets/javascripts/pipelines/components/graph_shared/links_inner.vue @@ -17,8 +17,8 @@ export default { type: Object, required: true, }, - parsedData: { - type: Object, + linksData: { + type: Array, required: true, }, pipelineId: { @@ -95,7 +95,7 @@ export default { highlightedJobs(jobs) { this.$emit('highlightedJobsChange', jobs); }, - parsedData() { + linksData() { this.calculateLinkData(); }, viewType() { @@ -112,7 +112,7 @@ export default { reportToSentry(this.$options.name, `error: ${err}, info: ${info}`); }, mounted() { - if (!isEmpty(this.parsedData)) { + if (!isEmpty(this.linksData)) { this.calculateLinkData(); } }, @@ -122,7 +122,7 @@ export default { }, calculateLinkData() { try { - this.links = generateLinksData(this.parsedData, this.containerId, `-${this.pipelineId}`); + this.links = generateLinksData(this.linksData, this.containerId, `-${this.pipelineId}`); } catch (err) { this.$emit('error', { type: DRAW_FAILURE, reportToSentry: false }); reportToSentry(this.$options.name, err); 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" > |