refactor(logs): enhance container loading logic and improve UI for logs display across various resource types
This commit is contained in:
@@ -25,6 +25,8 @@ class Logs extends Component
|
||||
|
||||
public Collection $containers;
|
||||
|
||||
public array $serverContainers = [];
|
||||
|
||||
public $container = [];
|
||||
|
||||
public $parameters;
|
||||
@@ -37,6 +39,8 @@ class Logs extends Component
|
||||
|
||||
public $cpu;
|
||||
|
||||
public bool $containersLoaded = false;
|
||||
|
||||
public function getListeners()
|
||||
{
|
||||
$teamId = auth()->user()->currentTeam()->id;
|
||||
@@ -46,25 +50,77 @@ class Logs extends Component
|
||||
];
|
||||
}
|
||||
|
||||
public function loadContainers($server_id)
|
||||
public function loadAllContainers()
|
||||
{
|
||||
try {
|
||||
$server = $this->servers->firstWhere('id', $server_id);
|
||||
if (! $server->isFunctional()) {
|
||||
return;
|
||||
foreach ($this->servers as $server) {
|
||||
$this->serverContainers[$server->id] = $this->getContainersForServer($server);
|
||||
}
|
||||
$this->containersLoaded = true;
|
||||
} catch (\Exception $e) {
|
||||
$this->containersLoaded = true; // Set to true to stop loading spinner
|
||||
|
||||
return handleError($e, $this);
|
||||
}
|
||||
}
|
||||
|
||||
private function getContainersForServer($server)
|
||||
{
|
||||
if (! $server->isFunctional()) {
|
||||
return [];
|
||||
}
|
||||
|
||||
try {
|
||||
if ($server->isSwarm()) {
|
||||
$containers = collect([
|
||||
[
|
||||
'ID' => $this->resource->uuid,
|
||||
'Names' => $this->resource->uuid.'_'.$this->resource->uuid,
|
||||
],
|
||||
]);
|
||||
|
||||
return $containers->toArray();
|
||||
} else {
|
||||
$containers = getCurrentApplicationContainerStatus($server, $this->resource->id, includePullrequests: true);
|
||||
if ($containers && $containers->count() > 0) {
|
||||
return $containers->sort()->toArray();
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
$server->containers = $containers->sort();
|
||||
} catch (\Exception $e) {
|
||||
return handleError($e, $this);
|
||||
// Log error but don't fail the entire operation
|
||||
ray("Error loading containers for server {$server->name}: ".$e->getMessage());
|
||||
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
public function getServerContainers($serverId)
|
||||
{
|
||||
return $this->serverContainers[$serverId] ?? [];
|
||||
}
|
||||
|
||||
public function hasContainersForServer($serverId)
|
||||
{
|
||||
return isset($this->serverContainers[$serverId]) && count($this->serverContainers[$serverId]) > 0;
|
||||
}
|
||||
|
||||
public function debugContainers()
|
||||
{
|
||||
ray([
|
||||
'containersLoaded' => $this->containersLoaded,
|
||||
'serversCount' => $this->servers->count(),
|
||||
'serverContainers' => $this->serverContainers,
|
||||
'servers' => $this->servers->map(fn ($s) => ['id' => $s->id, 'name' => $s->name, 'functional' => $s->isFunctional()])->toArray(),
|
||||
]);
|
||||
}
|
||||
|
||||
public function loadContainers($server_id = null)
|
||||
{
|
||||
// Keep for backward compatibility, but redirect to loadAllContainers
|
||||
if (! $this->containersLoaded) {
|
||||
$this->loadAllContainers();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,6 +129,7 @@ class Logs extends Component
|
||||
try {
|
||||
$this->containers = collect();
|
||||
$this->servers = collect();
|
||||
$this->serverContainers = [];
|
||||
$this->parameters = get_route_parameters();
|
||||
$this->query = request()->query();
|
||||
if (data_get($this->parameters, 'application_uuid')) {
|
||||
@@ -80,7 +137,8 @@ class Logs extends Component
|
||||
$this->resource = Application::where('uuid', $this->parameters['application_uuid'])->firstOrFail();
|
||||
$this->status = $this->resource->status;
|
||||
if ($this->resource->destination->server->isFunctional()) {
|
||||
$this->servers = $this->servers->push($this->resource->destination->server);
|
||||
$server = $this->resource->destination->server;
|
||||
$this->servers = $this->servers->push($server);
|
||||
}
|
||||
foreach ($this->resource->additional_servers as $server) {
|
||||
if ($server->isFunctional()) {
|
||||
@@ -96,7 +154,8 @@ class Logs extends Component
|
||||
$this->resource = $resource;
|
||||
$this->status = $this->resource->status;
|
||||
if ($this->resource->destination->server->isFunctional()) {
|
||||
$this->servers = $this->servers->push($this->resource->destination->server);
|
||||
$server = $this->resource->destination->server;
|
||||
$this->servers = $this->servers->push($server);
|
||||
}
|
||||
$this->container = $this->resource->uuid;
|
||||
$this->containers->push($this->container);
|
||||
@@ -110,7 +169,8 @@ class Logs extends Component
|
||||
$this->containers->push(data_get($database, 'name').'-'.data_get($this->resource, 'uuid'));
|
||||
});
|
||||
if ($this->resource->server->isFunctional()) {
|
||||
$this->servers = $this->servers->push($this->resource->server);
|
||||
$server = $this->resource->server;
|
||||
$this->servers = $this->servers->push($server);
|
||||
}
|
||||
}
|
||||
$this->containers = $this->containers->sort();
|
||||
|
@@ -9,13 +9,13 @@
|
||||
<h2>Deployments <span class="text-xs">({{ $deployments_count }})</span></h2>
|
||||
@if ($deployments_count > 0)
|
||||
<x-forms.button disabled="{{ !$show_prev }}" wire:click="previous_page('{{ $default_take }}')">
|
||||
<svg class="w-6 h-6" viewBox="0 0 24 24">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24">
|
||||
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2" d="m14 6l-6 6l6 6z" />
|
||||
</svg>
|
||||
</x-forms.button>
|
||||
<x-forms.button disabled="{{ !$show_next }}" wire:click="next_page('{{ $default_take }}')">
|
||||
<svg class="w-6 h-6" viewBox="0 0 24 24">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24">
|
||||
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2" d="m10 18l6-6l-6-6z" />
|
||||
</svg>
|
||||
@@ -45,11 +45,16 @@
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span @class([
|
||||
'px-3 py-1 rounded-md text-xs font-medium shadow-xs',
|
||||
'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' => data_get($deployment, 'status') === 'in_progress',
|
||||
'bg-purple-100/80 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' => data_get($deployment, 'status') === 'queued',
|
||||
'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200' => data_get($deployment, 'status') === 'failed',
|
||||
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200' => data_get($deployment, 'status') === 'finished',
|
||||
'bg-gray-100 text-gray-700 dark:bg-gray-600/30 dark:text-gray-300' => data_get($deployment, 'status') === 'cancelled-by-user',
|
||||
'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' =>
|
||||
data_get($deployment, 'status') === 'in_progress',
|
||||
'bg-purple-100/80 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' =>
|
||||
data_get($deployment, 'status') === 'queued',
|
||||
'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200' =>
|
||||
data_get($deployment, 'status') === 'failed',
|
||||
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200' =>
|
||||
data_get($deployment, 'status') === 'finished',
|
||||
'bg-gray-100 text-gray-700 dark:bg-gray-600/30 dark:text-gray-300' =>
|
||||
data_get($deployment, 'status') === 'cancelled-by-user',
|
||||
])>
|
||||
@php
|
||||
$statusText = match (data_get($deployment, 'status')) {
|
||||
|
@@ -17,6 +17,7 @@
|
||||
<x-server.navbar :server="$server" :parameters="$parameters" />
|
||||
@endif
|
||||
|
||||
<h2 class="pt-4">Terminal</h2>
|
||||
@if (!$hasShell)
|
||||
<div class="flex items-center justify-center w-full py-4 mx-auto">
|
||||
<div class="p-4 w-full rounded-sm border dark:bg-coolgray-100 dark:border-coolgray-300">
|
||||
|
@@ -37,7 +37,7 @@
|
||||
@if ($resource?->type() === 'application' || str($resource?->type())->startsWith('standalone'))
|
||||
<h4>{{ $container }}</h4>
|
||||
@else
|
||||
<h3>{{ str($container)->beforeLast('-')->headline() }}</h3>
|
||||
<h4>{{ str($container)->beforeLast('-')->headline() }}</h4>
|
||||
@endif
|
||||
@if ($pull_request)
|
||||
<div>({{ $pull_request }})</div>
|
||||
|
@@ -6,56 +6,86 @@
|
||||
@if ($type === 'application')
|
||||
<h1>Logs</h1>
|
||||
<livewire:project.application.heading :application="$resource" />
|
||||
<div class="pt-2">
|
||||
<div class="subtitle">Here you can see the logs of the application.</div>
|
||||
<div class="pt-2" wire:loading wire:target="loadContainers">
|
||||
Loading containers...
|
||||
</div>
|
||||
@forelse ($servers as $server)
|
||||
<div class="py-2">
|
||||
<h2 wire:loading.remove x-init="$wire.loadContainers({{ $server->id }})">Server: {{ $server->name }}</h2>
|
||||
<div wire:loading.remove wire:target="loadContainers">
|
||||
@forelse (data_get($server,'containers',[]) as $container)
|
||||
<livewire:project.shared.get-logs :server="$server" :resource="$resource" :container="data_get($container, 'Names')" />
|
||||
@empty
|
||||
<div class="pt-2">No containers are running on server: {{ $server->name }}</div>
|
||||
@endforelse
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<h2>Logs</h2>
|
||||
@if (str($status)->contains('exited'))
|
||||
<div class="pt-2">The resource is not running.</div>
|
||||
@else
|
||||
<div class="pt-2" wire:loading wire:target="loadAllContainers">
|
||||
Loading containers...
|
||||
</div>
|
||||
@empty
|
||||
<div>No functional server found for the application.</div>
|
||||
@endforelse
|
||||
<div x-init="$wire.loadAllContainers()" wire:loading.remove wire:target="loadAllContainers">
|
||||
@forelse ($servers as $server)
|
||||
<div class="py-2">
|
||||
<h2>Server: {{ $server->name }}</h2>
|
||||
@if ($server->isFunctional())
|
||||
@if (isset($serverContainers[$server->id]) && count($serverContainers[$server->id]) > 0)
|
||||
@foreach ($serverContainers[$server->id] as $container)
|
||||
<livewire:project.shared.get-logs
|
||||
wire:key="{{ data_get($container, 'ID', uniqid()) }}" :server="$server"
|
||||
:resource="$resource" :container="data_get($container, 'Names')" />
|
||||
@endforeach
|
||||
@else
|
||||
<div class="pt-2">No containers are running on server: {{ $server->name }}</div>
|
||||
@endif
|
||||
@else
|
||||
<div class="pt-2">Server {{ $server->name }} is not functional.</div>
|
||||
@endif
|
||||
</div>
|
||||
@empty
|
||||
<div>No functional server found for the application.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@elseif ($type === 'database')
|
||||
<h1>Logs</h1>
|
||||
<livewire:project.database.heading :database="$resource" />
|
||||
<div class="pt-4">
|
||||
<div class="subtitle">Here you can see the logs of the database.</div>
|
||||
@forelse ($containers as $container)
|
||||
@if (data_get($servers, '0'))
|
||||
<livewire:project.shared.get-logs :server="data_get($servers, '0')" :resource="$resource" :container="$container" />
|
||||
@else
|
||||
<div> No functional server found for the database.</div>
|
||||
@endif
|
||||
@empty
|
||||
<div class="pt-2">No containers are running.</div>
|
||||
@endforelse
|
||||
<h2>Logs</h2>
|
||||
@if (str($status)->contains('exited'))
|
||||
<div class="pt-2">The resource is not running.</div>
|
||||
@else
|
||||
<div class="pt-2" wire:loading wire:target="loadAllContainers">
|
||||
Loading containers...
|
||||
</div>
|
||||
<div x-init="$wire.loadAllContainers()" wire:loading.remove wire:target="loadAllContainers">
|
||||
@forelse ($containers as $container)
|
||||
@if (data_get($servers, '0'))
|
||||
<livewire:project.shared.get-logs wire:key='{{ $container }}' :server="data_get($servers, '0')"
|
||||
:resource="$resource" :container="$container" />
|
||||
@else
|
||||
<div>No functional server found for the database.</div>
|
||||
@endif
|
||||
@empty
|
||||
<div class="pt-2">No containers are running.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@elseif ($type === 'service')
|
||||
<livewire:project.service.heading :service="$resource" :parameters="$parameters" :query="$query" title="Logs" />
|
||||
<div class="pt-4">
|
||||
<h1>Logs</h1>
|
||||
<div class="pt-1">Here you can see the logs of the containers.</div>
|
||||
@forelse ($containers as $container)
|
||||
@if (data_get($servers, '0'))
|
||||
<livewire:project.shared.get-logs wire:key='{{ $container }}' :server="data_get($servers, '0')"
|
||||
:resource="$resource" :container="$container" />
|
||||
@else
|
||||
<div> No functional server found for the service.</div>
|
||||
@endif
|
||||
@empty
|
||||
<div class="pt-2">No containers are running.</div>
|
||||
@endforelse
|
||||
<h2>Logs</h2>
|
||||
@if (str($status)->contains('exited'))
|
||||
<div class="pt-2">The resource is not running.</div>
|
||||
@else
|
||||
<div class="pt-2" wire:loading wire:target="loadAllContainers">
|
||||
Loading containers...
|
||||
</div>
|
||||
<div x-init="$wire.loadAllContainers()" wire:loading.remove wire:target="loadAllContainers">
|
||||
@forelse ($containers as $container)
|
||||
@if (data_get($servers, '0'))
|
||||
<livewire:project.shared.get-logs wire:key='{{ $container }}' :server="data_get($servers, '0')"
|
||||
:resource="$resource" :container="$container" />
|
||||
@else
|
||||
<div>No functional server found for the service.</div>
|
||||
@endif
|
||||
@empty
|
||||
<div class="pt-2">No containers are running.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
@@ -1,14 +1,16 @@
|
||||
<div id="terminal-container" x-data="terminalData()">
|
||||
@if(!$hasShell)
|
||||
@if (!$hasShell)
|
||||
<div class="flex pt-4 items-center justify-center w-full py-4 mx-auto">
|
||||
<div class="p-4 w-full rounded-sm border dark:bg-coolgray-100 dark:border-coolgray-300">
|
||||
<div class="flex flex-col items-center justify-center space-y-4">
|
||||
<svg class="w-12 h-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
<div class="text-center">
|
||||
<h3 class="text-lg font-medium">Terminal Not Available</h3>
|
||||
<p class="mt-2 text-sm text-gray-500">No shell (bash/sh) is available in this container. Please ensure either bash or sh is installed to use the terminal.</p>
|
||||
<p class="mt-2 text-sm text-gray-500">No shell (bash/sh) is available in this container. Please
|
||||
ensure either bash or sh is installed to use the terminal.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -17,8 +19,9 @@
|
||||
<div x-ref="terminalWrapper"
|
||||
:class="fullscreen ? 'fullscreen' : 'relative w-full h-full py-4 mx-auto max-h-[510px]'">
|
||||
<div id="terminal" wire:ignore></div>
|
||||
<button title="Minimize" x-show="fullscreen" class="fixed top-4 right-6 text-white" 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">
|
||||
<button title="Minimize" x-show="fullscreen" class="fixed top-4 right-6 text-white"
|
||||
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">
|
||||
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2" d="M6 14h4m0 0v4m0-4l-6 6m14-10h-4m0 0V6m0 4l6-6" />
|
||||
</svg></button>
|
||||
|
Reference in New Issue
Block a user