From f5746b21b6aa08523d0350c9be0f052a95e0392d Mon Sep 17 00:00:00 2001
From: Denis Gukov <denguk@gmail.com>
Date: Mon, 6 Jan 2025 01:36:21 +0500
Subject: [PATCH] feat(ui): buffering task log records
---
web/src/components/TaskLogView.vue | 33 ++++++++++++++++++++++++------
1 file changed, 27 insertions(+), 6 deletions(-)
diff --git a/web/src/components/TaskLogView.vue b/web/src/components/TaskLogView.vue
index 794a2fcdc..9043bcbea 100644
--- a/web/src/components/TaskLogView.vue
+++ b/web/src/components/TaskLogView.vue
@@ -201,6 +201,7 @@ export default {
itemComponent: TaskLogViewRecord,
item: {},
output: [],
+ outputBuffer: [],
user: {},
};
},
@@ -232,10 +233,28 @@ export default {
},
async created() {
+ this.outputInterval = setInterval(() => {
+ this.$nextTick(() => {
+ const len = this.outputBuffer.length;
+ if (len === 0) {
+ return;
+ }
+
+ this.output.push(...this.outputBuffer.splice(0, len));
+
+ if (this.$refs.records) {
+ this.$refs.records.scrollToBottom();
+ }
+ });
+ }, 500);
socket.addListener((data) => this.onWebsocketDataReceived(data));
await this.loadData();
},
+ beforeDestroy() {
+ clearInterval(this.outputInterval);
+ },
+
methods: {
async confirmTask() {
await axios({
@@ -269,6 +288,8 @@ export default {
reset() {
this.item = {};
this.output = [];
+ this.outputBuffer = [];
+ this.outputInterval = null;
this.user = {};
},
@@ -285,16 +306,16 @@ export default {
});
break;
case 'log':
- this.output.push({
+ this.outputBuffer.push({
...data,
id: data.time + data.output,
});
- this.$nextTick(() => {
- if (this.$refs.records) {
- this.$refs.records.scrollToBottom();
- }
- });
+ // this.$nextTick(() => {
+ // if (this.$refs.records) {
+ // this.$refs.records.scrollToBottom();
+ // }
+ // });
break;
default: