From 34602fe7d4c26f43ddf4a53437e5026b80c0b6ed Mon Sep 17 00:00:00 2001
From: Jiajie Chen <c@jia.je>
Date: Wed, 19 Jun 2024 17:06:34 +0800
Subject: [PATCH] feat: try to improve frontend perf

---
 frontend/src/pages/monitor/[hostname].vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/monitor/[hostname].vue b/frontend/src/pages/monitor/[hostname].vue
index f9e4b65..06666b7 100644
--- a/frontend/src/pages/monitor/[hostname].vue
+++ b/frontend/src/pages/monitor/[hostname].vue
@@ -1,6 +1,6 @@
 <template>
   <v-container style="height: 100%; font-family: monospace">
-    <div v-html="html"></div>
+    <div v-for="line in lines" v-html="line"></div>
   </v-container>
 </template>
 
@@ -11,8 +11,7 @@ export default {
     this.fetchData();
   },
   data: () => ({
-    html: "",
-    lines: 0,
+    lines: [] as string[]
   }),
   methods: {
     fetchData() {
@@ -21,14 +20,12 @@ export default {
         `wss://buildit.aosc.io/api/ws/viewer/${name}`
       );
       socket.onmessage = (event) => {
-        if (this.lines > 5000) {
-          this.html = "";
-          this.lines = 0;
+        if (this.lines.length > 5000) {
+          this.lines = [];
         }
         const data = event.data;
         let ansi_up = new AnsiUp();
-        this.html += ansi_up.ansi_to_html(data) + " <br/> ";
-        this.lines += 1;
+        this.lines.push(ansi_up.ansi_to_html(data) + " <br/> ");
         window.scrollTo(0, document.body.scrollHeight);
       };
     },