diff --git a/src/components/Process/Status/Status.vue b/src/components/Process/Status/Status.vue index 3ee62c68407119cbb9e85319490a327e317e6310..6e7eac0c5e47dd1bbd9dc566792eba5e714ac870 100644 --- a/src/components/Process/Status/Status.vue +++ b/src/components/Process/Status/Status.vue @@ -33,36 +33,38 @@ <div class="dropdown-menu"> <div class="dropdown-content"> <template v-if="finishedProcess"> - <router-link - v-if="process.element" - class="dropdown-item" - :to="{ name: 'element-details', params: { id: process.element.id } }" - > - <i class="icon-arrow-right"></i> - View element - </router-link> <a class="dropdown-item" :class="!hasAdminAccess ? 'is-disabled' : ''" v-if="isVerified" - v-on:click="retry" + v-on:click="retryAction" :title="hasAdminAccess ? 'Retry this entire process' : 'An admin access is required to retry this process'" > <i class="icon-undo"></i> Retry process </a> + <hr class="navbar-divider" /> + <router-link + v-if="process.element" + class="dropdown-item" + :to="{ name: 'element-details', params: { id: process.element.id } }" + > + <i class="icon-arrow-right"></i> + View element + </router-link> </template> <template v-else-if="activeProcess"> <a class="dropdown-item has-text-danger" :class="!isVerified ? 'is-disabled' : ''" v-if="isVerified" - v-on:click="stop" + v-on:click="stopAction" :title="hasAdminAccess ? 'Stop this process' : 'An admin access is required to stop this process'" > <i class="icon-minus"></i> Stop process </a> + <hr class="navbar-divider" /> </template> <router-link :to="hasActivities ? { name: 'process-workers-activity', params: { processId: process.id } } : ''" @@ -148,6 +150,24 @@ :selected-run="selectedRun" /> </template> + + <Modal v-model="confirmModal" :title="confirmModalTitle"> + <span> + Are you sure you want to <strong>{{ confirmAction }}</strong> process {{ truncateShort(process.name) || process.id }}? + </span> + <br /> + <span>This action is irreversible.</span> + <template v-slot:footer="{ close }"> + <button class="button" v-on:click="close">Cancel</button> + <button + class="button" + :class="{ 'is-loading': loading, 'is-danger': confirmAction === 'stop', 'is-primary': confirmAction === 'retry' }" + v-on:click="confirmedAction" + > + {{ confirmAction }} + </button> + </template> + </Modal> </main> </template> @@ -161,17 +181,19 @@ import { PROCESS_STATE_COLORS, PROCESS_FINAL_STATES } from '@/config' -import { corporaMixin } from '@/mixins' +import { corporaMixin, truncateMixin } from '@/mixins' import { errorParser } from '@/helpers' import ItemId from '@/components/ItemId' import NameField from '@/components/Process/Status/NameField' import Run from '@/components/Process/Status/Run' import TemplateCreation from '@/components/Process/TemplateCreation' +import Modal from '@/components/Modal.vue' export default { mixins: [ - corporaMixin + corporaMixin, + truncateMixin ], props: { id: { @@ -187,13 +209,16 @@ export default { ItemId, NameField, Run, - TemplateCreation + TemplateCreation, + Modal }, data: () => ({ PENDING_ACTIVITY_STATE: 'pending', READY_ACTIVITY_STATE: 'ready', loading: false, - error: '' + error: '', + confirmModal: false, + confirmAction: '' }), mounted () { if ('Notification' in window) Notification.requestPermission() @@ -205,6 +230,25 @@ export default { ...mapActions('process', ['startPolling']), ...mapMutations('process', ['setProcesses', 'stopPolling']), ...mapMutations('notifications', ['notify']), + retryAction () { + this.confirmModal = true + this.confirmAction = 'retry' + }, + stopAction () { + this.confirmModal = true + this.confirmAction = 'stop' + }, + async confirmedAction () { + if (this.confirmAction === 'stop') { + await this.stop() + this.confirmModal = false + this.confirmAction = '' + } else if (this.confirmAction === 'retry') { + await this.retry() + this.confirmModal = false + this.confirmAction = '' + } else this.notify({ type: 'error', text: `Unknown action ${this.confirmAction}` }) + }, async retry () { if (!this.hasAdminAccess || !this.process.id || this.loading) return try { @@ -320,6 +364,10 @@ export default { createTemplateTitle () { if (!this.canCreateTemplate) return 'Templates can only be created from worker or dataset processes' return 'Create a template based on this process' + }, + confirmModalTitle () { + const capitalizedAction = this.confirmAction.charAt(0).toUpperCase() + this.confirmAction.slice(1) + return `${capitalizedAction} process ${this.truncateShort(this.process.name) || this.process.id}` } }, watch: {