lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-23 03:25:15 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Improve log viewer by custum, colorized display

Browse Source
This commit is contained in:
Matthias 2024-01-09 06:53:04 +01:00
parent 6fb225cd5a
commit f513cbf824
1 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/ftbot/LogViewer.vue
View File

@ -1,9 +1,22 @@
<template> <template>
<div class="d-flex h-100 p-0 align-items-start"> <div class="d-flex h-100 p-0 align-items-start">
<textarea v-model="formattedLogs" class="h-100" readonly></textarea> <div ref="scrollContainer" class="border p-1 text-start pb-5 w-100 h-100 overflow-auto">
<b-button id="refresh-logs" size="sm" title="Reload Logs" @click="botStore.activeBot.getLogs"> <pre
<i-mdi-refresh /> v-for="(log, index) in botStore.activeBot.lastLogs"
</b-button> :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> </div>
</template> </template>
@ -11,19 +24,33 @@
import { useBotStore } from '@/stores/ftbotwrapper'; import { useBotStore } from '@/stores/ftbotwrapper';
const botStore = useBotStore(); const botStore = useBotStore();
const scrollContainer = ref<HTMLElement | null>(null);
onMounted(async () => { onMounted(async () => {
botStore.activeBot.getLogs(); refreshLogs();
}); });
const formattedLogs = computed(() => { async function refreshLogs() {
let result = ''; await botStore.activeBot.getLogs();
for (let i = 0, len = botStore.activeBot.lastLogs.length; i < len; i += 1) { scrollToBottom();
const log = botStore.activeBot.lastLogs[i]; }
result += `${log[0]} - ${log[2]} - ${log[3]} - ${log[4]}\n`;
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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>