From 5ca8070bc8d1e4a356baf726d7b0fb3eea51ebe1 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Wed, 3 Jan 2024 10:08:47 +0000
Subject: [PATCH 1/4] WIP: modal progress dialog for TaskSubmitter

Longer-running tasks would benefit hugely from showing the
operator a progress indicator. This branch will add a basic
log display allowing messages to be shown to the user.
This branch may also add an abort button to the above dialog.
---
 .../genericComponents/taskSubmitter.vue       | 78 +++++++++++--------
 .../CSMCalibrationSettings.vue                |  1 +
 2 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/webapp/src/components/genericComponents/taskSubmitter.vue b/webapp/src/components/genericComponents/taskSubmitter.vue
index ca316568..2f2a3ac2 100644
--- a/webapp/src/components/genericComponents/taskSubmitter.vue
+++ b/webapp/src/components/genericComponents/taskSubmitter.vue
@@ -34,11 +34,22 @@
         {{ submitLabel }}
       </button>
     </div>
+
+    <div id="modal-center" ref="statusModal" class="uk-flex-top" uk-modal>
+      <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
+        <div>
+          <pre v-for="(item, index) in log" :key="`log_entry_${index}`">
+            {{ item.message }}
+          </pre>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import axios from "axios";
+import UIkit from "uikit";
 
 export default {
   name: "TaskSubmitter",
@@ -87,6 +98,11 @@ export default {
       type: String,
       required: false,
       default: null
+    },
+    modalProgress: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
 
@@ -96,7 +112,8 @@ export default {
       taskUrl: null,
       progress: null,
       taskStarted: false,
-      taskRunning: false
+      taskRunning: false,
+      log: []
     };
   },
 
@@ -165,7 +182,7 @@ export default {
       }
     },
 
-    startTask: function() {
+    async startTask() {
       // Starts a new Action task
 
       this.$emit("submit", this.submitData);
@@ -173,36 +190,32 @@ export default {
 
       this.taskStarted = true;
       this.$emit("taskStarted", this.taskId);
-      axios
-        .post(this.submitUrl, this.submitData)
-        // Get the returned Task ID
-        .then(response => {
-          // Start the store polling TaskId for success
-          return this.startPolling(response.data.id, response.data.href);
-        })
-        .then(response => {
-          // Do something with the final response
-
-          this.$emit("response", response);
-          this.$emit("finished");
-        })
-        .catch(error => {
-          if (!error) {
-            error = Error("Unknown error");
-          }
-          this.$emit("error", error);
-          this.$emit("finished");
-        })
-        .finally(() => {
-          // Reset taskRunning and taskId
-          this.taskRunning = false;
-          this.taskStarted = false;
-          this.taskId = null;
-          // Update the form data if we're self-updating
-          if (this.selfUpdate) {
-            this.getFormData();
-          }
-        });
+      try {
+        let response = await axios.post(this.submitUrl, this.submitData)
+        if (this.statusModal) {
+          UIkit.modal(this.$refs.statusModal).show();
+        }
+        // Start the store polling TaskId for success
+        response = await this.startPolling(response.data.id, response.data.href);
+        this.$emit("response", response);
+        this.$emit("finished");
+      } catch (error) {
+        if (!error) {
+          error = Error("Unknown error");
+        }
+        this.$emit("error", error);
+        this.$emit("finished");
+      } finally {
+        // Reset taskRunning and taskId
+        this.taskRunning = false;
+        this.taskStarted = false;
+        this.taskId = null;
+        // Update the form data if we're self-updating
+        if (this.selfUpdate) {
+          this.getFormData();
+        }
+        UIkit.modal(this.$refs.statusModal).hide();
+      }
     },
 
     startPolling: function(taskId, taskUrl) {
@@ -244,6 +257,7 @@ export default {
             } else {
               // Since the task is still running, we can update the progress bar
               this.progress = response.data.progress;
+              this.log = response.data.log;
               // Check again after timeout
               setTimeout(checkCondition, interval, resolve, reject);
             }
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index db5fc10b..68984201 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
@@ -11,6 +11,7 @@
         "
         :submit-url="calibrateXYUri"
         :submit-label="'Auto-Calibrate using camera'"
+        :modal-progress="true"
         @response="onRecalibrateResponse"
         @error="modalError"
       />

From 40580327c6ce1c9c57509465001fcae32636dec4 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Wed, 3 Jan 2024 21:53:14 +0000
Subject: [PATCH 2/4] Linter fixes

---
 .../components/genericComponents/taskSubmitter.vue   | 12 ++++++------
 .../paneBackgroundDetect.vue                         | 11 +++--------
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/webapp/src/components/genericComponents/taskSubmitter.vue b/webapp/src/components/genericComponents/taskSubmitter.vue
index 2f2a3ac2..a8dd6737 100644
--- a/webapp/src/components/genericComponents/taskSubmitter.vue
+++ b/webapp/src/components/genericComponents/taskSubmitter.vue
@@ -191,19 +191,19 @@ export default {
       this.taskStarted = true;
       this.$emit("taskStarted", this.taskId);
       try {
-        let response = await axios.post(this.submitUrl, this.submitData)
+        let response = await axios.post(this.submitUrl, this.submitData);
         if (this.statusModal) {
           UIkit.modal(this.$refs.statusModal).show();
         }
         // Start the store polling TaskId for success
-        response = await this.startPolling(response.data.id, response.data.href);
+        response = await this.startPolling(
+          response.data.id,
+          response.data.href
+        );
         this.$emit("response", response);
         this.$emit("finished");
       } catch (error) {
-        if (!error) {
-          error = Error("Unknown error");
-        }
-        this.$emit("error", error);
+        this.$emit("error", error | Error("Unknown error"));
         this.$emit("finished");
       } finally {
         // Reset taskRunning and taskId
diff --git a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
index 8328c202..e05c2585 100644
--- a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
+++ b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
@@ -42,11 +42,6 @@ export default {
     propertyControl
   },
 
-  data: function() {
-    return {
-    };
-  },
-
   computed: {
     backgroundFractionUri() {
       return this.thingActionUrl("background_detect", "background_fraction");
@@ -58,9 +53,9 @@ export default {
 
   methods: {
     alertBackgroundFraction(r) {
-      let fraction = r.output
-      let percentage = (fraction * 100).toFixed(1)
-      this.modalNotify(`Current image is ${percentage}% background.`)
+      let fraction = r.output;
+      let percentage = (fraction * 100).toFixed(1);
+      this.modalNotify(`Current image is ${percentage}% background.`);
     }
   }
 };

From 44a7a8c1abb2ae209e1523669da36ac8572f705b Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 4 Jan 2024 00:33:39 +0000
Subject: [PATCH 3/4] Tidy up background detect pane

---
 .../paneBackgroundDetect.vue                  | 23 ++++++-------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
index e05c2585..980378b3 100644
--- a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
+++ b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="uk-padding-small">
-    <div v-show="!thingAvailable" class="ui-alert-error" uk-alert>
+    <div v-show="!backendOK" class="uk-alert-danger">
       The background detect Thing seems to be missing or incompatible.
     </div>
-    <div v-show="thingAvailable">
+    <div v-show="backendOK">
       <div class="uk-margin">
         <taskSubmitter
           :submit-url="setBackgroundUri"
@@ -48,6 +48,11 @@ export default {
     },
     setBackgroundUri() {
       return this.thingActionUrl("background_detect", "set_background");
+    },
+    backendOK() {
+      return (
+        (this.backgroundFractionUri != null) & (this.setBackgroundUri != null)
+      );
     }
   },
 
@@ -60,17 +65,3 @@ export default {
   }
 };
 </script>
-
-<style>
-.grid-container {
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-column-gap: 10px;
-}
-
-.warning {
-  color: #c11;
-  font-weight: bold;
-  text-align: center;
-}
-</style>

From 2ce6ea4bc0bc74f37b7c69919cf38e1c210cc22c Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 4 Jan 2024 01:05:24 +0000
Subject: [PATCH 4/4] Working modal progress/cancel dialog for actions.

---
 .../genericComponents/taskSubmitter.vue       | 66 +++++++++++++++++--
 1 file changed, 60 insertions(+), 6 deletions(-)

diff --git a/webapp/src/components/genericComponents/taskSubmitter.vue b/webapp/src/components/genericComponents/taskSubmitter.vue
index a8dd6737..041e638c 100644
--- a/webapp/src/components/genericComponents/taskSubmitter.vue
+++ b/webapp/src/components/genericComponents/taskSubmitter.vue
@@ -35,12 +35,33 @@
       </button>
     </div>
 
-    <div id="modal-center" ref="statusModal" class="uk-flex-top" uk-modal>
+    <div id="modal-center" ref="statusModal" class="" uk-modal>
       <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
-        <div>
-          <pre v-for="(item, index) in log" :key="`log_entry_${index}`">
+        <div id="log-container" ref="logContainer">
+          <div v-for="(item, index) in log" :key="`log_entry_${index}`">
             {{ item.message }}
-          </pre>
+          </div>
+        </div>
+        <div id="progress-and-cancel-row">
+          <div class="stretchy">
+            <div class="progress uk-margin-small">
+              <div
+                v-if="progress"
+                class="determinate"
+                :style="barWidthFromProgress"
+              ></div>
+              <div v-else class="indeterminate"></div>
+            </div>
+          </div>
+
+          <button
+            v-if="canTerminate && taskRunning"
+            type="button"
+            class="uk-button uk-button-danger not-stretchy"
+            @click="terminateTask()"
+          >
+            Cancel
+          </button>
         </div>
       </div>
     </div>
@@ -125,7 +146,14 @@ export default {
     }
   },
 
-  created() {},
+  watch: {
+    log: function() {
+      this.$nextTick(function() {
+        let viewer = this.$refs.logContainer;
+        viewer.scrollTop = viewer.scrollHeight;
+      });
+    }
+  },
 
   mounted() {
     // Check for already running tasks
@@ -192,7 +220,7 @@ export default {
       this.$emit("taskStarted", this.taskId);
       try {
         let response = await axios.post(this.submitUrl, this.submitData);
-        if (this.statusModal) {
+        if (this.modalProgress) {
           UIkit.modal(this.$refs.statusModal).show();
         }
         // Start the store polling TaskId for success
@@ -283,6 +311,32 @@ export default {
 <style lang="less" scoped>
 @import "../../assets/less/theme.less";
 
+#log-container {
+  position: relative;
+  height: 6em;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+#progress-and-cancel-row {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-content: stretch;
+  align-items: center;
+  width: 100%;
+}
+
+#progress-and-cancel-row .stretchy {
+  flex-grow: 1;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+#progress-and-cancel-row .not-stretchy {
+  flex-grow: 0;
+  margin-left: 5px;
+  margin-right: 5px;
+}
 .progress {
   position: relative;
   height: 5px;