diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/graph')
5 files changed, 29 insertions, 31 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue index 71ec81b8969..ea45b5e3ec7 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue @@ -101,9 +101,6 @@ export default { showJobLinks() { return !this.isStageView && this.showLinks; }, - shouldShowStageName() { - return !this.isStageView; - }, // The show downstream check prevents showing redundant linked columns showDownstreamPipelines() { return ( @@ -165,8 +162,10 @@ export default { <div class="js-pipeline-graph"> <div ref="mainPipelineContainer" - class="gl-display-flex gl-position-relative gl-bg-gray-10 gl-white-space-nowrap gl-border-t-solid gl-border-t-1 gl-border-gray-100" - :class="{ 'gl-pipeline-min-h gl-py-5 gl-overflow-auto': !isLinkedPipeline }" + class="gl-display-flex gl-position-relative gl-bg-gray-10 gl-white-space-nowrap" + :class="{ + 'gl-pipeline-min-h gl-py-5 gl-overflow-auto gl-border-t-solid gl-border-t-1 gl-border-gray-100': !isLinkedPipeline, + }" > <linked-graph-wrapper> <template #upstream> @@ -202,11 +201,12 @@ export default { :groups="column.groups" :action="column.status.action" :highlighted-jobs="highlightedJobs" - :show-stage-name="shouldShowStageName" + :is-stage-view="isStageView" :job-hovered="hoveredJobName" :source-job-hovered="hoveredSourceJobName" :pipeline-expanded="pipelineExpanded" :pipeline-id="pipeline.id" + :user-permissions="pipeline.userPermissions" @refreshPipelineGraph="$emit('refreshPipelineGraph')" @jobHover="setJob" @updateMeasurements="getMeasurements" 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 fb45738f8d1..a948a57c144 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue @@ -105,7 +105,7 @@ export default { return this.pipeline; } - return unwrapPipelineData(this.pipelineProjectPath, data); + return unwrapPipelineData(this.pipelineProjectPath, JSON.parse(JSON.stringify(data))); }, error(err) { this.reportFailure({ type: LOAD_FAILURE, skipSentry: true }); @@ -114,7 +114,7 @@ export default { this.$options.name, `| type: ${LOAD_FAILURE} , info: ${serializeLoadErrors(err)}`, { - projectPath: this.projectPath, + projectPath: this.pipelineProjectPath, pipelineIid: this.pipelineIid, pipelineStages: this.pipeline?.stages?.length || 0, nbOfDownstreams: this.pipeline?.downstream?.length || 0, diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue index b3c5af5418f..dd8a354511a 100644 --- a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue +++ b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue @@ -161,7 +161,7 @@ export default { :size="24" css-classes="gl-top-0 gl-pr-2" /> - <div v-else class="gl-pr-2"><gl-loading-icon inline /></div> + <div v-else class="gl-pr-2"><gl-loading-icon size="sm" inline /></div> <div class="gl-display-flex gl-flex-direction-column gl-w-13"> <span class="gl-text-truncate" data-testid="downstream-title"> {{ downstreamTitle }} 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 45113ecff41..52ee40bd982 100644 --- a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue +++ b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue @@ -118,7 +118,7 @@ export default { return this.currentPipeline; } - return unwrapPipelineData(projectPath, data); + return unwrapPipelineData(projectPath, JSON.parse(JSON.stringify(data))); }, result() { this.loadingPipelineId = null; 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 81d59f1ef65..d34ae8036ed 100644 --- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue @@ -40,6 +40,11 @@ export default { required: false, default: () => [], }, + isStageView: { + type: Boolean, + required: false, + default: false, + }, jobHovered: { type: String, required: false, @@ -50,16 +55,15 @@ export default { required: false, default: () => ({}), }, - showStageName: { - type: Boolean, - required: false, - default: false, - }, sourceJobHovered: { type: String, required: false, default: '', }, + userPermissions: { + type: Object, + required: true, + }, }, titleClasses: [ 'gl-font-weight-bold', @@ -69,20 +73,11 @@ export default { 'gl-pl-3', ], computed: { - /* - currentGroups and filteredGroups are part of - a test to hunt down a bug - (see: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/57142). - - They should be removed when the bug is rectified. - */ - currentGroups() { - return this.glFeatures.pipelineFilterJobs ? this.filteredGroups : this.groups; + canUpdatePipeline() { + return this.userPermissions.updatePipeline; }, - filteredGroups() { - return this.groups.map((group) => { - return { ...group, jobs: group.jobs.filter(Boolean) }; - }); + columnSpacingClass() { + return this.isStageView ? 'gl-px-6' : 'gl-px-9'; }, formattedTitle() { return capitalize(escape(this.name)); @@ -90,6 +85,9 @@ export default { hasAction() { return !isEmpty(this.action); }, + showStageName() { + return !this.isStageView; + }, }, errorCaptured(err, _vm, info) { reportToSentry('stage_column_component', `error: ${err}, info: ${info}`); @@ -123,7 +121,7 @@ export default { }; </script> <template> - <main-graph-wrapper class="gl-px-6" data-testid="stage-column"> + <main-graph-wrapper :class="columnSpacingClass" data-testid="stage-column"> <template #stages> <div data-testid="stage-column-title" @@ -132,7 +130,7 @@ export default { > <div>{{ formattedTitle }}</div> <action-component - v-if="hasAction" + v-if="hasAction && canUpdatePipeline" :action-icon="action.icon" :tooltip-text="action.title" :link="action.path" @@ -143,7 +141,7 @@ export default { </template> <template #jobs> <div - v-for="group in currentGroups" + v-for="group in groups" :id="groupId(group)" :key="getGroupId(group)" data-testid="stage-column-group" |