summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/pipelines
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2020-01-29 21:09:22 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2020-01-29 21:09:22 +0000
commit27d314277bfe7fffec215efa9b1833a23bb82940 (patch)
tree898c606409718e70579beea62174624f84e28629 /app/assets/javascripts/pipelines
parent6b9d3a4e8351e662c4586b24bb152de78ae9e3bf (diff)
downloadgitlab-ce-27d314277bfe7fffec215efa9b1833a23bb82940.tar.gz
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/pipelines')
-rw-r--r--app/assets/javascripts/pipelines/components/header_component.vue112
-rw-r--r--app/assets/javascripts/pipelines/pipeline_details_bundle.js8
2 files changed, 53 insertions, 67 deletions
diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue
index 726bba7f9f4..2a3d022c5cd 100644
--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -1,6 +1,7 @@
<script>
-import { GlLoadingIcon, GlModal } from '@gitlab/ui';
-import ciHeader from '../../vue_shared/components/header_ci_component.vue';
+import { GlLoadingIcon, GlModal, GlModalDirective } from '@gitlab/ui';
+import ciHeader from '~/vue_shared/components/header_ci_component.vue';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
import eventHub from '../event_hub';
import { __ } from '~/locale';
@@ -12,6 +13,10 @@ export default {
ciHeader,
GlLoadingIcon,
GlModal,
+ LoadingButton,
+ },
+ directives: {
+ GlModal: GlModalDirective,
},
props: {
pipeline: {
@@ -25,7 +30,9 @@ export default {
},
data() {
return {
- actions: this.getActions(),
+ isCanceling: false,
+ isRetrying: false,
+ isDeleting: false,
};
},
@@ -43,67 +50,18 @@ export default {
},
},
- watch: {
- pipeline() {
- this.actions = this.getActions();
- },
- },
-
methods: {
- onActionClicked(action) {
- if (action.modal) {
- this.$root.$emit('bv::show::modal', action.modal);
- } else {
- this.postAction(action);
- }
+ cancelPipeline() {
+ this.isCanceling = true;
+ eventHub.$emit('headerPostAction', this.pipeline.cancel_path);
},
- postAction(action) {
- const index = this.actions.indexOf(action);
-
- this.$set(this.actions[index], 'isLoading', true);
-
- eventHub.$emit('headerPostAction', action);
+ retryPipeline() {
+ this.isRetrying = true;
+ eventHub.$emit('headerPostAction', this.pipeline.retry_path);
},
deletePipeline() {
- const index = this.actions.findIndex(action => action.modal === DELETE_MODAL_ID);
-
- this.$set(this.actions[index], 'isLoading', true);
-
- eventHub.$emit('headerDeleteAction', this.actions[index]);
- },
-
- getActions() {
- const actions = [];
-
- if (this.pipeline.retry_path) {
- actions.push({
- label: __('Retry'),
- path: this.pipeline.retry_path,
- cssClass: 'js-retry-button btn btn-inverted-secondary',
- isLoading: false,
- });
- }
-
- if (this.pipeline.cancel_path) {
- actions.push({
- label: __('Cancel running'),
- path: this.pipeline.cancel_path,
- cssClass: 'js-btn-cancel-pipeline btn btn-danger',
- isLoading: false,
- });
- }
-
- if (this.pipeline.delete_path) {
- actions.push({
- label: __('Delete'),
- path: this.pipeline.delete_path,
- modal: DELETE_MODAL_ID,
- cssClass: 'js-btn-delete-pipeline btn btn-danger btn-inverted',
- isLoading: false,
- });
- }
-
- return actions;
+ this.isDeleting = true;
+ eventHub.$emit('headerDeleteAction', this.pipeline.delete_path);
},
},
DELETE_MODAL_ID,
@@ -117,10 +75,38 @@ export default {
:item-id="pipeline.id"
:time="pipeline.created_at"
:user="pipeline.user"
- :actions="actions"
item-name="Pipeline"
- @actionClicked="onActionClicked"
- />
+ >
+ <loading-button
+ v-if="pipeline.retry_path"
+ :loading="isRetrying"
+ :disabled="isRetrying"
+ class="js-retry-button btn btn-inverted-secondary"
+ container-class="d-inline"
+ :label="__('Retry')"
+ @click="retryPipeline()"
+ />
+
+ <loading-button
+ v-if="pipeline.cancel_path"
+ :loading="isCanceling"
+ :disabled="isCanceling"
+ class="js-btn-cancel-pipeline btn btn-danger"
+ container-class="d-inline"
+ :label="__('Cancel running')"
+ @click="cancelPipeline()"
+ />
+
+ <loading-button
+ v-if="pipeline.delete_path"
+ v-gl-modal="$options.DELETE_MODAL_ID"
+ :loading="isDeleting"
+ :disabled="isDeleting"
+ class="js-btn-delete-pipeline btn btn-danger btn-inverted"
+ container-class="d-inline"
+ :label="__('Delete')"
+ />
+ </ci-header>
<gl-loading-icon v-if="isLoading" :size="2" class="prepend-top-default append-bottom-default" />
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index c874c4c6fdd..4ae3e813c36 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -70,16 +70,16 @@ export default () => {
eventHub.$off('headerDeleteAction', this.deleteAction);
},
methods: {
- postAction(action) {
+ postAction(path) {
this.mediator.service
- .postAction(action.path)
+ .postAction(path)
.then(() => this.mediator.refreshPipeline())
.catch(() => Flash(__('An error occurred while making the request.')));
},
- deleteAction(action) {
+ deleteAction(path) {
this.mediator.stopPipelinePoll();
this.mediator.service
- .deleteAction(action.path)
+ .deleteAction(path)
.then(({ request }) => redirectTo(setUrlFragment(request.responseURL, 'delete_success')))
.catch(() => Flash(__('An error occurred while deleting the pipeline.')));
},