<script> import $ from 'jquery'; import jobNameComponent from './job_name_component.vue'; import jobComponent from './job_component.vue'; import tooltip from '../../../vue_shared/directives/tooltip'; /** * Renders the dropdown for the pipeline graph. * * The following object should be provided as `job`: * * { * "id": 4256, * "name": "test", * "status": { * "icon": "icon_status_success", * "text": "passed", * "label": "passed", * "group": "success", * "details_path": "/root/ci-mock/builds/4256", * "action": { * "icon": "retry", * "title": "Retry", * "path": "/root/ci-mock/builds/4256/retry", * "method": "post" * } * } * } */ export default { directives: { tooltip, }, components: { jobComponent, jobNameComponent, }, props: { job: { type: Object, required: true, }, }, computed: { tooltipText() { return `${this.job.name} - ${this.job.status.label}`; }, }, mounted() { this.stopDropdownClickPropagation(); }, methods: { /** * When the user right clicks or cmd/ctrl + click in the job name * the dropdown should not be closed and the link should open in another tab, * so we stop propagation of the click event inside the dropdown. * * Since this component is rendered multiple times per page we need to guarantee we only * target the click event of this component. */ stopDropdownClickPropagation() { $(this.$el .querySelectorAll('.js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item')) .on('click', (e) => { e.stopPropagation(); }); }, }, }; </script> <template> <div class="ci-job-dropdown-container"> <button v-tooltip type="button" data-toggle="dropdown" data-container="body" class="dropdown-menu-toggle build-content" :title="tooltipText"> <job-name-component :name="job.name" :status="job.status" /> <span class="dropdown-counter-badge"> {{ job.size }} </span> </button> <ul class="dropdown-menu big-pipeline-graph-dropdown-menu js-grouped-pipeline-dropdown"> <li class="scrollable-menu"> <ul> <li v-for="(item, i) in job.jobs" :key="i"> <job-component :job="item" :is-dropdown="true" css-class-job-name="mini-pipeline-graph-dropdown-item" /> </li> </ul> </li> </ul> </div> </template>