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

Fix deployment logs overlap with indicator (#7580)

Browse source
This commit is contained in:
Andras Bacsai 2025-12-11 09:40:39 +01:00 committed by GitHub
commit 9598562ca0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 29 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/Livewire/DeploymentsIndicator.php
View file

@ -38,6 +38,12 @@ public function deploymentCount()
return $this->deployments->count(); return $this->deployments->count();
} }
#[Computed]
public function shouldReduceOpacity(): bool
{
return request()->routeIs('project.application.deployment.*');
}
public function toggleExpanded() public function toggleExpanded()
{ {
$this->expanded = ! $this->expanded; $this->expanded = ! $this->expanded;

45
resources/views/livewire/deployments-indicator.blade.php
View file

@ -1,16 +1,17 @@
<div wire:poll.3000ms x-data="{ <div wire:poll.3000ms x-data="{
expanded: @entangle('expanded') expanded: @entangle('expanded'),
reduceOpacity: @js($this->shouldReduceOpacity)
}" class="fixed bottom-0 z-60 mb-4 left-0 lg:left-56 ml-4"> }" class="fixed bottom-0 z-60 mb-4 left-0 lg:left-56 ml-4">
@if ($this->deploymentCount > 0) @if ($this->deploymentCount > 0)
<div class="relative"> <div class="relative transition-opacity duration-200"
:class="{ 'opacity-100': expanded || !reduceOpacity, 'opacity-60 hover:opacity-100': reduceOpacity && !expanded }">
<!-- Indicator Button --> <!-- Indicator Button -->
<button @click="expanded = !expanded" <button @click="expanded = !expanded"
class="flex items-center gap-2 px-4 py-2 rounded-lg shadow-lg transition-all duration-200 dark:bg-coolgray-100 bg-white dark:border dark:border-coolgray-200 hover:shadow-xl"> class="flex items-center gap-2 px-4 py-2 rounded-lg shadow-lg transition-all duration-200 dark:bg-coolgray-100 bg-white dark:border dark:border-coolgray-200 hover:shadow-xl">
<!-- Animated spinner --> <!-- Animated spinner -->
<svg class="w-4 h-4 text-coollabs dark:text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" <svg class="w-4 h-4 text-coollabs dark:text-warning animate-spin" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"> fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" <path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"> d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path> </path>
@ -23,8 +24,8 @@ class="flex items-center gap-2 px-4 py-2 rounded-lg shadow-lg transition-all dur
<!-- Expand/collapse icon --> <!-- Expand/collapse icon -->
<svg class="w-4 h-4 transition-transform duration-200 dark:text-neutral-400 text-gray-600" <svg class="w-4 h-4 transition-transform duration-200 dark:text-neutral-400 text-gray-600"
:class="{ 'rotate-180': expanded }" xmlns="http://www.w3.org/2000/svg" fill="none" :class="{ 'rotate-180': expanded }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
viewBox="0 0 24 24" stroke="currentColor"> stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg> </svg>
</button> </button>
@ -32,9 +33,8 @@ class="flex items-center gap-2 px-4 py-2 rounded-lg shadow-lg transition-all dur
<!-- Expanded deployment list --> <!-- Expanded deployment list -->
<div x-show="expanded" x-transition:enter="transition ease-out duration-200" <div x-show="expanded" x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-2" x-transition:leave-end="opacity-0 translate-y-2" x-cloak
x-cloak
class="absolute bottom-full mb-2 w-80 max-h-96 overflow-y-auto rounded-lg shadow-xl dark:bg-coolgray-100 bg-white dark:border dark:border-coolgray-200"> class="absolute bottom-full mb-2 w-80 max-h-96 overflow-y-auto rounded-lg shadow-xl dark:bg-coolgray-100 bg-white dark:border dark:border-coolgray-200">
<div class="p-4 space-y-3"> <div class="p-4 space-y-3">
@ -46,16 +46,15 @@ class="flex items-start gap-3 p-3 rounded-lg dark:bg-coolgray-200 bg-gray-50 tra
@if ($deployment->status === 'in_progress') @if ($deployment->status === 'in_progress')
<svg class="w-4 h-4 text-coollabs dark:text-warning animate-spin" <svg class="w-4 h-4 text-coollabs dark:text-warning animate-spin"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
stroke="currentColor" stroke-width="4"></circle> </circle>
<path class="opacity-75" fill="currentColor" <path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"> d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path> </path>
</svg> </svg>
@else @else
<svg class="w-4 h-4 dark:text-neutral-400 text-gray-500" <svg class="w-4 h-4 dark:text-neutral-400 text-gray-500" xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> </svg>
@ -68,7 +67,8 @@ class="flex items-start gap-3 p-3 rounded-lg dark:bg-coolgray-200 bg-gray-50 tra
{{ $deployment->application_name }} {{ $deployment->application_name }}
</div> </div>
<p class="text-xs dark:text-neutral-400 text-gray-600 mt-1"> <p class="text-xs dark:text-neutral-400 text-gray-600 mt-1">
{{ $deployment->application?->environment?->project?->name }} / {{ $deployment->application?->environment?->name }} {{ $deployment->application?->environment?->project?->name }} /
{{ $deployment->application?->environment?->name }}
</p> </p>
<p class="text-xs dark:text-neutral-400 text-gray-600"> <p class="text-xs dark:text-neutral-400 text-gray-600">
{{ $deployment->server_name }} {{ $deployment->server_name }}
@ -78,11 +78,10 @@ class="flex items-start gap-3 p-3 rounded-lg dark:bg-coolgray-200 bg-gray-50 tra
PR #{{ $deployment->pull_request_id }} PR #{{ $deployment->pull_request_id }}
</p> </p>
@endif @endif
<p class="text-xs mt-1 capitalize" <p class="text-xs mt-1 capitalize" :class="{
:class="{ 'text-coollabs dark:text-warning': '{{ $deployment->status }}' === 'in_progress',
'text-coollabs dark:text-warning': '{{ $deployment->status }}' === 'in_progress', 'dark:text-neutral-400 text-gray-500': '{{ $deployment->status }}' === 'queued'
'dark:text-neutral-400 text-gray-500': '{{ $deployment->status }}' === 'queued' }">
}">
{{ str_replace('_', ' ', $deployment->status) }} {{ str_replace('_', ' ', $deployment->status) }}
</p> </p>
</div> </div>
@ -92,4 +91,4 @@ class="flex items-start gap-3 p-3 rounded-lg dark:bg-coolgray-200 bg-gray-50 tra
</div> </div>
</div> </div>
@endif @endif
</div> </div>

2
resources/views/livewire/project/application/deployment/show.blade.php
View file

@ -255,7 +255,7 @@ class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
</div> </div>
<div id="logsContainer" <div id="logsContainer"
class="flex flex-col overflow-y-auto p-2 px-4 min-h-4 scrollbar" class="flex flex-col overflow-y-auto p-2 px-4 min-h-4 scrollbar"
:class="fullscreen ? 'flex-1' : 'max-h-[40rem]'"> :class="fullscreen ? 'flex-1' : 'max-h-[30rem]'">
<div id="logs" class="flex flex-col font-mono"> <div id="logs" class="flex flex-col font-mono">
<div x-show="searchQuery.trim() && getMatchCount() === 0" <div x-show="searchQuery.trim() && getMatchCount() === 0"
class="text-gray-500 dark:text-gray-400 py-2"> class="text-gray-500 dark:text-gray-400 py-2">