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>
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>

View File

@ -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}`);