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.
This commit is contained in:
Sybren A. Stüvel 2022-05-24 16:04:03 +02:00
parent 1ac72bd3fc
commit 72487e3fb4
2 changed files with 21 additions and 25 deletions

View File

@ -1,8 +1,9 @@
<script setup> <script setup>
import { onMounted, watch } from 'vue' import { onMounted, onUnmounted } from 'vue'
import { TabulatorFull as Tabulator } from 'tabulator-tables'; import { TabulatorFull as Tabulator } from 'tabulator-tables';
import { useTaskLog } from '@/stores/tasklog' import { useTaskLog } from '@/stores/tasklog'
import { useTasks } from '@/stores/tasks' import { useTasks } from '@/stores/tasks'
import { apiClient } from '@/stores/api-query-count';
const taskLog = useTaskLog(); const taskLog = useTaskLog();
const tasks = useTasks(); const tasks = useTasks();
@ -32,13 +33,21 @@ onMounted(() => {
tabulator.on("tableBuilt", _scrollToBottom); tabulator.on("tableBuilt", _scrollToBottom);
tabulator.on("tableBuilt", _subscribeToPinia); tabulator.on("tableBuilt", _subscribeToPinia);
console.log("Task log list: mounted on task ID", tasks.activeTaskID); 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) => { tasks.$subscribe((_, state) => {
console.log("Task log list: new task ID", state.activeTaskID); console.log("Task log list: new task ID", state.activeTaskID);
_fetchLogTail(state.activeTaskID);
}); });
function _scrollToBottom() { function _scrollToBottom() {
if (taskLog.empty) return; if (taskLog.empty) return;
tabulator.scrollToRow(taskLog.lastID, "bottom", false); tabulator.scrollToRow(taskLog.lastID, "bottom", false);
@ -49,6 +58,16 @@ function _subscribeToPinia() {
.then(_scrollToBottom) .then(_scrollToBottom)
}) })
} }
function _fetchLogTail(taskID) {
taskLog.clear();
const jobsAPI = new API.JobsApi(apiClient);
return jobsAPI.fetchTaskLogTail(taskID)
.then((logTail) => {
taskLog.addChunk(logTail);
});
}
</script> </script>
<template> <template>

View File

@ -198,8 +198,6 @@ export default {
* @param {string} taskID task ID, can be empty string for "no task". * @param {string} taskID task ID, can be empty string for "no task".
*/ */
_fetchTask(taskID) { _fetchTask(taskID) {
this._fetchTaskLogTail(taskID);
if (!taskID) { if (!taskID) {
this.tasks.deselectAllTasks(); this.tasks.deselectAllTasks();
return; 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) { onChatMessage(message) {
console.log("chat message received:", message); console.log("chat message received:", message);
this.messages.push(`${message.text}`); this.messages.push(`${message.text}`);