dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor(execute-container-command): simplify connection logic and improve terminal availability checks

Browse Source
This commit is contained in:
Andras Bacsai
2025-06-14 13:56:48 +02:00
parent 64dd648b3f
commit d1d899c0cf
3 changed files with 70 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
app/Livewire/Project/Shared/ExecuteContainerCommand.php
View File

@@ -27,15 +27,9 @@ class ExecuteContainerCommand extends Component
public Collection $servers;
public bool $containersLoaded = false;
public bool $hasShell = true;
public bool $autoConnectAttempted = false;
public bool $isConnecting = false;
public bool $isConnected = false;
public string $connectionStatus = 'Loading containers...';
public bool $isConnecting = true;
protected $rules = [
'server' => 'required',
@@ -43,32 +37,22 @@ class ExecuteContainerCommand extends Component
'command' => 'required',
];
public function getListeners()
{
$teamId = auth()->user()->currentTeam()->id;
return [
"echo-private:team.{$teamId},ServiceChecked" => '$refresh',
];
}
public function mount()
{
if (! auth()->user()->isAdmin()) {
abort(403);
}
$this->parameters = get_route_parameters();
$this->containers = collect();
$this->servers = collect();
if (data_get($this->parameters, 'application_uuid')) {
$this->type = 'application';
$this->resource = Application::whereUuid($this->parameters['application_uuid'])->firstOrFail();
if ($this->resource->destination->server->isFunctional() && $this->resource->destination->server->isTerminalEnabled()) {
$this->resource = Application::where('uuid', $this->parameters['application_uuid'])->firstOrFail();
if ($this->resource->destination->server->isFunctional()) {
$this->servers = $this->servers->push($this->resource->destination->server);
}
foreach ($this->resource->additional_servers as $server) {
if ($server->isFunctional() && $server->isTerminalEnabled()) {
if ($server->isFunctional()) {
$this->servers = $this->servers->push($server);
}
}
@@ -80,23 +64,21 @@ class ExecuteContainerCommand extends Component
abort(404);
}
$this->resource = $resource;
if ($this->resource->destination->server->isFunctional() && $this->resource->destination->server->isTerminalEnabled()) {
if ($this->resource->destination->server->isFunctional()) {
$this->servers = $this->servers->push($this->resource->destination->server);
}
$this->loadContainers();
} elseif (data_get($this->parameters, 'service_uuid')) {
$this->type = 'service';
$this->resource = Service::whereUuid($this->parameters['service_uuid'])->firstOrFail();
if ($this->resource->server->isFunctional() && $this->resource->server->isTerminalEnabled()) {
$this->resource = Service::where('uuid', $this->parameters['service_uuid'])->firstOrFail();
if ($this->resource->server->isFunctional()) {
$this->servers = $this->servers->push($this->resource->server);
}
$this->loadContainers();
} elseif (data_get($this->parameters, 'server_uuid')) {
$this->type = 'server';
$this->resource = Server::ownedByCurrentTeam()->whereUuid($this->parameters['server_uuid'])->firstOrFail();
$this->resource = Server::where('uuid', $this->parameters['server_uuid'])->firstOrFail();
$this->server = $this->resource;
$this->containersLoaded = true; // Server doesn't need container loading
$this->connectionStatus = 'Waiting for terminal to be ready...';
}
}
@@ -161,66 +143,6 @@ class ExecuteContainerCommand extends Component
if ($this->containers->count() === 1) {
$this->selected_container = data_get($this->containers->first(), 'container.Names');
}
$this->containersLoaded = true;
$this->connectionStatus = 'Waiting for terminal to be ready...';
}
public function initializeTerminalConnection()
{
try {
// Only auto-connect if containers are loaded and we haven't attempted before
if (! $this->containersLoaded || $this->autoConnectAttempted || $this->isConnecting) {
return;
}
$this->autoConnectAttempted = true;
// Ensure component is in a stable state before proceeding
$this->skipRender();
$this->isConnecting = true;
if ($this->type === 'server') {
$this->connectionStatus = 'Establishing connection to server terminal...';
$this->connectToServer();
} elseif ($this->containers->count() === 1) {
$this->connectionStatus = 'Establishing connection to container terminal...';
$this->connectToContainer();
} else {
$this->isConnecting = false;
$this->connectionStatus = '';
}
} catch (\Throwable $e) {
// Log the error but don't let it bubble up to cause snapshot issues
logger()->error('Terminal auto-connection failed', [
'error' => $e->getMessage(),
'trace' => $e->getTraceAsString(),
'component_id' => $this->getId(),
]);
// Reset state to allow manual connection
$this->autoConnectAttempted = false;
$this->isConnecting = false;
$this->connectionStatus = 'Auto-connection failed. Please use the reconnect button.';
}
}
#[On('terminalConnected')]
public function terminalConnected()
{
$this->isConnected = true;
$this->isConnecting = false;
$this->connectionStatus = '';
}
#[On('terminalDisconnected')]
public function terminalDisconnected()
{
$this->isConnected = false;
$this->isConnecting = false;
$this->autoConnectAttempted = false;
$this->connectionStatus = 'Connection lost. Click Reconnect to try again.';
}
private function checkShellAvailability(Server $server, string $container): bool
@@ -245,11 +167,6 @@ class ExecuteContainerCommand extends Component
if ($this->server->isForceDisabled()) {
throw new \RuntimeException('Server is disabled.');
}
if (! $this->server->isTerminalEnabled()) {
throw new \RuntimeException('Terminal access is disabled on this server.');
}
$this->isConnecting = true;
$this->connectionStatus = 'Establishing connection to server terminal...';
$this->dispatch(
'send-terminal-command',
false,
@@ -257,10 +174,9 @@ class ExecuteContainerCommand extends Component
data_get($this->server, 'uuid')
);
} catch (\Throwable $e) {
$this->isConnecting = false;
$this->connectionStatus = 'Connection failed.';
return handleError($e, $this);
} finally {
$this->isConnecting = false;
}
}
@@ -306,8 +222,11 @@ class ExecuteContainerCommand extends Component
throw new \RuntimeException('Server ownership verification failed.');
}
$this->isConnecting = true;
$this->connectionStatus = 'Establishing connection to container terminal...';
$this->hasShell = $this->checkShellAvailability($server, data_get($container, 'container.Names'));
if (! $this->hasShell) {
return;
}
$this->dispatch(
'send-terminal-command',
true,
@@ -315,10 +234,9 @@ class ExecuteContainerCommand extends Component
data_get($container, 'server.uuid')
);
} catch (\Throwable $e) {
$this->isConnecting = false;
$this->connectionStatus = 'Connection failed.';
return handleError($e, $this);
} finally {
$this->isConnecting = false;
}
}

2
app/Livewire/Project/Shared/Terminal.php
View File

@@ -44,7 +44,7 @@ class Terminal extends Component
public function sendTerminalCommand($isContainer, $identifier, $serverUuid)
{
$server = Server::ownedByCurrentTeam()->whereUuid($serverUuid)->firstOrFail();
if (! $server->isTerminalEnabled()) {
if (! $server->isTerminalEnabled() || $server->isForceDisabled()) {
throw new \RuntimeException('Terminal access is disabled on this server.');
}

215
resources/views/livewire/project/shared/execute-container-command.blade.php
View File

@@ -17,178 +17,65 @@
<livewire:server.navbar :server="$server" />
@endif
@if ($type === 'server')
@if (!$server->isForceDisabled() && $server->isTerminalEnabled())
<form class="w-full flex gap-2 items-start justify-start" wire:submit="$dispatchSelf('connectToServer')">
@if (!$hasShell)
<div class="flex items-center justify-center w-full py-4 mx-auto">
<div class="p-4 w-full rounded 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" />
</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>
</div>
</div>
</div>
</div>
@else
@if ($type === 'server')
<form class="w-full flex gap-2 items-start" wire:submit="$dispatchSelf('connectToServer')"
wire:init="$dispatchSelf('connectToServer')">
<h2 class="pb-4">Terminal</h2>
<x-forms.button type="submit" :disabled="$isConnecting">
Reconnect
</x-forms.button>
{{-- Loading indicator for all connection states --}}
@if (!$containersLoaded || $isConnecting || $connectionStatus)
<span class="text-sm">{{ $connectionStatus }}</span>
@endif
<x-forms.button :disabled="$isConnecting"
type="submit">{{ $isConnecting ? 'Connecting...' : 'Reconnect' }}</x-forms.button>
</form>
<div class="mx-auto w-full">
<livewire:project.shared.terminal wire:key="terminal-{{ $this->getId() }}-server" />
<livewire:project.shared.terminal />
</div>
@else
<div>Terminal access is disabled on this server.</div>
@endif
@else
@if (count($containers) === 0)
<div class="pt-4">No containers are running on this server or terminal access is disabled.</div>
@else
@if (count($containers) === 1)
<form class="w-full flex gap-2 items-start justify-start pt-4"
wire:submit="$dispatchSelf('connectToContainer')">
<h2 class="pb-4">Terminal</h2>
<x-forms.button type="submit" :disabled="$isConnecting">
Reconnect
</x-forms.button>
</form>
{{-- Loading indicator for all connection states --}}
@if (!$containersLoaded || $isConnecting || $connectionStatus)
<span class="text-sm">{{ $connectionStatus }}</span>
@endif
@if (count($containers) === 0)
<div class="pt-4">No containers are running.</div>
@else
<form class="w-full pt-4 flex gap-2 flex-col" wire:submit="$dispatchSelf('connectToContainer')">
<x-forms.select label="Container" id="container" required wire:model="selected_container">
@foreach ($containers as $container)
@if ($loop->first)
<option disabled value="default">Select a container</option>
@endif
<option value="{{ data_get($container, 'container.Names') }}">
{{ data_get($container, 'container.Names') }}
({{ data_get($container, 'server.name') }})
</option>
@endforeach
</x-forms.select>
<x-forms.button class="w-full" type="submit" :disabled="$isConnecting">
{{ $isConnecting ? 'Connecting...' : 'Connect' }}
</x-forms.button>
</form>
{{-- Loading indicator for manual connection --}}
@if ($isConnecting || $connectionStatus)
<span class="text-sm">{{ $connectionStatus }}</span>
@if (count($containers) === 1)
<form class="w-full flex gap-2 items-start pt-4" wire:submit="$dispatchSelf('connectToContainer')"
wire:init="$dispatchSelf('connectToContainer')">
<h2 class="pb-4">Terminal</h2>
<x-forms.button :disabled="$isConnecting"
type="submit">{{ $isConnecting ? 'Connecting...' : 'Reconnect' }}</x-forms.button>
</form>
@else
<form class="w-full pt-4 flex gap-2 flex-col" wire:submit="$dispatchSelf('connectToContainer')">
<x-forms.select label="Container" id="container" required wire:model="selected_container">
@foreach ($containers as $container)
@if ($loop->first)
<option disabled value="default">Select a container</option>
@endif
<option value="{{ data_get($container, 'container.Names') }}">
{{ data_get($container, 'container.Names') }}
({{ data_get($container, 'server.name') }})
</option>
@endforeach
</x-forms.select>
<x-forms.button :disabled="$isConnecting" class="w-full"
type="submit">{{ $isConnecting ? 'Connecting...' : 'Connect' }}</x-forms.button>
</form>
@endif
<div class="mx-auto w-full">
<livewire:project.shared.terminal />
</div>
@endif
<div class="mx-auto w-full">
<livewire:project.shared.terminal wire:key="terminal-{{ $this->getId() }}-container" />
</div>
@endif
@endif
@script
<script>
let autoConnectionAttempted = false;
let maxRetries = 5;
let currentRetry = 0;
// Robust component readiness check
function isComponentReady() {
// Check if Livewire component exists and is properly initialized
if (!$wire || typeof $wire.call !== 'function') {
return false;
}
// Check if terminal container exists
const terminalContainer = document.getElementById('terminal-container');
if (!terminalContainer) {
return false;
}
// Check if Alpine component is initialized
if (!terminalContainer._x_dataStack || !terminalContainer._x_dataStack[0]) {
return false;
}
return true;
}
// Safe connection with retries
function attemptConnection() {
if (autoConnectionAttempted) return;
if (!isComponentReady()) {
currentRetry++;
if (currentRetry < maxRetries) {
console.log(`[Terminal] Component not ready, retry ${currentRetry}/${maxRetries}`);
setTimeout(attemptConnection, 1000);
return;
} else {
console.error('[Terminal] Max retries reached, giving up auto-connection');
return;
}
}
autoConnectionAttempted = true;
console.log('[Terminal] Attempting auto-connection');
try {
// Use a safer method that doesn't trigger re-renders
$wire.call('initializeTerminalConnection').catch(error => {
console.error('[Terminal] Auto-connection failed:', error);
// Reset for manual retry
autoConnectionAttempted = false;
});
} catch (error) {
console.error('[Terminal] Auto-connection failed immediately:', error);
// Reset for manual retry
autoConnectionAttempted = false;
}
}
// Wait for Livewire to be fully initialized
function waitForLivewire() {
if (window.Livewire && window.Livewire.all().length > 0) {
// Extra delay in production to ensure stability
const isProduction = @js(app()->environment('production'));
const delay = isProduction ? 2000 : 1000;
setTimeout(attemptConnection, delay);
} else {
setTimeout(waitForLivewire, 200);
}
}
// Multiple initialization triggers for robustness
document.addEventListener('DOMContentLoaded', waitForLivewire);
// Livewire-specific events
document.addEventListener('livewire:init', () => {
setTimeout(waitForLivewire, 500);
});
document.addEventListener('livewire:navigated', () => {
autoConnectionAttempted = false;
currentRetry = 0;
setTimeout(waitForLivewire, 500);
});
// Additional safety net for production
const isProduction = @js(app()->environment('production'));
if (isProduction) {
window.addEventListener('load', () => {
if (!autoConnectionAttempted) {
setTimeout(waitForLivewire, 1000);
}
});
// Emergency fallback - disable auto-connection if too many errors
let errorCount = 0;
window.addEventListener('error', (event) => {
if (event.message && event.message.includes('Snapshot missing')) {
errorCount++;
console.warn(`[Terminal] Snapshot error detected (${errorCount})`);
if (errorCount >= 3) {
console.error('[Terminal] Too many snapshot errors, disabling auto-connection');
autoConnectionAttempted = true; // Prevent further attempts
}
}
});
}
</script>
@endscript
</div>