debian-mirror-gitlab/app/assets/javascripts/pipelines/components/header_component.vue

268 lines
7.3 KiB
Vue
Raw Normal View History

2017-09-10 17:25:29 +05:30
<script>
2021-01-03 14:25:43 +05:30
import { GlAlert, GlButton, GlLoadingIcon, GlModal, GlModalDirective } from '@gitlab/ui';
2019-09-30 21:07:59 +05:30
import { __ } from '~/locale';
2021-01-03 14:25:43 +05:30
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';
2021-01-29 00:20:46 +05:30
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';
2021-01-03 14:25:43 +05:30
import { LOAD_FAILURE, POST_FAILURE, DELETE_FAILURE, DEFAULT } from '../constants';
2017-09-10 17:25:29 +05:30
2020-03-13 15:44:24 +05:30
const DELETE_MODAL_ID = 'pipeline-delete-modal';
2021-01-29 00:20:46 +05:30
const POLL_INTERVAL = 10000;
2020-03-13 15:44:24 +05:30
2018-11-08 19:23:39 +05:30
export default {
name: 'PipelineHeaderSection',
2021-01-29 00:20:46 +05:30
pipelineCancel: 'pipelineCancel',
pipelineRetry: 'pipelineRetry',
finishedStatuses: ['FAILED', 'SUCCESS', 'CANCELED'],
2018-11-08 19:23:39 +05:30
components: {
ciHeader,
2021-01-03 14:25:43 +05:30
GlAlert,
GlButton,
2018-12-13 13:39:08 +05:30
GlLoadingIcon,
2020-03-13 15:44:24 +05:30
GlModal,
},
directives: {
GlModal: GlModalDirective,
2018-11-08 19:23:39 +05:30
},
2021-01-03 14:25:43 +05:30
errorTexts: {
[LOAD_FAILURE]: __('We are currently unable to fetch data for the pipeline header.'),
[POST_FAILURE]: __('An error occurred while making the request.'),
[DELETE_FAILURE]: __('An error occurred while deleting the pipeline.'),
[DEFAULT]: __('An unknown error occurred.'),
},
inject: {
2021-01-29 00:20:46 +05:30
// Receive `fullProject` and `pipelinesPath`
2021-01-03 14:25:43 +05:30
paths: {
default: {},
},
pipelineId: {
default: '',
2017-09-10 17:25:29 +05:30
},
2021-01-03 14:25:43 +05:30
pipelineIid: {
default: '',
},
},
apollo: {
pipeline: {
query: getPipelineQuery,
variables() {
return {
fullPath: this.paths.fullProject,
iid: this.pipelineIid,
};
},
update: data => data.project.pipeline,
error() {
this.reportFailure(LOAD_FAILURE);
},
2021-01-29 00:20:46 +05:30
pollInterval: POLL_INTERVAL,
2021-01-03 14:25:43 +05:30
watchLoading(isLoading) {
if (!isLoading) {
// To ensure apollo has updated the cache,
// we only remove the loading state in sync with GraphQL
this.isCanceling = false;
this.isRetrying = false;
}
},
2017-09-10 17:25:29 +05:30
},
2018-11-08 19:23:39 +05:30
},
data() {
return {
2021-01-03 14:25:43 +05:30
pipeline: null,
failureType: null,
2020-03-13 15:44:24 +05:30
isCanceling: false,
isRetrying: false,
isDeleting: false,
2018-11-08 19:23:39 +05:30
};
},
computed: {
2020-03-13 15:44:24 +05:30
deleteModalConfirmationText() {
return __(
'Are you sure you want to delete this pipeline? Doing so will expire all pipeline caches and delete all related objects, such as builds, logs, artifacts, and triggers. This action cannot be undone.',
);
2018-03-17 18:26:18 +05:30
},
2021-01-03 14:25:43 +05:30
hasError() {
return this.failureType;
},
hasPipelineData() {
return Boolean(this.pipeline);
},
isLoadingInitialQuery() {
return this.$apollo.queries.pipeline.loading && !this.hasPipelineData;
},
status() {
return this.pipeline?.status;
},
2021-01-29 00:20:46 +05:30
isFinished() {
return this.$options.finishedStatuses.includes(this.status);
},
2021-01-03 14:25:43 +05:30
shouldRenderContent() {
return !this.isLoadingInitialQuery && this.hasPipelineData;
},
failure() {
switch (this.failureType) {
case LOAD_FAILURE:
return {
text: this.$options.errorTexts[LOAD_FAILURE],
variant: 'danger',
};
case POST_FAILURE:
return {
text: this.$options.errorTexts[POST_FAILURE],
variant: 'danger',
};
case DELETE_FAILURE:
return {
text: this.$options.errorTexts[DELETE_FAILURE],
variant: 'danger',
};
default:
return {
text: this.$options.errorTexts[DEFAULT],
variant: 'danger',
};
}
},
2018-11-08 19:23:39 +05:30
},
2021-01-29 00:20:46 +05:30
watch: {
isFinished(finished) {
if (finished) {
this.$apollo.queries.pipeline.stopPolling();
}
},
},
2018-11-08 19:23:39 +05:30
methods: {
2021-01-03 14:25:43 +05:30
reportFailure(errorType) {
this.failureType = errorType;
},
2021-01-29 00:20:46 +05:30
async postPipelineAction(name, mutation) {
2021-01-03 14:25:43 +05:30
try {
2021-01-29 00:20:46 +05:30
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);
}
}
2021-01-03 14:25:43 +05:30
} catch {
this.reportFailure(POST_FAILURE);
}
},
2021-01-29 00:20:46 +05:30
cancelPipeline() {
2020-03-13 15:44:24 +05:30
this.isCanceling = true;
2021-01-29 00:20:46 +05:30
this.postPipelineAction(this.$options.pipelineCancel, cancelPipelineMutation);
2018-11-08 19:23:39 +05:30
},
2021-01-29 00:20:46 +05:30
retryPipeline() {
2020-03-13 15:44:24 +05:30
this.isRetrying = true;
2021-01-29 00:20:46 +05:30
this.postPipelineAction(this.$options.pipelineRetry, retryPipelineMutation);
2020-03-13 15:44:24 +05:30
},
2021-01-03 14:25:43 +05:30
async deletePipeline() {
2020-03-13 15:44:24 +05:30
this.isDeleting = true;
2021-01-03 14:25:43 +05:30
this.$apollo.queries.pipeline.stopPolling();
try {
2021-01-29 00:20:46 +05:30
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'));
}
2021-01-03 14:25:43 +05:30
} catch {
2021-01-29 00:20:46 +05:30
this.$apollo.queries.pipeline.startPolling(POLL_INTERVAL);
2021-01-03 14:25:43 +05:30
this.reportFailure(DELETE_FAILURE);
this.isDeleting = false;
}
2017-09-10 17:25:29 +05:30
},
2018-11-08 19:23:39 +05:30
},
2020-03-13 15:44:24 +05:30
DELETE_MODAL_ID,
2018-11-08 19:23:39 +05:30
};
2017-09-10 17:25:29 +05:30
</script>
<template>
<div class="pipeline-header-container">
2021-01-03 14:25:43 +05:30
<gl-alert v-if="hasError" :variant="failure.variant">{{ failure.text }}</gl-alert>
2017-09-10 17:25:29 +05:30
<ci-header
v-if="shouldRenderContent"
2021-01-03 14:25:43 +05:30
:status="pipeline.detailedStatus"
:time="pipeline.createdAt"
2017-09-10 17:25:29 +05:30
:user="pipeline.user"
2021-01-03 14:25:43 +05:30
:item-id="Number(pipelineId)"
2018-11-08 19:23:39 +05:30
item-name="Pipeline"
2020-03-13 15:44:24 +05:30
>
2020-10-24 23:57:45 +05:30
<gl-button
2021-01-03 14:25:43 +05:30
v-if="pipeline.retryable"
2020-03-13 15:44:24 +05:30
:loading="isRetrying"
:disabled="isRetrying"
2020-10-24 23:57:45 +05:30
category="secondary"
variant="info"
2021-01-03 14:25:43 +05:30
data-testid="retryPipeline"
class="js-retry-button"
2020-03-13 15:44:24 +05:30
@click="retryPipeline()"
2020-10-24 23:57:45 +05:30
>
{{ __('Retry') }}
</gl-button>
2020-03-13 15:44:24 +05:30
2020-10-24 23:57:45 +05:30
<gl-button
2021-01-03 14:25:43 +05:30
v-if="pipeline.cancelable"
2020-03-13 15:44:24 +05:30
:loading="isCanceling"
:disabled="isCanceling"
2021-02-22 17:27:13 +05:30
class="gl-ml-3"
2020-10-24 23:57:45 +05:30
variant="danger"
2021-01-03 14:25:43 +05:30
data-testid="cancelPipeline"
2020-03-13 15:44:24 +05:30
@click="cancelPipeline()"
2020-10-24 23:57:45 +05:30
>
{{ __('Cancel running') }}
</gl-button>
2020-03-13 15:44:24 +05:30
2020-10-24 23:57:45 +05:30
<gl-button
2021-01-03 14:25:43 +05:30
v-if="pipeline.userPermissions.destroyPipeline"
2020-03-13 15:44:24 +05:30
v-gl-modal="$options.DELETE_MODAL_ID"
:loading="isDeleting"
:disabled="isDeleting"
2020-10-24 23:57:45 +05:30
class="gl-ml-3"
variant="danger"
2021-01-03 14:25:43 +05:30
category="secondary"
data-testid="deletePipeline"
2020-10-24 23:57:45 +05:30
>
{{ __('Delete') }}
</gl-button>
2020-03-13 15:44:24 +05:30
</ci-header>
2021-01-03 14:25:43 +05:30
<gl-loading-icon v-if="isLoadingInitialQuery" size="lg" class="gl-mt-3 gl-mb-3" />
2020-03-13 15:44:24 +05:30
<gl-modal
:modal-id="$options.DELETE_MODAL_ID"
:title="__('Delete pipeline')"
:ok-title="__('Delete pipeline')"
ok-variant="danger"
@ok="deletePipeline()"
>
<p>
{{ deleteModalConfirmationText }}
</p>
</gl-modal>
2017-09-10 17:25:29 +05:30
</div>
</template>