BigW Consortium Gitlab

header_component.vue 2.18 KB
Newer Older
1
<script>
2 3 4
  import ciHeader from '../../vue_shared/components/header_ci_component.vue';
  import eventHub from '../event_hub';
  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
5

6 7 8 9 10
  export default {
    name: 'PipelineHeaderSection',
    components: {
      ciHeader,
      loadingIcon,
11
    },
12 13 14 15 16 17 18 19 20
    props: {
      pipeline: {
        type: Object,
        required: true,
      },
      isLoading: {
        type: Boolean,
        required: true,
      },
21
    },
22 23 24 25
    data() {
      return {
        actions: this.getActions(),
      };
26
    },
27 28 29 30 31 32 33 34

    computed: {
      status() {
        return this.pipeline.details && this.pipeline.details.status;
      },
      shouldRenderContent() {
        return !this.isLoading && Object.keys(this.pipeline).length;
      },
35 36
    },

37 38 39 40 41
    watch: {
      pipeline() {
        this.actions = this.getActions();
      },
    },
42

43 44 45
    methods: {
      postAction(action) {
        const index = this.actions.indexOf(action);
46

47
        this.$set(this.actions[index], 'isLoading', true);
48

49 50
        eventHub.$emit('headerPostAction', action);
      },
51

52 53
      getActions() {
        const actions = [];
54

55 56 57 58 59 60 61 62 63
        if (this.pipeline.retry_path) {
          actions.push({
            label: 'Retry',
            path: this.pipeline.retry_path,
            cssClass: 'js-retry-button btn btn-inverted-secondary',
            type: 'button',
            isLoading: false,
          });
        }
64

65 66 67 68 69 70 71 72 73
        if (this.pipeline.cancel_path) {
          actions.push({
            label: 'Cancel running',
            path: this.pipeline.cancel_path,
            cssClass: 'js-btn-cancel-pipeline btn btn-danger',
            type: 'button',
            isLoading: false,
          });
        }
74

75 76
        return actions;
      },
77
    },
78
  };
79 80 81 82 83 84 85 86 87 88 89 90
</script>
<template>
  <div class="pipeline-header-container">
    <ci-header
      v-if="shouldRenderContent"
      :status="status"
      item-name="Pipeline"
      :item-id="pipeline.id"
      :time="pipeline.created_at"
      :user="pipeline.user"
      :actions="actions"
      @actionClicked="postAction"
91
    />
92
    <loading-icon
93
      v-if="isLoading"
94
      size="2"
95
      class="prepend-top-default append-bottom-default"
96
    />
97 98
  </div>
</template>