From 96f5d158116c4d4be14c904a3e4170bd974c3e38 Mon Sep 17 00:00:00 2001 From: Jakob Schrettenbrunner Date: Thu, 26 Jan 2017 22:12:33 +0100 Subject: [PATCH 1/7] switch console javascript code to revealing module pattern to avoid global variables --- .../themes/pterodactyl/js/frontend/console.js | 369 +++++++++--------- 1 file changed, 195 insertions(+), 174 deletions(-) diff --git a/public/themes/pterodactyl/js/frontend/console.js b/public/themes/pterodactyl/js/frontend/console.js index 2d30586ec..bbee56465 100644 --- a/public/themes/pterodactyl/js/frontend/console.js +++ b/public/themes/pterodactyl/js/frontend/console.js @@ -20,187 +20,208 @@ var CONSOLE_PUSH_COUNT = 50; var CONSOLE_PUSH_FREQ = 200; -(function initConsole() { - window.TerminalQueue = []; - window.Terminal = $('#terminal').terminal(function (command, term) { - Socket.emit('send command', command); - }, { - greetings: '', - name: Pterodactyl.server.uuid, - height: 450, - exit: false, - prompt: Pterodactyl.server.username + ':~$ ', - scrollOnEcho: false, - scrollBottomOffset: 5, - onBlur: function (terminal) { - return false; - } - }); +const Console = (function () { - Socket.on('initial status', function (data) { - Terminal.clear(); - if (data.status === 1 || data.status === 2) { - Socket.emit('send server log'); - } - }); -})(); + var terminalQueue; + var terminal; -(function pushOutputQueue() { - if (TerminalQueue.length > CONSOLE_PUSH_COUNT) { - // console throttled warning show + function initConsole() { + termianlQueue = []; + terminal = $('#terminal').terminal(function (command, term) { + Socket.emit('send command', command); + }, { + greetings: '', + name: Pterodactyl.server.uuid, + height: 450, + exit: false, + prompt: Pterodactyl.server.username + ':~$ ', + scrollOnEcho: false, + scrollBottomOffset: 5, + onBlur: function (terminal) { + return false; + } + }); + + Socket.on('initial status', function (data) { + terminal.clear(); + if (data.status === 1 || data.status === 2) { + Socket.emit('send server log'); + } + }); } - if (TerminalQueue.length > 0) { - for (var i = 0; i < CONSOLE_PUSH_COUNT && TerminalQueue.length > 0; i++) { - Terminal.echo(TerminalQueue[0]); - TerminalQueue.shift(); + function pushOutputQueue() { + if (termianlQueue.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(); + } + } + + window.setTimeout(pushOutputQueue, CONSOLE_PUSH_FREQ); } - window.setTimeout(pushOutputQueue, CONSOLE_PUSH_FREQ); -})(); + return { + init: function () { + $('[data-attr="power"]').click(function (event) { + if (! $(this).hasClass('disabled')) { + Socket.emit('set status', $(this).data('action')); + } + }); + + 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: "#00A1CB", + borderColor: "#00A1CB", + borderCapStyle: 'butt', + borderDash: [], + borderDashOffset: 0.0, + borderJoinStyle: 'miter', + pointBorderColor: "rgba(75,192,192,1)", + pointBackgroundColor: "#fff", + pointBorderWidth: 1, + pointHoverRadius: 5, + pointHoverBackgroundColor: "rgba(75,192,192,1)", + 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, + } + } + }); + + var ctm = $('#chart_memory'); + var memoryData = []; + var MemoryChart = new Chart(ctm, { + type: 'line', + data: { + labels: timeLabels, + datasets: [ + { + label: "Memory Use", + fill: false, + lineTension: 0.03, + backgroundColor: "#01A4A4", + borderColor: "#01A4A4", + borderCapStyle: 'butt', + borderDash: [], + borderDashOffset: 0.0, + borderJoinStyle: 'miter', + pointBorderColor: "rgba(75,192,192,1)", + pointBackgroundColor: "#fff", + pointBorderWidth: 1, + pointHoverRadius: 5, + pointHoverBackgroundColor: "rgba(75,192,192,1)", + 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, + } + } + }); + Socket.on('proc', function (proc) { + if (cpuData.length > 10) { + cpuData.shift(); + memoryData.shift(); + timeLabels.shift(); + } + + 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))); + + var m = new Date(); + timeLabels.push($.format.date(new Date(), 'HH:mm:ss')); + + CPUChart.update(); + MemoryChart.update(); + }); + + // Update Listings on Initial Status + Socket.on('initial status', function (data) { + updateServerPowerControls(data.status); + }); + + // Update Listings on Status + Socket.on('status', function (data) { + updateServerPowerControls(data.status); + }); + + function updateServerPowerControls (data) { + // Server is On or Starting + if(data == 1 || data == 2) { + $('[data-attr="power"][data-action="start"]').addClass('disabled'); + $('[data-attr="power"][data-action="stop"], [data-attr="power"][data-action="restart"]').removeClass('disabled'); + } else { + if (data == 0) { + $('[data-attr="power"][data-action="start"]').removeClass('disabled'); + } + $('[data-attr="power"][data-action="stop"], [data-attr="power"][data-action="restart"]').addClass('disabled'); + } + + if(data !== 0) { + $('[data-attr="power"][data-action="kill"]').removeClass('disabled'); + } else { + $('[data-attr="power"][data-action="kill"]').addClass('disabled'); + } + } + }, + + getTerminal: function() { + return terminal + }, + + getTerminalQueue: function() { + return terminalQueue + }, + } + +}); $(document).ready(function () { - $('[data-attr="power"]').click(function (event) { - if (! $(this).hasClass('disabled')) { - Socket.emit('set status', $(this).data('action')); - } - }); - - 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: "#00A1CB", - borderColor: "#00A1CB", - borderCapStyle: 'butt', - borderDash: [], - borderDashOffset: 0.0, - borderJoinStyle: 'miter', - pointBorderColor: "rgba(75,192,192,1)", - pointBackgroundColor: "#fff", - pointBorderWidth: 1, - pointHoverRadius: 5, - pointHoverBackgroundColor: "rgba(75,192,192,1)", - 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, - } - } - }); - - var ctm = $('#chart_memory'); - var memoryData = []; - var MemoryChart = new Chart(ctm, { - type: 'line', - data: { - labels: timeLabels, - datasets: [ - { - label: "Memory Use", - fill: false, - lineTension: 0.03, - backgroundColor: "#01A4A4", - borderColor: "#01A4A4", - borderCapStyle: 'butt', - borderDash: [], - borderDashOffset: 0.0, - borderJoinStyle: 'miter', - pointBorderColor: "rgba(75,192,192,1)", - pointBackgroundColor: "#fff", - pointBorderWidth: 1, - pointHoverRadius: 5, - pointHoverBackgroundColor: "rgba(75,192,192,1)", - 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, - } - } - }); - Socket.on('proc', function (proc) { - if (cpuData.length > 10) { - cpuData.shift(); - memoryData.shift(); - timeLabels.shift(); - } - - 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))); - - var m = new Date(); - timeLabels.push($.format.date(new Date(), 'HH:mm:ss')); - - CPUChart.update(); - MemoryChart.update(); - }); - - // Update Listings on Initial Status - Socket.on('initial status', function (data) { - updateServerPowerControls(data.status); - }); - - // Update Listings on Status - Socket.on('status', function (data) { - updateServerPowerControls(data.status); - }); - - function updateServerPowerControls (data) { - // Server is On or Starting - if(data == 1 || data == 2) { - $('[data-attr="power"][data-action="start"]').addClass('disabled'); - $('[data-attr="power"][data-action="stop"], [data-attr="power"][data-action="restart"]').removeClass('disabled'); - } else { - if (data == 0) { - $('[data-attr="power"][data-action="start"]').removeClass('disabled'); - } - $('[data-attr="power"][data-action="stop"], [data-attr="power"][data-action="restart"]').addClass('disabled'); - } - - if(data !== 0) { - $('[data-attr="power"][data-action="kill"]').removeClass('disabled'); - } else { - $('[data-attr="power"][data-action="kill"]').addClass('disabled'); - } - } + Console.init(); }); From 5142dce0e0f83e6f3d9e203d3eb533eac7e0f4f0 Mon Sep 17 00:00:00 2001 From: Jakob Schrettenbrunner Date: Thu, 26 Jan 2017 22:20:04 +0100 Subject: [PATCH 2/7] reorganize code of console module --- .../themes/pterodactyl/js/frontend/console.js | 289 +++++++++--------- 1 file changed, 152 insertions(+), 137 deletions(-) diff --git a/public/themes/pterodactyl/js/frontend/console.js b/public/themes/pterodactyl/js/frontend/console.js index bbee56465..5af50eeae 100644 --- a/public/themes/pterodactyl/js/frontend/console.js +++ b/public/themes/pterodactyl/js/frontend/console.js @@ -25,6 +25,12 @@ const Console = (function () { var terminalQueue; var terminal; + var cpuChart; + var cpuData; + var memoryChart; + var memoryData; + var timeLabels; + function initConsole() { termianlQueue = []; terminal = $('#terminal').terminal(function (command, term) { @@ -41,13 +47,134 @@ const Console = (function () { return false; } }); + } + function initGraphs() { + 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: "#00A1CB", + borderColor: "#00A1CB", + borderCapStyle: 'butt', + borderDash: [], + borderDashOffset: 0.0, + borderJoinStyle: 'miter', + pointBorderColor: "rgba(75,192,192,1)", + pointBackgroundColor: "#fff", + pointBorderWidth: 1, + pointHoverRadius: 5, + pointHoverBackgroundColor: "rgba(75,192,192,1)", + 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, + } + } + }); + + var ctm = $('#chart_memory'); + var memoryData = []; + var MemoryChart = new Chart(ctm, { + type: 'line', + data: { + labels: timeLabels, + datasets: [ + { + label: "Memory Use", + fill: false, + lineTension: 0.03, + backgroundColor: "#01A4A4", + borderColor: "#01A4A4", + borderCapStyle: 'butt', + borderDash: [], + borderDashOffset: 0.0, + borderJoinStyle: 'miter', + pointBorderColor: "rgba(75,192,192,1)", + pointBackgroundColor: "#fff", + pointBorderWidth: 1, + pointHoverRadius: 5, + pointHoverBackgroundColor: "rgba(75,192,192,1)", + 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, + } + } + }); + } + + function addSocketListeners() { + // Update Listings on Initial Status Socket.on('initial status', function (data) { + updateServerPowerControls(data.status); + terminal.clear(); if (data.status === 1 || data.status === 2) { Socket.emit('send server log'); } }); + + // Update Listings on Status + Socket.on('status', function (data) { + updateServerPowerControls(data.status); + }); + + Socket.on('proc', function (proc) { + if (cpuData.length > 10) { + cpuData.shift(); + memoryData.shift(); + timeLabels.shift(); + } + + 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))); + + var m = new Date(); + timeLabels.push($.format.date(new Date(), 'HH:mm:ss')); + + CPUChart.update(); + MemoryChart.update(); + }); } function pushOutputQueue() { @@ -65,150 +192,38 @@ const Console = (function () { window.setTimeout(pushOutputQueue, CONSOLE_PUSH_FREQ); } + function updateServerPowerControls (data) { + // Server is On or Starting + if(data == 1 || data == 2) { + $('[data-attr="power"][data-action="start"]').addClass('disabled'); + $('[data-attr="power"][data-action="stop"], [data-attr="power"][data-action="restart"]').removeClass('disabled'); + } else { + if (data == 0) { + $('[data-attr="power"][data-action="start"]').removeClass('disabled'); + } + $('[data-attr="power"][data-action="stop"], [data-attr="power"][data-action="restart"]').addClass('disabled'); + } + + if(data !== 0) { + $('[data-attr="power"][data-action="kill"]').removeClass('disabled'); + } else { + $('[data-attr="power"][data-action="kill"]').addClass('disabled'); + } + } + return { init: function () { + + initConsole(); + pushOutputQueue(); + initGraphs(); + addSocketListeners(); + $('[data-attr="power"]').click(function (event) { if (! $(this).hasClass('disabled')) { Socket.emit('set status', $(this).data('action')); } }); - - 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: "#00A1CB", - borderColor: "#00A1CB", - borderCapStyle: 'butt', - borderDash: [], - borderDashOffset: 0.0, - borderJoinStyle: 'miter', - pointBorderColor: "rgba(75,192,192,1)", - pointBackgroundColor: "#fff", - pointBorderWidth: 1, - pointHoverRadius: 5, - pointHoverBackgroundColor: "rgba(75,192,192,1)", - 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, - } - } - }); - - var ctm = $('#chart_memory'); - var memoryData = []; - var MemoryChart = new Chart(ctm, { - type: 'line', - data: { - labels: timeLabels, - datasets: [ - { - label: "Memory Use", - fill: false, - lineTension: 0.03, - backgroundColor: "#01A4A4", - borderColor: "#01A4A4", - borderCapStyle: 'butt', - borderDash: [], - borderDashOffset: 0.0, - borderJoinStyle: 'miter', - pointBorderColor: "rgba(75,192,192,1)", - pointBackgroundColor: "#fff", - pointBorderWidth: 1, - pointHoverRadius: 5, - pointHoverBackgroundColor: "rgba(75,192,192,1)", - 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, - } - } - }); - Socket.on('proc', function (proc) { - if (cpuData.length > 10) { - cpuData.shift(); - memoryData.shift(); - timeLabels.shift(); - } - - 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))); - - var m = new Date(); - timeLabels.push($.format.date(new Date(), 'HH:mm:ss')); - - CPUChart.update(); - MemoryChart.update(); - }); - - // Update Listings on Initial Status - Socket.on('initial status', function (data) { - updateServerPowerControls(data.status); - }); - - // Update Listings on Status - Socket.on('status', function (data) { - updateServerPowerControls(data.status); - }); - - function updateServerPowerControls (data) { - // Server is On or Starting - if(data == 1 || data == 2) { - $('[data-attr="power"][data-action="start"]').addClass('disabled'); - $('[data-attr="power"][data-action="stop"], [data-attr="power"][data-action="restart"]').removeClass('disabled'); - } else { - if (data == 0) { - $('[data-attr="power"][data-action="start"]').removeClass('disabled'); - } - $('[data-attr="power"][data-action="stop"], [data-attr="power"][data-action="restart"]').addClass('disabled'); - } - - if(data !== 0) { - $('[data-attr="power"][data-action="kill"]').removeClass('disabled'); - } else { - $('[data-attr="power"][data-action="kill"]').addClass('disabled'); - } - } }, getTerminal: function() { From 344e3b43302802ce1c378b7caf0c31ab02de92af Mon Sep 17 00:00:00 2001 From: Jakob Schrettenbrunner Date: Thu, 26 Jan 2017 22:57:33 +0100 Subject: [PATCH 3/7] =?UTF-8?q?add=20console=20notification=20on=20new=20o?= =?UTF-8?q?utput=20that=20is=20out=20of=20view=20fix=20the=20revealing=20m?= =?UTF-8?q?odule=20pattern=20(browser=20cache=20=F0=9F=98=92)=20change=20g?= =?UTF-8?q?raph=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 @@
-
+
+