debian-mirror-gitlab/app/assets/javascripts/pipelines/components/graph/graph_component.vue

<script>
  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
  import stageColumnComponent from './stage_column_component.vue';

  export default {
    components: {
      stageColumnComponent,
      loadingIcon,
    },

    props: {
      isLoading: {
        type: Boolean,
        required: true,
      },
      pipeline: {
        type: Object,
        required: true,
      },
    },

    computed: {
      graph() {
        return this.pipeline.details && this.pipeline.details.stages;
      },
    },

    methods: {
      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>
<template>
  <div class="build-content middle-block js-pipeline-graph">
    <div class="pipeline-visualization pipeline-graph">
      <div class="text-center">
        <loading-icon
          v-if="isLoading"
          size="3"
        />
      </div>

      <ul
        v-if="!isLoading"
        class="stage-column-list">
        <stage-column-component
          v-for="(stage, index) in graph"
          :title="capitalizeStageName(stage.name)"
          :jobs="stage.groups"
          :key="stage.name"
          :stage-connector-class="stageConnectorClass(index, stage)"
          :is-first-column="isFirstColumn(index)"
        />
      </ul>
    </div>
  </div>
</template>