Enable timestamps in log display and improve styling for better readability
This commit is contained in:
Andras Bacsai
parent
eec269ea67
commit
e10bd011c5
2 changed files with 20 additions and 70 deletions
|
|
@ -39,7 +39,7 @@ class GetLogs extends Component
|
||||||
|
|
||||||
public ?bool $streamLogs = false;
|
public ?bool $streamLogs = false;
|
||||||
|
|
||||||
public ?bool $showTimeStamps = false;
|
public ?bool $showTimeStamps = true;
|
||||||
|
|
||||||
public ?int $numberOfLines = 100;
|
public ?int $numberOfLines = 100;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -65,21 +65,6 @@
|
||||||
<div :class="fullscreen ? 'fixed top-4 right-4' : 'absolute top-6 right-0'">
|
<div :class="fullscreen ? 'fixed top-4 right-4' : 'absolute top-6 right-0'">
|
||||||
<div class="flex justify-end gap-4" :class="fullscreen ? 'fixed' : ''"
|
<div class="flex justify-end gap-4" :class="fullscreen ? 'fixed' : ''"
|
||||||
style="transform: translateX(-100%)">
|
style="transform: translateX(-100%)">
|
||||||
{{-- <button title="Go Top" x-show="fullscreen" x-on:click="goTop">
|
|
||||||
<svg class="w-5 h-5 opacity-30 hover:opacity-100" viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill="none" stroke="currentColor" stroke-linecap="round"
|
|
||||||
stroke-linejoin="round" stroke-width="2" d="M12 5v14m4-10l-4-4M8 9l4-4" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button title="Follow Logs" x-show="fullscreen" :class="alwaysScroll ? 'dark:text-warning' : ''"
|
|
||||||
x-on:click="toggleScroll">
|
|
||||||
<svg class="w-5 h-5 opacity-30 hover:opacity-100" viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill="none" stroke="currentColor" stroke-linecap="round"
|
|
||||||
stroke-linejoin="round" stroke-width="2" d="M12 5v14m4-4l-4 4m-4-4l4 4" />
|
|
||||||
</svg>
|
|
||||||
</button> --}}
|
|
||||||
<button title="Fullscreen" x-show="!fullscreen" x-on:click="makeFullscreen">
|
<button title="Fullscreen" x-show="!fullscreen" x-on:click="makeFullscreen">
|
||||||
<svg class="w-5 h-5 opacity-30 hover:opacity-100" viewBox="0 0 24 24"
|
<svg class="w-5 h-5 opacity-30 hover:opacity-100" viewBox="0 0 24 24"
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
|
@ -102,64 +87,29 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@if ($outputs)
|
@if ($outputs)
|
||||||
<div id="logs" class="font-mono text-sm">
|
<div id="logs" class="font-mono max-w-full cursor-default">
|
||||||
@foreach (explode("\n", trim($outputs)) as $line)
|
@foreach (explode("\n", $outputs) as $line)
|
||||||
@if (!empty(trim($line)))
|
@php
|
||||||
@php
|
// Skip empty lines
|
||||||
$lowerLine = strtolower($line);
|
if (trim($line) === '') {
|
||||||
$isError =
|
continue;
|
||||||
str_contains($lowerLine, 'error') ||
|
}
|
||||||
str_contains($lowerLine, 'err') ||
|
|
||||||
str_contains($lowerLine, 'failed') ||
|
|
||||||
str_contains($lowerLine, 'exception');
|
|
||||||
$isWarning =
|
|
||||||
str_contains($lowerLine, 'warn') ||
|
|
||||||
str_contains($lowerLine, 'warning') ||
|
|
||||||
str_contains($lowerLine, 'wrn');
|
|
||||||
$isDebug =
|
|
||||||
str_contains($lowerLine, 'debug') ||
|
|
||||||
str_contains($lowerLine, 'dbg') ||
|
|
||||||
str_contains($lowerLine, 'trace');
|
|
||||||
$barColor = $isError
|
|
||||||
? 'bg-red-500 dark:bg-red-400'
|
|
||||||
: ($isWarning
|
|
||||||
? 'bg-warning-500 dark:bg-warning-400'
|
|
||||||
: ($isDebug
|
|
||||||
? 'bg-purple-500 dark:bg-purple-400'
|
|
||||||
: 'bg-blue-500 dark:bg-blue-400'));
|
|
||||||
$bgColor = $isError
|
|
||||||
? 'bg-red-50/50 dark:bg-red-900/20 hover:bg-red-100/50 dark:hover:bg-red-800/30'
|
|
||||||
: ($isWarning
|
|
||||||
? 'bg-warning-50/50 dark:bg-warning-900/20 hover:bg-warning-100/50 dark:hover:bg-warning-800/30'
|
|
||||||
: ($isDebug
|
|
||||||
? 'bg-purple-50/50 dark:bg-purple-900/20 hover:bg-purple-100/50 dark:hover:bg-purple-800/30'
|
|
||||||
: 'bg-blue-50/50 dark:bg-blue-900/20 hover:bg-blue-100/50 dark:hover:bg-blue-800/30'));
|
|
||||||
|
|
||||||
// Check for timestamp at the beginning (ISO 8601 format)
|
// Style timestamps by replacing them inline
|
||||||
$timestampPattern = '/^(\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}:\d{2}(?:\.\d{3})?Z?)\s+/';
|
$styledLine = preg_replace(
|
||||||
$hasTimestamp = preg_match($timestampPattern, $line, $matches);
|
'/(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d+Z)/',
|
||||||
$timestamp = $hasTimestamp ? $matches[1] : null;
|
'<span class="text-gray-500 dark:text-gray-400">$1</span>',
|
||||||
$logContent = $hasTimestamp ? preg_replace($timestampPattern, '', $line) : $line;
|
htmlspecialchars($line),
|
||||||
@endphp
|
);
|
||||||
<div class="flex items-start gap-2 py-1 px-2 rounded-sm">
|
@endphp
|
||||||
<div class="w-1 {{ $barColor }} rounded-full flex-shrink-0 self-stretch"></div>
|
<div
|
||||||
<div class="flex-1 {{ $bgColor }} py-1 px-2 -mx-2 rounded-sm">
|
class="break-all py-0.5 transition-colors hover:bg-gray-100 dark:hover:bg-coolgray-200">
|
||||||
@if ($hasTimestamp)
|
{!! $styledLine !!}
|
||||||
<span
|
</div>
|
||||||
class="text-xs text-gray-500 dark:text-gray-400 font-mono mr-2">{{ $timestamp }}</span>
|
|
||||||
<span class="whitespace-pre-wrap break-all">{{ $logContent }}</span>
|
|
||||||
@else
|
|
||||||
<span class="whitespace-pre-wrap break-all">{{ $line }}</span>
|
|
||||||
@endif
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
@else
|
@else
|
||||||
<div id="logs" class="font-mono text-sm py-4 px-2 text-gray-500 dark:text-gray-400">
|
<pre id="logs" class="font-mono whitespace-pre-wrap break-all max-w-full">Refresh to get the logs...</pre>
|
||||||
Refresh to get the logs...
|
|
||||||
</div>
|
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue