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 | 115 |
1 files changed, 114 insertions, 1 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 1c1bc7ecb2a..42eab13b0bd 100644 --- a/app/assets/javascripts/pipelines/components/graph_shared/links_layer.vue +++ b/app/assets/javascripts/pipelines/components/graph_shared/links_layer.vue @@ -1,6 +1,19 @@ <script> import { GlAlert } from '@gitlab/ui'; +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 { reportToSentry } from '../graph/utils'; +import { parseData } from '../parsing_utils'; +import { reportPerformance } from './api'; import LinksInner from './links_inner.vue'; export default { @@ -19,6 +32,16 @@ export default { type: Array, required: true, }, + metricsConfig: { + type: Object, + required: false, + default: () => ({}), + }, + neverShowLinks: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -41,16 +64,93 @@ export default { return acc + Number(groups.length); }, 0); }, + shouldCollectMetrics() { + return this.metricsConfig.collectMetrics && this.metricsConfig.path; + }, showAlert() { - return !this.showLinkedLayers && !this.alertDismissed; + /* + 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) ); }, }, + 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)) { + 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); + }); + }, dismissAlert() { this.alertDismissed = true; }, @@ -58,6 +158,17 @@ export default { this.dismissAlert(); this.showLinksOverride = true; }, + prepareLinkData() { + this.beginPerfMeasure(); + let numLinks; + try { + const arrayOfJobs = this.pipelineData.flatMap(({ groups }) => groups); + numLinks = parseData(arrayOfJobs).links.length; + } catch (err) { + reportToSentry(this.$options.name, err); + } + this.finishPerfMeasureAndSend(numLinks); + }, }, }; </script> @@ -66,6 +177,8 @@ export default { v-if="showLinkedLayers" :container-measurements="containerMeasurements" :pipeline-data="pipelineData" + :total-groups="numGroups" + :metrics-config="metricsConfig" v-bind="$attrs" v-on="$listeners" > |