Commit 5deced6c authored by Andrew Fontaine's avatar Andrew Fontaine

Merge branch '276949-kill-yr-darlings' into 'master'

Pipeline Graph Structural Update: Adjust Links Rendering

See merge request gitlab-org/gitlab!56554
parents 8afa7bd1 930596aa
......@@ -158,6 +158,7 @@ export default {
:container-measurements="measurements"
:highlighted-job="hoveredJobName"
:metrics-config="metricsConfig"
:never-show-links="true"
default-link-color="gl-stroke-transparent"
@error="onError"
@highlightedJobsChange="updateHighlightedJobs"
......
......@@ -148,7 +148,7 @@ export default {
const data = {
histograms: [
{ name: PIPELINES_DETAIL_LINK_DURATION, value: duration },
{ name: PIPELINES_DETAIL_LINK_DURATION, value: duration / 1000 },
{ name: PIPELINES_DETAIL_LINKS_TOTAL, value: this.links.length },
{
name: PIPELINES_DETAIL_LINKS_JOB_RATIO,
......
<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 {
......@@ -20,6 +32,16 @@ export default {
type: Array,
required: true,
},
metricsConfig: {
type: Object,
required: false,
default: () => ({}),
},
neverShowLinks: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
......@@ -42,10 +64,29 @@ export default {
return acc + Number(groups.length);
}, 0);
},
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)
);
......@@ -54,7 +95,62 @@ export default {
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;
},
......@@ -62,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>
......@@ -71,6 +178,7 @@ export default {
:container-measurements="containerMeasurements"
:pipeline-data="pipelineData"
:total-groups="numGroups"
:metrics-config="metricsConfig"
v-bind="$attrs"
v-on="$listeners"
>
......
......@@ -284,7 +284,7 @@ describe('Links Inner component', () => {
const numLinks = 1;
const metricsData = {
histograms: [
{ name: PIPELINES_DETAIL_LINK_DURATION, value: duration },
{ name: PIPELINES_DETAIL_LINK_DURATION, value: duration / 1000 },
{ name: PIPELINES_DETAIL_LINKS_TOTAL, value: numLinks },
{
name: PIPELINES_DETAIL_LINKS_JOB_RATIO,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment