add console notification on new output that is out of view
fix the revealing module pattern (browser cache 😒)
change graph colors to theme primary color
move Socket.on(‚console’) to console.js
This commit is contained in:
Jakob Schrettenbrunner
parent
5142dce0e0
commit
344e3b4330
4 changed files with 75 additions and 32 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -73,10 +73,6 @@
|
|||
Socket.on('status', function (data) {
|
||||
setStatusIcon(data.status);
|
||||
});
|
||||
|
||||
Socket.on('console', function (data) {
|
||||
TerminalQueue.push(data.line);
|
||||
});
|
||||
})();
|
||||
|
||||
function setStatusIcon(status) {
|
||||
|
|
|
|||
|
|
@ -40,8 +40,11 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box">
|
||||
<div class="box-body">
|
||||
<div class="box-body position-relative">
|
||||
<div id="terminal" style="width:100%;"></div>
|
||||
<div id="terminalNotify" class="terminal-notify hidden">
|
||||
<i class="fa fa-bell"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer text-center">
|
||||
@can('power-start', $server)<button class="btn btn-success disabled" data-attr="power" data-action="start">Start</button>@endcan
|
||||
|
|
|
|||
Loading…
Reference in a new issue