Improve log viewer by custum, colorized display

src/components/ftbot/LogViewer.vue

@@ -1,9 +1,22 @@
 <template>
   <div class="d-flex h-100 p-0 align-items-start">
-    <textarea v-model="formattedLogs" class="h-100" readonly></textarea>
-    <b-button id="refresh-logs" size="sm" title="Reload Logs" @click="botStore.activeBot.getLogs">
-      <i-mdi-refresh />
-    </b-button>
+    <div ref="scrollContainer" class="border p-1 text-start pb-5 w-100 h-100 overflow-auto">
+      <pre
+        v-for="(log, index) in botStore.activeBot.lastLogs"
+        :key="index"
+        class="m-0 overflow-visible"
+        style="line-height: unset"
+      ><span class="text-muted">{{ log[0] }} <span :class="getLogColor(log[3])">{{ log[3].padEnd(7, ' ') }}</span> {{ log[2] }} - </span><span class="text-{{ log[1] }}">{{ log[4] }}</span
+        ></pre>
+    </div>
+    <div class="d-flex flex-column gap-1 ms-1">
+      <b-button id="refresh-logs" size="sm" title="Reload Logs" @click="refreshLogs">
+        <i-mdi-refresh />
+      </b-button>
+      <b-button id="refresh-logs" size="sm" title="Reload Logs" @click="scrollToBottom">
+        <i-mdi-arrow-down-thick />
+      </b-button>
+    </div>
   </div>
 </template>
 
@@ -11,19 +24,33 @@
 import { useBotStore } from '@/stores/ftbotwrapper';
 
 const botStore = useBotStore();
+const scrollContainer = ref<HTMLElement | null>(null);
 
 onMounted(async () => {
-  botStore.activeBot.getLogs();
+  refreshLogs();
 });
 
-const formattedLogs = computed(() => {
-  let result = '';
-  for (let i = 0, len = botStore.activeBot.lastLogs.length; i < len; i += 1) {
-    const log = botStore.activeBot.lastLogs[i];
-    result += `${log[0]} - ${log[2]} - ${log[3]} - ${log[4]}\n`;
+async function refreshLogs() {
+  await botStore.activeBot.getLogs();
+  scrollToBottom();
+}
+
+function getLogColor(logLevel: string) {
+  switch (logLevel) {
+    case 'WARNING':
+      return 'text-warning';
+    case 'ERROR':
+      return 'text-danger';
+    default:
+      return 'text-secondary';
   }
-  return result;
-});
+}
+
+function scrollToBottom() {
+  if (scrollContainer.value) {
+    scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
+  }
+}
 </script>
 
 <style lang="scss" scoped>