From 344e3b43302802ce1c378b7caf0c31ab02de92af Mon Sep 17 00:00:00 2001 From: Jakob Schrettenbrunner Date: Thu, 26 Jan 2017 22:57:33 +0100 Subject: [PATCH] =?UTF-8?q?add=20console=20notification=20on=20new=20outpu?= =?UTF-8?q?t=20that=20is=20out=20of=20view=20fix=20the=20revealing=20modul?= =?UTF-8?q?e=20pattern=20(browser=20cache=20=F0=9F=98=92)=20change=20graph?= =?UTF-8?q?=20colors=20to=20theme=20primary=20color=20move=20Socket.on(?= =?UTF-8?q?=E2=80=9Aconsole=E2=80=99)=20to=20console.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/themes/pterodactyl/css/pterodactyl.css | 21 +++++ .../themes/pterodactyl/js/frontend/console.js | 77 ++++++++++++------- .../pterodactyl/js/frontend/server.socket.js | 4 - .../themes/pterodactyl/server/index.blade.php | 5 +- 4 files changed, 75 insertions(+), 32 deletions(-) diff --git a/public/themes/pterodactyl/css/pterodactyl.css b/public/themes/pterodactyl/css/pterodactyl.css index 5c849120d..16dbe1547 100644 --- a/public/themes/pterodactyl/css/pterodactyl.css +++ b/public/themes/pterodactyl/css/pterodactyl.css @@ -125,3 +125,24 @@ td.has-progress { .no-margin { margin: 0 !important; } + +.position-relative { + position: relative; +} + +.terminal-notify { + position: absolute; + right: 10px; + bottom: 10px; + /* Browsers usually have a 17px scrollbar which is visible in the terminal */ + padding: 7px 24px 7px 7px; + border-top-left-radius: 3px; + background: white; + color: black; + opacity: .5; + cursor: pointer; +} + +.terminal-notify:hover { + opacity: .9; +} diff --git a/public/themes/pterodactyl/js/frontend/console.js b/public/themes/pterodactyl/js/frontend/console.js index 5af50eeae..3977379c5 100644 --- a/public/themes/pterodactyl/js/frontend/console.js +++ b/public/themes/pterodactyl/js/frontend/console.js @@ -17,10 +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. -var CONSOLE_PUSH_COUNT = 50; -var CONSOLE_PUSH_FREQ = 200; -const Console = (function () { +var Console = (function () { + var CONSOLE_PUSH_COUNT = 50; + var CONSOLE_PUSH_FREQ = 200; var terminalQueue; var terminal; @@ -31,8 +31,10 @@ const Console = (function () { var memoryData; var timeLabels; + var $terminalNotify; + function initConsole() { - termianlQueue = []; + terminalQueue = []; terminal = $('#terminal').terminal(function (command, term) { Socket.emit('send command', command); }, { @@ -47,13 +49,25 @@ const Console = (function () { return false; } }); + + $terminalNotify = $('#terminalNotify'); + $terminalNotify.on('click', function () { + terminal.scroll_to_bottom(); + $terminalNotify.addClass('hidden'); + }) + + terminal.on('scroll', function () { + if (terminal.is_bottom()) { + $terminalNotify.addClass('hidden'); + } + }) } function initGraphs() { var ctc = $('#chart_cpu'); - var timeLabels = []; - var cpuData = []; - var CPUChart = new Chart(ctc, { + timeLabels = []; + cpuData = []; + cpuChart = new Chart(ctc, { type: 'line', data: { labels: timeLabels, @@ -62,17 +76,17 @@ const Console = (function () { label: "Percent Use", fill: false, lineTension: 0.03, - backgroundColor: "#00A1CB", - borderColor: "#00A1CB", + backgroundColor: "#3c8dbc", + borderColor: "#3c8dbc", borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', - pointBorderColor: "rgba(75,192,192,1)", + pointBorderColor: "#3c8dbc", pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, - pointHoverBackgroundColor: "rgba(75,192,192,1)", + pointHoverBackgroundColor: "#3c8dbc", pointHoverBorderColor: "rgba(220,220,220,1)", pointHoverBorderWidth: 2, pointRadius: 1, @@ -97,8 +111,8 @@ const Console = (function () { }); var ctm = $('#chart_memory'); - var memoryData = []; - var MemoryChart = new Chart(ctm, { + memoryData = []; + memoryChart = new Chart(ctm, { type: 'line', data: { labels: timeLabels, @@ -107,17 +121,17 @@ const Console = (function () { label: "Memory Use", fill: false, lineTension: 0.03, - backgroundColor: "#01A4A4", - borderColor: "#01A4A4", + backgroundColor: "#3c8dbc", + borderColor: "#3c8dbc", borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', - pointBorderColor: "rgba(75,192,192,1)", + pointBorderColor: "#3c8dbc", pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, - pointHoverBackgroundColor: "rgba(75,192,192,1)", + pointHoverBackgroundColor: "#3c8dbc", pointHoverBorderColor: "rgba(220,220,220,1)", pointHoverBorderWidth: 2, pointRadius: 1, @@ -158,6 +172,10 @@ const Console = (function () { updateServerPowerControls(data.status); }); + Socket.on('console', function (data) { + terminalQueue.push(data.line); + }); + Socket.on('proc', function (proc) { if (cpuData.length > 10) { cpuData.shift(); @@ -172,20 +190,25 @@ const Console = (function () { var m = new Date(); timeLabels.push($.format.date(new Date(), 'HH:mm:ss')); - CPUChart.update(); - MemoryChart.update(); + cpuChart.update(); + memoryChart.update(); }); } function pushOutputQueue() { - if (termianlQueue.length > CONSOLE_PUSH_COUNT) { + if (terminalQueue.length > CONSOLE_PUSH_COUNT) { // console throttled warning show } - if (termianlQueue.length > 0) { - for (var i = 0; i < CONSOLE_PUSH_COUNT && termianlQueue.length > 0; i++) { - terminal.echo(termianlQueue[0]); - termianlQueue.shift(); + if (terminalQueue.length > 0) { + for (var i = 0; i < CONSOLE_PUSH_COUNT && terminalQueue.length > 0; i++) { + terminal.echo(terminalQueue[0]); + terminalQueue.shift(); + } + + // Show + if (!terminal.is_bottom()) { + $terminalNotify.removeClass('hidden'); } } @@ -226,16 +249,16 @@ const Console = (function () { }); }, - getTerminal: function() { + getTerminal: function () { return terminal }, - getTerminalQueue: function() { + getTerminalQueue: function () { return terminalQueue }, } -}); +})(); $(document).ready(function () { Console.init(); diff --git a/public/themes/pterodactyl/js/frontend/server.socket.js b/public/themes/pterodactyl/js/frontend/server.socket.js index 49b22ddf0..c789b2854 100644 --- a/public/themes/pterodactyl/js/frontend/server.socket.js +++ b/public/themes/pterodactyl/js/frontend/server.socket.js @@ -73,10 +73,6 @@ Socket.on('status', function (data) { setStatusIcon(data.status); }); - - Socket.on('console', function (data) { - TerminalQueue.push(data.line); - }); })(); function setStatusIcon(status) { diff --git a/resources/themes/pterodactyl/server/index.blade.php b/resources/themes/pterodactyl/server/index.blade.php index 67e6c956c..27605d2f8 100644 --- a/resources/themes/pterodactyl/server/index.blade.php +++ b/resources/themes/pterodactyl/server/index.blade.php @@ -40,8 +40,11 @@
-
+
+
@can('power-start', $server)@endcan