feat(frontend): add buildit-monitor page

frontend/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@mdi/font": "7.0.96",
+    "@xterm/xterm": "^5.5.0",
     "ansi_up": "^6.0.2",
     "axios": "^1.6.7",
     "core-js": "^3.34.0",

frontend/src/pages/monitor/[hostname].vue

@@ -0,0 +1,37 @@
+<template>
+  <v-container style="height: 100%; font-family: monospace">
+    <v-row v-if="loading">
+      <v-spacer></v-spacer>
+      <v-progress-circular indeterminate></v-progress-circular>
+      <v-spacer></v-spacer>
+    </v-row>
+    <div id="terminal"></div>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { Terminal } from "@xterm/xterm";
+export default {
+  mounted() {
+    this.fetchData();
+  },
+  data: () => ({
+    loading: true,
+  }),
+  methods: {
+    fetchData() {
+      const term = new Terminal();
+      let name = (this.$route.params as { hostname: string }).hostname;
+      const socket = new WebSocket(
+        `wss://buildit.aosc.io/api/ws/viewer/${name}`
+      );
+      this.loading = false;
+      term.open(document.getElementById('terminal'));
+      socket.onmessage = (event) => {
+        const data = event.data;
+        term.write(data);
+      };
+    },
+  },
+};
+</script>

frontend/yarn.lock

@@ -579,6 +579,11 @@
   dependencies:
     upath "^2.0.1"
 
+"@xterm/xterm@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@xterm/xterm/-/xterm-5.5.0.tgz#275fb8f6e14afa6e8a0c05d4ebc94523ff775396"
+  integrity sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"