Merge branch 'coollabsio:main' into cf-production-ready
This commit is contained in:
peaklabs-dev
@@ -4,3 +4,18 @@
|
||||
// const app = createApp({});
|
||||
// app.component("magic-bar", MagicBar);
|
||||
// app.mount("#vue");
|
||||
|
||||
import { Terminal } from '@xterm/xterm';
|
||||
import '@xterm/xterm/css/xterm.css';
|
||||
import { FitAddon } from '@xterm/addon-fit';
|
||||
|
||||
if (!window.term) {
|
||||
window.term = new Terminal({
|
||||
cols: 80,
|
||||
rows: 30,
|
||||
fontFamily: '"Fira Code", courier-new, courier, monospace, "Powerline Extra Symbols"',
|
||||
cursorBlink: true,
|
||||
});
|
||||
window.fitAddon = new FitAddon();
|
||||
window.term.loadAddon(window.fitAddon);
|
||||
}
|
||||
|
||||
@@ -390,7 +390,7 @@ const magicActions = [{
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
name: 'Goto: Command Center',
|
||||
name: 'Goto: Terminal',
|
||||
icon: 'goto',
|
||||
sequence: ['main', 'redirect']
|
||||
},
|
||||
@@ -653,7 +653,7 @@ async function redirect() {
|
||||
targetUrl.pathname = `/settings`
|
||||
break;
|
||||
case 19:
|
||||
targetUrl.pathname = `/command-center`
|
||||
targetUrl.pathname = `/terminal`
|
||||
break;
|
||||
case 20:
|
||||
targetUrl.pathname = `/team/notifications`
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="w-full">
|
||||
@if ($label)
|
||||
<label class="flex items-center gap-1 mb-1 text-sm font-medium">{{ $label }}
|
||||
<label class="flex gap-1 items-center mb-1 text-sm font-medium">{{ $label }}
|
||||
@if ($required)
|
||||
<x-highlighted text="*" />
|
||||
@endif
|
||||
@@ -9,7 +9,8 @@
|
||||
@endif
|
||||
</label>
|
||||
@endif
|
||||
<select {{ $attributes->merge(['class' => $defaultClass]) }} @required($required) wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300'
|
||||
<select {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
|
||||
wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300'
|
||||
wire:dirty.class="dark:focus:ring-warning dark:ring-warning" wire:loading.attr="disabled" name={{ $id }}
|
||||
@if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} @else wire:model={{ $id }} @endif>
|
||||
{{ $slot }}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<nav class="flex flex-col flex-1 bg-white border-r dark:border-coolgray-200 dark:bg-base" x-data="{
|
||||
switchWidth() {
|
||||
if (this.full === 'full') {
|
||||
localStorage.removeItem('pageWidth');
|
||||
localStorage.setItem('pageWidth', 'center');
|
||||
} else {
|
||||
localStorage.setItem('pageWidth', 'full');
|
||||
}
|
||||
@@ -74,8 +74,10 @@
|
||||
<button @click="setTheme('light')" class="px-1 dropdown-item-no-padding">Light</button>
|
||||
<button @click="setTheme('system')" class="px-1 dropdown-item-no-padding">System</button>
|
||||
<div class="my-1 font-bold border-b dark:border-coolgray-500 dark:text-white text-md">Width</div>
|
||||
<button @click="switchWidth()" class="px-1 dropdown-item-no-padding" x-show="full">Center</button>
|
||||
<button @click="switchWidth()" class="px-1 dropdown-item-no-padding" x-show="!full">Full</button>
|
||||
<button @click="switchWidth()" class="px-1 dropdown-item-no-padding"
|
||||
x-show="full === 'full'">Center</button>
|
||||
<button @click="switchWidth()" class="px-1 dropdown-item-no-padding"
|
||||
x-show="full === 'center'">Full</button>
|
||||
</div>
|
||||
</x-dropdown>
|
||||
</div>
|
||||
@@ -226,9 +228,9 @@
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="Command Center"
|
||||
class="{{ request()->is('command-center*') ? 'menu-item-active menu-item' : 'menu-item' }}"
|
||||
href="{{ route('command-center') }}">
|
||||
<a title="Terminal"
|
||||
class="{{ request()->is('terminal*') ? 'menu-item-active menu-item' : 'menu-item' }}"
|
||||
href="{{ route('terminal') }}">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
@@ -236,7 +238,7 @@
|
||||
<path d="M5 7l5 5l-5 5" />
|
||||
<path d="M12 19l7 0" />
|
||||
</svg>
|
||||
Command Center
|
||||
Terminal
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
@@ -9,6 +9,10 @@
|
||||
open: false,
|
||||
init() {
|
||||
this.pageWidth = localStorage.getItem('pageWidth');
|
||||
if (!this.pageWidth) {
|
||||
this.pageWidth = 'full';
|
||||
localStorage.setItem('pageWidth', 'full');
|
||||
}
|
||||
}
|
||||
}" x-cloak class="mx-auto" :class="pageWidth === 'full' ? '' : 'max-w-7xl'">
|
||||
<div class="relative z-50 lg:hidden" :class="open ? 'block' : 'hidden'" role="dialog" aria-modal="true">
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
<div>
|
||||
<x-slot:title>
|
||||
Command Center | Coolify
|
||||
</x-slot>
|
||||
<h1>Command Center</h1>
|
||||
<div class="subtitle">Execute commands on your servers without leaving the browser.</div>
|
||||
@if ($servers->count() > 0)
|
||||
<livewire:run-command :servers="$servers" />
|
||||
@else
|
||||
<div>
|
||||
<div>No servers found. Without a server, you won't be able to do much.</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@@ -1,7 +1,7 @@
|
||||
<nav wire:poll.10000ms="check_status">
|
||||
<x-resources.breadcrumbs :resource="$application" :parameters="$parameters" :lastDeploymentInfo="$lastDeploymentInfo" :lastDeploymentLink="$lastDeploymentLink" />
|
||||
<div class="navbar-main">
|
||||
<nav class="flex items-center flex-shrink-0 gap-6 scrollbar min-h-10 whitespace-nowrap">
|
||||
<nav class="flex flex-shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
|
||||
<a href="{{ route('project.application.configuration', $parameters) }}">
|
||||
Configuration
|
||||
</a>
|
||||
@@ -13,12 +13,12 @@
|
||||
</a>
|
||||
@if (!$application->destination->server->isSwarm())
|
||||
<a href="{{ route('project.application.command', $parameters) }}">
|
||||
<button>Command</button>
|
||||
<button>Terminal</button>
|
||||
</a>
|
||||
@endif
|
||||
<x-applications.links :application="$application" />
|
||||
</nav>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<div class="flex flex-wrap gap-2 items-center">
|
||||
@if ($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw))
|
||||
<div>Please load a Compose file.</div>
|
||||
@else
|
||||
|
||||
@@ -8,19 +8,20 @@
|
||||
</x-slide-over>
|
||||
<div class="navbar-main">
|
||||
<nav
|
||||
class="flex items-center flex-shrink-0 gap-6 overflow-x-scroll sm:overflow-x-hidden scrollbar min-h-10 whitespace-nowrap">
|
||||
class="flex overflow-x-scroll flex-shrink-0 gap-6 items-center whitespace-nowrap sm:overflow-x-hidden scrollbar min-h-10">
|
||||
<a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
|
||||
href="{{ route('project.database.configuration', $parameters) }}">
|
||||
<button>Configuration</button>
|
||||
</a>
|
||||
<a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
|
||||
href="{{ route('project.database.command', $parameters) }}">
|
||||
<button>Execute Command</button>
|
||||
</a>
|
||||
|
||||
<a class="{{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
|
||||
href="{{ route('project.database.logs', $parameters) }}">
|
||||
<button>Logs</button>
|
||||
</a>
|
||||
<a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
|
||||
href="{{ route('project.database.command', $parameters) }}">
|
||||
<button>Terminal</button>
|
||||
</a>
|
||||
@if (
|
||||
$database->getMorphClass() === 'App\Models\StandalonePostgresql' ||
|
||||
$database->getMorphClass() === 'App\Models\StandaloneMongodb' ||
|
||||
@@ -32,7 +33,7 @@
|
||||
</a>
|
||||
@endif
|
||||
</nav>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<div class="flex flex-wrap gap-2 items-center">
|
||||
@if (!str($database->status)->startsWith('exited'))
|
||||
<x-modal-confirmation @click="$wire.dispatch('restartEvent')">
|
||||
<x-slot:button-title>
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
{{ data_get_str($service, 'name')->limit(10) }} > Configuration | Coolify
|
||||
</x-slot>
|
||||
<livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
|
||||
<div class="flex flex-col h-full gap-8 pt-6 sm:flex-row">
|
||||
<div class="flex flex-col items-start gap-2 min-w-fit">
|
||||
<div class="flex flex-col gap-8 pt-6 h-full sm:flex-row">
|
||||
<div class="flex flex-col gap-2 items-start min-w-fit">
|
||||
<a class="menu-item sm:min-w-fit" target="_blank" href="{{ $service->documentation() }}">Documentation
|
||||
<x-external-link /></a>
|
||||
<a class="menu-item sm:min-w-fit" :class="activeTab === 'service-stack' && 'menu-item-active'"
|
||||
@@ -23,10 +23,6 @@
|
||||
@click.prevent="activeTab = 'scheduled-tasks'; window.location.hash = 'scheduled-tasks'"
|
||||
href="#">Scheduled Tasks
|
||||
</a>
|
||||
<a class="menu-item sm:min-w-fit" :class="activeTab === 'execute-command' && 'menu-item-active'"
|
||||
@click.prevent="activeTab = 'execute-command';
|
||||
window.location.hash = 'execute-command'"
|
||||
href="#">Execute Command</a>
|
||||
<a class="menu-item sm:min-w-fit" :class="activeTab === 'logs' && 'menu-item-active'"
|
||||
@click.prevent="activeTab = 'logs';
|
||||
window.location.hash = 'logs'"
|
||||
@@ -168,7 +164,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'storages'">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex gap-2 items-center">
|
||||
<h2>Storages</h2>
|
||||
</div>
|
||||
<div class="pb-4">Persistent storage to preserve data between deployments.</div>
|
||||
@@ -191,9 +187,6 @@
|
||||
<div x-cloak x-show="activeTab === 'logs'">
|
||||
<livewire:project.shared.logs :resource="$service" />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'execute-command'">
|
||||
<livewire:project.shared.execute-container-command :resource="$service" />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'environment-variables'">
|
||||
<livewire:project.shared.environment-variable.all :resource="$service" />
|
||||
</div>
|
||||
|
||||
@@ -6,17 +6,21 @@
|
||||
<livewire:activity-monitor header="Logs" showWaiting fullHeight />
|
||||
</x-slot:content>
|
||||
</x-slide-over>
|
||||
<h1>Configuration</h1>
|
||||
<h1>{{ $title }}</h1>
|
||||
<x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
|
||||
<div class="navbar-main" x-data>
|
||||
<nav class="flex items-center flex-shrink-0 gap-6 scrollbar min-h-10 whitespace-nowrap">
|
||||
<nav class="flex flex-shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
|
||||
<a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
|
||||
href="{{ route('project.service.configuration', $parameters) }}">
|
||||
<button>Configuration</button>
|
||||
</a>
|
||||
<a class="{{ request()->routeIs('project.service.command') ? 'dark:text-white' : '' }}"
|
||||
href="{{ route('project.service.command', $parameters) }}">
|
||||
<button>Terminal</button>
|
||||
</a>
|
||||
<x-services.links :service="$service" />
|
||||
</nav>
|
||||
<div class="flex flex-wrap items-center order-first gap-2 sm:order-last">
|
||||
<div class="flex flex-wrap order-first gap-2 items-center sm:order-last">
|
||||
@if (str($service->status())->contains('running'))
|
||||
<button @click="$wire.dispatch('restartEvent')" class="gap-2 button">
|
||||
<svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
@@ -71,7 +75,7 @@
|
||||
</x-modal-confirmation>
|
||||
@elseif (str($service->status())->contains('exited'))
|
||||
<button wire:click='stop(true)' class="gap-2 button">
|
||||
<svg class="w-5 h-5 " viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg class="w-5 h-5" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="red" d="M26 20h-6v-2h6zm4 8h-6v-2h6zm-2-4h-6v-2h6z" />
|
||||
<path fill="red"
|
||||
d="M17.003 20a4.895 4.895 0 0 0-2.404-4.173L22 3l-1.73-1l-7.577 13.126a5.699 5.699 0 0 0-5.243 1.503C3.706 20.24 3.996 28.682 4.01 29.04a1 1 0 0 0 1 .96h14.991a1 1 0 0 0 .6-1.8c-3.54-2.656-3.598-8.146-3.598-8.2Zm-5.073-3.003A3.11 3.11 0 0 1 15.004 20c0 .038.002.208.017.469l-5.9-2.624a3.8 3.8 0 0 1 2.809-.848ZM15.45 28A5.2 5.2 0 0 1 14 25h-2a6.5 6.5 0 0 0 .968 3h-2.223A16.617 16.617 0 0 1 10 24H8a17.342 17.342 0 0 0 .665 4H6c.031-1.836.29-5.892 1.803-8.553l7.533 3.35A13.025 13.025 0 0 0 17.596 28Z" />
|
||||
|
||||
@@ -4,57 +4,39 @@
|
||||
</x-slot>
|
||||
<livewire:project.shared.configuration-checker :resource="$resource" />
|
||||
@if ($type === 'application')
|
||||
<h1>Execute Command</h1>
|
||||
<h1>Terminal</h1>
|
||||
<livewire:project.application.heading :application="$resource" />
|
||||
<h2 class="pt-4">Command</h2>
|
||||
<div class="pb-2">Run any one-shot command inside a container.</div>
|
||||
@elseif ($type === 'database')
|
||||
<h1>Execute Command</h1>
|
||||
<h1>Terminal</h1>
|
||||
<livewire:project.database.heading :database="$resource" />
|
||||
<h2 class="pt-4">Command</h2>
|
||||
<div class="pb-2">Run any one-shot command inside a container.</div>
|
||||
@elseif ($type === 'service')
|
||||
<h2>Execute Command</h2>
|
||||
<livewire:project.service.navbar :service="$resource" :parameters="$parameters" title="Terminal" />
|
||||
@endif
|
||||
<div x-init="$wire.loadContainers">
|
||||
<div class="pt-4" wire:loading wire:target='loadContainers'>
|
||||
Loading containers...
|
||||
Loading resources...
|
||||
</div>
|
||||
<div wire:loading.remove wire:target='loadContainers'>
|
||||
@if (count($containers) > 0)
|
||||
<form class="flex flex-col gap-2 pt-4" wire:submit='runCommand'>
|
||||
<div class="flex gap-2">
|
||||
<x-forms.input placeholder="ls -l" autofocus id="command" label="Command" required />
|
||||
<x-forms.input id="workDir" label="Working directory" />
|
||||
</div>
|
||||
<form class="flex flex-col gap-2 justify-center pt-4 xl:items-end xl:flex-row"
|
||||
wire:submit="$dispatchSelf('connectToContainer')">
|
||||
<x-forms.select label="Container" id="container" required>
|
||||
<option disabled selected>Select container</option>
|
||||
@if (data_get($this->parameters, 'application_uuid'))
|
||||
@foreach ($containers as $container)
|
||||
<option value="{{ data_get($container, 'container.Names') }}">
|
||||
{{ data_get($container, 'container.Names') }} ({{ data_get($container, 'server.name') }})
|
||||
</option>
|
||||
@endforeach
|
||||
@elseif(data_get($this->parameters, 'service_uuid'))
|
||||
@foreach ($containers as $container)
|
||||
<option value="{{ $container }}">
|
||||
{{ $container }} ({{ data_get($servers, '0.name') }})
|
||||
</option>
|
||||
@endforeach
|
||||
@else
|
||||
<option value="{{ $container }}">
|
||||
{{ $container }} ({{ data_get($servers, '0.name') }})
|
||||
@foreach ($containers as $container)
|
||||
<option value="{{ data_get($container, 'container.Names') }}">
|
||||
{{ data_get($container, 'container.Names') }}
|
||||
({{ data_get($container, 'server.name') }})
|
||||
</option>
|
||||
@endif
|
||||
@endforeach
|
||||
</x-forms.select>
|
||||
<x-forms.button type="submit">Run</x-forms.button>
|
||||
<x-forms.button type="submit">Connect</x-forms.button>
|
||||
</form>
|
||||
@else
|
||||
<div class="pt-4">No containers are not running.</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full pt-10 mx-auto">
|
||||
<livewire:activity-monitor header="Command output" />
|
||||
<div class="mx-auto w-full">
|
||||
<livewire:project.shared.terminal />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
240
resources/views/livewire/project/shared/terminal.blade.php
Normal file
240
resources/views/livewire/project/shared/terminal.blade.php
Normal file
@@ -0,0 +1,240 @@
|
||||
<div x-data="data()">
|
||||
{{-- <div x-show="!terminalActive" class="flex items-center justify-center w-full py-4 mx-auto h-[510px]">
|
||||
<div class="p-1 w-full h-full rounded border dark:bg-coolgray-100 dark:border-coolgray-300">
|
||||
<span class="font-mono text-sm text-gray-500" x-text="message"></span>
|
||||
</div>
|
||||
</div> --}}
|
||||
<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-4 text-white" x-on:click="makeFullscreen"><svg
|
||||
class="icon" 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>
|
||||
<button title="Fullscreen" x-show="!fullscreen && terminalActive" class="absolute right-4 top-6 text-white"
|
||||
x-on:click="makeFullscreen"><svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none">
|
||||
<path
|
||||
d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z" />
|
||||
<path fill="currentColor"
|
||||
d="M9.793 12.793a1 1 0 0 1 1.497 1.32l-.083.094L6.414 19H9a1 1 0 0 1 .117 1.993L9 21H4a1 1 0 0 1-.993-.883L3 20v-5a1 1 0 0 1 1.993-.117L5 15v2.586l4.793-4.793ZM20 3a1 1 0 0 1 .993.883L21 4v5a1 1 0 0 1-1.993.117L19 9V6.414l-4.793 4.793a1 1 0 0 1-1.497-1.32l.083-.094L17.586 5H15a1 1 0 0 1-.117-1.993L15 3h5Z" />
|
||||
</g>
|
||||
</svg></button>
|
||||
</div>
|
||||
|
||||
@script
|
||||
<script>
|
||||
const MAX_PENDING_WRITES = 5;
|
||||
let pendingWrites = 0;
|
||||
let paused = false;
|
||||
|
||||
let socket;
|
||||
let commandBuffer = '';
|
||||
|
||||
|
||||
function keepAlive() {
|
||||
if (socket && socket.readyState === WebSocket.OPEN) {
|
||||
socket.send(JSON.stringify({
|
||||
ping: true
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
const keepAliveInterval = setInterval(keepAlive, 30000);
|
||||
|
||||
// Clear the interval when the component is destroyed
|
||||
document.addEventListener('livewire:navigating', () => {
|
||||
clearInterval(keepAliveInterval);
|
||||
});
|
||||
|
||||
function initializeWebSocket() {
|
||||
if (!socket || socket.readyState === WebSocket.CLOSED) {
|
||||
const predefined = {
|
||||
protocol: "{{ env('TERMINAL_PROTOCOL') }}",
|
||||
host: "{{ env('TERMINAL_HOST') }}",
|
||||
port: "{{ env('TERMINAL_PORT') }}"
|
||||
}
|
||||
const connectionString = {
|
||||
protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
|
||||
host: window.location.hostname,
|
||||
port: ":6002",
|
||||
path: '/terminal/ws'
|
||||
}
|
||||
if (!window.location.port) {
|
||||
connectionString.port = ''
|
||||
}
|
||||
if (predefined.host) {
|
||||
connectionString.host = predefined.host
|
||||
}
|
||||
if (predefined.port) {
|
||||
connectionString.port = `:${predefined.port}`
|
||||
}
|
||||
if (predefined.protocol) {
|
||||
connectionString.protocol = predefined.protocol
|
||||
}
|
||||
|
||||
const url =
|
||||
`${connectionString.protocol}://${connectionString.host}${connectionString.port}${connectionString.path}`
|
||||
socket = new WebSocket(url);
|
||||
|
||||
socket.onmessage = handleSocketMessage;
|
||||
socket.onerror = (e) => {
|
||||
console.error('WebSocket error:', e);
|
||||
};
|
||||
socket.onclose = () => {
|
||||
console.log('WebSocket connection closed');
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function handleSocketMessage(event) {
|
||||
$data.message = '(connection closed)';
|
||||
// Initialize Terminal
|
||||
if (event.data === 'pty-ready') {
|
||||
term.open(document.getElementById('terminal'));
|
||||
$data.terminalActive = true;
|
||||
term.reset();
|
||||
term.focus();
|
||||
document.querySelector('.xterm-viewport').classList.add('scrollbar', 'rounded')
|
||||
$data.resizeTerminal()
|
||||
} else if (event.data === 'unprocessable') {
|
||||
term.reset();
|
||||
$data.terminalActive = false;
|
||||
$data.message = '(sorry, something went wrong, please try again)';
|
||||
} else {
|
||||
pendingWrites++;
|
||||
term.write(event.data, flowControlCallback);
|
||||
}
|
||||
}
|
||||
|
||||
function flowControlCallback() {
|
||||
pendingWrites--;
|
||||
if (pendingWrites > MAX_PENDING_WRITES && !paused) {
|
||||
paused = true;
|
||||
socket.send(JSON.stringify({
|
||||
pause: true
|
||||
}));
|
||||
return;
|
||||
}
|
||||
if (pendingWrites <= MAX_PENDING_WRITES && paused) {
|
||||
paused = false;
|
||||
socket.send(JSON.stringify({
|
||||
resume: true
|
||||
}));
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
term.onData((data) => {
|
||||
socket.send(JSON.stringify({
|
||||
message: data
|
||||
}));
|
||||
// Type CTRL + D or exit in the terminal
|
||||
if (data === '\x04' || (data === '\r' && stripAnsiCommands(commandBuffer).trim().includes('exit'))) {
|
||||
checkIfProcessIsRunningAndKillIt();
|
||||
setTimeout(() => {
|
||||
$data.terminalActive = false;
|
||||
term.reset();
|
||||
}, 500);
|
||||
commandBuffer = '';
|
||||
} else if (data === '\r') {
|
||||
commandBuffer = '';
|
||||
} else {
|
||||
commandBuffer += data;
|
||||
}
|
||||
});
|
||||
|
||||
function stripAnsiCommands(input) {
|
||||
return input.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, '');
|
||||
}
|
||||
|
||||
// Copy and paste
|
||||
// Enables ctrl + c and ctrl + v
|
||||
// defaults otherwise to ctrl + insert, shift + insert
|
||||
term.attachCustomKeyEventHandler((arg) => {
|
||||
if (arg.ctrlKey && arg.code === "KeyV" && arg.type === "keydown") {
|
||||
navigator.clipboard.readText()
|
||||
.then(text => {
|
||||
socket.send(JSON.stringify({
|
||||
message: text
|
||||
}));
|
||||
})
|
||||
};
|
||||
|
||||
if (arg.ctrlKey && arg.code === "KeyC" && arg.type === "keydown") {
|
||||
const selection = term.getSelection();
|
||||
if (selection) {
|
||||
navigator.clipboard.writeText(selection);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
$wire.on('send-back-command', function(command) {
|
||||
socket.send(JSON.stringify({
|
||||
command: command
|
||||
}));
|
||||
});
|
||||
|
||||
window.addEventListener('beforeunload', function(e) {
|
||||
checkIfProcessIsRunningAndKillIt();
|
||||
});
|
||||
|
||||
function checkIfProcessIsRunningAndKillIt() {
|
||||
socket.send(JSON.stringify({
|
||||
checkActive: 'force'
|
||||
}));
|
||||
}
|
||||
|
||||
window.onresize = function() {
|
||||
$data.resizeTerminal()
|
||||
};
|
||||
|
||||
Alpine.data('data', () => ({
|
||||
fullscreen: false,
|
||||
terminalActive: false,
|
||||
message: '(connection closed)',
|
||||
init() {
|
||||
this.$watch('terminalActive', (value) => {
|
||||
this.$nextTick(() => {
|
||||
if (value) {
|
||||
$refs.terminalWrapper.style.display = 'block';
|
||||
this.resizeTerminal();
|
||||
} else {
|
||||
$refs.terminalWrapper.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
makeFullscreen() {
|
||||
this.fullscreen = !this.fullscreen;
|
||||
$nextTick(() => {
|
||||
this.resizeTerminal()
|
||||
})
|
||||
},
|
||||
|
||||
resizeTerminal() {
|
||||
if (!this.terminalActive) return;
|
||||
|
||||
fitAddon.fit();
|
||||
const height = $refs.terminalWrapper.clientHeight;
|
||||
const rows = height / term._core._renderService._charSizeService.height - 1;
|
||||
var termWidth = term.cols;
|
||||
var termHeight = parseInt(rows.toString(), 10);
|
||||
term.resize(termWidth, termHeight);
|
||||
socket.send(JSON.stringify({
|
||||
resize: {
|
||||
cols: termWidth,
|
||||
rows: termHeight
|
||||
}
|
||||
}));
|
||||
}
|
||||
}));
|
||||
|
||||
initializeWebSocket();
|
||||
</script>
|
||||
@endscript
|
||||
</div>
|
||||
@@ -1,19 +0,0 @@
|
||||
<div>
|
||||
<form class="flex flex-col justify-center gap-2 xl:items-end xl:flex-row" wire:submit='runCommand'>
|
||||
<x-forms.input placeholder="ls -l" autofocus id="command" label="Command" required />
|
||||
<x-forms.select label="Server" id="server" required>
|
||||
@foreach ($servers as $server)
|
||||
@if ($loop->first)
|
||||
<option selected value="{{ $server->uuid }}">{{ $server->name }}</option>
|
||||
@else
|
||||
<option value="{{ $server->uuid }}">{{ $server->name }}</option>
|
||||
@endif
|
||||
@endforeach
|
||||
</x-forms.select>
|
||||
<x-forms.button type="submit">Execute Command
|
||||
</x-forms.button>
|
||||
</form>
|
||||
<div class="w-full pt-10 mx-auto">
|
||||
<livewire:activity-monitor header="Command output" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -190,7 +190,7 @@
|
||||
@if ($server->settings->force_docker_cleanup)
|
||||
<x-forms.input placeholder="*/10 * * * *" id="server.settings.docker_cleanup_frequency"
|
||||
label="Docker cleanup frequency" required
|
||||
helper="Cron expression for Docker Cleanup.<br>You can use every_minute, hourly, daily, weekly, monthly, yearly.<br><br>Default is every 10 minutes." />
|
||||
helper="Cron expression for Docker Cleanup.<br>You can use every_minute, hourly, daily, weekly, monthly, yearly.<br><br>Default is every night at midnight." />
|
||||
@else
|
||||
<x-forms.input id="server.settings.docker_cleanup_threshold"
|
||||
label="Docker cleanup threshold (%)" required
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
If you have any problem, please <a class="underline dark:text-white" href="{{ config('coolify.contact') }}"
|
||||
If you have any problems, please <a class="underline dark:text-white" href="{{ config('coolify.contact') }}"
|
||||
target="_blank">contact us.</a>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
34
resources/views/livewire/terminal/index.blade.php
Normal file
34
resources/views/livewire/terminal/index.blade.php
Normal file
@@ -0,0 +1,34 @@
|
||||
<div>
|
||||
<x-slot:title>
|
||||
Terminal | Coolify
|
||||
</x-slot>
|
||||
<h1>Terminal</h1>
|
||||
<div class="flex gap-2 items-end subtitle">
|
||||
<div>Execute commands on your servers and containers without leaving the browser.</div>
|
||||
<x-helper
|
||||
helper="If you're having trouble connecting to your server, make sure that the port is open.<br><br><a class='underline' href='https://coolify.io/docs/knowledge-base/server/firewall/#terminal' target='_blank'>Documentation</a>"></x-helper>
|
||||
</div>
|
||||
<div>
|
||||
<form class="flex flex-col gap-2 justify-center xl:items-end xl:flex-row"
|
||||
wire:submit="$dispatchSelf('connectToContainer')">
|
||||
<x-forms.select id="server" required wire:model.live="selected_uuid">
|
||||
@foreach ($servers as $server)
|
||||
@if ($loop->first)
|
||||
<option disabled value="default">Select a server or container</option>
|
||||
@endif
|
||||
<option value="{{ $server->uuid }}">{{ $server->name }}</option>
|
||||
@foreach ($containers as $container)
|
||||
@if ($container['server_uuid'] == $server->uuid)
|
||||
<option value="{{ $container['uuid'] }}">
|
||||
{{ $server->name }} -> {{ $container['name'] }}
|
||||
</option>
|
||||
@endif
|
||||
@endforeach
|
||||
@endforeach
|
||||
</x-forms.select>
|
||||
<x-forms.button type="submit">Connect</x-forms.button>
|
||||
</form>
|
||||
<livewire:project.shared.terminal />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user