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:
parent
1ac72bd3fc
commit
72487e3fb4
@ -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>
|
||||||
|
@ -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}`);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user