Add collapsible option to GetLogs component (#7495)
This commit is contained in:
Andras Bacsai
GitHub
commit
f5ad372def
12 changed files with 51 additions and 41 deletions
|
|
@ -45,6 +45,8 @@ class GetLogs extends Component
|
|||
|
||||
public bool $expandByDefault = false;
|
||||
|
||||
public bool $collapsible = true;
|
||||
|
||||
public function mount()
|
||||
{
|
||||
if (! is_null($this->resource)) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue