gitlab-org--gitlab-foss/app/assets/javascripts/jobs/components/sidebar_details_block.vue

<script>
  import detailRow from './sidebar_detail_row.vue';
  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
  import timeagoMixin from '../../vue_shared/mixins/timeago';
  import { timeIntervalInWords } from '../../lib/utils/datetime_utility';

  export default {
    name: 'SidebarDetailsBlock',
    props: {
      job: {
        type: Object,
        required: true,
      },
      isLoading: {
        type: Boolean,
        required: true,
      },
    },
    mixins: [
      timeagoMixin,
    ],
    components: {
      detailRow,
      loadingIcon,
    },
    computed: {
      shouldRenderContent() {
        return !this.isLoading && Object.keys(this.job).length > 0;
      },
      coverage() {
        return `${this.job.coverage}%`;
      },
      duration() {
        return timeIntervalInWords(this.job.duration);
      },
      queued() {
        return timeIntervalInWords(this.job.queued);
      },
      runnerId() {
        return `#${this.job.runner.id}`;
      },
      renderBlock() {
        return this.job.merge_request ||
          this.job.duration ||
          this.job.finished_data ||
          this.job.erased_at ||
          this.job.queued ||
          this.job.runner ||
          this.job.coverage ||
          this.job.tags.length ||
          this.job.cancel_path;
      },
    },
  };
</script>
<template>
  <div>
    <template v-if="shouldRenderContent">
      <div
        class="block retry-link"
        v-if="job.retry_path || job.new_issue_path">
        <a
          v-if="job.new_issue_path"
          class="js-new-issue btn btn-new btn-inverted"
          :href="job.new_issue_path">
          New issue
        </a>
        <a
          v-if="job.retry_path"
          class="js-retry-job btn btn-inverted-secondary"
          :href="job.retry_path"
          data-method="post"
          rel="nofollow">
          Retry
        </a>
      </div>
      <div :class="{block : renderBlock }">
        <p
          class="build-detail-row js-job-mr"
          v-if="job.merge_request">
          <span
            class="build-light-text">
            Merge Request:
          </span>
          <a :href="job.merge_request.path">
            !{{job.merge_request.iid}}
          </a>
        </p>

        <detail-row
          class="js-job-duration"
          v-if="job.duration"
          title="Duration"
          :value="duration"
          />
        <detail-row
          class="js-job-finished"
          v-if="job.finished_at"
          title="Finished"
          :value="timeFormated(job.finished_at)"
          />
        <detail-row
          class="js-job-erased"
          v-if="job.erased_at"
          title="Erased"
          :value="timeFormated(job.erased_at)"
          />
        <detail-row
          class="js-job-queued"
          v-if="job.queued"
          title="Queued"
          :value="queued"
          />
        <detail-row
          class="js-job-runner"
          v-if="job.runner"
          title="Runner"
          :value="runnerId"
          />
        <detail-row
          class="js-job-coverage"
          v-if="job.coverage"
          title="Coverage"
          :value="coverage"
          />
        <p
          class="build-detail-row js-job-tags"
          v-if="job.tags.length">
          <span
            class="build-light-text">
            Tags:
          </span>
          <span
            v-for="tag in job.tags"
            key="tag"
            class="label label-primary">
            {{tag}}
          </span>
        </p>

        <div
          v-if="job.cancel_path"
          class="btn-group prepend-top-5"
          role="group">
          <a
            class="js-cancel-job btn btn-sm btn-default"
            :href="job.cancel_path"
            data-method="post"
            rel="nofollow">
            Cancel
          </a>
        </div>
      </div>
    </template>
    <loading-icon
      class="prepend-top-10"
      v-if="isLoading"
      size="2"
      />
  </div>
</template>