From f58858206e84eb46fb2cd5b7d26d15ee19140653 Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Sat, 15 Apr 2017 18:23:29 -0400 Subject: [PATCH] Add console popout option. Popout: https://s3.kelp.in/IrTyE.png Menu: https://s3.kelp.in/JYwlC.png Menu Hover: https://s3.kelp.in/cPtSf.png --- CHANGELOG.md | 3 + .../Controllers/Server/ServerController.php | 25 ++ .../themes/pterodactyl/js/frontend/console.js | 214 +++++++++--------- .../pterodactyl/js/frontend/server.socket.js | 5 +- resources/lang/en/navigation.php | 1 + .../pterodactyl/layouts/master.blade.php | 5 + .../pterodactyl/server/console.blade.php | 49 ++++ routes/server.php | 1 + 8 files changed, 199 insertions(+), 104 deletions(-) create mode 100644 resources/themes/pterodactyl/server/console.blade.php diff --git a/CHANGELOG.md b/CHANGELOG.md index fa750c24d..6ccc53c56 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,9 @@ This project follows [Semantic Versioning](http://semver.org) guidelines. * `[beta.1]` — Fixes panel looking for an old compiled classfile that is no longer used. This was causing errors relating to `missing class DingoAPI` when trying to upgrade the panel. * `[beta.1]` — Should fix render issues when trying to edit some files via the panel file editor. +### Added +* Ability to launch the console in a new window as an individual unit. https://s3.kelp.in/IrTyE.png + ## v0.6.0-beta.1 (Courageous Carniadactylus) ### Fixed * `[pre.7]` — Fixes bug with subuser checkbox display. diff --git a/app/Http/Controllers/Server/ServerController.php b/app/Http/Controllers/Server/ServerController.php index 5c3dc193d..d89a47c1c 100644 --- a/app/Http/Controllers/Server/ServerController.php +++ b/app/Http/Controllers/Server/ServerController.php @@ -65,6 +65,31 @@ class ServerController extends Controller ]); } + /** + * Renders server console as an individual item. + * + * @param \Illuminate\Http\Request $request + * @param string $uuid + * @return \Illuminate\View\View + */ + public function getConsole(Request $request, $uuid) + { + \Debugbar::disable(); + $server = Models\Server::byUuid($uuid); + + $server->js([ + 'config' => [ + 'console_count' => config('pterodactyl.console.count'), + 'console_freq' => config('pterodactyl.console.freq'), + ], + ]); + + return view('server.console', [ + 'server' => $server, + 'node' => $server->node, + ]); + } + /** * Renders file overview page. * diff --git a/public/themes/pterodactyl/js/frontend/console.js b/public/themes/pterodactyl/js/frontend/console.js index 56233cd18..b0cd9755b 100644 --- a/public/themes/pterodactyl/js/frontend/console.js +++ b/public/themes/pterodactyl/js/frontend/console.js @@ -24,8 +24,9 @@ var InitialLogSent = false; (function initConsole() { window.TerminalQueue = []; + window.ConsoleServerStatus = 0; window.Terminal = $('#terminal').terminal(function (command, term) { - Socket.emit('send command', command); + Socket.emit((ConsoleServerStatus !== 0) ? 'send command' : 'set status', command); }, { greetings: '', name: Pterodactyl.server.uuid, @@ -80,6 +81,7 @@ var InitialLogSent = false; (function setupSocketListeners() { // Update Listings on Initial Status Socket.on('initial status', function (data) { + ConsoleServerStatus = data.status; if (! InitialLogSent) { updateServerPowerControls(data.status); @@ -91,6 +93,7 @@ var InitialLogSent = false; // Update Listings on Status Socket.on('status', function (data) { + ConsoleServerStatus = data.status; updateServerPowerControls(data.status); }); @@ -134,112 +137,117 @@ $(document).ready(function () { } }); - Socket.on('proc', function (proc) { - if (CPUData.length > 10) { - CPUData.shift(); - MemoryData.shift(); - TimeLabels.shift(); + (function setupChartElements() { + if (typeof SkipConsoleCharts !== 'undefined') { + return; } - var cpuUse = (Pterodactyl.server.cpu > 0) ? parseFloat(((proc.data.cpu.total / Pterodactyl.server.cpu) * 100).toFixed(3).toString()) : proc.data.cpu.total; - CPUData.push(cpuUse); - MemoryData.push(parseInt(proc.data.memory.total / (1024 * 1024))); - - TimeLabels.push($.format.date(new Date(), 'HH:mm:ss')); - - CPUChart.update(); - MemoryChart.update(); - }); - - - var ctc = $('#chart_cpu'); - var TimeLabels = []; - var CPUData = []; - var CPUChart = new Chart(ctc, { - type: 'line', - data: { - labels: TimeLabels, - datasets: [ - { - label: "Percent Use", - fill: false, - lineTension: 0.03, - backgroundColor: "#3c8dbc", - borderColor: "#3c8dbc", - borderCapStyle: 'butt', - borderDash: [], - borderDashOffset: 0.0, - borderJoinStyle: 'miter', - pointBorderColor: "#3c8dbc", - pointBackgroundColor: "#fff", - pointBorderWidth: 1, - pointHoverRadius: 5, - pointHoverBackgroundColor: "#3c8dbc", - pointHoverBorderColor: "rgba(220,220,220,1)", - pointHoverBorderWidth: 2, - pointRadius: 1, - pointHitRadius: 10, - data: CPUData, - spanGaps: false, - } - ] - }, - options: { - title: { - display: true, - text: 'CPU Usage (as Percent Total)' - }, - legend: { - display: false, - }, - animation: { - duration: 1, + Socket.on('proc', function (proc) { + if (CPUData.length > 10) { + CPUData.shift(); + MemoryData.shift(); + TimeLabels.shift(); } - } - }); - var ctm = $('#chart_memory'); - MemoryData = []; - MemoryChart = new Chart(ctm, { - type: 'line', - data: { - labels: TimeLabels, - datasets: [ - { - label: "Memory Use", - fill: false, - lineTension: 0.03, - backgroundColor: "#3c8dbc", - borderColor: "#3c8dbc", - borderCapStyle: 'butt', - borderDash: [], - borderDashOffset: 0.0, - borderJoinStyle: 'miter', - pointBorderColor: "#3c8dbc", - pointBackgroundColor: "#fff", - pointBorderWidth: 1, - pointHoverRadius: 5, - pointHoverBackgroundColor: "#3c8dbc", - pointHoverBorderColor: "rgba(220,220,220,1)", - pointHoverBorderWidth: 2, - pointRadius: 1, - pointHitRadius: 10, - data: MemoryData, - spanGaps: false, + var cpuUse = (Pterodactyl.server.cpu > 0) ? parseFloat(((proc.data.cpu.total / Pterodactyl.server.cpu) * 100).toFixed(3).toString()) : proc.data.cpu.total; + CPUData.push(cpuUse); + MemoryData.push(parseInt(proc.data.memory.total / (1024 * 1024))); + + TimeLabels.push($.format.date(new Date(), 'HH:mm:ss')); + + CPUChart.update(); + MemoryChart.update(); + }); + + var ctc = $('#chart_cpu'); + var TimeLabels = []; + var CPUData = []; + var CPUChart = new Chart(ctc, { + type: 'line', + data: { + labels: TimeLabels, + datasets: [ + { + label: "Percent Use", + fill: false, + lineTension: 0.03, + backgroundColor: "#3c8dbc", + borderColor: "#3c8dbc", + borderCapStyle: 'butt', + borderDash: [], + borderDashOffset: 0.0, + borderJoinStyle: 'miter', + pointBorderColor: "#3c8dbc", + pointBackgroundColor: "#fff", + pointBorderWidth: 1, + pointHoverRadius: 5, + pointHoverBackgroundColor: "#3c8dbc", + pointHoverBorderColor: "rgba(220,220,220,1)", + pointHoverBorderWidth: 2, + pointRadius: 1, + pointHitRadius: 10, + data: CPUData, + spanGaps: false, + } + ] + }, + options: { + title: { + display: true, + text: 'CPU Usage (as Percent Total)' + }, + legend: { + display: false, + }, + animation: { + duration: 1, } - ] - }, - options: { - title: { - display: true, - text: 'Memory Usage (in Megabytes)' - }, - legend: { - display: false, - }, - animation: { - duration: 1, } - } - }); + }); + + var ctm = $('#chart_memory'); + MemoryData = []; + MemoryChart = new Chart(ctm, { + type: 'line', + data: { + labels: TimeLabels, + datasets: [ + { + label: "Memory Use", + fill: false, + lineTension: 0.03, + backgroundColor: "#3c8dbc", + borderColor: "#3c8dbc", + borderCapStyle: 'butt', + borderDash: [], + borderDashOffset: 0.0, + borderJoinStyle: 'miter', + pointBorderColor: "#3c8dbc", + pointBackgroundColor: "#fff", + pointBorderWidth: 1, + pointHoverRadius: 5, + pointHoverBackgroundColor: "#3c8dbc", + pointHoverBorderColor: "rgba(220,220,220,1)", + pointHoverBorderWidth: 2, + pointRadius: 1, + pointHitRadius: 10, + data: MemoryData, + spanGaps: false, + } + ] + }, + options: { + title: { + display: true, + text: 'Memory Usage (in Megabytes)' + }, + legend: { + display: false, + }, + animation: { + duration: 1, + } + } + }); + })(); }); diff --git a/public/themes/pterodactyl/js/frontend/server.socket.js b/public/themes/pterodactyl/js/frontend/server.socket.js index 4c0e77fa8..7314c7d7a 100644 --- a/public/themes/pterodactyl/js/frontend/server.socket.js +++ b/public/themes/pterodactyl/js/frontend/server.socket.js @@ -17,7 +17,10 @@ // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE // SOFTWARE. - +$('#console-popout').on('click', function (event) { + event.preventDefault(); + window.open($(this).attr('href'), 'Pterodactyl Console', 'width=800,height=400'); +}); var Server = (function () { function initSocket() { diff --git a/resources/lang/en/navigation.php b/resources/lang/en/navigation.php index 9466823b0..a8d271017 100644 --- a/resources/lang/en/navigation.php +++ b/resources/lang/en/navigation.php @@ -12,6 +12,7 @@ return [ 'server' => [ 'header' => 'SERVER MANAGEMENT', 'console' => 'Console', + 'console-pop' => 'Fullscreen Console', 'file_management' => 'File Management', 'file_browser' => 'File Browser', 'create_file' => 'Create File', diff --git a/resources/themes/pterodactyl/layouts/master.blade.php b/resources/themes/pterodactyl/layouts/master.blade.php index a2483c9fd..8b236149e 100644 --- a/resources/themes/pterodactyl/layouts/master.blade.php +++ b/resources/themes/pterodactyl/layouts/master.blade.php @@ -126,6 +126,11 @@
  • @lang('navigation.server.console') + + + + +
    • @can('list-files', $server) diff --git a/resources/themes/pterodactyl/server/console.blade.php b/resources/themes/pterodactyl/server/console.blade.php new file mode 100644 index 000000000..0a98369e1 --- /dev/null +++ b/resources/themes/pterodactyl/server/console.blade.php @@ -0,0 +1,49 @@ +{{-- Copyright (c) 2015 - 2017 Dane Everitt --}} + +{{-- Permission is hereby granted, free of charge, to any person obtaining a copy --}} +{{-- of this software and associated documentation files (the "Software"), to deal --}} +{{-- in the Software without restriction, including without limitation the rights --}} +{{-- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell --}} +{{-- copies of the Software, and to permit persons to whom the Software is --}} +{{-- furnished to do so, subject to the following conditions: --}} + +{{-- The above copyright notice and this permission notice shall be included in all --}} +{{-- copies or substantial portions of the Software. --}} + +{{-- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR --}} +{{-- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, --}} +{{-- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE --}} +{{-- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER --}} +{{-- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, --}} +{{-- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE --}} +{{-- SOFTWARE. --}} + + + + {{ Settings::get('company', 'Pterodactyl') }} - Console → {{ $server->name }} + @include('layouts.scripts') + {!! Theme::css('vendor/terminal/jquery.terminal.css') !!} + + +
    + + + + {!! Theme::js('js/laroute.js') !!} + {!! Theme::js('vendor/jquery/jquery.min.js') !!} + {!! Theme::js('vendor/socketio/socket.io.min.js') !!} + {!! Theme::js('vendor/bootstrap-notify/bootstrap-notify.min.js') !!} + {!! Theme::js('js/frontend/server.socket.js') !!} + {!! Theme::js('vendor/mousewheel/jquery.mousewheel-min.js') !!} + {!! Theme::js('vendor/terminal/jquery.terminal.min.js') !!} + {!! Theme::js('vendor/terminal/unix_formatting.js') !!} + {!! Theme::js('js/frontend/console.js') !!} + + diff --git a/routes/server.php b/routes/server.php index 953eab2b2..3358ed253 100644 --- a/routes/server.php +++ b/routes/server.php @@ -22,6 +22,7 @@ * SOFTWARE. */ Route::get('/', 'ServerController@getIndex')->name('server.index'); +Route::get('/console', 'ServerController@getConsole')->name('server.console'); /* |--------------------------------------------------------------------------