diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components')
35 files changed, 664 insertions, 255 deletions
diff --git a/app/assets/javascripts/pipelines/components/dag/dag.vue b/app/assets/javascripts/pipelines/components/dag/dag.vue index 85171263f08..2482af2c7f0 100644 --- a/app/assets/javascripts/pipelines/components/dag/dag.vue +++ b/app/assets/javascripts/pipelines/components/dag/dag.vue @@ -56,15 +56,15 @@ export default { const unwrappedGroups = stages .map(({ name, groups: { nodes: groups } }) => { - return groups.map(group => { + return groups.map((group) => { return { category: name, ...group }; }); }) .flat(2); - const nodes = unwrappedGroups.map(group => { + const nodes = unwrappedGroups.map((group) => { const jobs = group.jobs.nodes.map(({ name, needs }) => { - return { name, needs: needs.nodes.map(need => need.name) }; + return { name, needs: needs.nodes.map((need) => need.name) }; }); return { ...group, jobs }; diff --git a/app/assets/javascripts/pipelines/components/dag/dag_graph.vue b/app/assets/javascripts/pipelines/components/dag/dag_graph.vue index 42d1debcddf..5ba0604fa01 100644 --- a/app/assets/javascripts/pipelines/components/dag/dag_graph.vue +++ b/app/assets/javascripts/pipelines/components/dag/dag_graph.vue @@ -173,7 +173,7 @@ export default { createClip(link) { return link .append('clipPath') - .attr('id', d => { + .attr('id', (d) => { return this.createAndAssignId(d, 'clipId', 'dag-clip'); }) .append('path') @@ -183,7 +183,7 @@ export default { createGradient(link) { const gradient = link .append('linearGradient') - .attr('id', d => { + .attr('id', (d) => { return this.createAndAssignId(d, 'gradId', 'dag-grad'); }) .attr('gradientUnits', 'userSpaceOnUse') @@ -251,7 +251,7 @@ export default { .data(linksData) .enter() .append('g') - .attr('id', d => { + .attr('id', (d) => { return this.createAndAssignId(d, 'uid', LINK_SELECTOR); }) .classed( @@ -273,10 +273,10 @@ export default { `${NODE_SELECTOR} gl-transition-property-stroke ${this.$options.viewOptions.hoverFadeClasses}`, true, ) - .attr('id', d => { + .attr('id', (d) => { return this.createAndAssignId(d, 'uid', NODE_SELECTOR); }) - .attr('stroke', d => { + .attr('stroke', (d) => { const color = this.color(d); /* eslint-disable-next-line no-param-reassign */ d.color = color; @@ -284,10 +284,10 @@ export default { }) .attr('stroke-width', nodeWidth) .attr('stroke-linecap', 'round') - .attr('x1', d => Math.floor((d.x1 + d.x0) / 2)) - .attr('x2', d => Math.floor((d.x1 + d.x0) / 2)) - .attr('y1', d => d.y0 + 4) - .attr('y2', d => d.y1 - 4); + .attr('x1', (d) => Math.floor((d.x1 + d.x0) / 2)) + .attr('x2', (d) => Math.floor((d.x1 + d.x0) / 2)) + .attr('y1', (d) => d.y0 + 4) + .attr('y2', (d) => d.y1 - 4); }, initColors() { diff --git a/app/assets/javascripts/pipelines/components/dag/drawing_utils.js b/app/assets/javascripts/pipelines/components/dag/drawing_utils.js index d56addc473f..3cd09d57ffb 100644 --- a/app/assets/javascripts/pipelines/components/dag/drawing_utils.js +++ b/app/assets/javascripts/pipelines/components/dag/drawing_utils.js @@ -92,8 +92,8 @@ export const createSankey = ({ ]); return ({ nodes, links }) => sankeyGenerator({ - nodes: nodes.map(d => ({ ...d })), - links: links.map(d => ({ ...d })), + nodes: nodes.map((d) => ({ ...d })), + links: links.map((d) => ({ ...d })), }); }; diff --git a/app/assets/javascripts/pipelines/components/dag/interactions.js b/app/assets/javascripts/pipelines/components/dag/interactions.js index e9f3e9f0e2c..69f36feeee4 100644 --- a/app/assets/javascripts/pipelines/components/dag/interactions.js +++ b/app/assets/javascripts/pipelines/components/dag/interactions.js @@ -13,22 +13,22 @@ export const getLiveLinksAsDict = () => { return Object.fromEntries( getLiveLinks() .data() - .map(d => [d.uid, d]), + .map((d) => [d.uid, d]), ); }; export const currentIsLive = (idx, collection) => getCurrent(idx, collection).classed(IS_HIGHLIGHTED); -const backgroundLinks = selection => selection.style('stroke-opacity', highlightOut); -const backgroundNodes = selection => selection.attr('stroke', '#f2f2f2'); -const foregroundLinks = selection => selection.style('stroke-opacity', highlightIn); -const foregroundNodes = selection => selection.attr('stroke', d => d.color); +const backgroundLinks = (selection) => selection.style('stroke-opacity', highlightOut); +const backgroundNodes = (selection) => selection.attr('stroke', '#f2f2f2'); +const foregroundLinks = (selection) => selection.style('stroke-opacity', highlightIn); +const foregroundNodes = (selection) => selection.attr('stroke', (d) => d.color); const renewLinks = (selection, baseOpacity) => selection.style('stroke-opacity', baseOpacity); -const renewNodes = selection => selection.attr('stroke', d => d.color); +const renewNodes = (selection) => selection.attr('stroke', (d) => d.color); -export const getAllLinkAncestors = node => { +export const getAllLinkAncestors = (node) => { if (node.targetLinks) { - return node.targetLinks.flatMap(n => { + return node.targetLinks.flatMap((n) => { return [n, ...getAllLinkAncestors(n.source)]; }); } @@ -36,11 +36,11 @@ export const getAllLinkAncestors = node => { return []; }; -const getAllNodeAncestors = node => { +const getAllNodeAncestors = (node) => { let allNodes = []; if (node.targetLinks) { - allNodes = node.targetLinks.flatMap(n => { + allNodes = node.targetLinks.flatMap((n) => { return getAllNodeAncestors(n.source); }); } @@ -74,7 +74,7 @@ const highlightPath = (parentLinks, parentNodes) => { }); /* highlight correct nodes */ - parentNodes.forEach(id => { + parentNodes.forEach((id) => { foregroundNodes(d3.select(`#${id}`)).classed(IS_HIGHLIGHTED, true); }); }; @@ -86,7 +86,7 @@ const restoreNodes = () => { rehighlights their nodes. */ - getLiveLinks().each(d => { + getLiveLinks().each((d) => { foregroundNodes(d3.select(`#${d.source.uid}`)).classed(IS_HIGHLIGHTED, true); foregroundNodes(d3.select(`#${d.target.uid}`)).classed(IS_HIGHLIGHTED, true); }); @@ -97,7 +97,7 @@ const restorePath = (parentLinks, parentNodes, baseOpacity) => { renewLinks(d3.select(`#${uid}`), baseOpacity).classed(IS_HIGHLIGHTED, false); }); - parentNodes.forEach(id => { + parentNodes.forEach((id) => { d3.select(`#${id}`).classed(IS_HIGHLIGHTED, false); }); @@ -112,7 +112,7 @@ const restorePath = (parentLinks, parentNodes, baseOpacity) => { restoreNodes(); }; -export const restoreLinks = baseOpacity => { +export const restoreLinks = (baseOpacity) => { /* if there exist live links, reset to highlight out / pale otherwise, reset to base diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue index 4e9b21a5c55..0ce94d4f02f 100644 --- a/app/assets/javascripts/pipelines/components/graph/action_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue @@ -4,6 +4,7 @@ import axios from '~/lib/utils/axios_utils'; import { dasherize } from '~/lib/utils/text_utility'; import { __ } from '~/locale'; import { deprecatedCreateFlash as createFlash } from '~/flash'; +import { reportToSentry } from './utils'; /** * Renders either a cancel, retry or play icon button and handles the post request @@ -50,6 +51,9 @@ export default { return `${actionIconDash} js-icon-${actionIconDash}`; }, }, + errorCaptured(err, _vm, info) { + reportToSentry('action_component', `error: ${err}, info: ${info}`); + }, methods: { /** * The request should not be handled here. @@ -70,10 +74,12 @@ export default { this.$emit('pipelineActionRequestComplete'); }) - .catch(() => { + .catch((err) => { this.isDisabled = false; this.isLoading = false; + reportToSentry('action_component', err); + createFlash(__('An error occurred while making the request.')); }); }, diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue index 67b2ed3b596..cd403757fe6 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue @@ -1,12 +1,15 @@ <script> import LinkedGraphWrapper from '../graph_shared/linked_graph_wrapper.vue'; +import LinksLayer from '../graph_shared/links_layer.vue'; import LinkedPipelinesColumn from './linked_pipelines_column.vue'; import StageColumnComponent from './stage_column_component.vue'; import { DOWNSTREAM, MAIN, UPSTREAM } from './constants'; +import { reportToSentry } from './utils'; export default { name: 'PipelineGraph', components: { + LinksLayer, LinkedGraphWrapper, LinkedPipelinesColumn, StageColumnComponent, @@ -31,9 +34,16 @@ export default { DOWNSTREAM, UPSTREAM, }, + CONTAINER_REF: 'PIPELINE_LINKS_CONTAINER_REF', + BASE_CONTAINER_ID: 'pipeline-links-container', data() { return { hoveredJobName: '', + highlightedJobs: [], + measurements: { + width: 0, + height: 0, + }, pipelineExpanded: { jobName: '', expanded: false, @@ -41,6 +51,9 @@ export default { }; }, computed: { + containerId() { + return `${this.$options.BASE_CONTAINER_ID}-${this.pipeline.id}`; + }, downstreamPipelines() { return this.hasDownstreamPipelines ? this.pipeline.downstream : []; }, @@ -53,12 +66,13 @@ export default { hasUpstreamPipelines() { return Boolean(this.pipeline?.upstream?.length > 0); }, - // The two show checks prevent upstream / downstream from showing redundant linked columns + // The show downstream check prevents showing redundant linked columns showDownstreamPipelines() { return ( this.hasDownstreamPipelines && this.type !== this.$options.pipelineTypeConstants.UPSTREAM ); }, + // The show upstream check prevents showing redundant linked columns showUpstreamPipelines() { return ( this.hasUpstreamPipelines && this.type !== this.$options.pipelineTypeConstants.DOWNSTREAM @@ -68,7 +82,22 @@ export default { return this.hasUpstreamPipelines ? this.pipeline.upstream : []; }, }, + errorCaptured(err, _vm, info) { + reportToSentry(this.$options.name, `error: ${err}, info: ${info}`); + }, + mounted() { + this.measurements = this.getMeasurements(); + }, methods: { + getMeasurements() { + return { + width: this.$refs[this.containerId].scrollWidth, + height: this.$refs[this.containerId].scrollHeight, + }; + }, + onError(errorType) { + this.$emit('error', errorType); + }, setJob(jobName) { this.hoveredJobName = jobName; }, @@ -78,14 +107,17 @@ export default { jobName: expanded ? jobName : '', }; }, + updateHighlightedJobs(jobs) { + this.highlightedJobs = jobs; + }, }, }; </script> <template> <div class="js-pipeline-graph"> <div - class="gl-pipeline-min-h gl-display-flex gl-position-relative gl-overflow-auto gl-bg-gray-10 gl-white-space-nowrap" - :class="{ 'gl-py-5': !isLinkedPipeline }" + class="gl-display-flex gl-position-relative gl-overflow-auto gl-bg-gray-10 gl-white-space-nowrap" + :class="{ 'gl-pipeline-min-h gl-py-5': !isLinkedPipeline }" > <linked-graph-wrapper> <template #upstream> @@ -94,20 +126,36 @@ export default { :linked-pipelines="upstreamPipelines" :column-title="__('Upstream')" :type="$options.pipelineTypeConstants.UPSTREAM" - @error="emit('error', errorType)" + @error="onError" /> </template> <template #main> - <stage-column-component - v-for="stage in graph" - :key="stage.name" - :title="stage.name" - :groups="stage.groups" - :action="stage.status.action" - :job-hovered="hoveredJobName" - :pipeline-expanded="pipelineExpanded" - @refreshPipelineGraph="$emit('refreshPipelineGraph')" - /> + <div :id="containerId" :ref="containerId"> + <links-layer + :pipeline-data="graph" + :pipeline-id="pipeline.id" + :container-id="containerId" + :container-measurements="measurements" + :highlighted-job="hoveredJobName" + default-link-color="gl-stroke-transparent" + @error="onError" + @highlightedJobsChange="updateHighlightedJobs" + > + <stage-column-component + v-for="stage in graph" + :key="stage.name" + :title="stage.name" + :groups="stage.groups" + :action="stage.status.action" + :highlighted-jobs="highlightedJobs" + :job-hovered="hoveredJobName" + :pipeline-expanded="pipelineExpanded" + :pipeline-id="pipeline.id" + @refreshPipelineGraph="$emit('refreshPipelineGraph')" + @jobHover="setJob" + /> + </links-layer> + </div> </template> <template #downstream> <linked-pipelines-column @@ -117,7 +165,7 @@ export default { :type="$options.pipelineTypeConstants.DOWNSTREAM" @downstreamHovered="setJob" @pipelineExpandToggle="togglePipelineExpanded" - @error="emit('error', errorType)" + @error="onError" /> </template> </linked-graph-wrapper> diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue b/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue index 9ca4dc1e27a..2164dbf4d55 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue @@ -5,6 +5,7 @@ import StageColumnComponentLegacy from './stage_column_component_legacy.vue'; import LinkedPipelinesColumnLegacy from './linked_pipelines_column_legacy.vue'; import GraphBundleMixin from '../../mixins/graph_pipeline_bundle_mixin'; import { UPSTREAM, DOWNSTREAM, MAIN } from './constants'; +import { reportToSentry } from './utils'; export default { name: 'PipelineGraphLegacy', @@ -78,11 +79,11 @@ export default { return ( this.pipeline.triggered_by && Array.isArray(this.pipeline.triggered_by) && - this.pipeline.triggered_by.find(el => el.isExpanded) + this.pipeline.triggered_by.find((el) => el.isExpanded) ); }, expandedDownstream() { - return this.pipeline.triggered && this.pipeline.triggered.find(el => el.isExpanded); + return this.pipeline.triggered && this.pipeline.triggered.find((el) => el.isExpanded); }, pipelineTypeUpstream() { return this.type !== this.$options.downstream && this.expandedUpstream; @@ -94,6 +95,9 @@ export default { return this.pipeline.project.id; }, }, + errorCaptured(err, _vm, info) { + reportToSentry(this.$options.name, `error: ${err}, info: ${info}`); + }, methods: { capitalizeStageName(name) { const escapedName = escape(name); diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue index d98e3aad054..f596333237d 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue @@ -1,10 +1,10 @@ <script> import { GlAlert, GlLoadingIcon } from '@gitlab/ui'; +import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql'; import { __ } from '~/locale'; import { DEFAULT, LOAD_FAILURE } from '../../constants'; -import getPipelineDetails from '../../graphql/queries/get_pipeline_details.query.graphql'; import PipelineGraph from './graph_component.vue'; -import { unwrapPipelineData, toggleQueryPollingByVisibility } from './utils'; +import { unwrapPipelineData, toggleQueryPollingByVisibility, reportToSentry } from './utils'; export default { name: 'PipelineGraphWrapper', @@ -76,6 +76,9 @@ export default { mounted() { toggleQueryPollingByVisibility(this.$apollo.queries.pipeline); }, + errorCaptured(err, _vm, info) { + reportToSentry(this.$options.name, `error: ${err}, info: ${info}`); + }, methods: { hideAlert() { this.showAlert = false; @@ -86,6 +89,7 @@ export default { reportFailure(type) { this.showAlert = true; this.failureType = type; + reportToSentry(this.$options.name, this.failureType); }, }, }; diff --git a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue index 203d6a12edd..08d6162aeb8 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue @@ -2,6 +2,7 @@ import { GlTooltipDirective } from '@gitlab/ui'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; import JobItem from './job_item.vue'; +import { reportToSentry } from './utils'; /** * Renders the dropdown for the pipeline graph. @@ -22,13 +23,24 @@ export default { type: Object, required: true, }, + pipelineId: { + type: Number, + required: false, + default: -1, + }, }, computed: { + computedJobId() { + return this.pipelineId > -1 ? `${this.group.name}-${this.pipelineId}` : ''; + }, tooltipText() { const { name, status } = this.group; return `${name} - ${status.label}`; }, }, + errorCaptured(err, _vm, info) { + reportToSentry('job_group_dropdown', `error: ${err}, info: ${info}`); + }, methods: { pipelineActionRequestComplete() { this.$emit('pipelineActionRequestComplete'); @@ -37,7 +49,7 @@ export default { }; </script> <template> - <div class="ci-job-dropdown-container dropdown dropright"> + <div :id="computedJobId" class="ci-job-dropdown-container dropdown dropright"> <button v-gl-tooltip.hover="{ boundary: 'viewport' }" :title="tooltipText" diff --git a/app/assets/javascripts/pipelines/components/graph/job_item.vue b/app/assets/javascripts/pipelines/components/graph/job_item.vue index 93ebe02d4e8..8262d728a24 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_item.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_item.vue @@ -6,6 +6,7 @@ import { sprintf } from '~/locale'; import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin'; import { accessValue } from './accessors'; import { REST } from './constants'; +import { reportToSentry } from './utils'; /** * Renders the badge for the pipeline graph and the job's dropdown. @@ -73,6 +74,11 @@ export default { required: false, default: () => ({}), }, + pipelineId: { + type: Number, + required: false, + default: -1, + }, }, computed: { boundary() { @@ -84,6 +90,9 @@ export default { hasDetails() { return accessValue(this.dataMethod, 'hasDetails', this.status); }, + computedJobId() { + return this.pipelineId > -1 ? `${this.job.name}-${this.pipelineId}` : ''; + }, status() { return this.job && this.job.status ? this.job.status : {}; }, @@ -130,6 +139,9 @@ export default { : this.cssClassJobName; }, }, + errorCaptured(err, _vm, info) { + reportToSentry('job_item', `error: ${err}, info: ${info}`); + }, methods: { hideTooltips() { this.$root.$emit('bv::hide::tooltip'); @@ -142,6 +154,7 @@ export default { </script> <template> <div + :id="computedJobId" class="ci-job-component gl-display-flex gl-align-items-center gl-justify-content-space-between" data-qa-selector="job_item_container" > @@ -151,8 +164,7 @@ export default { :href="detailsPath" :title="tooltipText" :class="jobClasses" - class="js-pipeline-graph-job-link qa-job-link menu-item gl-text-gray-900 gl-active-text-decoration-none - gl-focus-text-decoration-none gl-hover-text-decoration-none" + class="js-pipeline-graph-job-link qa-job-link menu-item gl-text-gray-900 gl-active-text-decoration-none gl-focus-text-decoration-none gl-hover-text-decoration-none" data-testid="job-with-link" @click.stop="hideTooltips" @mouseout="hideTooltips" diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue index 1a179de64cd..d18e604f087 100644 --- a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue +++ b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue @@ -1,9 +1,10 @@ <script> -import { GlTooltipDirective, GlButton, GlLink, GlLoadingIcon } from '@gitlab/ui'; +import { GlTooltipDirective, GlButton, GlLink, GlLoadingIcon, GlBadge } from '@gitlab/ui'; import CiStatus from '~/vue_shared/components/ci_icon.vue'; import { __, sprintf } from '~/locale'; import { accessValue } from './accessors'; import { DOWNSTREAM, REST, UPSTREAM } from './constants'; +import { reportToSentry } from './utils'; export default { directives: { @@ -14,6 +15,7 @@ export default { GlButton, GlLink, GlLoadingIcon, + GlBadge, }, inject: { dataMethod: { @@ -114,6 +116,9 @@ export default { return this.isUpstream ? 'gl-left-0 gl-border-r-1!' : 'gl-right-0 gl-border-l-1!'; }, }, + errorCaptured(err, _vm, info) { + reportToSentry('linked_pipeline', `error: ${err}, info: ${info}`); + }, methods: { onClickLinkedPipeline() { this.hideTooltips(); @@ -168,7 +173,9 @@ export default { </div> </div> <div class="gl-pt-2"> - <span class="badge badge-primary" data-testid="downstream-pipeline-label">{{ label }}</span> + <gl-badge size="sm" variant="info" data-testid="downstream-pipeline-label"> + {{ label }} + </gl-badge> </div> <gl-button :id="buttonId" diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue index 7d333087874..40e6a01b88c 100644 --- a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue +++ b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue @@ -1,9 +1,9 @@ <script> -import getPipelineDetails from '../../graphql/queries/get_pipeline_details.query.graphql'; +import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql'; import LinkedPipeline from './linked_pipeline.vue'; import { LOAD_FAILURE } from '../../constants'; import { UPSTREAM } from './constants'; -import { unwrapPipelineData, toggleQueryPollingByVisibility } from './utils'; +import { unwrapPipelineData, toggleQueryPollingByVisibility, reportToSentry } from './utils'; export default { components: { @@ -42,8 +42,8 @@ export default { computed: { columnClass() { const positionValues = { - right: 'gl-ml-11', - left: 'gl-mr-7', + right: 'gl-ml-6', + left: 'gl-mr-6', }; return `graph-position-${this.graphPosition} ${positionValues[this.graphPosition]}`; }, @@ -80,8 +80,13 @@ export default { result() { this.loadingPipelineId = null; }, - error() { + error(err, _vm, _key, type) { this.$emit('error', LOAD_FAILURE); + + reportToSentry( + 'linked_pipelines_column', + `error type: ${LOAD_FAILURE}, error: ${err}, apollo error type: ${type}`, + ); }, }); diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column_legacy.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column_legacy.vue index 7d371b33220..2f1390e07d1 100644 --- a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column_legacy.vue +++ b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column_legacy.vue @@ -1,6 +1,7 @@ <script> import LinkedPipeline from './linked_pipeline.vue'; import { UPSTREAM } from './constants'; +import { reportToSentry } from './utils'; export default { components: { @@ -42,6 +43,9 @@ export default { return this.type === UPSTREAM; }, }, + errorCaptured(err, _vm, info) { + reportToSentry('linked_pipelines_column_legacy', `error: ${err}, info: ${info}`); + }, methods: { onPipelineClick(downstreamNode, pipeline, index) { this.$emit('linkedPipelineClick', pipeline, index, downstreamNode); diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue index b9bddc94ce4..65f8c231885 100644 --- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue @@ -6,6 +6,7 @@ import JobGroupDropdown from './job_group_dropdown.vue'; import ActionComponent from './action_component.vue'; import { GRAPHQL } from './constants'; import { accessValue } from './accessors'; +import { reportToSentry } from './utils'; export default { components: { @@ -15,19 +16,28 @@ export default { MainGraphWrapper, }, props: { - title: { - type: String, - required: true, - }, groups: { type: Array, required: true, }, + pipelineId: { + type: Number, + required: true, + }, + title: { + type: String, + required: true, + }, action: { type: Object, required: false, default: () => ({}), }, + highlightedJobs: { + type: Array, + required: false, + default: () => [], + }, jobHovered: { type: String, required: false, @@ -54,6 +64,9 @@ export default { return !isEmpty(this.action); }, }, + errorCaptured(err, _vm, info) { + reportToSentry('stage_column_component', `error: ${err}, info: ${info}`); + }, methods: { getGroupId(group) { return accessValue(GRAPHQL, 'groupId', group); @@ -61,11 +74,18 @@ export default { groupId(group) { return `ci-badge-${escape(group.name)}`; }, + isFadedOut(jobName) { + return ( + this.jobHovered && + this.highlightedJobs.length > 1 && + !this.highlightedJobs.includes(jobName) + ); + }, }, }; </script> <template> - <main-graph-wrapper> + <main-graph-wrapper class="gl-px-6"> <template #stages> <div data-testid="stage-column-title" @@ -90,16 +110,25 @@ export default { :key="getGroupId(group)" data-testid="stage-column-group" class="gl-relative gl-mb-3 gl-white-space-normal gl-pipeline-job-width" + @mouseenter="$emit('jobHover', group.name)" + @mouseleave="$emit('jobHover', '')" > <job-item v-if="group.size === 1" :job="group.jobs[0]" :job-hovered="jobHovered" :pipeline-expanded="pipelineExpanded" + :pipeline-id="pipelineId" css-class-job-name="gl-build-content" + :class="{ 'gl-opacity-3': isFadedOut(group.name) }" @pipelineActionRequestComplete="$emit('refreshPipelineGraph')" /> - <job-group-dropdown v-else :group="group" /> + <job-group-dropdown + v-else + :group="group" + :pipeline-id="pipelineId" + :class="{ 'gl-opacity-3': isFadedOut(group.name) }" + /> </div> </template> </main-graph-wrapper> diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component_legacy.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component_legacy.vue index 258b6bf6b6d..059e8f9f8db 100644 --- a/app/assets/javascripts/pipelines/components/graph/stage_column_component_legacy.vue +++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component_legacy.vue @@ -4,6 +4,7 @@ import stageColumnMixin from '../../mixins/stage_column_mixin'; import JobItem from './job_item.vue'; import JobGroupDropdown from './job_group_dropdown.vue'; import ActionComponent from './action_component.vue'; +import { reportToSentry } from './utils'; export default { components: { @@ -52,6 +53,9 @@ export default { return !isEmpty(this.action); }, }, + errorCaptured(err, _vm, info) { + reportToSentry('stage_column_component_legacy', `error: ${err}, info: ${info}`); + }, methods: { groupId(group) { return `ci-badge-${escape(group.name)}`; diff --git a/app/assets/javascripts/pipelines/components/graph/utils.js b/app/assets/javascripts/pipelines/components/graph/utils.js index 32588feb426..1a935599bfa 100644 --- a/app/assets/javascripts/pipelines/components/graph/utils.js +++ b/app/assets/javascripts/pipelines/components/graph/utils.js @@ -1,5 +1,6 @@ import Visibility from 'visibilityjs'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import * as Sentry from '~/sentry/wrapper'; import { unwrapStagesWithNeeds } from '../unwrapping_utils'; const addMulti = (mainPipelineProjectPath, linkedPipeline) => { @@ -9,7 +10,7 @@ const addMulti = (mainPipelineProjectPath, linkedPipeline) => { }; }; -const transformId = linkedPipeline => { +const transformId = (linkedPipeline) => { return { ...linkedPipeline, id: getIdFromGraphQLId(linkedPipeline.id) }; }; @@ -42,7 +43,7 @@ const unwrapPipelineData = (mainPipelineProjectPath, data) => { }; const toggleQueryPollingByVisibility = (queryRef, interval = 10000) => { - const stopStartQuery = query => { + const stopStartQuery = (query) => { if (!Visibility.hidden()) { query.startPolling(interval); } else { @@ -55,3 +56,10 @@ const toggleQueryPollingByVisibility = (queryRef, interval = 10000) => { }; export { unwrapPipelineData, toggleQueryPollingByVisibility }; + +export const reportToSentry = (component, failureType) => { + Sentry.withScope((scope) => { + scope.setTag('component', component); + Sentry.captureException(failureType); + }); +}; diff --git a/app/assets/javascripts/pipelines/components/pipeline_graph/drawing_utils.js b/app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js index 35230e1511b..65c215be794 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_graph/drawing_utils.js +++ b/app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js @@ -1,5 +1,7 @@ import * as d3 from 'd3'; -import { createUniqueLinkId } from '../../utils'; + +export const createUniqueLinkId = (stageName, jobName) => `${stageName}-${jobName}`; + /** * This function expects its first argument data structure * to be the same shaped as the one generated by `parseData`, @@ -7,21 +9,23 @@ import { createUniqueLinkId } from '../../utils'; * we find the nodes in the graph, calculate their coordinates and * trace the lines that represent the needs of each job. * @param {Object} nodeDict - Resulting object of `parseData` with nodes and links - * @param {Object} jobs - An object where each key is the job name that contains the job data - * @param {ref} svg - Reference to the svg we draw in + * @param {String} containerID - Id for the svg the links will be draw in * @returns {Array} Links that contain all the information about them */ -export const generateLinksData = ({ links }, containerID) => { +export const generateLinksData = ({ links }, containerID, modifier = '') => { const containerEl = document.getElementById(containerID); - return links.map(link => { + return links.map((link) => { const path = d3.path(); const sourceId = link.source; const targetId = link.target; - const sourceNodeEl = document.getElementById(sourceId); - const targetNodeEl = document.getElementById(targetId); + const modifiedSourceId = `${sourceId}${modifier}`; + const modifiedTargetId = `${targetId}${modifier}`; + + const sourceNodeEl = document.getElementById(modifiedSourceId); + const targetNodeEl = document.getElementById(modifiedTargetId); const sourceNodeCoordinates = sourceNodeEl.getBoundingClientRect(); const targetNodeCoordinates = targetNodeEl.getBoundingClientRect(); @@ -35,17 +39,11 @@ export const generateLinksData = ({ links }, containerID) => { // from the total to make sure it's aligned properly. We then make the line // positioned in the center of the job node by adding half the height // of the job pill. - const paddingLeft = Number( - window - .getComputedStyle(containerEl, null) - .getPropertyValue('padding-left') - .replace('px', ''), + const paddingLeft = parseFloat( + window.getComputedStyle(containerEl, null).getPropertyValue('padding-left'), ); - const paddingTop = Number( - window - .getComputedStyle(containerEl, null) - .getPropertyValue('padding-top') - .replace('px', ''), + const paddingTop = parseFloat( + window.getComputedStyle(containerEl, null).getPropertyValue('padding-top'), ); const sourceNodeX = sourceNodeCoordinates.right - containerCoordinates.x - paddingLeft; @@ -66,7 +64,10 @@ export const generateLinksData = ({ links }, containerID) => { // Make cross-stages lines a straight line all the way // until we can safely draw the bezier to look nice. - const straightLineDestinationX = targetNodeX - 100; + // The adjustment number here is a magic number to make things + // look nice and should change if the padding changes. This goes well + // with gl-px-6. gl-px-8 is more like 100. + const straightLineDestinationX = targetNodeX - 60; const controlPointX = straightLineDestinationX + (targetNodeX - straightLineDestinationX) / 2; if (straightLineDestinationX > 0) { diff --git a/app/assets/javascripts/pipelines/components/graph_shared/links_inner.vue b/app/assets/javascripts/pipelines/components/graph_shared/links_inner.vue new file mode 100644 index 00000000000..89444076ae0 --- /dev/null +++ b/app/assets/javascripts/pipelines/components/graph_shared/links_inner.vue @@ -0,0 +1,140 @@ +<script> +import { isEmpty } from 'lodash'; +import { DRAW_FAILURE } from '../../constants'; +import { createJobsHash, generateJobNeedsDict } from '../../utils'; +import { parseData } from '../parsing_utils'; +import { generateLinksData } from './drawing_utils'; + +export default { + name: 'LinksInner', + STROKE_WIDTH: 2, + props: { + containerId: { + type: String, + required: true, + }, + containerMeasurements: { + type: Object, + required: true, + }, + pipelineId: { + type: Number, + required: true, + }, + pipelineData: { + type: Array, + required: true, + }, + defaultLinkColor: { + type: String, + required: false, + default: 'gl-stroke-gray-200', + }, + highlightedJob: { + type: String, + required: false, + default: '', + }, + }, + data() { + return { + links: [], + needsObject: null, + }; + }, + computed: { + hasHighlightedJob() { + return Boolean(this.highlightedJob); + }, + isPipelineDataEmpty() { + return isEmpty(this.pipelineData); + }, + highlightedJobs() { + // If you are hovering on a job, then the jobs we want to highlight are: + // The job you are currently hovering + all of its needs. + return this.hasHighlightedJob + ? [this.highlightedJob, ...this.needsObject[this.highlightedJob]] + : []; + }, + highlightedLinks() { + // If you are hovering on a job, then the links we want to highlight are: + // All the links whose `source` and `target` are highlighted jobs. + if (this.hasHighlightedJob) { + const filteredLinks = this.links.filter((link) => { + return ( + this.highlightedJobs.includes(link.source) && this.highlightedJobs.includes(link.target) + ); + }); + + return filteredLinks.map((link) => link.ref); + } + + return []; + }, + viewBox() { + return [0, 0, this.containerMeasurements.width, this.containerMeasurements.height]; + }, + }, + watch: { + highlightedJob() { + // On first hover, generate the needs reference + if (!this.needsObject) { + const jobs = createJobsHash(this.pipelineData); + this.needsObject = generateJobNeedsDict(jobs) ?? {}; + } + }, + highlightedJobs(jobs) { + this.$emit('highlightedJobsChange', jobs); + }, + }, + mounted() { + if (!isEmpty(this.pipelineData)) { + this.prepareLinkData(); + } + }, + methods: { + isLinkHighlighted(linkRef) { + return this.highlightedLinks.includes(linkRef); + }, + prepareLinkData() { + try { + const arrayOfJobs = this.pipelineData.flatMap(({ groups }) => groups); + const parsedData = parseData(arrayOfJobs); + this.links = generateLinksData(parsedData, this.containerId, `-${this.pipelineId}`); + } catch { + this.$emit('error', DRAW_FAILURE); + } + }, + getLinkClasses(link) { + return [ + this.isLinkHighlighted(link.ref) ? 'gl-stroke-blue-400' : this.defaultLinkColor, + { 'gl-opacity-3': this.hasHighlightedJob && !this.isLinkHighlighted(link.ref) }, + ]; + }, + }, +}; +</script> +<template> + <div class="gl-display-flex gl-relative"> + <svg + id="link-svg" + class="gl-absolute" + :viewBox="viewBox" + :width="`${containerMeasurements.width}px`" + :height="`${containerMeasurements.height}px`" + > + <template> + <path + v-for="link in links" + :key="link.path" + :ref="link.ref" + :d="link.path" + class="gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease" + :class="getLinkClasses(link)" + :stroke-width="$options.STROKE_WIDTH" + /> + </template> + </svg> + <slot></slot> + </div> +</template> diff --git a/app/assets/javascripts/pipelines/components/graph_shared/links_layer.vue b/app/assets/javascripts/pipelines/components/graph_shared/links_layer.vue new file mode 100644 index 00000000000..0993892a574 --- /dev/null +++ b/app/assets/javascripts/pipelines/components/graph_shared/links_layer.vue @@ -0,0 +1,86 @@ +<script> +import { GlAlert } from '@gitlab/ui'; +import { __ } from '~/locale'; +import LinksInner from './links_inner.vue'; + +export default { + name: 'LinksLayer', + components: { + GlAlert, + LinksInner, + }, + MAX_GROUPS: 200, + props: { + containerMeasurements: { + type: Object, + required: true, + }, + pipelineData: { + type: Array, + required: true, + }, + }, + data() { + return { + alertDismissed: false, + 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); + }, + showAlert() { + return !this.showLinkedLayers && !this.alertDismissed; + }, + showLinkedLayers() { + return ( + !this.containerZero && (this.showLinksOverride || this.numGroups < this.$options.MAX_GROUPS) + ); + }, + }, + methods: { + dismissAlert() { + this.alertDismissed = true; + }, + overrideShowLinks() { + this.dismissAlert(); + this.showLinksOverride = true; + }, + }, +}; +</script> +<template> + <links-inner + v-if="showLinkedLayers" + :container-measurements="containerMeasurements" + :pipeline-data="pipelineData" + v-bind="$attrs" + v-on="$listeners" + > + <slot></slot> + </links-inner> + <div v-else> + <gl-alert + v-if="showAlert" + class="gl-w-max-content gl-ml-4" + :primary-button-text="$options.i18n.showLinksAnyways" + @primaryAction="overrideShowLinks" + @dismiss="dismissAlert" + > + {{ $options.i18n.tooManyJobs }} + </gl-alert> + <slot></slot> + </div> +</template> diff --git a/app/assets/javascripts/pipelines/components/graph_shared/main_graph_wrapper.vue b/app/assets/javascripts/pipelines/components/graph_shared/main_graph_wrapper.vue index 1c9e3236d56..bcd7705669e 100644 --- a/app/assets/javascripts/pipelines/components/graph_shared/main_graph_wrapper.vue +++ b/app/assets/javascripts/pipelines/components/graph_shared/main_graph_wrapper.vue @@ -16,14 +16,11 @@ export default { </script> <template> <div> - <div - class="gl-display-flex gl-align-items-center gl-w-full gl-px-8 gl-mb-5" - :class="stageClasses" - > + <div class="gl-display-flex gl-align-items-center gl-w-full gl-mb-5" :class="stageClasses"> <slot name="stages"> </slot> </div> <div - class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-w-full gl-px-8" + class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-w-full" :class="jobClasses" > <slot name="jobs"> </slot> diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue index af7c0d0ec3f..a20bd70e90a 100644 --- a/app/assets/javascripts/pipelines/components/header_component.vue +++ b/app/assets/javascripts/pipelines/components/header_component.vue @@ -54,7 +54,7 @@ export default { iid: this.pipelineIid, }; }, - update: data => data.project.pipeline, + update: (data) => data.project.pipeline, error() { this.reportFailure(LOAD_FAILURE); }, diff --git a/app/assets/javascripts/pipelines/components/parsing_utils.js b/app/assets/javascripts/pipelines/components/parsing_utils.js index 1ed415688f2..9c97fa832d0 100644 --- a/app/assets/javascripts/pipelines/components/parsing_utils.js +++ b/app/assets/javascripts/pipelines/components/parsing_utils.js @@ -33,15 +33,15 @@ import { uniqWith, isEqual } from 'lodash'; 10 -> value (constant) */ -export const createNodeDict = nodes => { +export const createNodeDict = (nodes) => { return nodes.reduce((acc, node) => { const newNode = { ...node, - needs: node.jobs.map(job => job.needs || []).flat(), + needs: node.jobs.map((job) => job.needs || []).flat(), }; if (node.size > 1) { - node.jobs.forEach(job => { + node.jobs.forEach((job) => { acc[job.name] = newNode; }); } @@ -54,13 +54,13 @@ export const createNodeDict = nodes => { export const makeLinksFromNodes = (nodes, nodeDict) => { const constantLinkValue = 10; // all links are the same weight return nodes - .map(group => { - return group.jobs.map(job => { + .map((group) => { + return group.jobs.map((job) => { if (!job.needs) { return []; } - return job.needs.map(needed => { + return job.needs.map((needed) => { return { source: nodeDict[needed]?.name, target: group.name, @@ -74,7 +74,7 @@ export const makeLinksFromNodes = (nodes, nodeDict) => { export const getAllAncestors = (nodes, nodeDict) => { const needs = nodes - .map(node => { + .map((node) => { return nodeDict[node].needs || ''; }) .flat() @@ -102,13 +102,13 @@ export const filterByAncestors = (links, nodeDict) => */ const targetNode = target; const targetNodeNeeds = nodeDict[targetNode].needs; - const targetNodeNeedsMinusSource = targetNodeNeeds.filter(need => need !== source); + const targetNodeNeedsMinusSource = targetNodeNeeds.filter((need) => need !== source); const allAncestors = getAllAncestors(targetNodeNeedsMinusSource, nodeDict); return !allAncestors.includes(source); }); -export const parseData = nodes => { +export const parseData = (nodes) => { const nodeDict = createNodeDict(nodes); const allLinks = makeLinksFromNodes(nodes, nodeDict); const filteredLinks = filterByAncestors(allLinks, nodeDict); @@ -121,7 +121,7 @@ export const parseData = nodes => { The number of nodes in the most populous generation drives the height of the graph. */ -export const getMaxNodes = nodes => { +export const getMaxNodes = (nodes) => { const counts = nodes.reduce((acc, { layer }) => { if (!acc[layer]) { acc[layer] = 0; @@ -141,6 +141,6 @@ export const getMaxNodes = nodes => { to find nodes that have no relations. */ -export const removeOrphanNodes = sankeyfiedNodes => { - return sankeyfiedNodes.filter(node => node.sourceLinks.length || node.targetLinks.length); +export const removeOrphanNodes = (sankeyfiedNodes) => { + return sankeyfiedNodes.filter((node) => node.sourceLinks.length || node.targetLinks.length); }; diff --git a/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue b/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue index 73e5f2542fb..8636808b69e 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue @@ -1,12 +1,10 @@ <script> -import { isEmpty } from 'lodash'; import { GlAlert } from '@gitlab/ui'; import { __ } from '~/locale'; +import { generateLinksData } from '../graph_shared/drawing_utils'; import JobPill from './job_pill.vue'; import StagePill from './stage_pill.vue'; -import { generateLinksData } from './drawing_utils'; import { parseData } from '../parsing_utils'; -import { unwrapArrayOfJobs } from '../unwrapping_utils'; import { DRAW_FAILURE, DEFAULT, INVALID_CI_CONFIG, EMPTY_PIPELINE_DATA } from '../../constants'; import { createJobsHash, generateJobNeedsDict } from '../../utils'; import { CI_CONFIG_STATUS_INVALID } from '~/pipeline_editor/constants'; @@ -23,8 +21,6 @@ export default { errorTexts: { [DRAW_FAILURE]: __('Could not draw the lines for job relationships'), [DEFAULT]: __('An unknown error occurred.'), - }, - warningTexts: { [EMPTY_PIPELINE_DATA]: __( 'The visualization will appear in this tab when the CI/CD configuration file is populated with valid syntax.', ), @@ -47,21 +43,24 @@ export default { }; }, computed: { + hideGraph() { + // We won't even try to render the graph with these condition + // because it would cause additional errors down the line for the user + // which is confusing. + return this.isPipelineDataEmpty || this.isInvalidCiConfig; + }, + pipelineStages() { + return this.pipelineData?.stages || []; + }, isPipelineDataEmpty() { - return !this.isInvalidCiConfig && isEmpty(this.pipelineData?.stages); + return !this.isInvalidCiConfig && this.pipelineStages.length === 0; }, isInvalidCiConfig() { return this.pipelineData?.status === CI_CONFIG_STATUS_INVALID; }, - showAlert() { - return this.hasError || this.hasWarning; - }, hasError() { return this.failureType; }, - hasWarning() { - return this.warning; - }, hasHighlightedJob() { return Boolean(this.highlightedJob); }, @@ -73,26 +72,32 @@ export default { return this.warning; }, failure() { - const text = this.$options.errorTexts[this.failureType] || this.$options.errorTexts[DEFAULT]; - - return { text, variant: 'danger', dismissible: true }; - }, - warning() { - if (this.isPipelineDataEmpty) { - return { - text: this.$options.warningTexts[EMPTY_PIPELINE_DATA], - variant: 'tip', - dismissible: false, - }; - } else if (this.isInvalidCiConfig) { - return { - text: this.$options.warningTexts[INVALID_CI_CONFIG], - variant: 'danger', - dismissible: false, - }; + switch (this.failureType) { + case DRAW_FAILURE: + return { + text: this.$options.errorTexts[DRAW_FAILURE], + variant: 'danger', + dismissible: true, + }; + case EMPTY_PIPELINE_DATA: + return { + text: this.$options.errorTexts[EMPTY_PIPELINE_DATA], + variant: 'tip', + dismissible: false, + }; + case INVALID_CI_CONFIG: + return { + text: this.$options.errorTexts[INVALID_CI_CONFIG], + variant: 'danger', + dismissible: false, + }; + default: + return { + text: this.$options.errorTexts[DEFAULT], + variant: 'danger', + dismissible: true, + }; } - - return null; }, viewBox() { return [0, 0, this.width, this.height]; @@ -100,40 +105,45 @@ export default { highlightedJobs() { // If you are hovering on a job, then the jobs we want to highlight are: // The job you are currently hovering + all of its needs. - return this.hasHighlightedJob - ? [this.highlightedJob, ...this.needsObject[this.highlightedJob]] - : []; + return [this.highlightedJob, ...this.needsObject[this.highlightedJob]]; }, highlightedLinks() { // If you are hovering on a job, then the links we want to highlight are: // All the links whose `source` and `target` are highlighted jobs. if (this.hasHighlightedJob) { - const filteredLinks = this.links.filter(link => { + const filteredLinks = this.links.filter((link) => { return ( this.highlightedJobs.includes(link.source) && this.highlightedJobs.includes(link.target) ); }); - return filteredLinks.map(link => link.ref); + return filteredLinks.map((link) => link.ref); } return []; }, }, - mounted() { - if (!this.isPipelineDataEmpty && !this.isInvalidCiConfig) { - // This guarantee that all sub-elements are rendered - // https://v3.vuejs.org/api/options-lifecycle-hooks.html#mounted - this.$nextTick(() => { - this.getGraphDimensions(); - this.prepareLinkData(); - }); - } + watch: { + pipelineData: { + immediate: true, + handler() { + if (this.isPipelineDataEmpty) { + this.reportFailure(EMPTY_PIPELINE_DATA); + } else if (this.isInvalidCiConfig) { + this.reportFailure(INVALID_CI_CONFIG); + } else { + this.$nextTick(() => { + this.computeGraphDimensions(); + this.prepareLinkData(); + }); + } + }, + }, }, methods: { prepareLinkData() { try { - const arrayOfJobs = unwrapArrayOfJobs(this.pipelineData); + const arrayOfJobs = this.pipelineStages.flatMap(({ groups }) => groups); const parsedData = parseData(arrayOfJobs); this.links = generateLinksData(parsedData, this.$options.CONTAINER_ID); } catch { @@ -141,7 +151,7 @@ export default { } }, getStageBackgroundClasses(index) { - const { length } = this.pipelineData.stages; + const { length } = this.pipelineStages; // It's possible for a graph to have only one stage, in which // case we concatenate both the left and right rounding classes if (length === 1) { @@ -162,7 +172,7 @@ export default { // The first time we hover, we create the object where // we store all the data to properly highlight the needs. if (!this.needsObject) { - const jobs = createJobsHash(this.pipelineData); + const jobs = createJobsHash(this.pipelineStages); this.needsObject = generateJobNeedsDict(jobs) ?? {}; } @@ -171,7 +181,7 @@ export default { removeHighlightNeeds() { this.highlightedJob = null; }, - getGraphDimensions() { + computeGraphDimensions() { this.width = `${this.$refs[this.$options.CONTAINER_REF].scrollWidth}`; this.height = `${this.$refs[this.$options.CONTAINER_REF].scrollHeight}`; }, @@ -199,7 +209,7 @@ export default { <template> <div> <gl-alert - v-if="showAlert" + v-if="hasError" :variant="alert.variant" :dismissible="alert.dismissible" @dismiss="alert.dismissible ? resetFailure : null" @@ -207,7 +217,7 @@ export default { {{ alert.text }} </gl-alert> <div - v-if="!hasWarning" + v-if="!hideGraph" :id="$options.CONTAINER_ID" :ref="$options.CONTAINER_REF" class="gl-display-flex gl-bg-gray-50 gl-px-4 gl-overflow-auto gl-relative gl-py-7" @@ -227,7 +237,7 @@ export default { </template> </svg> <div - v-for="(stage, index) in pipelineData.stages" + v-for="(stage, index) in pipelineStages" :key="`${stage.name}-${index}`" class="gl-flex-direction-column" > diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue index 78b69073cd3..ee26ea2f007 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue @@ -1,7 +1,25 @@ <script> import { GlButton } from '@gitlab/ui'; +import { isExperimentEnabled } from '~/lib/utils/experimentation'; +import { s__ } from '~/locale'; +import Tracking from '~/tracking'; export default { + i18n: { + control: { + infoMessage: s__(`Pipelines|Continuous Integration can help + catch bugs by running your tests automatically, + while Continuous Deployment can help you deliver + code to your product environment.`), + buttonMessage: s__('Pipelines|Get started with Pipelines'), + }, + experiment: { + infoMessage: s__(`Pipelines|GitLab CI/CD can automatically build, + test, and deploy your code. Let GitLab take care of time + consuming tasks, so you can spend more time creating.`), + buttonMessage: s__('Pipelines|Get started with CI/CD'), + }, + }, name: 'PipelinesEmptyState', components: { GlButton, @@ -20,6 +38,23 @@ export default { required: true, }, }, + mounted() { + this.track('viewed'); + }, + methods: { + track(action) { + if (!gon.tracking_data) { + return; + } + + const { category, value, label, property } = gon.tracking_data; + + Tracking.event(category, action, { value, label, property }); + }, + isExperimentEnabled() { + return isExperimentEnabled('pipelinesEmptyState'); + }, + }, }; </script> <template> @@ -29,18 +64,16 @@ export default { </div> <div class="col-12"> - <div class="gl-text-content"> + <div class="text-content"> <template v-if="canSetCi"> - <h4 class="gl-text-center" data-testid="header-text"> + <h4 data-testid="header-text" class="gl-text-center"> {{ s__('Pipelines|Build with confidence') }} </h4> - <p data-testid="info-text"> {{ - s__(`Pipelines|Continuous Integration can help - catch bugs by running your tests automatically, - while Continuous Deployment can help you deliver - code to your product environment.`) + isExperimentEnabled() + ? $options.i18n.experiment.infoMessage + : $options.i18n.control.infoMessage }} </p> @@ -50,8 +83,13 @@ export default { variant="info" category="primary" data-testid="get-started-pipelines" + @click="track('documentation_clicked')" > - {{ s__('Pipelines|Get started with Pipelines') }} + {{ + isExperimentEnabled() + ? $options.i18n.experiment.buttonMessage + : $options.i18n.control.buttonMessage + }} </gl-button> </div> </template> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue index bde0dd53aac..d1bac078642 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue @@ -1,5 +1,5 @@ <script> -import { GlLink, GlPopover, GlSprintf, GlTooltipDirective } from '@gitlab/ui'; +import { GlLink, GlPopover, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui'; import { SCHEDULE_ORIGIN } from '../../constants'; export default { @@ -7,10 +7,16 @@ export default { GlLink, GlPopover, GlSprintf, + GlBadge, }, directives: { GlTooltip: GlTooltipDirective, }, + inject: { + targetProjectFullPath: { + default: '', + }, + }, props: { pipeline: { type: Object, @@ -25,11 +31,6 @@ export default { required: true, }, }, - inject: { - targetProjectFullPath: { - default: '', - }, - }, computed: { user() { return this.pipeline.user; @@ -50,7 +51,6 @@ export default { <div class="table-section section-10 d-none d-md-block pipeline-tags"> <gl-link :href="pipeline.path" - class="js-pipeline-url-link js-onboarding-pipeline-item" data-testid="pipeline-url-link" data-qa-selector="pipeline_url_link" > @@ -58,46 +58,49 @@ export default { </gl-link> <div class="label-container"> <gl-link v-if="isScheduled" :href="pipelineScheduleUrl" target="__blank"> - <span + <gl-badge v-gl-tooltip :title="__('This pipeline was triggered by a schedule.')" - class="badge badge-info" + variant="info" + size="sm" data-testid="pipeline-url-scheduled" - >{{ __('Scheduled') }}</span + >{{ __('Scheduled') }}</gl-badge > </gl-link> - <span + <gl-badge v-if="pipeline.flags.latest" v-gl-tooltip :title="__('Latest pipeline for the most recent commit on this branch')" - class="js-pipeline-url-latest badge badge-success" + variant="success" + size="sm" data-testid="pipeline-url-latest" - >{{ __('latest') }}</span + >{{ __('latest') }}</gl-badge > - <span + <gl-badge v-if="pipeline.flags.yaml_errors" v-gl-tooltip :title="pipeline.yaml_errors" - class="js-pipeline-url-yaml badge badge-danger" + variant="danger" + size="sm" data-testid="pipeline-url-yaml" - >{{ __('yaml invalid') }}</span + >{{ __('yaml invalid') }}</gl-badge > - <span + <gl-badge v-if="pipeline.flags.failure_reason" v-gl-tooltip :title="pipeline.failure_reason" - class="js-pipeline-url-failure badge badge-danger" + variant="danger" + size="sm" data-testid="pipeline-url-failure" - >{{ __('error') }}</span + >{{ __('error') }}</gl-badge > <gl-link v-if="pipeline.flags.auto_devops" :id="`pipeline-url-autodevops-${pipeline.id}`" tabindex="0" - class="js-pipeline-url-autodevops badge badge-info autodevops-badge" data-testid="pipeline-url-autodevops" role="button" - >{{ __('Auto DevOps') }}</gl-link + ><gl-badge variant="info" size="sm">{{ __('Auto DevOps') }}</gl-badge></gl-link > <gl-popover :target="`pipeline-url-autodevops-${pipeline.id}`" @@ -113,7 +116,7 @@ export default { ) " > - <template #strong="{content}"> + <template #strong="{ content }"> <b>{{ content }}</b> </template> </gl-sprintf> @@ -123,13 +126,14 @@ export default { __('Learn more about Auto DevOps') }}</gl-link> </gl-popover> - <span + <gl-badge v-if="pipeline.flags.stuck" - class="js-pipeline-url-stuck badge badge-warning" + variant="warning" + size="sm" data-testid="pipeline-url-stuck" - >{{ __('stuck') }}</span + >{{ __('stuck') }}</gl-badge > - <span + <gl-badge v-if="pipeline.flags.detached_merge_request_pipeline" v-gl-tooltip :title=" @@ -137,17 +141,19 @@ export default { 'Pipelines for merge requests are configured. A detached pipeline runs in the context of the merge request, and not against the merged result. Learn more in the documentation for Pipelines for Merged Results.', ) " - class="js-pipeline-url-detached badge badge-info" + variant="info" + size="sm" data-testid="pipeline-url-detached" - >{{ __('detached') }}</span + >{{ __('detached') }}</gl-badge > - <span + <gl-badge v-if="isInFork" v-gl-tooltip :title="__('Pipeline ran in fork of project')" - class="badge badge-info" + variant="info" + size="sm" data-testid="pipeline-url-fork" - >{{ __('fork') }}</span + >{{ __('fork') }}</gl-badge > </div> </div> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue index ff27226b408..ec7c5764be1 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue @@ -246,7 +246,7 @@ export default { filterPipelines(filters) { this.resetRequestData(); - filters.forEach(filter => { + filters.forEach((filter) => { // do not add Any for username query param, so we // can fetch all trigger authors if ( @@ -279,7 +279,7 @@ export default { <div class="pipelines-container"> <div v-if="shouldRenderTabs || shouldRenderButtons" - class="top-area scrolling-tabs-container inner-page-scroll-tabs" + class="top-area scrolling-tabs-container inner-page-scroll-tabs gl-border-none" > <div class="fade-left"><gl-icon name="chevron-lg-left" :size="12" /></div> <div class="fade-right"><gl-icon name="chevron-lg-right" :size="12" /></div> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue index 55c71e299be..b13460b4c68 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue @@ -1,14 +1,19 @@ <script> -/* eslint-disable @gitlab/vue-require-i18n-strings */ -import { GlLink, GlTooltipDirective, GlIcon } from '@gitlab/ui'; +import { GlDropdown, GlDropdownItem, GlSprintf, GlTooltipDirective } from '@gitlab/ui'; +import { __ } from '~/locale'; export default { directives: { GlTooltip: GlTooltipDirective, }, components: { - GlIcon, - GlLink, + GlDropdown, + GlDropdownItem, + GlSprintf, + }, + translations: { + artifacts: __('Artifacts'), + downloadArtifact: __('Download %{name} artifact'), }, props: { artifacts: { @@ -19,24 +24,25 @@ export default { }; </script> <template> - <div class="btn-group" role="group"> - <button - v-gl-tooltip - type="button" - class="dropdown-toggle build-artifacts btn btn-default js-pipeline-dropdown-download" - :title="__('Artifacts')" - data-toggle="dropdown" - :aria-label="__('Artifacts')" + <gl-dropdown + v-gl-tooltip + class="build-artifacts js-pipeline-dropdown-download" + :title="$options.translations.artifacts" + :text="$options.translations.artifacts" + :aria-label="$options.translations.artifacts" + icon="download" + text-sr-only + > + <gl-dropdown-item + v-for="(artifact, i) in artifacts" + :key="i" + :href="artifact.path" + rel="nofollow" + download > - <gl-icon name="download" /> - <gl-icon name="chevron-down" /> - </button> - <ul class="dropdown-menu dropdown-menu-right"> - <li v-for="(artifact, i) in artifacts" :key="i"> - <gl-link :href="artifact.path" rel="nofollow" download - >Download {{ artifact.name }} artifact</gl-link - > - </li> - </ul> - </div> + <gl-sprintf :message="$options.translations.downloadArtifact"> + <template #name>{{ artifact.name }}</template> + </gl-sprintf> + </gl-dropdown-item> + </gl-dropdown> </template> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue index 29345f33367..127503f1307 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue @@ -33,7 +33,7 @@ export default { }, computed: { selectedTypes() { - return this.value.map(i => i.type); + return this.value.map((i) => i.type); }, tokens() { return [ diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table_row.vue index 7224ec455f6..b6c4e617a90 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table_row.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table_row.vue @@ -346,7 +346,6 @@ export default { <pipelines-artifacts-component v-if="pipeline.details.artifacts.length" :artifacts="pipeline.details.artifacts" - class="d-md-block" /> <gl-button diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue b/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue index 581ea5fbb35..a9154d93194 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue @@ -124,7 +124,7 @@ export default { $( '.js-builds-dropdown-list button, .js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item', this.$el, - ).on('click', e => { + ).on('click', (e) => { e.stopPropagation(); }); }, diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue index 60cb697f1af..24456574a6f 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue @@ -34,10 +34,10 @@ export default { fetchBranches(searchterm) { Api.branches(this.config.projectId, searchterm) .then(({ data }) => { - this.branches = data.map(branch => branch.name); + this.branches = data.map((branch) => branch.name); this.loading = false; }) - .catch(err => { + .catch((err) => { createFlash(FETCH_BRANCH_ERROR_MESSAGE); this.loading = false; throw err; diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_status_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_status_token.vue index dc43d94f4fd..020a08b8cee 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_status_token.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_status_token.vue @@ -72,7 +72,7 @@ export default { ]; }, findActiveStatus() { - return this.statuses.find(status => status.value === this.value.data); + return this.statuses.find((status) => status.value === this.value.data); }, }, }; diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue index d6ba5fcca85..1241803c612 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue @@ -34,10 +34,10 @@ export default { fetchTags(searchTerm) { Api.tags(this.config.projectId, searchTerm) .then(({ data }) => { - this.tags = data.map(tag => tag.name); + this.tags = data.map((tag) => tag.name); this.loading = false; }) - .catch(err => { + .catch((err) => { createFlash(FETCH_TAG_ERROR_MESSAGE); this.loading = false; throw err; diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue index ae5758233bc..3db5893b565 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue @@ -45,7 +45,7 @@ export default { return this.value.data.toLowerCase(); }, activeUser() { - return this.users.find(user => { + return this.users.find((user) => { return user.username.toLowerCase() === this.currentValue; }); }, @@ -56,11 +56,11 @@ export default { methods: { fetchProjectUsers(searchTerm) { Api.projectUsers(this.config.projectId, searchTerm) - .then(users => { + .then((users) => { this.users = users; this.loading = false; }) - .catch(err => { + .catch((err) => { createFlash(FETCH_AUTHOR_ERROR_MESSAGE); this.loading = false; throw err; @@ -80,7 +80,7 @@ export default { v-on="$listeners" @input="searchAuthors" > - <template #view="{inputValue}"> + <template #view="{ inputValue }"> <gl-avatar v-if="activeUser" :size="16" diff --git a/app/assets/javascripts/pipelines/components/unwrapping_utils.js b/app/assets/javascripts/pipelines/components/unwrapping_utils.js index aa33f622ce6..15073079c0a 100644 --- a/app/assets/javascripts/pipelines/components/unwrapping_utils.js +++ b/app/assets/javascripts/pipelines/components/unwrapping_utils.js @@ -1,22 +1,5 @@ -/** - * This function takes the stages and add the stage name - * at the group level as `category` to have an easier - * implementation while constructions nodes with D3 - * @param {Array} stages - * @returns {Array} - Array of stages with stage name at the group level as `category` - */ -export const unwrapArrayOfJobs = (stages = []) => { - return stages - .map(({ name, groups }) => { - return groups.map(group => { - return { category: name, ...group }; - }); - }) - .flat(2); -}; - -const unwrapGroups = stages => { - return stages.map(stage => { +const unwrapGroups = (stages) => { + return stages.map((stage) => { const { groups: { nodes: groups }, } = stage; @@ -25,21 +8,21 @@ const unwrapGroups = stages => { }; const unwrapNodesWithName = (jobArray, prop, field = 'name') => { - return jobArray.map(job => { - return { ...job, [prop]: job[prop].nodes.map(item => item[field]) }; + return jobArray.map((job) => { + return { ...job, [prop]: job[prop].nodes.map((item) => item[field]) }; }); }; -const unwrapJobWithNeeds = denodedJobArray => { +const unwrapJobWithNeeds = (denodedJobArray) => { return unwrapNodesWithName(denodedJobArray, 'needs'); }; -const unwrapStagesWithNeeds = denodedStages => { +const unwrapStagesWithNeeds = (denodedStages) => { const unwrappedNestedGroups = unwrapGroups(denodedStages); - const nodes = unwrappedNestedGroups.map(node => { + const nodes = unwrappedNestedGroups.map((node) => { const { groups } = node; - const groupsWithJobs = groups.map(group => { + const groupsWithJobs = groups.map((group) => { const jobs = unwrapJobWithNeeds(group.jobs.nodes); return { ...group, jobs }; }); |