feat: replace xtermjs with ansi escape sequence translator

frontend/package.json

@@ -9,8 +9,7 @@
   },
   "dependencies": {
     "@mdi/font": "7.0.96",
-    "@xterm/addon-fit": "^0.9.0",
-    "@xterm/xterm": "^5.4.0",
+    "ansi_up": "^6.0.2",
     "axios": "^1.6.7",
     "core-js": "^3.34.0",
     "pretty-bytes": "^6.1.1",

frontend/src/pages/web-logs/[name].vue

@@ -1,6 +1,6 @@
 <template>
-  <v-container style="height: 100%;">
-    <div ref="element" style="height: 100%;">
+  <v-container style="height: 100%;font-family: monospace;">
+    <div v-html="html">
     </div>
   </v-container>
 </template>
@@ -12,25 +12,24 @@
 <script lang="ts">
   import axios from 'axios';
   import { hostname } from '@/common';
-  import '@xterm/xterm/css/xterm.css';
-  import { Terminal } from '@xterm/xterm';
-  import { FitAddon } from '@xterm/addon-fit';
+  import { AnsiUp } from 'ansi_up';
 
   export default {
     mounted() {
       this.fetchData();
     },
     data: () => ({
+      html: "",
     }),
     methods: {
       async fetchData() {
         let name = (this.$route.params as { name: string }).name;
-        let term = new Terminal({ convertEol: true, scrollback: 1000000 });
-        let fitAddon = new FitAddon();
-        term.loadAddon(fitAddon);
-        term.open(this.$refs.element as HTMLElement);
-        fitAddon.fit();
-        term.write((await axios.get(`/logs/${name}`)).data);
+        let log = (await axios.get(`/logs/${name}`)).data;
+        let ansi_up = new AnsiUp();
+        let html = ansi_up.ansi_to_html(log);
+        html = html.replaceAll("\r\n", " <br/> ");
+        html = html.replaceAll("\n", " <br/> ");
+        this.html = html;
       }
     }
   }

frontend/yarn.lock

@@ -579,16 +579,6 @@
   dependencies:
     upath "^2.0.1"
 
-"@xterm/addon-fit@^0.9.0":
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/@xterm/addon-fit/-/addon-fit-0.9.0.tgz#29846f08782c51ad85b949528c45b84ad4ec45d7"
-  integrity sha512-hDlPPbTVPYyvwXu/asW8HbJkI/2RMi0cMaJnBZYVeJB0SWP2NeESMCNr+I7CvBlyI0sAxpxOg8Wk4OMkxBz9WA==
-
-"@xterm/xterm@^5.4.0":
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/@xterm/xterm/-/xterm-5.4.0.tgz#a35b585750ca492cbf2a4c99472c480d8c122840"
-  integrity sha512-GlyzcZZ7LJjhFevthHtikhiDIl8lnTSgol6eTM4aoSNLcuXu3OEhnbqdCVIjtIil3jjabf3gDtb1S8FGahsuEw==
-
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -621,6 +611,11 @@ ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+ansi_up@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/ansi_up/-/ansi_up-6.0.2.tgz#083adb65be5b21ba283fd105d3102e64f3f0b092"
+  integrity sha512-3G3vKvl1ilEp7J1u6BmULpMA0xVoW/f4Ekqhl8RTrJrhEBkonKn5k3bUc5Xt+qDayA6iDX0jyUh3AbZjB/l0tw==
+
 anymatch@~3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"