feat(ui): buffering task log records

semaphoreui · Jan 5, 2025 · f5746b2 · f5746b2
1 parent d2c63b6
commit f5746b2
Showing 1 changed file with 27 additions and 6 deletions.
diff --git 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: