corrade-nucleus-nucleons – Rev 28
?pathlinks?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Corrade Nucleon">
<meta name="author" content="Wizardry and Steamworks">
<link rel="icon" href="favicon.ico">
<title>Corrade Nucleus</title>
<!-- Bootstrap core CSS -->
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Corrade Nucleus Fonts -->
<link href="/css/nucleus/fonts.css" rel="stylesheet" type="text/css">
<!-- Customized bootstrap style. -->
<link href="/css/nucleus/nucleus.css" rel="stylesheet" type="text/css">
<!-- Manager for Windows. -->
<link href="/css/wm/wm.css" rel="stylesheet" type="text/css">
<!-- HighCharts.js CSS -->
<link href="/node_modules/highcharts/css/highcharts.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Nucleus</h1>
<p class="lead">The Corrade Nucleus is a built-in management interface for the Corrade scripted agent that allows you to query general information, toggle and configure various aspects and monitor the uptime and health of your Corrade directly through your web browser.</p>
<img src="/img/corrade-nucleus.png"></div>
<div class="panel panel-default draggable movable">
<div class="panel-heading">
<h3 class="panel-title">HeartBeat</h3>
</div>
<div class="panel-body">
<div id="heartbeat" class="row"></div>
</div>
</div>
<div id="nucleons-container">
</div>
<div class="panel panel-default draggable movable">
<div class="panel-heading">
<h3 class="panel-title">Nucleons</h3>
</div>
<div class="panel-body">
<div id="nucleons" class="row"></div>
</div>
</div>
</div>
<footer class="footer">
<p>© 2016 Wizardry and Steamworks</p>
</footer>
<!-- jQuery -->
<script src="/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<!-- Wizardry and Steamworks JavaScript Includes -->
<script src="/node_modules/was/dist/was.min.js" type="text/javascript"></script>
<!-- HighCharts -->
<script src="/node_modules/highcharts/js/highcharts.js" type="text/javascript"></script>
<script src="/node_modules/highcharts/js/modules/exporting.js" type="text/javascript"></script>
<!-- Interact JS -->
<script src="/node_modules/interactjs/dist/interact.min.js" type="text/javascript"></script>
<!-- Manager for Windows. -->
<script src="/js/wm/wm.js" type="text/javascript"></script>
<!-- Nucleons Loader -->
<script src="/js/nucleus/load-nucleons.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// Display Corrade Heartbeat using HighCharts.
var updateInterval = 1000;
var plotPoints = 20;
function retrieveStats(series_1, series_2) {
$.ajax({
type: 'POST',
url: '/',
data: {
command: 'getheartbeatdata',
data: wasArrayToCSV(
[
'AverageCPUUsage',
'AverageRAMUsage',
]
)
},
dataType: 'json'
}).done(function(response) {
var data = wasCSVToArray(response.data);
var time = (new Date()).getTime();
var ram, cpu;
$.each(data, function(i, value) {
switch (value) {
case 'AverageCPUUsage':
cpu = parseInt(data[i + 1]);
break;
case 'AverageRAMUsage':
// Convert bytes to MiB
ram = Math.floor(parseInt(data[i + 1]) / 1048576);
break;
}
});
series_1.addPoint(
[
time,
cpu
],
false, // false for all but last
true
);
series_2.addPoint(
[
time,
ram
],
true, // false for all but last
true
);
/*setTimeout(
retrieveStats,
updateInterval,
series_1,
series_2
);*/
});
}
Highcharts.setOptions({
global: {
useUTC: true
}
});
$('#heartbeat').highcharts({
chart: {
type: 'spline',
zoomType: 'xy',
//animation: Highcharts.svg, // don't animate in old IE
//marginRight: 10,
//shadow: true,
events: {
load: function() {
// set up the updating of the chart each second
//retrieveStats(this.series[0], this.series[1]);
setInterval(
retrieveStats,
updateInterval,
this.series[0],
this.series[1]
);
}
}
},
title: {
text: null,
enabled: false
},
credits: {
enabled: false
},
xAxis: [{
type: 'datetime' //,
//tickPixelInterval: 150,
}],
yAxis: [{
//type: 'linear',
//allowDecimals: false,
//min: 0,
labels: {
enabled: false
},
title: {
text: null
}
}, {
//type: 'linear',
//allowDecimals: false,
//min: 0,
labels: {
enabled: false
},
title: {
text: null
}
}],
/*tooltip: {
formatter: function() {
switch(this.series.name) {
case 'CPU':
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
this.y + '%';
break;
case 'RAM':
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y/1048576, 0) + 'MiB';
break;
}
}
},*/
tooltip: {
shared: true
},
legend: {
enabled: true
},
exporting: {
enabled: true
},
series: [{
name: 'CPU',
color: '#FF0000',
tooltip: {
valueSuffix: ' %'
},
yAxis: 0,
data: (function() {
var data = [],
time = (new Date()).getTime(),
j = -(plotPoints - 1);
$.ajax({
type: 'POST',
url: '/',
data: {
command: 'getheartbeatdata',
data: wasArrayToCSV(
[
'CPUAverageUsageHistory'
]
)
},
dataType: 'json',
async: false,
success: function(response) {
var responseData = wasCSVToArray(response.data).slice(1);
$.each($.stride(responseData.slice(1), 2).slice(-20), function(i, e) {
data.push({
x: time + ++j * updateInterval,
y: parseInt(e)
});
});
}
});
var result = [];
while (result.length < plotPoints - data.length)
result.push({
x: time + ++j * updateInterval,
y: 0
});
return result.concat(data);
}())
}, {
name: 'RAM',
color: '#0000FF',
tooltip: {
valueSuffix: ' MiB'
},
yAxis: 1,
data: (function() {
var data = [],
time = (new Date()).getTime(),
j = -(plotPoints - 1);
$.ajax({
type: 'POST',
url: '/',
data: {
command: 'getheartbeatdata',
data: wasArrayToCSV(
[
'RAMAverageUsageHistory'
]
)
},
dataType: 'json',
async: false,
success: function(response) {
var responseData = wasCSVToArray(response.data).slice(1);
$.each($.stride(responseData.slice(1), 2).slice(-20), function(i, e) {
data.push({
x: time + ++j * updateInterval,
// Convert bytes to MiB.
y: Math.floor(parseInt(e) / 1048576)
});
});
}
});
var result = [];
while (result.length < plotPoints - data.length)
result.push({
x: time + ++j * updateInterval,
y: 0
});
return result.concat(data);
}())
}]
});
});
script>
</body>
html>
Generated by GNU Enscript 1.6.5.90.