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

feat(terminal-connection): enhance terminal connection handling with auto-connect feature and improved status messaging

Browse Source
This commit is contained in:
Andras Bacsai
2025-06-06 21:15:50 +02:00
parent 1cdc01194b
commit ba970d909c
3 changed files with 174 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,6 +29,16 @@ class ExecuteContainerCommand extends Component
public bool $hasShell = true;
public bool $containersLoaded = false;
public bool $autoConnectAttempted = false;
public bool $isConnecting = false;
public bool $isConnected = false;
public string $connectionStatus = 'Loading containers...';
protected $rules = [
'server' => 'required',
'container' => 'required',
@@ -87,6 +97,8 @@ class ExecuteContainerCommand extends Component
$this->type = 'server';
$this->resource = Server::ownedByCurrentTeam()->whereUuid($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...';
}
}
@@ -151,6 +163,49 @@ 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...';
}
#[On('initializeTerminalConnection')]
public function initializeTerminalConnection()
{
// Only auto-connect if containers are loaded and we haven't attempted before
if (! $this->containersLoaded || $this->autoConnectAttempted) {
return;
}
$this->autoConnectAttempted = true;
$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 = '';
}
}
#[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
@@ -179,6 +234,8 @@ class ExecuteContainerCommand extends Component
throw new \RuntimeException('Terminal access is disabled on this server.');
}
$this->hasShell = true;
$this->isConnecting = true;
$this->connectionStatus = 'Establishing connection to server terminal...';
$this->dispatch(
'send-terminal-command',
false,
@@ -186,6 +243,9 @@ class ExecuteContainerCommand extends Component
data_get($this->server, 'uuid')
);
} catch (\Throwable $e) {
$this->isConnecting = false;
$this->connectionStatus = 'Connection failed.';
return handleError($e, $this);
}
}
@@ -234,9 +294,14 @@ class ExecuteContainerCommand extends Component
$this->hasShell = $this->checkShellAvailability($server, data_get($container, 'container.Names'));
if (! $this->hasShell) {
$this->isConnecting = false;
$this->connectionStatus = 'Shell not available in container.';
return;
}
$this->isConnecting = true;
$this->connectionStatus = 'Establishing connection to container terminal...';
$this->dispatch(
'send-terminal-command',
true,
@@ -244,6 +309,9 @@ class ExecuteContainerCommand extends Component
data_get($container, 'server.uuid')
);
} catch (\Throwable $e) {
$this->isConnecting = false;
$this->connectionStatus = 'Connection failed.';
return handleError($e, $this);
}
}

39
resources/js/terminal.js
View File

@@ -42,7 +42,7 @@ export function initializeTerminalComponent() {
this.setupTerminalEventListeners();
this.$wire.on('send-back-command', (command) => {
this.sendMessage({ command: command });
this.sendCommandWhenReady({ command: command });
});
this.keepAliveInterval = setInterval(this.keepAlive.bind(this), 30000);
@@ -99,6 +99,9 @@ export function initializeTerminalComponent() {
this.paused = false;
this.commandBuffer = '';
// Notify parent component that terminal disconnected
this.$wire.dispatch('terminalDisconnected');
// Force a refresh
this.$nextTick(() => {
this.resizeTerminal();
@@ -205,6 +208,9 @@ export function initializeTerminalComponent() {
// Start ping timeout monitoring
this.resetPingTimeout();
// Notify that WebSocket is ready for auto-connection
this.dispatchEvent('terminal-websocket-ready');
},
handleSocketError(error) {
@@ -277,6 +283,12 @@ export function initializeTerminalComponent() {
}
},
sendCommandWhenReady(message) {
if (this.isWebSocketReady()) {
this.sendMessage(message);
}
},
handleSocketMessage(event) {
// Handle pong responses
if (event.data === 'pong') {
@@ -297,14 +309,23 @@ export function initializeTerminalComponent() {
this.term.focus();
document.querySelector('.xterm-viewport').classList.add('scrollbar', 'rounded-sm');
this.resizeTerminal();
// Notify parent component that terminal is connected
this.$wire.dispatch('terminalConnected');
} else if (event.data === 'unprocessable') {
if (this.term) this.term.reset();
this.terminalActive = false;
this.message = '(sorry, something went wrong, please try again)';
// Notify parent component that terminal connection failed
this.$wire.dispatch('terminalDisconnected');
} else if (event.data === 'pty-exited') {
this.terminalActive = false;
this.term.reset();
this.commandBuffer = '';
// Notify parent component that terminal disconnected
this.$wire.dispatch('terminalDisconnected');
} else {
try {
this.pendingWrites++;
@@ -441,6 +462,22 @@ export function initializeTerminalComponent() {
lastPingTime: this.lastPingTime,
heartbeatMissed: this.heartbeatMissed
};
},
// Helper method to dispatch custom events
dispatchEvent(eventName, detail = null) {
const event = new CustomEvent(eventName, {
detail: detail,
bubbles: true
});
this.$el.dispatchEvent(event);
},
// Check if WebSocket is ready for commands
isWebSocketReady() {
return this.connectionState === 'connected' &&
this.socket &&
this.socket.readyState === WebSocket.OPEN;
}
};
}

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

@@ -17,7 +17,6 @@
<livewire:server.navbar :server="$server" :parameters="$parameters" />
@endif
<h2 class="pb-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,10 +36,19 @@
@else
@if ($type === 'server')
@if ($server->isTerminalEnabled())
<form class="w-full" wire:submit="$dispatchSelf('connectToServer')"
wire:init="$dispatchSelf('connectToServer')">
<x-forms.button class="w-full" type="submit">Reconnect</x-forms.button>
<form class="w-full flex gap-2 items-start justify-start"
wire:submit="$dispatchSelf('connectToServer')">
<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
<div class="mx-auto w-full">
<livewire:project.shared.terminal />
</div>
@@ -52,10 +60,18 @@
<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 pt-4" wire:submit="$dispatchSelf('connectToContainer')"
wire:init="$dispatchSelf('connectToContainer')">
<x-forms.button class="w-full" type="submit">Reconnect</x-forms.button>
<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
@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">
@@ -69,8 +85,15 @@
</option>
@endforeach
</x-forms.select>
<x-forms.button class="w-full" type="submit">Connect</x-forms.button>
<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>
@endif
@endif
<div class="mx-auto w-full">
<livewire:project.shared.terminal />
@@ -78,4 +101,41 @@
@endif
@endif
@endif
@script
<script>
let autoConnectionAttempted = false;
// Wait for terminal WebSocket to be ready before attempting auto-connection
function tryAutoConnection() {
if (autoConnectionAttempted) return;
const terminalContainer = document.getElementById('terminal-container');
if (!terminalContainer) return;
// Check if Alpine component is initialized and WebSocket is ready
if (terminalContainer._x_dataStack &&
terminalContainer._x_dataStack[0] &&
terminalContainer._x_dataStack[0].isWebSocketReady()) {
autoConnectionAttempted = true;
$wire.dispatchSelf('initializeTerminalConnection');
}
}
// Listen for terminal WebSocket ready event
document.addEventListener('terminal-websocket-ready', tryAutoConnection);
// Fallback polling in case event is missed
function pollForTerminalReady() {
if (!autoConnectionAttempted) {
tryAutoConnection();
setTimeout(pollForTerminalReady, 300);
}
}
// Start polling after a short delay to allow Alpine to initialize
setTimeout(pollForTerminalReady, 200);
</script>
@endscript
</div>