Skip to content

Fix deployment logs overlap with indicator #7580

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andrasbacsai merged 2 commits into from
Dec 11, 2025
Merged

Fix deployment logs overlap with indicator #7580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
911cfa0
Fix deployment logs overlap with indicator and improve visibility
andrasbacsai Dec 11, 2025
c6a8908
Refactor deployment indicator to use server-side route detection
andrasbacsai Dec 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions app/Livewire/DeploymentsIndicator.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@ public function deploymentCount()
return $this->deployments->count();
}

#[Computed]
public function shouldReduceOpacity(): bool
{
return request()->routeIs('project.application.deployment.*');
}

public function toggleExpanded()
{
$this->expanded = ! $this->expanded;
Expand Down
45 changes: 22 additions & 23 deletions resources/views/livewire/deployments-indicator.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
<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">
@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 -->
<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">
<!-- Animated spinner -->
<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">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
stroke-width="4"></circle>
<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">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<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">
</path>
Expand All @@ -23,18 +24,17 @@ class="flex items-center gap-2 px-4 py-2 rounded-lg shadow-lg transition-all dur

<!-- Expand/collapse icon -->
<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"
viewBox="0 0 24 24" stroke="currentColor">
:class="{ 'rotate-180': expanded }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>

<!-- Expanded deployment list -->
<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:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-2"
x-cloak
x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-2" 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">

<div class="p-4 space-y-3">
Expand All @@ -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')
<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">
<circle class="opacity-25" cx="12" cy="12" r="10"
stroke="currentColor" stroke-width="4"></circle>
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
</circle>
<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">
</path>
</svg>
@else
<svg class="w-4 h-4 dark:text-neutral-400 text-gray-500"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<svg class="w-4 h-4 dark:text-neutral-400 text-gray-500" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
Expand All @@ -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 }}
</div>
<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 class="text-xs dark:text-neutral-400 text-gray-600">
{{ $deployment->server_name }}
Expand All @@ -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 }}
</p>
@endif
<p class="text-xs mt-1 capitalize"
:class="{
'text-coollabs dark:text-warning': '{{ $deployment->status }}' === 'in_progress',
'dark:text-neutral-400 text-gray-500': '{{ $deployment->status }}' === 'queued'
}">
<p class="text-xs mt-1 capitalize" :class="{
'text-coollabs dark:text-warning': '{{ $deployment->status }}' === 'in_progress',
'dark:text-neutral-400 text-gray-500': '{{ $deployment->status }}' === 'queued'
}">
{{ str_replace('_', ' ', $deployment->status) }}
</p>
</div>
Expand All @@ -92,4 +91,4 @@ class="flex items-start gap-3 p-3 rounded-lg dark:bg-coolgray-200 bg-gray-50 tra
</div>
</div>
@endif
</div>
</div>
2 changes: 1 addition & 1 deletion resources/views/livewire/project/application/deployment/show.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,7 @@ class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
</div>
<div id="logsContainer" @scroll="handleScroll"
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 x-show="searchQuery.trim() && getMatchCount() === 0"
class="text-gray-500 dark:text-gray-400 py-2">
Expand Down