@@ -505,6 +505,12 @@ function sslip(Server $server)
|
||||
|
||||
return "http://$baseIp.sslip.io";
|
||||
}
|
||||
// ipv6
|
||||
if (str($server->ip)->contains(':')) {
|
||||
$ipv6 = str($server->ip)->replace(':', '-');
|
||||
|
||||
return "http://{$ipv6}.sslip.io";
|
||||
}
|
||||
|
||||
return "http://{$server->ip}.sslip.io";
|
||||
}
|
||||
|
@@ -7,7 +7,7 @@ return [
|
||||
|
||||
// The release version of your application
|
||||
// Example with dynamic git hash: trim(exec('git --git-dir ' . base_path('.git') . ' log --pretty="%h" -n1 HEAD'))
|
||||
'release' => '4.0.0-beta.345',
|
||||
'release' => '4.0.0-beta.346',
|
||||
// When left empty or `null` the Laravel environment will be used
|
||||
'environment' => config('app.env'),
|
||||
|
||||
|
@@ -1,3 +1,3 @@
|
||||
<?php
|
||||
|
||||
return '4.0.0-beta.345';
|
||||
return '4.0.0-beta.346';
|
||||
|
@@ -68,7 +68,11 @@ wss.on('connection', (ws) => {
|
||||
|
||||
const messageHandlers = {
|
||||
message: (session, data) => session.ptyProcess.write(data),
|
||||
resize: (session, { cols, rows }) => session.ptyProcess.resize(cols, rows),
|
||||
resize: (session, { cols, rows }) => {
|
||||
cols = cols > 0 ? cols : 80;
|
||||
rows = rows > 0 ? rows : 30;
|
||||
session.ptyProcess.resize(cols, rows)
|
||||
},
|
||||
pause: (session) => session.ptyProcess.pause(),
|
||||
resume: (session) => session.ptyProcess.resume(),
|
||||
checkActive: (session, data) => {
|
||||
@@ -140,6 +144,7 @@ async function handleCommand(ws, command, userId) {
|
||||
|
||||
ptyProcess.onData((data) => ws.send(data));
|
||||
|
||||
// when parent closes
|
||||
ptyProcess.onExit(({ exitCode, signal }) => {
|
||||
console.error(`Process exited with code ${exitCode} and signal ${signal}`);
|
||||
userSession.isActive = false;
|
||||
|
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"coolify": {
|
||||
"v4": {
|
||||
"version": "4.0.0-beta.344"
|
||||
"version": "4.0.0-beta.346"
|
||||
},
|
||||
"nightly": {
|
||||
"version": "4.0.0-beta.345"
|
||||
"version": "4.0.0-beta.347"
|
||||
},
|
||||
"helper": {
|
||||
"version": "1.0.1"
|
||||
|
@@ -5,17 +5,13 @@
|
||||
// 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';
|
||||
import { initializeTerminalComponent } from './terminal.js';
|
||||
|
||||
if (!window.term) {
|
||||
window.term = new Terminal({
|
||||
cols: 80,
|
||||
rows: 30,
|
||||
fontFamily: '"Fira Code", courier-new, courier, monospace, "Powerline Extra Symbols"',
|
||||
cursorBlink: true,
|
||||
['livewire:navigated', 'alpine:init'].forEach((event) => {
|
||||
document.addEventListener(event, () => {
|
||||
// tree-shaking
|
||||
if (document.getElementById('terminal-container')) {
|
||||
initializeTerminalComponent()
|
||||
}
|
||||
});
|
||||
window.fitAddon = new FitAddon();
|
||||
window.term.loadAddon(window.fitAddon);
|
||||
}
|
||||
});
|
||||
|
228
resources/js/terminal.js
Normal file
228
resources/js/terminal.js
Normal file
@@ -0,0 +1,228 @@
|
||||
import { Terminal } from '@xterm/xterm';
|
||||
import '@xterm/xterm/css/xterm.css';
|
||||
import { FitAddon } from '@xterm/addon-fit';
|
||||
|
||||
export function initializeTerminalComponent() {
|
||||
function terminalData() {
|
||||
return {
|
||||
fullscreen: false,
|
||||
terminalActive: false,
|
||||
message: '(connection closed)',
|
||||
term: null,
|
||||
fitAddon: null,
|
||||
socket: null,
|
||||
commandBuffer: '',
|
||||
pendingWrites: 0,
|
||||
paused: false,
|
||||
MAX_PENDING_WRITES: 5,
|
||||
keepAliveInterval: null,
|
||||
|
||||
init() {
|
||||
this.setupTerminal();
|
||||
this.initializeWebSocket();
|
||||
this.setupTerminalEventListeners();
|
||||
|
||||
this.$wire.on('send-back-command', (command) => {
|
||||
this.socket.send(JSON.stringify({
|
||||
command: command
|
||||
}));
|
||||
});
|
||||
|
||||
this.keepAliveInterval = setInterval(this.keepAlive.bind(this), 30000);
|
||||
|
||||
this.$watch('terminalActive', (active) => {
|
||||
if (!active && this.keepAliveInterval) {
|
||||
clearInterval(this.keepAliveInterval);
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
if (active) {
|
||||
this.$refs.terminalWrapper.style.display = 'block';
|
||||
this.resizeTerminal();
|
||||
} else {
|
||||
this.$refs.terminalWrapper.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
['livewire:navigated', 'beforeunload'].forEach((event) => {
|
||||
document.addEventListener(event, () => {
|
||||
this.checkIfProcessIsRunningAndKillIt();
|
||||
clearInterval(this.keepAliveInterval);
|
||||
}, { once: true });
|
||||
});
|
||||
|
||||
window.onresize = () => {
|
||||
this.resizeTerminal()
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
setupTerminal() {
|
||||
const terminalElement = document.getElementById('terminal');
|
||||
if (terminalElement) {
|
||||
this.term = new Terminal({
|
||||
cols: 80,
|
||||
rows: 30,
|
||||
fontFamily: '"Fira Code", courier-new, courier, monospace, "Powerline Extra Symbols"',
|
||||
cursorBlink: true,
|
||||
});
|
||||
this.fitAddon = new FitAddon();
|
||||
this.term.loadAddon(this.fitAddon);
|
||||
}
|
||||
},
|
||||
|
||||
initializeWebSocket() {
|
||||
if (!this.socket || this.socket.readyState === WebSocket.CLOSED) {
|
||||
const predefined = window.terminalConfig
|
||||
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}`
|
||||
this.socket = new WebSocket(url);
|
||||
|
||||
this.socket.onmessage = this.handleSocketMessage.bind(this);
|
||||
this.socket.onerror = (e) => {
|
||||
console.error('WebSocket error:', e);
|
||||
};
|
||||
this.socket.onclose = () => {
|
||||
console.log('WebSocket connection closed');
|
||||
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
handleSocketMessage(event) {
|
||||
this.message = '(connection closed)';
|
||||
if (event.data === 'pty-ready') {
|
||||
if (!this.term._initialized) {
|
||||
this.term.open(document.getElementById('terminal'));
|
||||
this.term._initialized = true;
|
||||
} else {
|
||||
this.term.reset();
|
||||
}
|
||||
this.terminalActive = true;
|
||||
this.term.focus();
|
||||
document.querySelector('.xterm-viewport').classList.add('scrollbar', 'rounded');
|
||||
this.resizeTerminal();
|
||||
} else if (event.data === 'unprocessable') {
|
||||
if (this.term) this.term.reset();
|
||||
this.terminalActive = false;
|
||||
this.message = '(sorry, something went wrong, please try again)';
|
||||
} else {
|
||||
this.pendingWrites++;
|
||||
this.term.write(event.data, this.flowControlCallback.bind(this));
|
||||
}
|
||||
},
|
||||
|
||||
flowControlCallback() {
|
||||
this.pendingWrites--;
|
||||
if (this.pendingWrites > this.MAX_PENDING_WRITES && !this.paused) {
|
||||
this.paused = true;
|
||||
this.socket.send(JSON.stringify({ pause: true }));
|
||||
} else if (this.pendingWrites <= this.MAX_PENDING_WRITES && this.paused) {
|
||||
this.paused = false;
|
||||
this.socket.send(JSON.stringify({ resume: true }));
|
||||
}
|
||||
},
|
||||
|
||||
setupTerminalEventListeners() {
|
||||
if (!this.term) return;
|
||||
|
||||
this.term.onData((data) => {
|
||||
this.socket.send(JSON.stringify({ message: data }));
|
||||
// Handle CTRL + D or exit command
|
||||
if (data === '\x04' || (data === '\r' && this.stripAnsiCommands(this.commandBuffer).trim().includes('exit'))) {
|
||||
this.checkIfProcessIsRunningAndKillIt();
|
||||
setTimeout(() => {
|
||||
this.terminalActive = false;
|
||||
this.term.reset();
|
||||
}, 500);
|
||||
this.commandBuffer = '';
|
||||
} else if (data === '\r') {
|
||||
this.commandBuffer = '';
|
||||
} else {
|
||||
this.commandBuffer += data;
|
||||
}
|
||||
});
|
||||
|
||||
// Copy and paste functionality
|
||||
this.term.attachCustomKeyEventHandler((arg) => {
|
||||
if (arg.ctrlKey && arg.code === "KeyV" && arg.type === "keydown") {
|
||||
navigator.clipboard.readText()
|
||||
.then(text => {
|
||||
this.socket.send(JSON.stringify({ message: text }));
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (arg.ctrlKey && arg.code === "KeyC" && arg.type === "keydown") {
|
||||
const selection = this.term.getSelection();
|
||||
if (selection) {
|
||||
navigator.clipboard.writeText(selection);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
},
|
||||
|
||||
stripAnsiCommands(input) {
|
||||
return input.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, '');
|
||||
},
|
||||
|
||||
keepAlive() {
|
||||
if (this.socket && this.socket.readyState === WebSocket.OPEN) {
|
||||
this.socket.send(JSON.stringify({ ping: true }));
|
||||
}
|
||||
},
|
||||
|
||||
checkIfProcessIsRunningAndKillIt() {
|
||||
if (this.socket && this.socket.readyState == WebSocket.OPEN) {
|
||||
this.socket.send(JSON.stringify({ checkActive: 'force' }));
|
||||
}
|
||||
},
|
||||
|
||||
makeFullscreen() {
|
||||
this.fullscreen = !this.fullscreen;
|
||||
this.$nextTick(() => {
|
||||
this.resizeTerminal();
|
||||
});
|
||||
},
|
||||
|
||||
resizeTerminal() {
|
||||
if (!this.terminalActive || !this.term || !this.fitAddon) return;
|
||||
|
||||
this.fitAddon.fit();
|
||||
const height = this.$refs.terminalWrapper.clientHeight;
|
||||
const width = this.$refs.terminalWrapper.clientWidth;
|
||||
const rows = Math.floor(height / this.term._core._renderService._charSizeService.height) - 1;
|
||||
const cols = Math.floor(width / this.term._core._renderService._charSizeService.width) - 1;
|
||||
const termWidth = cols;
|
||||
const termHeight = rows;
|
||||
this.term.resize(termWidth, termHeight);
|
||||
this.socket.send(JSON.stringify({
|
||||
resize: { cols: termWidth, rows: termHeight }
|
||||
}));
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
window.Alpine.data('terminalData', terminalData);
|
||||
}
|
@@ -1,4 +1,4 @@
|
||||
<div x-data="data()">
|
||||
<div id="terminal-container" x-data="terminalData()">
|
||||
{{-- <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>
|
||||
@@ -22,219 +22,14 @@
|
||||
</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 = {
|
||||
// expose terminal config to the terminal.js file
|
||||
window.terminalConfig = {
|
||||
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>
|
||||
|
@@ -8,7 +8,7 @@ services:
|
||||
uptime-kuma:
|
||||
image: louislam/uptime-kuma:1
|
||||
environment:
|
||||
- SERVICE_FQDN_UPTIME-KUMA_3001
|
||||
- SERVICE_FQDN_UPTIMEKUMA_3001
|
||||
volumes:
|
||||
- uptime-kuma:/app/data
|
||||
healthcheck:
|
||||
|
File diff suppressed because one or more lines are too long
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"coolify": {
|
||||
"v4": {
|
||||
"version": "4.0.0-beta.345"
|
||||
"version": "4.0.0-beta.346"
|
||||
},
|
||||
"nightly": {
|
||||
"version": "4.0.0-beta.346"
|
||||
"version": "4.0.0-beta.347"
|
||||
},
|
||||
"helper": {
|
||||
"version": "1.0.1"
|
||||
|
Reference in New Issue
Block a user