Improve log viewer by custum, colorized display

This commit is contained in:
Matthias 2024-01-09 06:53:04 +01:00
parent 6fb225cd5a
commit f513cbf824

View File

@ -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>