diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/graph_shared')
4 files changed, 26 insertions, 130 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph_shared/api.js b/app/assets/javascripts/pipelines/components/graph_shared/api.js index 49cd04d11e9..0fe7d9ffda3 100644 --- a/app/assets/javascripts/pipelines/components/graph_shared/api.js +++ b/app/assets/javascripts/pipelines/components/graph_shared/api.js @@ -2,6 +2,11 @@ import axios from '~/lib/utils/axios_utils'; import { reportToSentry } from '../../utils'; export const reportPerformance = (path, stats) => { + // FIXME: https://gitlab.com/gitlab-org/gitlab/-/issues/330245 + if (!path) { + return; + } + axios.post(path, stats).catch((err) => { reportToSentry('links_inner_perf', `error: ${err}`); }); 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 202498fb188..7c306683305 100644 --- a/app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js +++ b/app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js @@ -15,6 +15,7 @@ export const createUniqueLinkId = (stageName, jobName) => `${stageName}-${jobNam export const generateLinksData = ({ links }, containerID, modifier = '') => { const containerEl = document.getElementById(containerID); + return links.map((link) => { const path = d3.path(); 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 [ 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 8dbab245f44..81409752621 100644 --- a/app/assets/javascripts/pipelines/components/graph_shared/links_layer.vue +++ b/app/assets/javascripts/pipelines/components/graph_shared/links_layer.vue @@ -1,5 +1,4 @@ <script> -import { GlAlert } from '@gitlab/ui'; import { isEmpty } from 'lodash'; import { __ } from '~/locale'; import { @@ -19,10 +18,8 @@ import LinksInner from './links_inner.vue'; export default { name: 'LinksLayer', components: { - GlAlert, LinksInner, }, - MAX_GROUPS: 200, props: { containerMeasurements: { type: Object, @@ -37,15 +34,16 @@ export default { required: false, default: () => ({}), }, - neverShowLinks: { + showLinks: { type: Boolean, required: false, - default: false, + default: true, }, }, data() { return { alertDismissed: false, + parsedData: {}, showLinksOverride: false, }; }, @@ -67,43 +65,15 @@ export default { 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) - ); + return this.showLinks && !this.containerZero; }, }, 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)) { + if (!isEmpty(this.pipelineData)) { window.requestAnimationFrame(() => { this.prepareLinkData(); }); @@ -151,19 +121,13 @@ export default { reportPerformance(this.metricsConfig.path, data); }); }, - dismissAlert() { - this.alertDismissed = true; - }, - overrideShowLinks() { - this.dismissAlert(); - this.showLinksOverride = true; - }, prepareLinkData() { this.beginPerfMeasure(); let numLinks; try { const arrayOfJobs = this.pipelineData.flatMap(({ groups }) => groups); - numLinks = parseData(arrayOfJobs).links.length; + this.parsedData = parseData(arrayOfJobs); + numLinks = this.parsedData.links.length; } catch (err) { reportToSentry(this.$options.name, err); } @@ -176,24 +140,15 @@ export default { <links-inner v-if="showLinkedLayers" :container-measurements="containerMeasurements" + :parsed-data="parsedData" :pipeline-data="pipelineData" :total-groups="numGroups" - :metrics-config="metricsConfig" v-bind="$attrs" v-on="$listeners" > <slot></slot> </links-inner> <div v-else> - <gl-alert - v-if="showAlert" - class="gl-ml-4 gl-mb-4" - :primary-button-text="$options.i18n.showLinksAnyways" - @primaryAction="overrideShowLinks" - @dismiss="dismissAlert" - > - {{ $options.i18n.tooManyJobs }} - </gl-alert> <div class="gl-display-flex gl-relative"> <slot></slot> </div> |