djsundog/ffplayout
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add color to log, add logging level filter

Browse Source
This commit is contained in:
jb-alvarado 2024-06-25 17:12:08 +02:00
parent eb6a8f8c13
commit 761e2816f9
2 changed files with 43 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
composables/helper.ts
View File

@ -22,11 +22,11 @@ export const stringFormatter = () => {
return bytes.toFixed(dp) + ' ' + units[u]
}
function formatLog(text: string) {
function formatLog(text: string): string {
return text
.replace(/\x1B\[33m(.*?)\x1B\[0m/g, '<span class="log-number">$1</span>')
.replace(/\x1B\[1m\x1B\[35m(.*?)\x1B\[0m\x1B\[22m/g, '<span class="log-addr">$1</span>')
.replace(/\x1B\[94m(.*?)\x1B\[0m/g, '<span class="log-cmd">$1</span>')
.replace(/<yellow>(.*?)<\/>/g, '<span class="log-number">$1</span>')
.replace(/<b><magenta>(.*?)<\/><\/b>/g, '<span class="log-addr">$1</span>')
.replace(/<bright-blue>(.*?)<\/>/g, '<span class="log-cmd">$1</span>')
.replace(/\x1B\[90m(.*?)\x1B\[0m/g, '<span class="log-debug">$1</span>')
.replace(/(\[\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}.[\d]+\])/g, '<span class="log-time">$1</span>')
.replace(/\[ INFO\]/g, '<span class="log-info">[ INFO]</span>')

45
pages/logging.vue
View File

@ -2,6 +2,16 @@
<div class="w-full flex flex-col">
<div class="flex justify-end p-3 h-14">
<div class="join">
<select v-model="errorLevel" class="join-item select select-sm select-bordered w-full max-w-xs">
<option
v-for="(index, value) in severityLevels"
:key="index"
:value="value"
:selected="value === 'INFO' ? true : false"
>
{{ value }}
</option>
</select>
<VueDatePicker
v-model="listDate"
:clearable="false"
@ -15,17 +25,16 @@
input-class-name="join-item input input-sm !input-bordered !w-[300px] text-right !pe-3"
required
/>
<button
class="btn btn-sm btn-primary join-item"
:title="$t('log.download')"
@click="downloadLog"
>
<button class="btn btn-sm btn-primary join-item" :title="$t('log.download')" @click="downloadLog">
<i class="bi-download" />
</button>
</div>
</div>
<div class="px-3 inline-block h-[calc(100vh-140px)] text-[13px]">
<div class="bg-base-300 whitespace-pre h-full font-mono overflow-auto p-3" v-html="formatLog(currentLog)" />
<div
class="bg-base-300 whitespace-pre h-full font-mono overflow-auto p-3"
v-html="filterLogsBySeverity(formatLog(currentLog), errorLevel)"
/>
</div>
</div>
</template>
@ -49,6 +58,14 @@ const currentLog = ref('')
const listDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
const { formatLog } = stringFormatter()
const errorLevel = ref('INFO')
const severityLevels: { [key: string]: number } = {
DEBUG: 1,
INFO: 2,
WARN: 3,
ERROR: 4,
}
onMounted(() => {
getLog()
})
@ -61,6 +78,22 @@ const calendarFormat = (date: Date) => {
return $dayjs(date).locale(locale.value).format('dddd - LL')
}
function filterLogsBySeverity(logString: string, minSeverity: string): string {
const minLevel = severityLevels[minSeverity]
const logLines = logString.trim().split(/\r?\n/)
const filteredLogs = logLines.filter((log) => {
const match = log.match(/\[ ?(DEBUG|INFO|WARN|ERROR)\]/)
if (match) {
const logLevel = match[1]
return severityLevels[logLevel] >= minLevel
}
return false
})
return filteredLogs.join('\n')
}
async function getLog() {
let date = listDate.value