corrade-nucleus-nucleons – Rev 20
?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">
<!-- 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">
<div class="panel-heading">
<h3 class="panel-title">HeartBeat</h3>
</div>
<div class="panel-body">
<div id="heartbeat" class="row"></div>
</div>
</div>
<div class="panel panel-default">
<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>
<script type="text/javascript">
$(document).ready(function() {
// Search and load all nucleons.
$.get('/nucleons', function(data) {
var nucleons = wasCSVToArray(data);
$.each(nucleons, function(index, value) {
// Skip files starting with full stop (POSIX).
if (/^\./.test(value)) return;
$.get('/nucleons/' + value, function(doc) {
var div = $('<div class="col-xs-6 col-md-3">').html(doc);
$('#nucleons').append(div);
});
});
});
// 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.