diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-12-01 03:09:28 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-12-01 03:09:28 +0300 |
commit | 259aa131744d51f3a7bf575c9d6d169138895355 (patch) | |
tree | d84e3e1a00b9df8bf31620c15ea673ee1ab8f72b /app/assets/javascripts/pipelines | |
parent | 2ddcd634fc74d894b243694582fdf58cf5fb3c2a (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/pipelines')
-rw-r--r-- | app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue | 10 | ||||
-rw-r--r-- | app/assets/javascripts/pipelines/components/graph/linked_pipelines_column_legacy.vue | 84 |
2 files changed, 89 insertions, 5 deletions
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 2ef8940cf65..769fff6b111 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue @@ -3,16 +3,16 @@ import { escape, capitalize } from 'lodash'; import { GlLoadingIcon } from '@gitlab/ui'; import StageColumnComponentLegacy from './stage_column_component_legacy.vue'; import GraphWidthMixin from '../../mixins/graph_width_mixin'; -import LinkedPipelinesColumn from './linked_pipelines_column.vue'; +import LinkedPipelinesColumnLegacy from './linked_pipelines_column_legacy.vue'; import GraphBundleMixin from '../../mixins/graph_pipeline_bundle_mixin'; import { UPSTREAM, DOWNSTREAM, MAIN } from './constants'; export default { name: 'PipelineGraphLegacy', components: { - StageColumnComponentLegacy, GlLoadingIcon, - LinkedPipelinesColumn, + LinkedPipelinesColumnLegacy, + StageColumnComponentLegacy, }, mixins: [GraphWidthMixin, GraphBundleMixin], props: { @@ -204,7 +204,7 @@ export default { @refreshPipelineGraph="requestRefreshPipelineGraph" /> - <linked-pipelines-column + <linked-pipelines-column-legacy v-if="hasUpstream" :type="$options.upstream" :linked-pipelines="upstreamPipelines" @@ -240,7 +240,7 @@ export default { /> </ul> - <linked-pipelines-column + <linked-pipelines-column-legacy v-if="hasDownstream" :type="$options.downstream" :linked-pipelines="downstreamPipelines" 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 new file mode 100644 index 00000000000..2ca33e6d33e --- /dev/null +++ b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column_legacy.vue @@ -0,0 +1,84 @@ +<script> +import LinkedPipeline from './linked_pipeline.vue'; +import { UPSTREAM } from './constants'; + +export default { + components: { + LinkedPipeline, + }, + props: { + columnTitle: { + type: String, + required: true, + }, + linkedPipelines: { + type: Array, + required: true, + }, + type: { + type: String, + required: true, + }, + projectId: { + type: Number, + required: true, + }, + }, + computed: { + columnClass() { + const positionValues = { + right: 'gl-ml-11', + left: 'gl-mr-7', + }; + return `graph-position-${this.graphPosition} ${positionValues[this.graphPosition]}`; + }, + graphPosition() { + return this.isUpstream ? 'left' : 'right'; + }, + // Refactor string match when BE returns Upstream/Downstream indicators + isUpstream() { + return this.type === UPSTREAM; + }, + }, + methods: { + onPipelineClick(downstreamNode, pipeline, index) { + this.$emit('linkedPipelineClick', pipeline, index, downstreamNode); + }, + onDownstreamHovered(jobName) { + this.$emit('downstreamHovered', jobName); + }, + onPipelineExpandToggle(jobName, expanded) { + // Highlighting only applies to downstream pipelines + if (this.isUpstream) { + return; + } + + this.$emit('pipelineExpandToggle', jobName, expanded); + }, + }, +}; +</script> + +<template> + <div :class="columnClass" class="stage-column linked-pipelines-column"> + <div class="stage-name linked-pipelines-column-title">{{ columnTitle }}</div> + <div v-if="isUpstream" class="cross-project-triangle"></div> + <ul> + <linked-pipeline + v-for="(pipeline, index) in linkedPipelines" + :key="pipeline.id" + :class="{ + active: pipeline.isExpanded, + 'left-connector': pipeline.isExpanded && graphPosition === 'left', + }" + :pipeline="pipeline" + :column-title="columnTitle" + :project-id="projectId" + :type="type" + @pipelineClicked="onPipelineClick($event, pipeline, index)" + @downstreamHovered="onDownstreamHovered" + @pipelineExpandToggle="onPipelineExpandToggle" + /> + </ul> + </div> +</template> |