Web app: add job deletion button to job action bar

WARNING: There is no confirmation popup yet, it'll immediately schedule
the job for deletion.

web/app/src/components/jobs/JobActionsBar.vue

@@ -2,7 +2,7 @@
   <div class="btn-bar jobs">
     <button class="btn cancel" :disabled="!jobs.canCancel" v-on:click="onButtonCancel">Cancel Job</button>
     <button class="btn requeue" :disabled="!jobs.canRequeue" v-on:click="onButtonRequeue">Requeue</button>
-    <!-- <button class="action delete dangerous" :disabled="!jobs.canDelete" v-on:click="onButtonDelete">Delete</button> -->
+    <button class="action delete dangerous" :disabled="!jobs.canDelete" v-on:click="onButtonDelete">Delete</button>
   </div>
 </template>
 
@@ -20,8 +20,14 @@ export default {
   },
   methods: {
     onButtonDelete() {
-      return this._handleJobActionPromise(
+      return this.jobs.deleteJobs()
-        this.jobs.deleteJobs(), "marked for deletion");
+        .then(() => {
+          this.notifs.add("job marked for deletion");
+        })
+        .catch((error) => {
+          const errorMsg = JSON.stringify(error); // TODO: handle API errors better.
+          this.notifs.add(`Error: ${errorMsg}`);
+        })
     },
     onButtonCancel() {
       return this._handleJobActionPromise(
@@ -53,4 +59,5 @@ export default {
 </script>
 
 <style scoped>
+
 </style>

web/app/src/stores/jobs.js

@@ -74,6 +74,16 @@ export const useJobs = defineStore('jobs', {
      */
     cancelJobs() { return this._setJobStatus("cancel-requested"); },
     requeueJobs() { return this._setJobStatus("requeueing"); },
+    deleteJobs() {
+      if (!this.activeJobID) {
+        console.warn(`deleteJobs() impossible, no active job ID`);
+        return new Promise((resolve, reject) => {
+          reject("No job selected, unable to delete");
+        });
+      }
+
+      return jobsAPI.deleteJob(this.activeJobID);
+    },
 
     // Internal methods.