From a97913bebb08e9ddc4247bae22d297234ed66ca1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Sat, 16 Jul 2022 13:22:11 +0200
Subject: [PATCH] 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 | 7 +++++++
 web/app/src/components/jobs/TaskDetails.vue   | 5 +++++
 web/app/src/views/JobsView.vue                | 9 ++++++++-
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/web/app/src/components/footer/FooterPopup.vue b/web/app/src/components/footer/FooterPopup.vue
index 32748e99..e3ac3769 100644
--- a/web/app/src/components/footer/FooterPopup.vue
+++ b/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>
diff --git a/web/app/src/components/jobs/TaskDetails.vue b/web/app/src/components/jobs/TaskDetails.vue
index 73db3f98..a583c9d0 100644
--- a/web/app/src/components/jobs/TaskDetails.vue
+++ b/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 {
diff --git a/web/app/src/views/JobsView.vue b/web/app/src/views/JobsView.vue
index da78507a..234e55ed 100644
--- a/web/app/src/views/JobsView.vue
+++ b/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);