Show task log tail in the web interface

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

@@ -1,10 +1,11 @@
 <script setup>
-import { onMounted } from 'vue'
+import { onMounted, watch } from 'vue'
 import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import { useTaskLog } from '@/stores/tasklog'
-import * as datetime from "@/datetime";
+import { useTasks } from '@/stores/tasks'
 
 const taskLog = useTaskLog();
+const tasks = useTasks();
 
 const tabOptions = {
   columns: [
@@ -30,8 +31,14 @@ onMounted(() => {
   tabulator = new Tabulator('#task_log_list', tabOptions);
   tabulator.on("tableBuilt", _scrollToBottom);
   tabulator.on("tableBuilt", _subscribeToPinia);
+  console.log("Task log list: mounted on task ID", tasks.activeTaskID);
 });
 
+tasks.$subscribe((_, state) => {
+  console.log("Task log list: new task ID", state.activeTaskID);
+});
+
+
 function _scrollToBottom() {
   if (taskLog.empty) return;
   tabulator.scrollToRow(taskLog.lastID, "bottom", false);

web/app/src/views/JobsView.vue

@@ -82,7 +82,6 @@ export default {
       this._fetchJob(newJobID);
     },
     taskID(newTaskID, oldTaskID) {
-      this.taskLog.clear();
       this._fetchTask(newTaskID);
     },
     showFooterPopup(shown) {
@@ -199,6 +198,8 @@ 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;
@@ -214,6 +215,27 @@ 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}`);