graph_component.vue 1.78 KB
Newer Older
1 2
<script>
  import stageColumnComponent from './stage_column_component.vue';
3
  import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
4 5 6
  import '../../../flash';

  export default {
7 8 9 10 11 12 13 14 15 16 17
    props: {
      isLoading: {
        type: Boolean,
        required: true,
      },
      pipeline: {
        type: Object,
        required: true,
      },
    },

18 19
    components: {
      stageColumnComponent,
20
      loadingIcon,
21 22
    },

23 24 25 26
    computed: {
      graph() {
        return this.pipeline.details && this.pipeline.details.stages;
      },
27 28 29 30 31 32
    },

    methods: {
      capitalizeStageName(name) {
        return name.charAt(0).toUpperCase() + name.slice(1);
      },
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

      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;
      },
51 52 53 54 55 56 57
    },
  };
</script>
<template>
  <div class="build-content middle-block js-pipeline-graph">
    <div class="pipeline-visualization pipeline-graph">
      <div class="text-center">
58
        <loading-icon
59
          v-if="isLoading"
60 61
          size="3"
          />
62 63 64 65 66 67
      </div>

      <ul
        v-if="!isLoading"
        class="stage-column-list">
        <stage-column-component
68
          v-for="(stage, index) in graph"
69 70
          :title="capitalizeStageName(stage.name)"
          :jobs="stage.groups"
71 72 73
          :key="stage.name"
          :stage-connector-class="stageConnectorClass(index, stage)"
          :is-first-column="isFirstColumn(index)"/>
74 75 76 77
      </ul>
    </div>
  </div>
</template>