rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enable timestamps in log display and improve styling for better readability

Browse source
This commit is contained in:
Andras Bacsai 2025-12-03 09:09:12 +01:00
parent eec269ea67
commit e10bd011c5
2 changed files with 20 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/Livewire/Project/Shared/GetLogs.php
View file

@ -39,7 +39,7 @@ class GetLogs extends Component
public ?bool $streamLogs = false;
public ?bool $showTimeStamps = false;
public ?bool $showTimeStamps = true;
public ?int $numberOfLines = 100;

88
resources/views/livewire/project/shared/get-logs.blade.php
View file

@ -65,21 +65,6 @@
<div :class="fullscreen ? 'fixed top-4 right-4' : 'absolute top-6 right-0'">
<div class="flex justify-end gap-4" :class="fullscreen ? 'fixed' : ''"
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">
<svg class="w-5 h-5 opacity-30 hover:opacity-100" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
@ -102,64 +87,29 @@
</div>
</div>
@if ($outputs)
<div id="logs" class="font-mono text-sm">
@foreach (explode("\n", trim($outputs)) as $line)
@if (!empty(trim($line)))
@php
$lowerLine = strtolower($line);
$isError =
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'));
<div id="logs" class="font-mono max-w-full cursor-default">
@foreach (explode("\n", $outputs) as $line)
@php
// Skip empty lines
if (trim($line) === '') {
continue;
}
// Check for timestamp at the beginning (ISO 8601 format)
$timestampPattern = '/^(\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}:\d{2}(?:\.\d{3})?Z?)\s+/';
$hasTimestamp = preg_match($timestampPattern, $line, $matches);
$timestamp = $hasTimestamp ? $matches[1] : null;
$logContent = $hasTimestamp ? preg_replace($timestampPattern, '', $line) : $line;
@endphp
<div class="flex items-start gap-2 py-1 px-2 rounded-sm">
<div class="w-1 {{ $barColor }} rounded-full flex-shrink-0 self-stretch"></div>
<div class="flex-1 {{ $bgColor }} py-1 px-2 -mx-2 rounded-sm">
@if ($hasTimestamp)
<span
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
// Style timestamps by replacing them inline
$styledLine = preg_replace(
'/(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d+Z)/',
'<span class="text-gray-500 dark:text-gray-400">$1</span>',
htmlspecialchars($line),
);
@endphp
<div
class="break-all py-0.5 transition-colors hover:bg-gray-100 dark:hover:bg-coolgray-200">
{!! $styledLine !!}
</div>
@endforeach
</div>
@else
<div id="logs" class="font-mono text-sm py-4 px-2 text-gray-500 dark:text-gray-400">
Refresh to get the logs...
</div>
<pre id="logs" class="font-mono whitespace-pre-wrap break-all max-w-full">Refresh to get the logs...</pre>
@endif
</div>
</div>