debian-mirror-gitlab/app/assets/javascripts/jobs/components/header.vue

<script>
  import ciHeader from '../../vue_shared/components/header_ci_component.vue';
  import loadingIcon from '../../vue_shared/components/loading_icon.vue';

  export default {
    name: 'JobHeaderSection',
    components: {
      ciHeader,
      loadingIcon,
    },
    props: {
      job: {
        type: Object,
        required: true,
      },
      isLoading: {
        type: Boolean,
        required: true,
      },
    },
    data() {
      return {
        actions: this.getActions(),
      };
    },
    computed: {
      status() {
        return this.job && this.job.status;
      },
      shouldRenderContent() {
        return !this.isLoading && Object.keys(this.job).length;
      },
      /**
       * When job has not started the key will be `false`
       * When job started the key will be a string with a date.
       */
      jobStarted() {
        return !this.job.started === false;
      },
    },
    watch: {
      job() {
        this.actions = this.getActions();
      },
    },
    methods: {
      getActions() {
        const actions = [];

        if (this.job.new_issue_path) {
          actions.push({
            label: 'New issue',
            path: this.job.new_issue_path,
            cssClass: 'js-new-issue btn btn-new btn-inverted visible-md-block visible-lg-block',
            type: 'link',
          });
        }
        return actions;
      },
    },
  };
</script>
<template>
  <div class="js-build-header build-header top-area">
    <ci-header
      v-if="shouldRenderContent"
      :status="status"
      item-name="Job"
      :item-id="job.id"
      :time="job.created_at"
      :user="job.user"
      :actions="actions"
      :has-sidebar-button="true"
      :should-render-triggered-label="jobStarted"
    />
    <loading-icon
      v-if="isLoading"
      size="2"
      class="prepend-top-default append-bottom-default"
    />
  </div>
</template>