banquise/pelican-panel-mirror
3
0
Fork 1
mirror of https://github.com/pelican-dev/panel.git synced 2025-05-19 22:14:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Charles 2025-05-07 12:58:01 -04:00
parent e38a736b61
commit 374d5ebffe
6 changed files with 246 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package.json
View File

@ -17,5 +17,13 @@
"prettier": "^3.4.2",
"tailwindcss": "^3.4.13",
"vite": "^6.0"
},
"dependencies": {
"@xterm/addon-fit": "^0.10.0",
"@xterm/addon-search": "^0.15.0",
"@xterm/addon-web-links": "^0.11.0",
"xterm": "^5.3.0",
"xterm-addon-search": "^0.13.0",
"xterm-addon-search-bar": "^0.2.0"
}
}

4
resources/css/app.css
View File

@ -1,8 +1,12 @@
@import 'xterm/css/xterm.css';
@import 'xterm-addon-search-bar/src/index.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
.fi-section-header-icon {
@apply !self-center;
}

60
resources/js/app.js
View File

@ -1 +1,61 @@
import './bootstrap';
import { initializeTerminal } from './terminal'; // Import the terminal initialization function
document.addEventListener('DOMContentLoaded', () => {
// Access the PHP variables from window.phpData
const { userFont, userFontSize, userRows, socketUrl } = window.phpData;
const terminalOptions = {
fontSize: userFontSize,
fontFamily: `${userFont}, monospace`,
lineHeight: 1.2,
disableStdin: true,
cursorStyle: 'underline',
cursorInactiveStyle: 'underline',
allowTransparency: true,
rows: userRows,
theme: {
background: 'rgba(19,26,32,0.7)',
cursor: 'transparent',
black: '#000000',
red: '#E54B4B',
green: '#9ECE58',
yellow: '#FAED70',
blue: '#396FE2',
magenta: '#BB80B3',
cyan: '#2DDAFD',
white: '#d0d0d0',
brightBlack: 'rgba(255, 255, 255, 0.2)',
brightRed: '#FF5370',
brightGreen: '#C3E88D',
brightYellow: '#FFCB6B',
brightBlue: '#82AAFF',
brightMagenta: '#C792EA',
brightCyan: '#89DDFF',
brightWhite: '#ffffff',
selection: '#FAF089'
}
};
// Initialize the terminal with the options and WebSocket URL
const { terminal, fitAddon, searchAddon, searchBarAddon, socket } = initializeTerminal({
elId: 'terminal',
options: terminalOptions,
socketUrl: socketUrl,
onEvent: (event, args) => {
switch (event) {
case 'status':
console.log('Status event received:', args);
break;
case 'transfer status':
terminal.writeln(TERMINAL_PRELUDE + 'Transfer status: ' + args);
break;
case 'daemon error':
terminal.writeln(TERMINAL_PRELUDE + 'Daemon error: ' + args);
break;
default:
break;
}
}
});
});

107
resources/js/terminal.js Normal file
View File

@ -0,0 +1,107 @@
import { Terminal } from 'xterm';
import { FitAddon } from '@xterm/addon-fit';
import { WebLinksAddon } from '@xterm/addon-web-links';
import { SearchAddon } from '@xterm/addon-search';
import { SearchBarAddon } from 'xterm-addon-search-bar';
export function initializeTerminal({ elId = 'terminal', options = {}, socketUrl, onEvent = () => {} }) {
const terminal = new Terminal(options);
const fitAddon = new FitAddon();
const webLinksAddon = new WebLinksAddon();
const searchAddon = new SearchAddon();
const searchBarAddon = new SearchBarAddon({ searchAddon });
terminal.loadAddon(fitAddon);
terminal.loadAddon(webLinksAddon);
terminal.loadAddon(searchAddon);
terminal.loadAddon(searchBarAddon);
terminal.open(document.getElementById(elId));
fitAddon.fit();
window.addEventListener('resize', () => fitAddon.fit());
terminal.attachCustomKeyEventHandler((event) => {
if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
document.execCommand('copy');
return false;
} else if ((event.ctrlKey || event.metaKey) && event.key === 'f') {
event.preventDefault();
searchBarAddon.show();
return false;
} else if (event.key === 'Escape') {
searchBarAddon.hidden();
}
return true;
});
// WebSocket connection handling
const socket = new WebSocket(socketUrl);
socket.onerror = (event) => {
$wire.dispatchSelf('websocket-error');
};
socket.onmessage = function(websocketMessageEvent) {
let { event, args } = JSON.parse(websocketMessageEvent.data);
switch (event) {
case 'console output':
case 'install output':
terminal.writeln(args[0]);
break;
case 'feature match':
Livewire.dispatch('mount-feature', { data: args[0] });
break;
case 'status':
handlePowerChangeEvent(args[0]);
$wire.dispatch('console-status', { state: args[0] });
break;
case 'transfer status':
terminal.writeln(TERMINAL_PRELUDE + 'Transfer has failed.\u001b[0m');
break;
case 'daemon error':
handleDaemonErrorOutput(args[0]);
break;
case 'stats':
$wire.dispatchSelf('store-stats', { data: args[0] });
break;
case 'auth success':
socket.send(JSON.stringify({
'event': 'send logs',
'args': [null]
}));
break;
case 'token expiring':
case 'token expired':
$wire.dispatchSelf('token-request');
break;
}
};
socket.onopen = () => {
$wire.dispatchSelf('token-request');
};
// Handle events
const TERMINAL_PRELUDE = '\u001b[1m\u001b[33mpelican@' + '{{ \Filament\Facades\Filament::getTenant()->name }}' + ' ~ \u001b[0m';
const handleConsoleOutput = (line, prelude = false) =>
terminal.writeln((prelude ? TERMINAL_PRELUDE : '') + line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m');
const handleDaemonErrorOutput = (line) =>
terminal.writeln(TERMINAL_PRELUDE + '\u001b[1m\u001b[41m' + line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m');
const handlePowerChangeEvent = (state) =>
terminal.writeln(TERMINAL_PRELUDE + 'Server marked as ' + state + '...\u001b[0m');
// Return terminal, fitAddon, searchAddon, searchBarAddon for further usage
return {
terminal,
fitAddon,
searchAddon,
searchBarAddon,
socket
};
}

186
resources/views/filament/components/server-console.blade.php
View File

@ -4,23 +4,18 @@
$userFont = auth()->user()->getCustomization()['console_font'] ?? 'monospace';
$userFontSize = auth()->user()->getCustomization()['console_font_size'] ?? 14;
$userRows = auth()->user()->getCustomization()['console_rows'] ?? 30;
$socketUrl = $this->getSocket(); // Assuming this is the WebSocket URL
@endphp
@if($userFont)
<link rel="preload" href="{{ asset("storage/fonts/{$userFont}.ttf") }}" as="font" crossorigin>
<style>
@font-face {
font-family: '{{ $userFont }}';
src: url('{{ asset("storage/fonts/{$userFont}.ttf") }}');
}
</style>
@endif
<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm/lib/xterm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit/lib/addon-fit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links/lib/addon-web-links.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-search/lib/addon-search.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-search-bar/lib/xterm-addon-search-bar.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm/css/xterm.min.css">
<link rel="stylesheet" href="{{ asset('/css/filament/server/console.css') }}">
@vite(['resources/js/app.js', 'resources/css/app.css'])
<script>
window.phpData = {
userFont: '{{ $userFont }}',
userFontSize: {{ $userFontSize }},
userRows: {{ $userRows }},
socketUrl: '{{ $socketUrl }}',
};
</script>
@endassets
<div id="terminal" wire:ignore></div>
@ -45,163 +40,4 @@
>
</div>
@endif
@script
<script>
let theme = {
background: 'rgba(19,26,32,0.7)',
cursor: 'transparent',
black: '#000000',
red: '#E54B4B',
green: '#9ECE58',
yellow: '#FAED70',
blue: '#396FE2',
magenta: '#BB80B3',
cyan: '#2DDAFD',
white: '#d0d0d0',
brightBlack: 'rgba(255, 255, 255, 0.2)',
brightRed: '#FF5370',
brightGreen: '#C3E88D',
brightYellow: '#FFCB6B',
brightBlue: '#82AAFF',
brightMagenta: '#C792EA',
brightCyan: '#89DDFF',
brightWhite: '#ffffff',
selection: '#FAF089'
};
let options = {
fontSize: {{ $userFontSize }},
fontFamily: '{{ $userFont }}, monospace',
lineHeight: 1.2,
disableStdin: true,
cursorStyle: 'underline',
cursorInactiveStyle: 'underline',
allowTransparency: true,
rows: {{ $userRows }},
theme: theme
};
const terminal = new Terminal(options);
const fitAddon = new FitAddon.FitAddon();
const webLinksAddon = new WebLinksAddon.WebLinksAddon();
const searchAddon = new SearchAddon.SearchAddon();
const searchAddonBar = new SearchBarAddon.SearchBarAddon({ searchAddon });
terminal.loadAddon(fitAddon);
terminal.loadAddon(webLinksAddon);
terminal.loadAddon(searchAddon);
terminal.loadAddon(searchAddonBar);
terminal.open(document.getElementById('terminal'));
fitAddon.fit(); //Fit on first load
window.addEventListener('resize', () => {
fitAddon.fit();
});
terminal.attachCustomKeyEventHandler((event) => {
if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
document.execCommand('copy'); // navigator.clipboard.writeText() only works on ssl..
return false;
} else if ((event.ctrlKey || event.metaKey) && event.key === 'f') {
event.preventDefault();
searchAddonBar.show();
return false;
} else if (event.key === 'Escape') {
searchAddonBar.hidden();
}
return true;
});
const TERMINAL_PRELUDE = '\u001b[1m\u001b[33mpelican@' + '{{ \Filament\Facades\Filament::getTenant()->name }}' + ' ~ \u001b[0m';
const handleConsoleOutput = (line, prelude = false) =>
terminal.writeln((prelude ? TERMINAL_PRELUDE : '') + line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m');
const handleTransferStatus = (status) =>
status === 'failure' && terminal.writeln(TERMINAL_PRELUDE + 'Transfer has failed.\u001b[0m');
const handleDaemonErrorOutput = (line) =>
terminal.writeln(TERMINAL_PRELUDE + '\u001b[1m\u001b[41m' + line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m');
const handlePowerChangeEvent = (state) =>
terminal.writeln(TERMINAL_PRELUDE + 'Server marked as ' + state + '...\u001b[0m');
const socket = new WebSocket("{{ $this->getSocket() }}");
socket.onerror = (event) => {
$wire.dispatchSelf('websocket-error');
};
socket.onmessage = function(websocketMessageEvent) {
let { event, args } = JSON.parse(websocketMessageEvent.data);
switch (event) {
case 'console output':
case 'install output':
handleConsoleOutput(args[0]);
break;
case 'feature match':
Livewire.dispatch('mount-feature', { data: args[0] });
break;
case 'status':
handlePowerChangeEvent(args[0]);
$wire.dispatch('console-status', { state: args[0] });
break;
case 'transfer status':
handleTransferStatus(args[0]);
break;
case 'daemon error':
handleDaemonErrorOutput(args[0]);
break;
case 'stats':
$wire.dispatchSelf('store-stats', { data: args[0] });
break;
case 'auth success':
socket.send(JSON.stringify({
'event': 'send logs',
'args': [null]
}));
break;
case 'token expiring':
case 'token expired':
$wire.dispatchSelf('token-request');
break;
}
};
socket.onopen = (event) => {
$wire.dispatchSelf('token-request');
};
Livewire.on('setServerState', ({ state, uuid }) => {
const serverUuid = "{{ $this->server->uuid }}";
if (uuid !== serverUuid) {
return;
}
socket.send(JSON.stringify({
'event': 'set state',
'args': [state]
}));
});
$wire.on('sendAuthRequest', ({ token }) => {
socket.send(JSON.stringify({
'event': 'auth',
'args': [token]
}));
});
$wire.on('sendServerCommand', ({ command }) => {
socket.send(JSON.stringify({
'event': 'send command',
'args': [command]
}));
});
</script>
@endscript
</x-filament::widget>

56
yarn.lock
View File

@ -329,6 +329,21 @@
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
"@xterm/addon-fit@^0.10.0":
version "0.10.0"
resolved "https://registry.yarnpkg.com/@xterm/addon-fit/-/addon-fit-0.10.0.tgz#bebf87fadd74e3af30fdcdeef47030e2592c6f55"
integrity sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==
"@xterm/addon-search@^0.15.0":
version "0.15.0"
resolved "https://registry.yarnpkg.com/@xterm/addon-search/-/addon-search-0.15.0.tgz#5c772d5f14c26546c4bfbeb0c3d4b3333057411f"
integrity sha512-ZBZKLQ+EuKE83CqCmSSz5y1tx+aNOCUaA7dm6emgOX+8J9H1FWXZyrKfzjwzV+V14TV3xToz1goIeRhXBS5qjg==
"@xterm/addon-web-links@^0.11.0":
version "0.11.0"
resolved "https://registry.yarnpkg.com/@xterm/addon-web-links/-/addon-web-links-0.11.0.tgz#f283513b8c713757bad8e3bf04b6becc3b4e585f"
integrity sha512-nIHQ38pQI+a5kXnRaTgwqSHnX7KE6+4SVoceompgHL26unAxdfP6IPqUTSYPQgSwM56hsElfoNrrW5V7BUED/Q==
ansi-regex@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
@ -395,6 +410,14 @@ axios@^1.7.4:
form-data "^4.0.0"
proxy-from-env "^1.1.0"
babel-runtime@^6.26.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==
dependencies:
core-js "^2.4.0"
regenerator-runtime "^0.11.0"
balanced-match@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@ -508,6 +531,11 @@ concurrently@^9.0.1:
tree-kill "^1.2.2"
yargs "^17.7.2"
core-js@^2.4.0:
version "2.6.12"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
cross-spawn@^7.0.0:
version "7.0.6"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
@ -1027,6 +1055,11 @@ readdirp@~3.6.0:
dependencies:
picomatch "^2.2.1"
regenerator-runtime@^0.11.0:
version "0.11.1"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
require-directory@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@ -1081,6 +1114,11 @@ run-parallel@^1.1.9:
dependencies:
queue-microtask "^1.2.2"
rxjs-compat@^6.5.4:
version "6.6.7"
resolved "https://registry.yarnpkg.com/rxjs-compat/-/rxjs-compat-6.6.7.tgz#6eb4ef75c0a58ea672854a701ccc8d49f41e69cb"
integrity sha512-szN4fK+TqBPOFBcBcsR0g2cmTTUF/vaFEOZNuSdfU8/pGFnNmmn2u8SystYXG1QMrjOPBc6XTKHMVfENDf6hHw==
rxjs@^7.8.1:
version "7.8.1"
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
@ -1325,6 +1363,24 @@ wrap-ansi@^8.1.0:
string-width "^5.0.1"
strip-ansi "^7.0.1"
xterm-addon-search-bar@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/xterm-addon-search-bar/-/xterm-addon-search-bar-0.2.0.tgz#e03c020a5ed22f1e8d503946b26a14ade508bc91"
integrity sha512-xvXmBA/ShbnzGe5CCy0kqPNNGqjkpuaRgH3Z1iW0V71vCAPRrtJ/v/hMnysZBH7WGUYhlCQr1cJZagW2fBVvSg==
dependencies:
babel-runtime "^6.26.0"
rxjs-compat "^6.5.4"
xterm-addon-search@^0.13.0:
version "0.13.0"
resolved "https://registry.yarnpkg.com/xterm-addon-search/-/xterm-addon-search-0.13.0.tgz#21286f4db48aa949fbefce34bb8bc0c9d3cec627"
integrity sha512-sDUwG4CnqxUjSEFh676DlS3gsh3XYCzAvBPSvJ5OPgF3MRL3iHLPfsb06doRicLC2xXNpeG2cWk8x1qpESWJMA==
xterm@^5.3.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/xterm/-/xterm-5.3.0.tgz#867daf9cc826f3d45b5377320aabd996cb0fce46"
integrity sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==
y18n@^5.0.5:
version "5.0.8"
resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"