44 lines
1.4 KiB
Vue
44 lines
1.4 KiB
Vue
<script>
|
|
import { GlLoadingIcon } from '@gitlab/ui';
|
|
import StageColumnComponent from './stage_column_component.vue';
|
|
import GraphMixin from '../../mixins/graph_component_mixin';
|
|
import GraphWidthMixin from '~/pipelines/mixins/graph_width_mixin';
|
|
|
|
export default {
|
|
components: {
|
|
StageColumnComponent,
|
|
GlLoadingIcon,
|
|
},
|
|
mixins: [GraphMixin, GraphWidthMixin],
|
|
};
|
|
</script>
|
|
<template>
|
|
<div class="build-content middle-block js-pipeline-graph">
|
|
<div class="pipeline-visualization pipeline-graph pipeline-tab-content">
|
|
<div
|
|
:style="{
|
|
paddingLeft: `${graphLeftPadding}px`,
|
|
paddingRight: `${graphRightPadding}px`,
|
|
}"
|
|
>
|
|
<gl-loading-icon v-if="isLoading" class="m-auto" :size="3" />
|
|
|
|
<ul v-if="!isLoading" class="stage-column-list">
|
|
<stage-column-component
|
|
v-for="(stage, index) in graph"
|
|
:key="stage.name"
|
|
:class="{
|
|
'append-right-48': shouldAddRightMargin(index),
|
|
}"
|
|
:title="capitalizeStageName(stage.name)"
|
|
:groups="stage.groups"
|
|
:stage-connector-class="stageConnectorClass(index, stage)"
|
|
:is-first-column="isFirstColumn(index)"
|
|
:action="stage.status.action"
|
|
@refreshPipelineGraph="refreshPipelineGraph"
|
|
/>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|