Improved styling and synchronisation

webapp/src/components/genericComponents/actionLogDisplay.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="log-container" ref="logContainer">
+  <div class="log-container" ref="logContainer">
     <div v-if="log">
       <div v-for="(item, index) in log" :key="`log_entry_${index}`">
         {{ item.message }}
@@ -44,9 +44,8 @@ export default {
 </script>
 
 <style scoped>
-#log-container {
+.log-container {
   position: relative;
-  height: 6em;
   overflow-y: scroll;
   overflow-x: auto;
 }

webapp/src/components/genericComponents/taskSubmitter.vue

@@ -33,7 +33,7 @@
       class=""
       uk-modal="bg-close: false; esc-close: false; stack: true;"
     >
-      <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
+      <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical" id="status-modal">
         <h2>{{ submitLabel }}</h2>
         <action-log-display :log="log" :task-status="taskStatus" />
         <div id="progress-and-cancel-row">
@@ -308,6 +308,7 @@ export default {
     },
 
     terminateTask: function() {
+      console.log(`deleting task at ${this.taskUrl}`);
       axios.delete(this.taskUrl);
     }
   }
@@ -336,4 +337,8 @@ export default {
   margin-left: 5px;
   margin-right: 5px;
 }
+
+#status-modal .log-container {
+  height:10em;
+}
 </style>

webapp/src/components/tabContentComponents/slideScanContent.vue

@@ -39,12 +39,12 @@
             :submit-url="smartScanUri"
             submit-label="Start smart scan"
             :can-terminate="true"
-            :modal-progress="true"
+            :submit-data="{ sample_check: true }"
-            :submit-data="{ sample_check: false }"
             @update:taskRunning="scanning = $event"
             @update:taskStatus="taskStatus = $event"
             @update:progress="progress = $event"
             @update:log="log = $event"
+            ref="smartScanTaskSubmitter"
           />
         </div>
         <div class="uk-margin">
@@ -52,7 +52,6 @@
             :submit-url="smartScanUri"
             submit-label="Start manual scan"
             :can-terminate="true"
-            :modal-progress="true"
             :submit-data="{ sample_check: false }"
             @update:taskRunning="scanning = $event"
             @update:taskStatus="taskStatus = $event"
@@ -61,6 +60,22 @@
           />
         </div>
       </div>
+      <div v-show="scanning">
+        <action-log-display
+          id="log-display"
+          :log="log"
+          :task-status="taskStatus"
+        />
+        <action-progress-bar :progress="progress" :task-status="taskStatus" />
+        <button
+          v-if="scanning"
+          type="button"
+          class="uk-button uk-button-danger uk-margin-remove uk-float-right uk-width-1-1"
+          @click="$refs.smartScanTaskSubmitter.terminateTask()"
+        >
+          Cancel
+        </button>
+      </div>
     </div>
     <div class="view-component uk-width-expand">
       <streamDisplay />
@@ -72,6 +87,8 @@
 import streamDisplay from "./streamContent.vue";
 import taskSubmitter from "../genericComponents/taskSubmitter";
 import propertyControl from "../labThingsComponents/propertyControl.vue";
+import actionLogDisplay from "../genericComponents/actionLogDisplay.vue";
+import actionProgressBar from "../genericComponents/actionProgressBar.vue";
 
 export default {
   name: "SlideScanContent",
@@ -79,14 +96,16 @@ export default {
   components: {
     streamDisplay,
     taskSubmitter,
-    propertyControl
+    propertyControl,
+    actionLogDisplay,
+    actionProgressBar
   },
 
   data() {
     return {
       lastScanName: null,
       scanning: false,
-      taskStatus: null,
+      taskStatus: "pending",
       progress: null,
       log: []
     };
@@ -109,3 +128,12 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+#log-display {
+  height: 20em;
+}
+.control-component {
+  width: 33%;
+}
+</style>