Handle task progress and termination (in plugin forms)

src/components/genericComponents/taskProgress.vue

@@ -0,0 +1,181 @@
+<template>
+<div>
+
+  <div  class="progress uk-margin-top uk-margin-horizontal-remove uk-padding-remove">
+    <div v-if="progress" class="determinate" :style="barWidthFromProgress"></div>
+    <div v-else class="indeterminate"></div>
+  </div>
+
+  <button type="button" v-on:click="terminateTask()" class="uk-button uk-button-danger uk-form-small uk-float-right uk-width-1-1">Terminate</button>
+
+</div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'taskProgress',
+
+  props: {
+    taskId: {
+      type: String,
+      required: true
+    },
+  },
+
+  data: function () {
+    return {
+      polling: null, 
+      progress: null
+    }
+  },
+
+  created() {
+    this.polling = setInterval(() => {
+      this.pollProgress()
+    }, 500)
+  },
+
+  beforeDestroy () {
+    clearInterval(this.polling)
+  },
+
+  methods: {
+    pollProgress: function() {
+      console.log("Starting progress polling")
+      var interval = 500;
+
+      axios.get(`${this.$store.getters.uri}/task/${this.taskId}`)
+      .then(response => { 
+        console.log("PROGRESS RESPONSE: ", response.data.progress)
+        this.progress = response.data.progress
+      })
+
+    },
+
+    terminateTask: function() {
+      axios.delete(`${this.$store.getters.uri}/task/${this.taskId}`)
+      .then(response => { 
+        console.log("TERMINATION RESPONSE: ", response.data)
+      })
+    },
+
+  },
+
+  computed: {
+    barWidthFromProgress: function () {
+      var progress = ((this.progress <= 100) ? this.progress : 100)
+      var styleString = `width: ${progress}%`
+      return styleString
+    },
+  }
+}
+
+</script>
+
+<style lang="less" scoped>
+@import "../../assets/less/theme.less";
+
+.progress {
+  position: relative;
+  height: 5px;
+  display: block;
+  width: 100%;
+  background-color: rgba(180, 180, 180, 0.15);
+  border-radius: 2px;
+  background-clip: padding-box;
+  margin: 0.5rem 0 1rem 0;
+  overflow: hidden; 
+}
+
+.progress .determinate {
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  bottom: 0;
+  transition: width .3s linear; 
+}
+
+.progress .indeterminate, .progress .determinate {
+  background-color: @global-primary-background; 
+}
+
+.hook-inverse() {
+    .progress .indeterminate, .progress .determinate{
+        background-color: @inverse-primary-muted-color;
+    }
+}
+
+.progress .indeterminate:before {
+  content: '';
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  will-change: left, right;
+  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+          animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; 
+}
+
+.progress .indeterminate:after {
+  content: '';
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  will-change: left, right;
+  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+          animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  -webkit-animation-delay: 1.15s;
+          animation-delay: 1.15s; 
+}
+
+@-webkit-keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%; }
+  60% {
+    left: 100%;
+    right: -90%; }
+  100% {
+    left: 100%;
+    right: -90%; } 
+}
+@keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%; }
+  60% {
+    left: 100%;
+    right: -90%; }
+  100% {
+    left: 100%;
+    right: -90%; } 
+}
+@-webkit-keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%; }
+  60% {
+    left: 107%;
+    right: -8%; }
+  100% {
+    left: 107%;
+    right: -8%; } 
+}
+@keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%; }
+  60% {
+    left: 107%;
+    right: -8%; }
+  100% {
+    left: 107%;
+    right: -8%; } 
+}
+
+</style>

src/components/pluginComponents/JsonForm.vue

@@ -27,10 +27,10 @@
       </div>
 
       <div v-if="taskRunning">
-        <progressBar/>
+        <taskProgress v-bind:taskId="taskId"></taskProgress>
       </div>
 
-      <button v-bind:hidden="taskRunning" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">{{ submitLabel }}</button>
+      <button type="submit" v-bind:hidden="taskRunning" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">{{ submitLabel }}</button>
 
     </form>
 
@@ -51,6 +51,7 @@ import tagList from "../fieldComponents/tagList"
 import keyvalList from "../fieldComponents/keyvalList"
 
 import progressBar from "../genericComponents/progressBar"
+import taskProgress from "../genericComponents/taskProgress"
 
 export default {
   name: 'JsonForm',
@@ -64,7 +65,8 @@ export default {
     checkList,
     tagList,
     keyvalList,
-    progressBar
+    progressBar,
+    taskProgress
   },
 
   props: {
@@ -101,7 +103,8 @@ export default {
   data: function () {
     return {
       formData: {},
-      taskRunning: false
+      taskRunning: false,
+      taskId: null
     }
   },
 
@@ -182,23 +185,30 @@ export default {
     },
 
     newLongRequest: function(params) {
-        this.taskRunning = true
         axios.post(this.submitApiUri, params)
         .then(response => { 
+          // Fetch the task ID
           console.log("Task ID: " + response.data.id)
+          this.taskId = response.data.id
           // Start the store polling TaskId for success
-          return this.$store.dispatch('pollTask', [response.data.id, null, null])
+          this.taskRunning = true
+          return this.$store.dispatch('pollTask', [this.taskId, null, null])
         })
         .then(response => {
           // Do something with the response
           console.log(response)
         })
         .catch(error => {
-          this.modalError(error) // Let mixin handle error
+          console.log("Task eneded with error: ", error)
+          if (error) {
+            this.modalError(error) // Display the error, if one exists
+          }
         })
         .finally(() => {
           console.log("Cleaning up after task.")
+          // Reset taskRunning and taskId
           this.taskRunning = false
+          this.taskId = null
           // Update the form data if we're self-updating
           if (this.selfUpdate) {
             this.getFormData()

src/store.js

@@ -162,8 +162,19 @@ export default new Vuex.Store({
           }
           // If task ends with an error
           else if (result == 'error') {
+            // Pass the error string back with reject
             reject(new Error(response.data.return))
           }
+          // If task ends with termination
+          else if (result == 'terminated') {
+            // Pass a generic termination error back with reject
+            reject(new Error("Task terminated"))
+          }
+          // If task ends in any other way
+          else if (result != 'running') {
+            // Pass status string as error
+            reject(new Error(result))
+          }
           // If the condition isn't met but the timeout hasn't elapsed, go again
           else if (Number(new Date()) < endTime) {
             setTimeout(checkCondition, interval, resolve, reject)