diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/header_component.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/header_component.vue | 72 |
1 files changed, 59 insertions, 13 deletions
diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue index b26f28fa6af..741609c908a 100644 --- a/app/assets/javascripts/pipelines/components/header_component.vue +++ b/app/assets/javascripts/pipelines/components/header_component.vue @@ -1,16 +1,22 @@ <script> import { GlAlert, GlButton, GlLoadingIcon, GlModal, GlModalDirective } from '@gitlab/ui'; import { __ } from '~/locale'; -import axios from '~/lib/utils/axios_utils'; import ciHeader from '~/vue_shared/components/header_ci_component.vue'; import { setUrlFragment, redirectTo } from '~/lib/utils/url_utility'; import getPipelineQuery from '../graphql/queries/get_pipeline_header_data.query.graphql'; +import deletePipelineMutation from '../graphql/mutations/delete_pipeline.mutation.graphql'; +import retryPipelineMutation from '../graphql/mutations/retry_pipeline.mutation.graphql'; +import cancelPipelineMutation from '../graphql/mutations/cancel_pipeline.mutation.graphql'; import { LOAD_FAILURE, POST_FAILURE, DELETE_FAILURE, DEFAULT } from '../constants'; const DELETE_MODAL_ID = 'pipeline-delete-modal'; +const POLL_INTERVAL = 10000; export default { name: 'PipelineHeaderSection', + pipelineCancel: 'pipelineCancel', + pipelineRetry: 'pipelineRetry', + finishedStatuses: ['FAILED', 'SUCCESS', 'CANCELED'], components: { ciHeader, GlAlert, @@ -28,7 +34,7 @@ export default { [DEFAULT]: __('An unknown error occurred.'), }, inject: { - // Receive `cancel`, `delete`, `fullProject` and `retry` + // Receive `fullProject` and `pipelinesPath` paths: { default: {}, }, @@ -52,7 +58,7 @@ export default { error() { this.reportFailure(LOAD_FAILURE); }, - pollInterval: 10000, + pollInterval: POLL_INTERVAL, watchLoading(isLoading) { if (!isLoading) { // To ensure apollo has updated the cache, @@ -90,6 +96,9 @@ export default { status() { return this.pipeline?.status; }, + isFinished() { + return this.$options.finishedStatuses.includes(this.status); + }, shouldRenderContent() { return !this.isLoadingInitialQuery && this.hasPipelineData; }, @@ -118,35 +127,72 @@ export default { } }, }, + watch: { + isFinished(finished) { + if (finished) { + this.$apollo.queries.pipeline.stopPolling(); + } + }, + }, methods: { reportFailure(errorType) { this.failureType = errorType; }, - async postAction(path) { + async postPipelineAction(name, mutation) { try { - await axios.post(path); - this.$apollo.queries.pipeline.refetch(); + const { + data: { + [name]: { errors }, + }, + } = await this.$apollo.mutate({ + mutation, + variables: { id: this.pipeline.id }, + }); + + if (errors.length > 0) { + this.reportFailure(POST_FAILURE); + } else { + await this.$apollo.queries.pipeline.refetch(); + if (!this.isFinished) { + this.$apollo.queries.pipeline.startPolling(POLL_INTERVAL); + } + } } catch { this.reportFailure(POST_FAILURE); } }, - async cancelPipeline() { + cancelPipeline() { this.isCanceling = true; - this.postAction(this.paths.cancel); + this.postPipelineAction(this.$options.pipelineCancel, cancelPipelineMutation); }, - async retryPipeline() { + retryPipeline() { this.isRetrying = true; - this.postAction(this.paths.retry); + this.postPipelineAction(this.$options.pipelineRetry, retryPipelineMutation); }, async deletePipeline() { this.isDeleting = true; this.$apollo.queries.pipeline.stopPolling(); try { - const { request } = await axios.delete(this.paths.delete); - redirectTo(setUrlFragment(request.responseURL, 'delete_success')); + const { + data: { + pipelineDestroy: { errors }, + }, + } = await this.$apollo.mutate({ + mutation: deletePipelineMutation, + variables: { + id: this.pipeline.id, + }, + }); + + if (errors.length > 0) { + this.reportFailure(DELETE_FAILURE); + this.isDeleting = false; + } else { + redirectTo(setUrlFragment(this.paths.pipelinesPath, 'delete_success')); + } } catch { - this.$apollo.queries.pipeline.startPolling(); + this.$apollo.queries.pipeline.startPolling(POLL_INTERVAL); this.reportFailure(DELETE_FAILURE); this.isDeleting = false; } |