✨ : add possibility to delete a job from the job view

gaia-app · Feb 3, 2020 · 50b5d1e · 50b5d1e
1 parent 2c72f3f
commit 50b5d1e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 8 deletions.
diff --git a/src/main/resources/templates/job.html b/src/main/resources/templates/job.html
@@ -46,7 +46,8 @@ <h2>Stack {{stack.name}}</h2>
 
                     <job-metadata
                             :job="job" :stack="stack"
-                            @retry="retryJob">
+                            @retry="retryJob"
+                            @delete="deleteJob">
                     </job-metadata>
 
                     <job-step
@@ -153,6 +154,32 @@ <h2>Stack {{stack.name}}</h2>
                 methods: {
                     applyJob: () => planOrApplyJob('APPLY'),
                     retryJob: () => planOrApplyJob('retry'),
+                    deleteJob: function () {
+                        this.$bvModal.msgBoxConfirm('This will delete the job. Continue?', {
+                            title: 'Delete request',
+                            centered: true,
+                            noCloseOnBackdrop: true,
+                            cancelTitle: 'No',
+                            okVariant: 'danger',
+                            okTitle: 'Yes',
+                            returnFocus: 'body',
+                        }).then(value => {
+                            if (value) {
+                                const message = Messenger().post({type: "info", message: "Deleting job."});
+                                return $.ajax({
+                                    url: `/api/jobs/${jobId}`,
+                                    type: 'DELETE',
+                                    success: () => {
+                                        message.update({type: "info", message: "Job deleted."});
+                                        window.location = `/stacks/${this.stack.id}`;
+                                    },
+                                    error: () => {
+                                        message.update({type: "error", message: "Unable to delete job,"});
+                                    }
+                                });
+                            }
+                        })
+                    },
                 }
             });
         });

diff --git a/src/main/resources/templates/vue_templates/components/job/job-metadata.vue b/src/main/resources/templates/vue_templates/components/job/job-metadata.vue
@@ -36,8 +36,9 @@
                 </b>
             </p>
         </div>
-        <div class="job-actions" v-if="isRetryAvailable">
-            <b-button variant="info" size="lg" @click="$emit('retry')"><i class="fas fa-redo"></i> Retry</b-button>
+        <div class="job-actions">
+            <b-button variant="info" v-if="isRetryAvailable" @click="$emit('retry')"><i class="fas fa-redo"></i> Retry</b-button>
+            <b-button variant="danger" v-if="isDeleteAvailable" @click="$emit('delete')"><i class="far fa-trash-alt"></i> Delete</b-button>
         </div>
     </div>
 </template>
@@ -48,8 +49,10 @@
         props: ['job', 'stack'],
         computed: {
             isRetryAvailable: function () {
-                return this.job.status !== null &&
-                    this.job.status.indexOf('FAILED') > 0;
+                return this.job.status !== null && this.job.status.indexOf('FAILED') > 0;
+            },
+            isDeleteAvailable: function () {
+                return this.job.status !== null && this.job.status.indexOf('STARTED') < 0;
             },
         }
     });
@@ -73,16 +76,19 @@
 
     .job-metadata-container .job-actions {
         display: flex;
-        justify-content: flex-end;
-        align-items: flex-start;
+        flex-direction: column;
         flex: 1 1 auto;
     }
 
+    .job-metadata-container .job-actions button + button {
+        margin-top: 0.25rem;
+    }
+
     .job-metadata-container .metadata p {
         font-size: 14px;
     }
 
-    .job-metadata-container .fas {
+    .job-metadata-container .metadata .fas {
         width: 1rem;
         margin-right: 1rem;
         text-align: center;