2017-08-17 22:00:37 +05:30
|
|
|
<script>
|
2019-02-15 15:39:39 +05:30
|
|
|
import { GlLoadingIcon } from '@gitlab/ui';
|
2018-05-09 12:01:36 +05:30
|
|
|
import StageColumnComponent from './stage_column_component.vue';
|
2019-03-02 22:35:43 +05:30
|
|
|
import GraphMixin from '../../mixins/graph_component_mixin';
|
2017-08-17 22:00:37 +05:30
|
|
|
|
2018-05-09 12:01:36 +05:30
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
StageColumnComponent,
|
2018-12-13 13:39:08 +05:30
|
|
|
GlLoadingIcon,
|
2018-05-09 12:01:36 +05:30
|
|
|
},
|
2019-03-02 22:35:43 +05:30
|
|
|
mixins: [GraphMixin],
|
2018-05-09 12:01:36 +05:30
|
|
|
};
|
2017-08-17 22:00:37 +05:30
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div class="build-content middle-block js-pipeline-graph">
|
2018-03-27 19:54:05 +05:30
|
|
|
<div class="pipeline-visualization pipeline-graph pipeline-tab-content">
|
2019-03-02 22:35:43 +05:30
|
|
|
<div v-if="isLoading" class="m-auto"><gl-loading-icon :size="3" /></div>
|
2017-08-17 22:00:37 +05:30
|
|
|
|
2019-02-15 15:39:39 +05:30
|
|
|
<ul v-if="!isLoading" class="stage-column-list">
|
2017-08-17 22:00:37 +05:30
|
|
|
<stage-column-component
|
2017-09-10 17:25:29 +05:30
|
|
|
v-for="(stage, index) in graph"
|
2018-12-05 23:21:45 +05:30
|
|
|
:key="stage.name"
|
2017-08-17 22:00:37 +05:30
|
|
|
:title="capitalizeStageName(stage.name)"
|
2018-12-13 13:39:08 +05:30
|
|
|
:groups="stage.groups"
|
2017-08-17 22:00:37 +05:30
|
|
|
:stage-connector-class="stageConnectorClass(index, stage)"
|
2018-03-17 18:26:18 +05:30
|
|
|
:is-first-column="isFirstColumn(index)"
|
2018-10-15 14:42:47 +05:30
|
|
|
@refreshPipelineGraph="refreshPipelineGraph"
|
2018-03-17 18:26:18 +05:30
|
|
|
/>
|
2017-08-17 22:00:37 +05:30
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|