From 72487e3fb4243068c48fe48d727c8cac87e4dcf3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Tue, 24 May 2022 16:04:03 +0200
Subject: [PATCH] Web: only load task log tail when task log viewer is visible

The code to fetch the task log tail is moved from `JobsView.vue` to
`TaskLog.vue`, as that knows exactly when it's shown & hidden.

The subscriptions to the task log updates will have to be managed in the
same way; that's for another commit.
---
 web/app/src/components/footer/TaskLog.vue | 23 +++++++++++++++++++++--
 web/app/src/views/JobsView.vue            | 23 -----------------------
 2 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/web/app/src/components/footer/TaskLog.vue b/web/app/src/components/footer/TaskLog.vue
index 780f451d..40ccc099 100644
--- a/web/app/src/components/footer/TaskLog.vue
+++ b/web/app/src/components/footer/TaskLog.vue
@@ -1,8 +1,9 @@
 <script setup>
-import { onMounted, watch } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
 import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import { useTaskLog } from '@/stores/tasklog'
 import { useTasks } from '@/stores/tasks'
+import { apiClient } from '@/stores/api-query-count';
 
 const taskLog = useTaskLog();
 const tasks = useTasks();
@@ -32,13 +33,21 @@ onMounted(() => {
   tabulator.on("tableBuilt", _scrollToBottom);
   tabulator.on("tableBuilt", _subscribeToPinia);
   console.log("Task log list: mounted on task ID", tasks.activeTaskID);
+
+  if (tasks.activeTaskID)
+    _fetchLogTail(tasks.activeTaskID);
+  else
+    taskLog.clear();
+});
+onUnmounted(() => {
+  taskLog.clear();
 });
 
 tasks.$subscribe((_, state) => {
   console.log("Task log list: new task ID", state.activeTaskID);
+  _fetchLogTail(state.activeTaskID);
 });
 
-
 function _scrollToBottom() {
   if (taskLog.empty) return;
   tabulator.scrollToRow(taskLog.lastID, "bottom", false);
@@ -49,6 +58,16 @@ function _subscribeToPinia() {
       .then(_scrollToBottom)
   })
 }
+
+function _fetchLogTail(taskID) {
+  taskLog.clear();
+
+  const jobsAPI = new API.JobsApi(apiClient);
+  return jobsAPI.fetchTaskLogTail(taskID)
+    .then((logTail) => {
+      taskLog.addChunk(logTail);
+    });
+}
 </script>
 
 <template>
diff --git a/web/app/src/views/JobsView.vue b/web/app/src/views/JobsView.vue
index 1380b8e2..5dfc4665 100644
--- a/web/app/src/views/JobsView.vue
+++ b/web/app/src/views/JobsView.vue
@@ -198,8 +198,6 @@ export default {
      * @param {string} taskID task ID, can be empty string for "no task".
      */
     _fetchTask(taskID) {
-      this._fetchTaskLogTail(taskID);
-
       if (!taskID) {
         this.tasks.deselectAllTasks();
         return;
@@ -215,27 +213,6 @@ export default {
         });
     },
 
-    /**
-     * Fetch task log tail.
-     *
-     * TODO: Only do this when the footer pop-over is visible and set to the
-     * "Task Log" tab. Otherwise the logs won't be shown anyway.
-     *
-     * @param {string} taskID task ID.
-     */
-    _fetchTaskLogTail(taskID) {
-      this.taskLog.clear();
-      if (!taskID) {
-        return;
-      }
-
-      const jobsAPI = new API.JobsApi(apiClient);
-      return jobsAPI.fetchTaskLogTail(taskID)
-        .then((logTail) => {
-          this.taskLog.addChunk(logTail);
-        });
-    },
-
     onChatMessage(message) {
       console.log("chat message received:", message);
       this.messages.push(`${message.text}`);