Commit 103d179b authored by Frédéric Caplette's avatar Frédéric Caplette Committed by Natalia Tepluhina

Fix expand up and downstream pipelines

In the pipeline graph, we can now
expand pipelines without the graph
collapsing
parent 390da1f4
...@@ -99,7 +99,17 @@ export default { ...@@ -99,7 +99,17 @@ export default {
downstreamNode.classList.contains('child-pipeline') ? 15 : 30, downstreamNode.classList.contains('child-pipeline') ? 15 : 30,
); );
this.$emit('onClickTriggered', this.pipeline, pipeline); /**
* If the expanded trigger is defined and the id is different than the
* pipeline we clicked, then it means we clicked on a sibling downstream link
* and we want to reset the pipeline store. Triggering the reset without
* this condition would mean not allowing downstreams of downstreams to expand
*/
if (this.expandedTriggered?.id !== pipeline.id) {
this.$emit('onResetTriggered', this.pipeline, pipeline);
}
this.$emit('onClickTriggered', pipeline);
}, },
calculateMarginTop(downstreamNode, pixelDiff) { calculateMarginTop(downstreamNode, pixelDiff) {
return `${downstreamNode.offsetTop - downstreamNode.offsetParent.offsetTop - pixelDiff}px`; return `${downstreamNode.offsetTop - downstreamNode.offsetParent.offsetTop - pixelDiff}px`;
...@@ -136,9 +146,7 @@ export default { ...@@ -136,9 +146,7 @@ export default {
:pipeline="expandedTriggeredBy" :pipeline="expandedTriggeredBy"
:is-linked-pipeline="true" :is-linked-pipeline="true"
:mediator="mediator" :mediator="mediator"
@onClickTriggeredBy=" @onClickTriggeredBy="clickTriggeredByPipeline"
(parentPipeline, pipeline) => clickTriggeredByPipeline(parentPipeline, pipeline)
"
@refreshPipelineGraph="requestRefreshPipelineGraph" @refreshPipelineGraph="requestRefreshPipelineGraph"
/> />
...@@ -148,9 +156,7 @@ export default { ...@@ -148,9 +156,7 @@ export default {
:column-title="__('Upstream')" :column-title="__('Upstream')"
:project-id="pipelineProjectId" :project-id="pipelineProjectId"
graph-position="left" graph-position="left"
@linkedPipelineClick=" @linkedPipelineClick="$emit('onClickTriggeredBy', $event)"
linkedPipeline => $emit('onClickTriggeredBy', pipeline, linkedPipeline)
"
/> />
<ul <ul
...@@ -197,9 +203,7 @@ export default { ...@@ -197,9 +203,7 @@ export default {
:is-linked-pipeline="true" :is-linked-pipeline="true"
:style="{ 'margin-top': downstreamMarginTop }" :style="{ 'margin-top': downstreamMarginTop }"
:mediator="mediator" :mediator="mediator"
@onClickTriggered=" @onClickTriggered="clickTriggeredPipeline"
(parentPipeline, pipeline) => clickTriggeredPipeline(parentPipeline, pipeline)
"
@refreshPipelineGraph="requestRefreshPipelineGraph" @refreshPipelineGraph="requestRefreshPipelineGraph"
/> />
</div> </div>
......
...@@ -27,9 +27,9 @@ export default { ...@@ -27,9 +27,9 @@ export default {
* @param {String} resetStoreKey Store key for the visible pipeline that will need to be reset * @param {String} resetStoreKey Store key for the visible pipeline that will need to be reset
* @param {Object} pipeline The clicked pipeline * @param {Object} pipeline The clicked pipeline
*/ */
clickPipeline(parentPipeline, pipeline, openMethod, closeMethod) { clickPipeline(pipeline, openMethod, closeMethod) {
if (!pipeline.isExpanded) { if (!pipeline.isExpanded) {
this.mediator.store[openMethod](parentPipeline, pipeline); this.mediator.store[openMethod](pipeline);
this.mediator.store.toggleLoading(pipeline); this.mediator.store.toggleLoading(pipeline);
this.mediator.poll.stop(); this.mediator.poll.stop();
...@@ -41,21 +41,14 @@ export default { ...@@ -41,21 +41,14 @@ export default {
this.mediator.poll.enable({ data: this.mediator.getExpandedParameters() }); this.mediator.poll.enable({ data: this.mediator.getExpandedParameters() });
} }
}, },
clickTriggeredByPipeline(parentPipeline, pipeline) { resetTriggeredPipelines(parentPipeline, pipeline) {
this.clickPipeline( this.mediator.store.resetTriggeredPipelines(parentPipeline, pipeline);
parentPipeline,
pipeline,
'openTriggeredByPipeline',
'closeTriggeredByPipeline',
);
}, },
clickTriggeredPipeline(parentPipeline, pipeline) { clickTriggeredByPipeline(pipeline) {
this.clickPipeline( this.clickPipeline(pipeline, 'openPipeline', 'closePipeline');
parentPipeline, },
pipeline, clickTriggeredPipeline(pipeline) {
'openTriggeredPipeline', this.clickPipeline(pipeline, 'openPipeline', 'closePipeline');
'closeTriggeredPipeline',
);
}, },
requestRefreshPipelineGraph() { requestRefreshPipelineGraph() {
// When an action is clicked // When an action is clicked
......
...@@ -42,10 +42,10 @@ export default () => { ...@@ -42,10 +42,10 @@ export default () => {
}, },
on: { on: {
refreshPipelineGraph: this.requestRefreshPipelineGraph, refreshPipelineGraph: this.requestRefreshPipelineGraph,
onClickTriggeredBy: (parentPipeline, pipeline) => onResetTriggered: (parentPipeline, pipeline) =>
this.clickTriggeredByPipeline(parentPipeline, pipeline), this.resetTriggeredPipelines(parentPipeline, pipeline),
onClickTriggered: (parentPipeline, pipeline) => onClickTriggeredBy: pipeline => this.clickTriggeredByPipeline(pipeline),
this.clickTriggeredPipeline(parentPipeline, pipeline), onClickTriggered: pipeline => this.clickTriggeredPipeline(pipeline),
}, },
}); });
}, },
......
...@@ -54,16 +54,24 @@ export default class PipelineStore { ...@@ -54,16 +54,24 @@ export default class PipelineStore {
*/ */
parseTriggeredByPipelines(oldPipeline = {}, newPipeline) { parseTriggeredByPipelines(oldPipeline = {}, newPipeline) {
// keep old value in case it's opened because we're polling // keep old value in case it's opened because we're polling
Vue.set(newPipeline, 'isExpanded', oldPipeline.isExpanded || false); Vue.set(newPipeline, 'isExpanded', oldPipeline.isExpanded || false);
// add isLoading property // add isLoading property
Vue.set(newPipeline, 'isLoading', false); Vue.set(newPipeline, 'isLoading', false);
// Because there can only ever be one `triggered_by` for any given pipeline,
// the API returns an object for the value instead of an Array. However,
// it's easier to deal with an array in the FE so we convert it.
if (newPipeline.triggered_by) { if (newPipeline.triggered_by) {
if (!Array.isArray(newPipeline.triggered_by)) { if (!Array.isArray(newPipeline.triggered_by)) {
Object.assign(newPipeline, { triggered_by: [newPipeline.triggered_by] }); Object.assign(newPipeline, { triggered_by: [newPipeline.triggered_by] });
} }
this.parseTriggeredByPipelines(oldPipeline, newPipeline.triggered_by[0]);
if (newPipeline.triggered_by?.length > 0) {
newPipeline.triggered_by.forEach(el => {
const oldTriggeredBy = oldPipeline.triggered_by?.find(element => element.id === el.id);
this.parseTriggeredPipelines(oldTriggeredBy, el);
});
}
} }
} }
......
---
title: Resolve Unable to expand multiple downstream pipelines.
merge_request: 27029
author:
type: fixed
...@@ -159,7 +159,6 @@ describe('graph component', () => { ...@@ -159,7 +159,6 @@ describe('graph component', () => {
expect(component.$emit).toHaveBeenCalledWith( expect(component.$emit).toHaveBeenCalledWith(
'onClickTriggeredBy', 'onClickTriggeredBy',
component.pipeline,
component.pipeline.triggered_by[0], component.pipeline.triggered_by[0],
); );
}); });
...@@ -196,7 +195,6 @@ describe('graph component', () => { ...@@ -196,7 +195,6 @@ describe('graph component', () => {
expect(component.$emit).toHaveBeenCalledWith( expect(component.$emit).toHaveBeenCalledWith(
'onClickTriggered', 'onClickTriggered',
component.pipeline,
component.pipeline.triggered[0], component.pipeline.triggered[0],
); );
}); });
......
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