All files / app/assets/javascripts/ide/components/jobs stage.vue

100% Statements 12/12
100% Branches 4/4
100% Functions 8/8
100% Lines 12/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 944x                                             13x           13x     13x     13x 13x     12x       13x   13x   13x       2x     1x                                                                              
<!-- eslint-disable vue/multi-word-component-names -->
<script>
import { GlLoadingIcon, GlIcon, GlTooltipDirective, GlBadge } from '@gitlab/ui';
import { __ } from '~/locale';
import Item from './item.vue';
 
export default {
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  components: {
    GlIcon,
    GlBadge,
    Item,
    GlLoadingIcon,
  },
  props: {
    stage: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      showTooltip: false,
    };
  },
  computed: {
    collapseIcon() {
      return this.stage.isCollapsed ? 'chevron-lg-down' : 'chevron-lg-up';
    },
    showLoadingIcon() {
      return this.stage.isLoading && !this.stage.jobs.length;
    },
    stageTitle() {
      const prefix = __('Stage');
      return `${prefix}: ${this.stage.name}`;
    },
    jobsCount() {
      return this.stage.jobs.length;
    },
  },
  mounted() {
    const { stageTitle } = this.$refs;
 
    this.showTooltip = stageTitle.scrollWidth > stageTitle.offsetWidth;
 
    this.$emit('fetch', this.stage);
  },
  methods: {
    toggleCollapsed() {
      this.$emit('toggleCollapsed', this.stage.id);
    },
    clickViewLog(job) {
      this.$emit('clickViewLog', job);
    },
  },
};
</script>
 
<template>
  <div class="ide-stage card gl-mt-3">
    <div
      :class="{
        'border-bottom-0': stage.isCollapsed,
      }"
      class="card-header gl-align-items-center gl-cursor-pointer gl-display-flex"
      data-testid="card-header"
      @click="toggleCollapsed"
    >
      <strong
        ref="stageTitle"
        v-gl-tooltip="showTooltip"
        :title="showTooltip ? stage.name : null"
        data-container="body"
        class="gl-text-truncate"
        data-testid="stage-title"
      >
        {{ stageTitle }}
      </strong>
      <div v-if="!stage.isLoading || stage.jobs.length" class="gl-mr-3 gl-ml-2">
        <gl-badge>{{ jobsCount }}</gl-badge>
      </div>
      <gl-icon :name="collapseIcon" class="gl-absolute gl-right-5" />
    </div>
    <div v-show="!stage.isCollapsed" class="card-body p-0" data-testid="job-list">
      <gl-loading-icon v-if="showLoadingIcon" size="sm" />
      <template v-else>
        <item v-for="job in stage.jobs" :key="job.id" :job="job" @clickViewLog="clickViewLog" />
      </template>
    </div>
  </div>
</template>