diff options
Diffstat (limited to 'app/assets/javascripts/ci/pipelines_page/components/pipeline_operations.vue')
-rw-r--r-- | app/assets/javascripts/ci/pipelines_page/components/pipeline_operations.vue | 113 |
1 files changed, 113 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/pipelines_page/components/pipeline_operations.vue b/app/assets/javascripts/ci/pipelines_page/components/pipeline_operations.vue new file mode 100644 index 00000000000..b05bdae65c4 --- /dev/null +++ b/app/assets/javascripts/ci/pipelines_page/components/pipeline_operations.vue @@ -0,0 +1,113 @@ +<script> +import { GlButton, GlTooltipDirective, GlModalDirective } from '@gitlab/ui'; +import Tracking from '~/tracking'; +import { BUTTON_TOOLTIP_RETRY, BUTTON_TOOLTIP_CANCEL, TRACKING_CATEGORIES } from '~/ci/constants'; +import eventHub from '../../event_hub'; +import PipelineMultiActions from './pipeline_multi_actions.vue'; +import PipelinesManualActions from './pipelines_manual_actions.vue'; + +export default { + BUTTON_TOOLTIP_RETRY, + BUTTON_TOOLTIP_CANCEL, + directives: { + GlTooltip: GlTooltipDirective, + GlModalDirective, + }, + components: { + GlButton, + PipelineMultiActions, + PipelinesManualActions, + }, + mixins: [Tracking.mixin()], + props: { + pipeline: { + type: Object, + required: true, + }, + cancelingPipeline: { + type: Number, + required: false, + default: null, + }, + }, + data() { + return { + isRetrying: false, + }; + }, + computed: { + hasActions() { + return ( + this.pipeline?.details?.has_manual_actions || this.pipeline?.details?.has_scheduled_actions + ); + }, + isCancelling() { + return this.cancelingPipeline === this.pipeline.id; + }, + }, + watch: { + pipeline() { + this.isRetrying = false; + }, + }, + methods: { + handleCancelClick() { + this.trackClick('click_cancel_button'); + eventHub.$emit('openConfirmationModal', { + pipeline: this.pipeline, + endpoint: this.pipeline.cancel_path, + }); + }, + handleRetryClick() { + this.isRetrying = true; + this.trackClick('click_retry_button'); + eventHub.$emit('retryPipeline', this.pipeline.retry_path); + }, + trackClick(action) { + this.track(action, { label: TRACKING_CATEGORIES.table }); + }, + }, +}; +</script> + +<template> + <div class="gl-text-right"> + <div class="btn-group"> + <pipelines-manual-actions v-if="hasActions" :iid="pipeline.iid" /> + + <gl-button + v-if="pipeline.flags.retryable" + v-gl-tooltip.hover + :aria-label="$options.BUTTON_TOOLTIP_RETRY" + :title="$options.BUTTON_TOOLTIP_RETRY" + :disabled="isRetrying" + :loading="isRetrying" + class="js-pipelines-retry-button" + data-qa-selector="pipeline_retry_button" + data-testid="pipelines-retry-button" + icon="retry" + variant="default" + category="secondary" + @click="handleRetryClick" + /> + + <gl-button + v-if="pipeline.flags.cancelable" + v-gl-tooltip.hover + v-gl-modal-directive="'confirmation-modal'" + :aria-label="$options.BUTTON_TOOLTIP_CANCEL" + :title="$options.BUTTON_TOOLTIP_CANCEL" + :loading="isCancelling" + :disabled="isCancelling" + icon="cancel" + variant="danger" + category="primary" + class="js-pipelines-cancel-button gl-ml-1" + data-testid="pipelines-cancel-button" + @click="handleCancelClick" + /> + + <pipeline-multi-actions :pipeline-id="pipeline.id" /> + </div> + </div> +</template> |