89 lines
2.4 KiB
Vue
89 lines
2.4 KiB
Vue
<script>
|
|
import { GlTooltipDirective } from '@gitlab/ui';
|
|
import CiIcon from '~/vue_shared/components/ci_icon.vue';
|
|
import JobItem from './job_item.vue';
|
|
import { reportToSentry } from './utils';
|
|
|
|
/**
|
|
* Renders the dropdown for the pipeline graph.
|
|
*
|
|
* The object provided as `group` corresponds to app/serializers/job_group_entity.rb.
|
|
*
|
|
*/
|
|
export default {
|
|
directives: {
|
|
GlTooltip: GlTooltipDirective,
|
|
},
|
|
components: {
|
|
JobItem,
|
|
CiIcon,
|
|
},
|
|
props: {
|
|
group: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
pipelineId: {
|
|
type: Number,
|
|
required: false,
|
|
default: -1,
|
|
},
|
|
},
|
|
computed: {
|
|
computedJobId() {
|
|
return this.pipelineId > -1 ? `${this.group.name}-${this.pipelineId}` : '';
|
|
},
|
|
tooltipText() {
|
|
const { name, status } = this.group;
|
|
return `${name} - ${status.label}`;
|
|
},
|
|
},
|
|
errorCaptured(err, _vm, info) {
|
|
reportToSentry('job_group_dropdown', `error: ${err}, info: ${info}`);
|
|
},
|
|
methods: {
|
|
pipelineActionRequestComplete() {
|
|
this.$emit('pipelineActionRequestComplete');
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<template>
|
|
<div :id="computedJobId" class="ci-job-dropdown-container dropdown dropright">
|
|
<button
|
|
v-gl-tooltip.hover="{ boundary: 'viewport' }"
|
|
:title="tooltipText"
|
|
type="button"
|
|
data-toggle="dropdown"
|
|
data-display="static"
|
|
class="dropdown-menu-toggle build-content gl-build-content"
|
|
>
|
|
<div class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
|
|
<span class="gl-display-flex gl-align-items-center gl-min-w-0">
|
|
<ci-icon :status="group.status" :size="24" class="gl-line-height-0" />
|
|
<span class="gl-text-truncate mw-70p gl-pl-3">
|
|
{{ group.name }}
|
|
</span>
|
|
</span>
|
|
|
|
<span class="gl-font-weight-100 gl-font-size-lg"> {{ group.size }} </span>
|
|
</div>
|
|
</button>
|
|
|
|
<ul class="dropdown-menu big-pipeline-graph-dropdown-menu js-grouped-pipeline-dropdown">
|
|
<li class="scrollable-menu">
|
|
<ul>
|
|
<li v-for="job in group.jobs" :key="job.id">
|
|
<job-item
|
|
:dropdown-length="group.size"
|
|
:job="job"
|
|
css-class-job-name="mini-pipeline-graph-dropdown-item"
|
|
@pipelineActionRequestComplete="pipelineActionRequestComplete"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|