All files / app/assets/javascripts/pipelines/components/pipelines_list pipeline_stage.vue

100% Statements 26/26
100% Branches 7/7
100% Functions 12/12
100% Lines 26/26

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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159                            21x 21x 21x 21x 21x 21x                                                         595x             852x     852x         40x 1x           10x 10x 10x   11x 11x     10x 10x     1x 1x   1x           16x       2x     2x     872x           4165x                                                                                                      
<script>
/**
 * Renders each stage of the pipeline mini graph.
 *
 * Given the provided endpoint will make a request to
 * fetch the dropdown data when the stage is clicked.
 *
 * Request is made inside this component to make it reusable between:
 * 1. Pipelines main table
 * 2. Pipelines table in commit and Merge request views
 * 3. Merge request widget
 * 4. Commit widget
 */
 
import { GlDropdown, GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui';
import createFlash from '~/flash';
import axios from '~/lib/utils/axios_utils';
import { __, sprintf } from '~/locale';
import eventHub from '../../event_hub';
import JobItem from './job_item.vue';
 
export default {
  components: {
    GlIcon,
    GlLoadingIcon,
    GlDropdown,
    JobItem,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  props: {
    stage: {
      type: Object,
      required: true,
    },
    updateDropdown: {
      type: Boolean,
      required: false,
      default: false,
    },
    isMergeTrain: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      isLoading: false,
      dropdownContent: [],
    };
  },
  computed: {
    triggerButtonClass() {
      return `ci-status-icon-${this.stage.status.group}`;
    },
    borderlessIcon() {
      return `${this.stage.status.icon}_borderless`;
    },
  },
  watch: {
    updateDropdown() {
      if (this.updateDropdown && this.isDropdownOpen() && !this.isLoading) {
        this.fetchJobs();
      }
    },
  },
  methods: {
    onShowDropdown() {
      eventHub.$emit('clickedDropdown');
      this.isLoading = true;
      this.fetchJobs();
    },
    fetchJobs() {
      axios
        .get(this.stage.dropdown_path)
        .then(({ data }) => {
          this.dropdownContent = data.latest_statuses;
          this.isLoading = false;
        })
        .catch(() => {
          this.$refs.dropdown.hide();
          this.isLoading = false;
 
          createFlash({
            message: __('Something went wrong on our end.'),
          });
        });
    },
    isDropdownOpen() {
      return this.$el.classList.contains('show');
    },
    pipelineActionRequestComplete() {
      // close the dropdown in MR widget
      this.$refs.dropdown.hide();
 
      // warn the pipelines table to update
      this.$emit('pipelineActionRequestComplete');
    },
    stageAriaLabel(title) {
      return sprintf(__('View Stage: %{title}'), { title });
    },
  },
};
</script>
 
<template>
  <gl-dropdown
    ref="dropdown"
    v-gl-tooltip.hover.ds0
    v-gl-tooltip="stage.title"
    data-testid="mini-pipeline-graph-dropdown"
    variant="link"
    :aria-label="stageAriaLabel(stage.title)"
    :lazy="true"
    :popper-opts="{ placement: 'bottom' }"
    :toggle-class="['mini-pipeline-graph-dropdown-toggle', triggerButtonClass]"
    menu-class="mini-pipeline-graph-dropdown-menu"
    @show="onShowDropdown"
  >
    <template #button-content>
      <span class="gl-pointer-events-none">
        <gl-icon :name="borderlessIcon" />
      </span>
    </template>
    <gl-loading-icon v-if="isLoading" size="sm" />
    <ul
      v-else
      class="js-builds-dropdown-list scrollable-menu"
      data-testid="mini-pipeline-graph-dropdown-menu-list"
    >
      <li v-for="job in dropdownContent" :key="job.id">
        <job-item
          :dropdown-length="dropdownContent.length"
          :job="job"
          css-class-job-name="mini-pipeline-graph-dropdown-item"
          @pipelineActionRequestComplete="pipelineActionRequestComplete"
        />
      </li>
      <template v-if="isMergeTrain">
        <li class="gl-new-dropdown-divider" role="presentation">
          <hr role="separator" aria-orientation="horizontal" class="dropdown-divider" />
        </li>
        <li>
          <div
            class="gl-display-flex gl-align-items-center"
            data-testid="warning-message-merge-trains"
          >
            <div class="menu-item gl-font-sm gl-text-gray-300!">
              {{ s__('Pipeline|Merge train pipeline jobs can not be retried') }}
            </div>
          </div>
        </li>
      </template>
    </ul>
  </gl-dropdown>
</template>