Fix the terminal to stop glitching out and not displaying unless window is resized.
This commit is contained in:
Dane Everitt
parent
6fb44f7d7b
commit
a2b451b990
11 changed files with 478 additions and 603 deletions
|
|
@ -17,260 +17,236 @@
|
|||
// 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 = Pterodactyl.config.console_count || 10;
|
||||
var CONSOLE_PUSH_FREQ = Pterodactyl.config.console_freq || 200;
|
||||
var CONSOLE_OUTPUT_LIMIT = Pterodactyl.config.console_limit || 2000;
|
||||
var InitialLogSent = false;
|
||||
|
||||
var Console = (function () {
|
||||
var CONSOLE_PUSH_COUNT = Pterodactyl.config.console_count;
|
||||
var CONSOLE_PUSH_FREQ = Pterodactyl.config.console_freq;
|
||||
|
||||
var terminalQueue;
|
||||
var terminal;
|
||||
var recievedInitialLog = false;
|
||||
|
||||
var cpuChart;
|
||||
var cpuData;
|
||||
var memoryChart;
|
||||
var memoryData;
|
||||
var timeLabels;
|
||||
|
||||
var $terminalNotify;
|
||||
|
||||
function initConsole() {
|
||||
terminalQueue = [];
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
||||
$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');
|
||||
timeLabels = [];
|
||||
cpuData = [];
|
||||
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,
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
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,
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addSocketListeners() {
|
||||
// Update Listings on Initial Status
|
||||
Socket.on('initial status', function (data) {
|
||||
if (! recievedInitialLog) {
|
||||
updateServerPowerControls(data.status);
|
||||
|
||||
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('server log', function (data) {
|
||||
if (! recievedInitialLog) {
|
||||
terminal.clear();
|
||||
terminalQueue.push(data);
|
||||
recievedInitialLog = true;
|
||||
}
|
||||
});
|
||||
|
||||
Socket.on('console', function (data) {
|
||||
terminalQueue.push(data.line);
|
||||
});
|
||||
|
||||
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() {
|
||||
if (terminalQueue.length > CONSOLE_PUSH_COUNT) {
|
||||
// console throttled warning show
|
||||
(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,
|
||||
echoCommand: false,
|
||||
outputLimit: CONSOLE_OUTPUT_LIMIT,
|
||||
prompt: Pterodactyl.server.username + ':~$ ',
|
||||
scrollOnEcho: false,
|
||||
scrollBottomOffset: 5,
|
||||
onBlur: function (terminal) {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
if (terminalQueue.length > 0) {
|
||||
for (var i = 0; i < CONSOLE_PUSH_COUNT && terminalQueue.length > 0; i++) {
|
||||
terminal.echo(terminalQueue[0], {flush: false});
|
||||
terminalQueue.shift();
|
||||
}
|
||||
terminal.flush()
|
||||
window.TerminalNotifyElement = $('#terminalNotify');
|
||||
TerminalNotifyElement.on('click', function () {
|
||||
Terminal.scroll_to_bottom();
|
||||
TerminalNotifyElement.addClass('hidden');
|
||||
})
|
||||
|
||||
// Show
|
||||
if (!terminal.is_bottom()) {
|
||||
$terminalNotify.removeClass('hidden');
|
||||
}
|
||||
Terminal.on('scroll', function () {
|
||||
if (Terminal.is_bottom()) {
|
||||
TerminalNotifyElement.addClass('hidden');
|
||||
}
|
||||
|
||||
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'));
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getTerminal: function () {
|
||||
return terminal
|
||||
},
|
||||
|
||||
getTerminalQueue: function () {
|
||||
return terminalQueue
|
||||
},
|
||||
}
|
||||
|
||||
})
|
||||
// Socket.on('initial status', function (data) {
|
||||
// Terminal.clear();
|
||||
// if (data.status === 1 || data.status === 2) {
|
||||
// Socket.emit('send server log');
|
||||
// }
|
||||
// });
|
||||
})();
|
||||
|
||||
(function pushOutputQueue() {
|
||||
if (TerminalQueue.length > CONSOLE_PUSH_COUNT) {
|
||||
// console throttled warning show
|
||||
}
|
||||
|
||||
if (TerminalQueue.length > 0) {
|
||||
for (var i = 0; i < CONSOLE_PUSH_COUNT && TerminalQueue.length > 0; i++) {
|
||||
Terminal.echo(TerminalQueue[0], { flush: false });
|
||||
TerminalQueue.shift();
|
||||
}
|
||||
|
||||
// Flush after looping through all.
|
||||
Terminal.flush();
|
||||
|
||||
// Show Warning
|
||||
if (! Terminal.is_bottom()) {
|
||||
TerminalNotifyElement.removeClass('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
window.setTimeout(pushOutputQueue, CONSOLE_PUSH_FREQ);
|
||||
})();
|
||||
|
||||
(function setupSocketListeners() {
|
||||
// Update Listings on Initial Status
|
||||
Socket.on('initial status', function (data) {
|
||||
console.log('initial status 2');
|
||||
if (! InitialLogSent) {
|
||||
updateServerPowerControls(data.status);
|
||||
|
||||
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('server log', function (data) {
|
||||
if (! InitialLogSent) {
|
||||
Terminal.clear();
|
||||
TerminalQueue.push(data);
|
||||
InitialLogSent = true;
|
||||
}
|
||||
});
|
||||
|
||||
Socket.on('console', function (data) {
|
||||
TerminalQueue.push(data.line);
|
||||
});
|
||||
})();
|
||||
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
Console.init();
|
||||
$('[data-attr="power"]').click(function (event) {
|
||||
if (! $(this).hasClass('disabled')) {
|
||||
Socket.emit('set status', $(this).data('action'));
|
||||
}
|
||||
});
|
||||
|
||||
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)));
|
||||
|
||||
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,
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
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,
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -50,11 +50,13 @@ var Server = (function () {
|
|||
|
||||
var notifySocketError = false;
|
||||
|
||||
console.log('Starting connection');
|
||||
window.Socket = io(Pterodactyl.node.scheme + '://' + Pterodactyl.node.fqdn + ':' + Pterodactyl.node.daemonListen + '/ws/' + Pterodactyl.server.uuid, {
|
||||
'query': 'token=' + Pterodactyl.server.daemonSecret,
|
||||
});
|
||||
|
||||
Socket.io.on('connect_error', function (err) {
|
||||
console.log('connect_error');
|
||||
if(typeof notifySocketError !== 'object') {
|
||||
notifySocketError = $.notify({
|
||||
message: 'There was an error attempting to establish a WebSocket connection to the Daemon. This panel will not work as expected.<br /><br />' + err,
|
||||
|
|
@ -67,6 +69,7 @@ var Server = (function () {
|
|||
|
||||
// Connected to Socket Successfully
|
||||
Socket.on('connect', function () {
|
||||
console.log('connect');
|
||||
if (notifySocketError !== false) {
|
||||
notifySocketError.close();
|
||||
notifySocketError = false;
|
||||
|
|
@ -74,6 +77,7 @@ var Server = (function () {
|
|||
});
|
||||
|
||||
Socket.on('initial status', function (data) {
|
||||
console.log('initial status');
|
||||
setStatusIcon(data.status);
|
||||
});
|
||||
|
||||
|
|
|
|||
Reference in a new issue