feat: redesign log details modal with improved UI
- Add header with log level icon and colored badge - Replace grid layout with table for log metadata (timestamp, logger, module) - Add icons to table rows for better visual hierarchy - Improve message section with card styling and pre-wrap text - Enhance exception section with icon and red styling - Add stack trace section with dark theme, monospace font, and copy button - Include proper footer with close button - Support dark mode throughout all new elements 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -258,50 +258,149 @@
|
||||
<!-- Log Detail Modal -->
|
||||
<div x-show="selectedLog" x-transition class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50" @click.self="selectedLog = null">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
||||
<div class="p-6 border-b dark:border-gray-700">
|
||||
{# Modal Header with Level Badge #}
|
||||
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200">Log Details</h3>
|
||||
<button @click="selectedLog = null" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
|
||||
<span x-html="$icon('close', 'w-6 h-6')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
|
||||
<template x-if="selectedLog">
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Timestamp</p>
|
||||
<p class="text-sm text-gray-800 dark:text-gray-200" x-text="formatTimestamp(selectedLog.timestamp)"></p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Level</p>
|
||||
<p class="text-sm text-gray-800 dark:text-gray-200" x-text="selectedLog.level"></p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Logger</p>
|
||||
<p class="text-sm text-gray-800 dark:text-gray-200" x-text="selectedLog.logger_name"></p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Module</p>
|
||||
<p class="text-sm text-gray-800 dark:text-gray-200" x-text="selectedLog.module || '-'"></p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div :class="{
|
||||
'bg-yellow-100 dark:bg-yellow-900/30': selectedLog?.level === 'WARNING',
|
||||
'bg-red-100 dark:bg-red-900/30': selectedLog?.level === 'ERROR',
|
||||
'bg-purple-100 dark:bg-purple-900/30': selectedLog?.level === 'CRITICAL',
|
||||
'bg-blue-100 dark:bg-blue-900/30': selectedLog?.level === 'INFO' || selectedLog?.level === 'DEBUG'
|
||||
}" class="p-2 rounded-lg">
|
||||
<span :class="{
|
||||
'text-yellow-600 dark:text-yellow-400': selectedLog?.level === 'WARNING',
|
||||
'text-red-600 dark:text-red-400': selectedLog?.level === 'ERROR',
|
||||
'text-purple-600 dark:text-purple-400': selectedLog?.level === 'CRITICAL',
|
||||
'text-blue-600 dark:text-blue-400': selectedLog?.level === 'INFO' || selectedLog?.level === 'DEBUG'
|
||||
}" x-html="$icon(selectedLog?.level === 'WARNING' ? 'exclamation' : selectedLog?.level === 'CRITICAL' ? 'lightning-bolt' : selectedLog?.level === 'ERROR' ? 'x-circle' : 'information-circle', 'w-6 h-6')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Message</p>
|
||||
<p class="text-sm text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 p-3 rounded" x-text="selectedLog.message"></p>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Log Entry Details</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">ID: <span x-text="selectedLog?.id"></span></p>
|
||||
</div>
|
||||
<div x-show="selectedLog.exception_message">
|
||||
<p class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Exception</p>
|
||||
<p class="text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900 p-3 rounded" x-text="selectedLog.exception_type + ': ' + selectedLog.exception_message"></p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span :class="{
|
||||
'bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100': selectedLog?.level === 'WARNING',
|
||||
'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100': selectedLog?.level === 'ERROR',
|
||||
'bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100': selectedLog?.level === 'CRITICAL',
|
||||
'bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100': selectedLog?.level === 'INFO' || selectedLog?.level === 'DEBUG'
|
||||
}" class="px-3 py-1 text-sm font-semibold rounded-full" x-text="selectedLog?.level"></span>
|
||||
<button @click="selectedLog = null" class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
||||
<span x-html="$icon('close', 'w-6 h-6')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Modal Body #}
|
||||
<div class="p-6 overflow-y-auto max-h-[calc(90vh-140px)]">
|
||||
<template x-if="selectedLog">
|
||||
<div class="space-y-6">
|
||||
{# Details Table #}
|
||||
<div class="overflow-hidden border border-gray-200 dark:border-gray-700 rounded-lg">
|
||||
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50 w-1/4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span x-html="$icon('clock', 'w-4 h-4')"></span>
|
||||
Timestamp
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100" x-text="formatTimestamp(selectedLog.timestamp)"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span x-html="$icon('tag', 'w-4 h-4')"></span>
|
||||
Logger
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
|
||||
<code class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs" x-text="selectedLog.logger_name || '-'"></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span x-html="$icon('cube', 'w-4 h-4')"></span>
|
||||
Module
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
|
||||
<code class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs" x-text="selectedLog.module || '-'"></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div x-show="selectedLog.stack_trace">
|
||||
<p class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Stack Trace</p>
|
||||
<pre class="text-xs text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 p-3 rounded overflow-x-auto"><code x-text="selectedLog.stack_trace"></code></pre>
|
||||
|
||||
{# Message Section #}
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-gray-500 dark:text-gray-400" x-html="$icon('chat-alt', 'w-4 h-4')"></span>
|
||||
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Message</h4>
|
||||
</div>
|
||||
<div class="bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
|
||||
<p class="text-sm text-gray-800 dark:text-gray-200 whitespace-pre-wrap break-words" x-text="selectedLog.message"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Exception Section (conditional) #}
|
||||
<div x-show="selectedLog.exception_message" x-transition>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-red-500 dark:text-red-400" x-html="$icon('exclamation-circle', 'w-4 h-4')"></span>
|
||||
<h4 class="text-sm font-semibold text-red-700 dark:text-red-300">Exception</h4>
|
||||
</div>
|
||||
<div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex-shrink-0 p-1.5 bg-red-100 dark:bg-red-900/50 rounded">
|
||||
<span class="text-red-600 dark:text-red-400" x-html="$icon('x-circle', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-red-800 dark:text-red-200" x-text="selectedLog.exception_type"></p>
|
||||
<p class="text-sm text-red-600 dark:text-red-300 mt-1 break-words" x-text="selectedLog.exception_message"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Stack Trace Section (conditional) #}
|
||||
<div x-show="selectedLog.stack_trace" x-transition>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-gray-500 dark:text-gray-400" x-html="$icon('code', 'w-4 h-4')"></span>
|
||||
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Stack Trace</h4>
|
||||
</div>
|
||||
<button
|
||||
@click="navigator.clipboard.writeText(selectedLog.stack_trace); $dispatch('notify', {message: 'Stack trace copied!', type: 'success'})"
|
||||
class="text-xs text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300 flex items-center gap-1"
|
||||
>
|
||||
<span x-html="$icon('clipboard-copy', 'w-4 h-4')"></span>
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-gray-900 dark:bg-gray-950 border border-gray-700 rounded-lg overflow-hidden">
|
||||
<pre class="p-4 text-xs text-green-400 font-mono overflow-x-auto max-h-64 overflow-y-auto"><code x-text="selectedLog.stack_trace"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
{# Modal Footer #}
|
||||
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/30">
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
@click="selectedLog = null"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-colors"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user