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

Add collapsible option to GetLogs component and improve toolbar layout

Browse source 
Added a new `collapsible` property to GetLogs component that allows disabling the expandable header, useful for log viewers in dedicated pages and slide-overs. Applied this to Sentinel logs, Proxy logs, and Coolify Proxy log pages. Also improved the toolbar by moving the lines counter to the left side with an inline prefix label and repositioning the match counter next to it for better organization.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai 2025-12-04 15:37:14 +01:00
parent 9e0fa03434
commit cbba7f0a67
12 changed files with 51 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -45,6 +45,8 @@ class GetLogs extends Component
public bool $expandByDefault = false;
public bool $collapsible = true;
public function mount()
{
if (! is_null($this->resource)) {

2
resources/views/livewire/project/database/clickhouse/general.blade.php
View file

@ -66,7 +66,7 @@
<x-slot:title>Proxy Logs</x-slot:title>
<x-slot:content>
<livewire:project.shared.get-logs :server="$server" :resource="$database"
container="{{ data_get($database, 'uuid') }}-proxy" lazy />
container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
</x-slot:content>
<x-forms.button disabled="{{ !$isPublic }}"
@click="slideOverOpen=true">Logs</x-forms.button>

2
resources/views/livewire/project/database/dragonfly/general.blade.php
View file

@ -103,7 +103,7 @@
<x-slot:title>Proxy Logs</x-slot:title>
<x-slot:content>
<livewire:project.shared.get-logs :server="$server" :resource="$database"
container="{{ data_get($database, 'uuid') }}-proxy" lazy />
container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
</x-slot:content>
<x-forms.button disabled="{{ !$isPublic }}"
@click="slideOverOpen=true">Logs</x-forms.button>

2
resources/views/livewire/project/database/keydb/general.blade.php
View file

@ -103,7 +103,7 @@
<x-slot:title>Proxy Logs</x-slot:title>
<x-slot:content>
<livewire:project.shared.get-logs :server="$server" :resource="$database"
container="{{ data_get($database, 'uuid') }}-proxy" lazy />
container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
</x-slot:content>
<x-forms.button disabled="{{ !$isPublic }}"
@click="slideOverOpen=true">Logs</x-forms.button>

2
resources/views/livewire/project/database/mariadb/general.blade.php
View file

@ -127,7 +127,7 @@
<x-slot:title>Proxy Logs</x-slot:title>
<x-slot:content>
<livewire:project.shared.get-logs :server="$server" :resource="$database"
container="{{ data_get($database, 'uuid') }}-proxy" lazy />
container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
</x-slot:content>
<x-forms.button disabled="{{ !data_get($database, 'is_public') }}"
@click="slideOverOpen=true">Logs</x-forms.button>

2
resources/views/livewire/project/database/mongodb/general.blade.php
View file

@ -141,7 +141,7 @@
<x-slot:title>Proxy Logs</x-slot:title>
<x-slot:content>
<livewire:project.shared.get-logs :server="$server" :resource="$database"
container="{{ data_get($database, 'uuid') }}-proxy" lazy />
container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
</x-slot:content>
<x-forms.button disabled="{{ !data_get($database, 'is_public') }}"
@click="slideOverOpen=true">Logs</x-forms.button>

2
resources/views/livewire/project/database/mysql/general.blade.php
View file

@ -144,7 +144,7 @@
<x-slot:title>Proxy Logs</x-slot:title>
<x-slot:content>
<livewire:project.shared.get-logs :server="$server" :resource="$database"
container="{{ data_get($database, 'uuid') }}-proxy" lazy />
container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
</x-slot:content>
<x-forms.button disabled="{{ !data_get($database, 'is_public') }}"
@click="slideOverOpen=true">Logs</x-forms.button>

2
resources/views/livewire/project/database/postgresql/general.blade.php
View file

@ -152,7 +152,7 @@
<x-slot:title>Proxy Logs</x-slot:title>
<x-slot:content>
<livewire:project.shared.get-logs :server="$server" :resource="$database"
container="{{ data_get($database, 'uuid') }}-proxy" lazy />
container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
</x-slot:content>
<x-forms.button disabled="{{ !data_get($database, 'is_public') }}"
@click="slideOverOpen=true">Logs</x-forms.button>

2
resources/views/livewire/project/database/redis/general.blade.php
View file

@ -122,7 +122,7 @@
<x-slot:title>Proxy Logs</x-slot:title>
<x-slot:content>
<livewire:project.shared.get-logs :server="$server" :resource="$database"
container="{{ data_get($database, 'uuid') }}-proxy" lazy />
container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
</x-slot:content>
<x-forms.button disabled="{{ !$isPublic }}"
@click="slideOverOpen=true">Logs</x-forms.button>

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

@ -1,7 +1,8 @@
<div class="my-4 border dark:border-coolgray-200 border-neutral-200">
<div class="{{ $collapsible ? 'my-4 border dark:border-coolgray-200 border-neutral-200' : '' }}">
<div id="screen" x-data="{
expanded: {{ $expandByDefault ? 'true' : 'false' }},
logsLoaded: {{ $expandByDefault ? 'true' : 'false' }},
collapsible: {{ $collapsible ? 'true' : 'false' }},
expanded: {{ ($expandByDefault || !$collapsible) ? 'true' : 'false' }},
logsLoaded: {{ ($expandByDefault || !$collapsible) ? 'true' : 'false' }},
fullscreen: false,
alwaysScroll: false,
intervalId: null,
@ -139,41 +140,46 @@
});
}
}">
<div class="flex gap-2 items-center p-4 cursor-pointer select-none hover:bg-gray-50 dark:hover:bg-coolgray-200"
x-on:click="expanded = !expanded; if (expanded && !logsLoaded) { $wire.getLogs(); logsLoaded = true; }">
<svg class="w-4 h-4 transition-transform" :class="expanded ? 'rotate-90' : ''" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
</svg>
@if ($displayName)
<h4>{{ $displayName }}</h4>
@elseif ($resource?->type() === 'application' || str($resource?->type())->startsWith('standalone'))
<h4>{{ $container }}</h4>
@else
<h4>{{ str($container)->beforeLast('-')->headline() }}</h4>
@endif
@if ($pull_request)
<div>({{ $pull_request }})</div>
@endif
@if ($streamLogs)
<x-loading wire:poll.2000ms='getLogs(true)' />
@endif
</div>
<div x-show="expanded" x-collapse
:class="fullscreen ? 'fullscreen flex flex-col' : 'relative w-full py-4 mx-auto'">
@if ($collapsible)
<div class="flex gap-2 items-center p-4 cursor-pointer select-none hover:bg-gray-50 dark:hover:bg-coolgray-200"
x-on:click="expanded = !expanded; if (expanded && !logsLoaded) { $wire.getLogs(); logsLoaded = true; }">
<svg class="w-4 h-4 transition-transform" :class="expanded ? 'rotate-90' : ''" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
</svg>
@if ($displayName)
<h4>{{ $displayName }}</h4>
@elseif ($resource?->type() === 'application' || str($resource?->type())->startsWith('standalone'))
<h4>{{ $container }}</h4>
@else
<h4>{{ str($container)->beforeLast('-')->headline() }}</h4>
@endif
@if ($pull_request)
<div>({{ $pull_request }})</div>
@endif
@if ($streamLogs)
<x-loading wire:poll.2000ms='getLogs(true)' />
@endif
</div>
@endif
<div x-show="expanded" {{ $collapsible ? 'x-collapse' : '' }}
:class="fullscreen ? 'fullscreen flex flex-col' : 'relative w-full {{ $collapsible ? 'py-4' : '' }} mx-auto'">
<div class="flex flex-col bg-white dark:text-white dark:bg-coolgray-100 dark:border-coolgray-300 border-neutral-200"
:class="fullscreen ? 'h-full' : 'border border-solid rounded-sm'">
<div
class="flex items-center justify-between gap-2 px-4 py-2 border-b dark:border-coolgray-300 border-neutral-200 shrink-0">
<span x-show="searchQuery.trim()" x-text="getMatchCount() + ' matches'"
class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"></span>
<span x-show="!searchQuery.trim()"></span>
<div class="flex items-center gap-2">
<form wire:submit="getLogs(true)" class="flex items-center">
<form wire:submit="getLogs(true)" class="relative flex items-center">
<span
class="absolute left-2 top-1/2 -translate-y-1/2 text-xs text-gray-400 pointer-events-none">Lines:</span>
<input type="number" wire:model="numberOfLines" placeholder="100" min="1"
title="Number of Lines" {{ $streamLogs ? 'readonly' : '' }}
class="input input-sm w-20 text-center dark:bg-coolgray-300" />
class="input input-sm w-24 pl-11 text-center dark:bg-coolgray-300" />
</form>
<span x-show="searchQuery.trim()" x-text="getMatchCount() + ' matches'"
class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"></span>
</div>
<div class="flex items-center gap-2">
<div class="relative">
<svg class="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"

2
resources/views/livewire/server/proxy/logs.blade.php
View file

@ -7,7 +7,7 @@
<x-server.sidebar-proxy :server="$server" :parameters="$parameters" />
<div class="w-full">
<h2 class="pb-4">Logs</h2>
<livewire:project.shared.get-logs :server="$server" container="coolify-proxy" displayName="Coolify Proxy" />
<livewire:project.shared.get-logs :server="$server" container="coolify-proxy" displayName="Coolify Proxy" :collapsible="false" />
</div>
</div>
</div>

6
resources/views/livewire/server/show.blade.php
View file

@ -337,7 +337,8 @@ class="w-full input opacity-50 cursor-not-allowed"
<x-slot:title>Sentinel Logs</x-slot:title>
<x-slot:content>
<livewire:project.shared.get-logs :server="$server"
container="coolify-sentinel" displayName="Sentinel" lazy />
container="coolify-sentinel" displayName="Sentinel" :collapsible="false"
lazy />
</x-slot:content>
<x-forms.button @click="slideOverOpen=true"
:disabled="$isValidating">Logs</x-forms.button>
@ -353,7 +354,8 @@ class="w-full input opacity-50 cursor-not-allowed"
<x-slot:title>Sentinel Logs</x-slot:title>
<x-slot:content>
<livewire:project.shared.get-logs :server="$server"
container="coolify-sentinel" displayName="Sentinel" lazy />
container="coolify-sentinel" displayName="Sentinel" :collapsible="false"
lazy />
</x-slot:content>
<x-forms.button @click="slideOverOpen=true"
:disabled="$isValidating">Logs</x-forms.button>