corrade-nucleus-nucleons

Subversion Repositories:
Compare Path: Rev
With Path: Rev
?path1? @ HEAD  →  ?path2? @ 1
/base/000_base/index.html
@@ -1,8 +1,10 @@
<!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="viewport" content="width=device-width, initial-scale=1"><!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="Corrade Nucleon">
<meta name="author" content="Wizardry and Steamworks">
<link rel="icon" href="favicon.ico">
@@ -10,34 +12,313 @@
<title>Corrade Nucleus</title>
<!-- Bootstrap core CSS -->
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="/bower_components/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">
<!-- jQuery -->
<script src="/bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
<!-- Wizardry and Steamworks JavaScript Includes -->
<script src="/js/was/csv.js" type="text/javascript"></script>
<script src="/js/was/jquery/arrays.js" type="text/javascript"></script>
<!-- HighCharts -->
<script src="/bower_components/highcharts/highcharts.js" type="text/javascript"></script>
<script src="/bower_components/highcharts/exporting.js" type="text/javascript"></script>
</head>
 
<body>
<div class="container">
<div id="window-manager-desktop">
</div>
<!-- <div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">About</a></li>
<li role="presentation"><a href="#">Contact</a></li>
</ul>
</nav>
<h3 class="text-muted">Nucleus</h3>
</div> -->
 
<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>
<!-- <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></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>
 
<!-- jQuery -->
<script src="/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<!-- Bootstrap Javascript -->
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Wizardry and Steamworks JavaScript Includes -->
<script src="/node_modules/was/dist/was.min.js" type="text/javascript"></script>
<!-- Interact JS -->
<script src="/node_modules/interactjs/dist/interact.min.js" type="text/javascript"></script>
<!-- js.cookie -->
<script src="/node_modules/js-cookie/src/js.cookie.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>
<footer class="footer">
<p>&copy; 2016 Wizardry and Steamworks</p>
</footer>
<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>