julian/stream-capture
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix logging style

Browse Source
This commit is contained in:
Julian Freeman
2025-12-02 10:50:15 -04:00
parent d2cafc328f
commit a04b0f4be1
1 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/views/Logs.vue
View File

@@ -30,17 +30,24 @@ watch(() => logsStore.logs.length, () => {
})
function formatTime(ts: number) {
return new Date(ts).toLocaleTimeString()
const d = new Date(ts)
const year = d.getFullYear()
const month = String(d.getMonth() + 1).padStart(2, '0')
const day = String(d.getDate()).padStart(2, '0')
const hours = String(d.getHours()).padStart(2, '0')
const minutes = String(d.getMinutes()).padStart(2, '0')
const seconds = String(d.getSeconds()).padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
</script>
<template>
<div class="flex flex-col h-full">
<div class="flex flex-col h-full p-6">
<!-- Header -->
<div class="px-8 py-6 border-b border-gray-200 dark:border-zinc-800 flex justify-between items-center bg-white dark:bg-zinc-900">
<div class="flex justify-between items-center mb-6">
<div>
<h1 class="text-2xl font-bold text-zinc-900 dark:text-white">Execution Logs</h1>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Real-time output from download processes.</p>
<h1 class="text-3xl font-bold text-zinc-900 dark:text-white">Execution Logs</h1>
<p class="text-gray-500 dark:text-gray-400 mt-2">Real-time output from download processes.</p>
</div>
<div class="flex items-center gap-3">
@@ -51,32 +58,32 @@ function formatTime(ts: number) {
v-model="searchQuery"
type="text"
placeholder="Search logs..."
class="pl-9 pr-4 py-2 bg-gray-100 dark:bg-zinc-800 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-500 border-none w-48"
class="pl-9 pr-4 py-2 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 rounded-xl text-sm outline-none focus:ring-2 focus:ring-blue-500 text-zinc-900 dark:text-white w-48"
/>
</div>
<!-- Level Filter -->
<div class="flex bg-gray-100 dark:bg-zinc-800 rounded-lg p-1">
<div class="flex bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 rounded-xl p-1">
<button
@click="filterLevel = 'all'"
class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
:class="filterLevel === 'all' ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white' : 'text-gray-500 hover:text-zinc-900 dark:hover:text-white'"
class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
:class="filterLevel === 'all' ? 'bg-gray-100 dark:bg-zinc-800 text-zinc-900 dark:text-white' : 'text-gray-500 hover:text-zinc-900 dark:hover:text-white'"
>All</button>
<button
@click="filterLevel = 'info'"
class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
:class="filterLevel === 'info' ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white' : 'text-gray-500 hover:text-zinc-900 dark:hover:text-white'"
class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
:class="filterLevel === 'info' ? 'bg-gray-100 dark:bg-zinc-800 text-zinc-900 dark:text-white' : 'text-gray-500 hover:text-zinc-900 dark:hover:text-white'"
>Info</button>
<button
@click="filterLevel = 'error'"
class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
:class="filterLevel === 'error' ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white' : 'text-gray-500 hover:text-zinc-900 dark:hover:text-white'"
class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
:class="filterLevel === 'error' ? 'bg-gray-100 dark:bg-zinc-800 text-zinc-900 dark:text-white' : 'text-gray-500 hover:text-zinc-900 dark:hover:text-white'"
>Error</button>
</div>
<button
@click="logsStore.clearLogs"
class="p-2 text-gray-500 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 rounded-lg transition-colors"
class="p-2 text-gray-500 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 rounded-xl transition-colors border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900"
title="Clear Logs"
>
<Trash2 class="w-4 h-4" />
@@ -85,23 +92,23 @@ function formatTime(ts: number) {
</div>
<!-- Logs Console -->
<div class="flex-1 overflow-hidden relative bg-gray-900 text-gray-300 font-mono text-xs md:text-sm">
<div class="flex-1 overflow-hidden relative bg-white dark:bg-zinc-900 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800 font-mono text-xs md:text-sm">
<div
ref="logsContainer"
class="absolute inset-0 overflow-auto p-4 space-y-1 custom-scrollbar"
class="absolute inset-0 overflow-auto p-4 space-y-1"
@scroll="(e) => {
const target = e.target as HTMLElement;
autoScroll = target.scrollTop + target.clientHeight >= target.scrollHeight - 10;
}"
>
<div v-if="filteredLogs.length === 0" class="h-full flex items-center justify-center text-gray-600">
<div v-if="filteredLogs.length === 0" class="h-full flex items-center justify-center text-gray-400 dark:text-gray-600">
No logs to display
</div>
<div v-for="log in filteredLogs" :key="log.id" class="flex gap-3 hover:bg-gray-800/50 px-2 py-0.5 rounded">
<span class="text-gray-600 shrink-0 select-none w-20">{{ formatTime(log.timestamp) }}</span>
<div v-for="log in filteredLogs" :key="log.id" class="flex gap-4 hover:bg-gray-50 dark:hover:bg-zinc-800/50 px-2 py-1 rounded transition-colors">
<span class="text-gray-400 dark:text-zinc-600 shrink-0 select-none w-36">{{ formatTime(log.timestamp) }}</span>
<span
class="break-all whitespace-pre-wrap"
:class="log.level === 'error' ? 'text-red-400' : 'text-gray-300'"
:class="log.level === 'error' ? 'text-red-500 dark:text-red-400' : 'text-zinc-700 dark:text-gray-300'"
>{{ log.message }}</span>
</div>
</div>
@@ -117,4 +124,4 @@ function formatTime(ts: number) {
</div>
</div>
</div>
</template>
</template>