diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/graph/graph_component.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/graph/graph_component.vue | 33 |
1 files changed, 27 insertions, 6 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..14c98847d93 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue @@ -5,11 +5,13 @@ import PipelineService from '../../services/pipeline_service'; import PipelineStore from '../../stores/pipeline_store'; import stageColumnComponent from './stage_column_component.vue'; + import loadingIcon from '../../../vue_shared/components/loading_icon.vue'; import '../../../flash'; export default { components: { stageColumnComponent, + loadingIcon, }, data() { @@ -64,6 +66,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> @@ -71,21 +91,22 @@ <div class="build-content middle-block js-pipeline-graph"> <div class="pipeline-visualization pipeline-graph"> <div class="text-center"> - <i + <loading-icon v-if="isLoading" - class="loading-icon fa fa-spin fa-spinner fa-3x" - aria-label="Loading" - aria-hidden="true" /> + size="3" + /> </div> <ul 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> |