Merge branch 'log-empty' into 'v3'

Logging more info

Closes #799

See merge request openflexure/openflexure-microscope-server!618

webapp/src/components/labThingsComponents/actionLogDisplay.vue

@@ -2,7 +2,6 @@
   <div class="action-log-display">
     <!-- Toggle button -->
     <button
-      v-if="log.length"
       class="log-toggle"
       :title="isCollapsed ? 'Show full log' : 'Hide full log'"
       :aria-label="isCollapsed ? 'Show full log' : 'Hide full log'"
@@ -13,11 +12,33 @@
       </span>
     </button>
 
-    <!-- Header always shows latest message-->
+    <!-- Header always shows latest message -->
     <div class="log-summary">
-      <span v-if="latestMessage">
+      <div class="log-summary-text">
-        {{ latestMessage }}
+        <template v-if="taskStatus === 'error'">
-      </span>
+          <p>The task failed due to an error:</p>
+          <p>{{ errorMessage }}</p>
+        </template>
+
+        <template v-else-if="taskStatus == 'cancelled'"> The task was cancelled. </template>
+
+        <template v-else-if="taskStatus == 'completed'">
+          The task completed successfully.
+        </template>
+
+        <template
+          v-if="
+            latestMessage &&
+            (taskStatus === 'error' || taskStatus === 'cancelled' || taskStatus === 'completed')
+          "
+        >
+          <br />
+        </template>
+
+        <template v-if="latestMessage">
+          {{ latestMessage }}
+        </template>
+      </div>
     </div>
 
     <!-- Expanded view shows log -->
@@ -175,14 +196,23 @@ export default {
 }
 
 .log-summary {
-  padding: 0.6em;
+  padding: 2px;
-  padding-right: 2.5em; /* reserve room for the toggle button, prevents overlap */
+  padding-right: 30px; /* reserve room for the toggle button, prevents overlap */
-  display: flex;
+  display: block;
   align-items: center;
-  justify-content: center;
+}
+
+.log-summary-text {
   text-align: center;
   font-size: large;
-  box-sizing: border-box;
+  height: calc(2 * 1.4em); /* height of element is 2 lines */
+  line-height: 1.4em;
+  padding: 0 5px; /* Give some padding so there's room for ... to not expand too far */
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2; /* Future version of webkit-line-clamp, not fully supported yet */
 }
 
 .log-container {
@@ -215,8 +245,8 @@ export default {
 /* Toggle button */
 .log-toggle {
   position: absolute;
-  top: 6px;
+  top: 0;
-  right: 6px;
+  right: 2px;
   background: transparent;
   border: none;
   padding: 4px;

webapp/src/components/labThingsComponents/actionStatusModal.vue

@@ -125,29 +125,7 @@ export default {
   margin-right: 5px;
 }
 
-#status-modal {
-  max-height: 90vh; // never exceed 90% of viewport height
-  display: flex;
-  flex-direction: column;
-}
-
 #status-modal h2 {
   flex: 0 0 auto; // title never shrinks
 }
-
-#status-modal .action-log-display {
-  flex: 1 1 auto;
-  min-height: 0;
-}
-
-#status-modal .log-wrapper {
-  flex: 1 1 200px; // prefer 200px, shrink only under pressure
-  min-height: 2.6em; // floor: one line
-}
-
-#status-modal .log-container {
-  height: auto;
-  flex: 1 1 auto;
-  min-height: 2.6em;
-}
 </style>

webapp/src/components/tabContentComponents/loggingContent.vue

@@ -37,6 +37,16 @@
 
     <!-- Logging items -->
     <div class="uk-width-xlarge uk-align-center">
+      <div v-if="filteredItems.length == 0" class="logging-entry" uk-alert>
+        <div class="logging-entry-body">
+          <p>
+            No log entries found at the current filter level (<strong>{{ filterLevel }}</strong> or
+            higher).
+          </p>
+          <p>You can include lower levels using the dropdown in the top left.</p>
+        </div>
+      </div>
+
       <div
         v-for="item in pagedItems"
         :key="item.sequence"
@@ -81,6 +91,7 @@
         <!-- eslint-enable -->
       </div>
       <PaginateLinks
+        v-if="filteredItems.length > 0"
         :total-pages="totalPages"
         :current-page="currentPage"
         @change-page="changePage"