Web: add "Follow Task Log" button

The "Follow Task Log" button should make it easier to discover the task
log viewer in the footer pop-over.

web/app/src/components/footer/FooterPopup.vue

@@ -13,6 +13,13 @@ const tabs = { NotificationList, TaskLog }
 watch(currentTab, async (newTab) => {
   localStorage.setItem("footer-popover-active-tab", newTab);
 });
+
+function showTaskLogTail() {
+  currentTab.value = 'TaskLog';
+}
+defineExpose({
+  showTaskLogTail,
+});
 </script>
 
 <template>

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

@@ -56,6 +56,8 @@
     </dl>
 
     <h3 class="sub-title">Task Log</h3>
+    <button @click="$emit('showTaskLogTail')" title="Open the task log tail in the footer.">
+      Follow Task Log</button>
     <button @click="openFullLog" title="Opens the task log in a new window.">Open Full Log</button>
   </template>
 
@@ -76,6 +78,9 @@ export default {
   props: [
     "taskData", // Task data to show.
   ],
+  emits: [
+    "showTaskLogTail", // Emitted when the user presses the "follow task log" button.
+  ],
   components: { WorkerLink },
   data() {
     return {

web/app/src/views/JobsView.vue

@@ -7,7 +7,7 @@
     <tasks-table v-if="hasJobData" ref="tasksTable" :jobID="jobID" :taskID="taskID" @tableRowClicked="onTableTaskClicked" />
   </div>
   <div class="col col-3">
-    <task-details :taskData="tasks.activeTask" />
+    <task-details :taskData="tasks.activeTask" @showTaskLogTail="showTaskLogTail" />
   </div>
 
   <footer class="app-footer" v-if="!showFooterPopup" @click="showFooterPopup = true">
@@ -121,6 +121,13 @@ export default {
         });
     },
 
+    showTaskLogTail() {
+      this.showFooterPopup = true;
+      this.$nextTick(() => {
+        this.$refs.footerPopup.showTaskLogTail();
+      })
+    },
+
     // SocketIO data event handlers:
     onSioJobUpdate(jobUpdate) {
       this.notifs.addJobUpdate(jobUpdate);