diff options
Diffstat (limited to 'app/assets/javascripts/pipelines')
-rw-r--r-- | app/assets/javascripts/pipelines/components/graph/graph_component.vue | 24 | ||||
-rw-r--r-- | app/assets/javascripts/pipelines/components/graph/stage_column_component.vue | 23 |
2 files changed, 43 insertions, 4 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue index a84161ef5e7..1f1b99ff401 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue @@ -64,6 +64,24 @@ capitalizeStageName(name) { return name.charAt(0).toUpperCase() + name.slice(1); }, + + isFirstColumn(index) { + return index === 0; + }, + + stageConnectorClass(index, stage) { + let className; + + // If it's the first stage column and only has one job + if (index === 0 && stage.groups.length === 1) { + className = 'no-margin'; + } else if (index > 0) { + // If it is not the first column + className = 'left-margin'; + } + + return className; + }, }, }; </script> @@ -82,10 +100,12 @@ v-if="!isLoading" class="stage-column-list"> <stage-column-component - v-for="stage in state.graph" + v-for="(stage, index) in state.graph" :title="capitalizeStageName(stage.name)" :jobs="stage.groups" - :key="stage.name"/> + :key="stage.name" + :stage-connector-class="stageConnectorClass(index, stage)" + :is-first-column="isFirstColumn(index)"/> </ul> </div> </div> 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 b7da185e280..9b1bbb0906f 100644 --- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue @@ -13,6 +13,18 @@ export default { type: Array, required: true, }, + + isFirstColumn: { + type: Boolean, + required: false, + default: false, + }, + + stageConnectorClass: { + type: String, + required: false, + default: '', + }, }, components: { @@ -28,20 +40,27 @@ export default { jobId(job) { return `ci-badge-${job.name}`; }, + + buildConnnectorClass(index) { + return index === 0 && !this.isFirstColumn ? 'left-connector' : ''; + }, }, }; </script> <template> - <li class="stage-column"> + <li + class="stage-column" + :class="stageConnectorClass"> <div class="stage-name"> {{title}} </div> <div class="builds-container"> <ul> <li - v-for="job in jobs" + v-for="(job, index) in jobs" :key="job.id" class="build" + :class="buildConnnectorClass(index)" :id="jobId(job)"> <div class="curve"></div> |