Revamped resource graphing, uses chart.js
This commit is contained in:
Dane Everitt
parent
013c36fe81
commit
0741ab6833
8 changed files with 242 additions and 252 deletions
|
|
@ -11,6 +11,7 @@ This project follows [Semantic Versioning](http://semver.org) guidelines.
|
|||
|
||||
### Changed
|
||||
* Servers are now queued for deletion to allow for cancellation of deletion, as well as run in the background to speed up page loading.
|
||||
* Switched to new graphing library to make graphs less... broken.
|
||||
|
||||
### Removed
|
||||
* Removed online player listing due to inconsistency in query library and an assortment of query related bugs. This will return in future versions when we get it working correctly.
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ Bootstrap - [license](https://github.com/twbs/bootstrap/blob/master/LICENSE) - [
|
|||
|
||||
BootStrap Notify - [license](https://github.com/mouse0270/bootstrap-notify/blob/master/LICENSE) - [homepage](http://bootstrap-notify.remabledesigns.com)
|
||||
|
||||
D3.js - [license](https://github.com/mbostock/d3/blob/master/LICENSE) - [homepage](https://d3js.org/)
|
||||
Chart.js - [license](https://github.com/chartjs/Chart.js/blob/master/LICENSE.md) - [homepage](http://www.chartjs.org)
|
||||
|
||||
FontAwesome - [license](http://fontawesome.io/license/) - [homepage](http://fontawesome.io)
|
||||
|
||||
|
|
@ -57,8 +57,6 @@ jQuery Terminal - [license](https://github.com/jcubic/jquery.terminal/blob/maste
|
|||
|
||||
Lodash - [license](https://github.com/lodash/lodash/blob/master/LICENSE) - [homepage](https://lodash.com/)
|
||||
|
||||
MetricsGraphics.js - [license](https://github.com/mozilla/metrics-graphics/blob/master/LICENSE) - [homepage](http://metricsgraphicsjs.org/)
|
||||
|
||||
Socket.io - [license](https://github.com/socketio/socket.io/blob/master/LICENSE) - [homepage](http://socket.io)
|
||||
|
||||
SweetAlert - [license](https://github.com/t4t5/sweetalert/blob/master/LICENSE) - [homepage](http://t4t5.github.io/sweetalert/)
|
||||
|
|
|
|||
14
public/js/vendor/chartjs/chart.min.js
vendored
Normal file
14
public/js/vendor/chartjs/chart.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
8
public/js/vendor/d3/d3.min.js
vendored
8
public/js/vendor/d3/d3.min.js
vendored
File diff suppressed because one or more lines are too long
2
public/js/vendor/jquery/jquery-dateFormat.min.js
vendored
Normal file
2
public/js/vendor/jquery/jquery-dateFormat.min.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
/*! jquery-dateFormat 18-05-2015 */
|
||||
var DateFormat={};!function(a){var b=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],c=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],d=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],e=["January","February","March","April","May","June","July","August","September","October","November","December"],f={Jan:"01",Feb:"02",Mar:"03",Apr:"04",May:"05",Jun:"06",Jul:"07",Aug:"08",Sep:"09",Oct:"10",Nov:"11",Dec:"12"},g=/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.?\d{0,3}[Z\-+]?(\d{2}:?\d{2})?/;a.format=function(){function a(a){return b[parseInt(a,10)]||a}function h(a){return c[parseInt(a,10)]||a}function i(a){var b=parseInt(a,10)-1;return d[b]||a}function j(a){var b=parseInt(a,10)-1;return e[b]||a}function k(a){return f[a]||a}function l(a){var b,c,d,e,f,g=a,h="";return-1!==g.indexOf(".")&&(e=g.split("."),g=e[0],h=e[e.length-1]),f=g.split(":"),3===f.length?(b=f[0],c=f[1],d=f[2].replace(/\s.+/,"").replace(/[a-z]/gi,""),g=g.replace(/\s.+/,"").replace(/[a-z]/gi,""),{time:g,hour:b,minute:c,second:d,millis:h}):{time:"",hour:"",minute:"",second:"",millis:""}}function m(a,b){for(var c=b-String(a).length,d=0;c>d;d++)a="0"+a;return a}return{parseDate:function(a){var b,c,d={date:null,year:null,month:null,dayOfMonth:null,dayOfWeek:null,time:null};if("number"==typeof a)return this.parseDate(new Date(a));if("function"==typeof a.getFullYear)d.year=String(a.getFullYear()),d.month=String(a.getMonth()+1),d.dayOfMonth=String(a.getDate()),d.time=l(a.toTimeString()+"."+a.getMilliseconds());else if(-1!=a.search(g))b=a.split(/[T\+-]/),d.year=b[0],d.month=b[1],d.dayOfMonth=b[2],d.time=l(b[3].split(".")[0]);else switch(b=a.split(" "),6===b.length&&isNaN(b[5])&&(b[b.length]="()"),b.length){case 6:d.year=b[5],d.month=k(b[1]),d.dayOfMonth=b[2],d.time=l(b[3]);break;case 2:c=b[0].split("-"),d.year=c[0],d.month=c[1],d.dayOfMonth=c[2],d.time=l(b[1]);break;case 7:case 9:case 10:d.year=b[3],d.month=k(b[1]),d.dayOfMonth=b[2],d.time=l(b[4]);break;case 1:c=b[0].split(""),d.year=c[0]+c[1]+c[2]+c[3],d.month=c[5]+c[6],d.dayOfMonth=c[8]+c[9],d.time=l(c[13]+c[14]+c[15]+c[16]+c[17]+c[18]+c[19]+c[20]);break;default:return null}return d.date=d.time?new Date(d.year,d.month-1,d.dayOfMonth,d.time.hour,d.time.minute,d.time.second,d.time.millis):new Date(d.year,d.month-1,d.dayOfMonth),d.dayOfWeek=String(d.date.getDay()),d},date:function(b,c){try{var d=this.parseDate(b);if(null===d)return b;for(var e,f=d.year,g=d.month,k=d.dayOfMonth,l=d.dayOfWeek,n=d.time,o="",p="",q="",r=!1,s=0;s<c.length;s++){var t=c.charAt(s),u=c.charAt(s+1);if(r)"'"==t?(p+=""===o?"'":o,o="",r=!1):o+=t;else switch(o+=t,q="",o){case"ddd":p+=a(l),o="";break;case"dd":if("d"===u)break;p+=m(k,2),o="";break;case"d":if("d"===u)break;p+=parseInt(k,10),o="";break;case"D":k=1==k||21==k||31==k?parseInt(k,10)+"st":2==k||22==k?parseInt(k,10)+"nd":3==k||23==k?parseInt(k,10)+"rd":parseInt(k,10)+"th",p+=k,o="";break;case"MMMM":p+=j(g),o="";break;case"MMM":if("M"===u)break;p+=i(g),o="";break;case"MM":if("M"===u)break;p+=m(g,2),o="";break;case"M":if("M"===u)break;p+=parseInt(g,10),o="";break;case"y":case"yyy":if("y"===u)break;p+=o,o="";break;case"yy":if("y"===u)break;p+=String(f).slice(-2),o="";break;case"yyyy":p+=f,o="";break;case"HH":p+=m(n.hour,2),o="";break;case"H":if("H"===u)break;p+=parseInt(n.hour,10),o="";break;case"hh":e=0===parseInt(n.hour,10)?12:n.hour<13?n.hour:n.hour-12,p+=m(e,2),o="";break;case"h":if("h"===u)break;e=0===parseInt(n.hour,10)?12:n.hour<13?n.hour:n.hour-12,p+=parseInt(e,10),o="";break;case"mm":p+=m(n.minute,2),o="";break;case"m":if("m"===u)break;p+=n.minute,o="";break;case"ss":p+=m(n.second.substring(0,2),2),o="";break;case"s":if("s"===u)break;p+=n.second,o="";break;case"S":case"SS":if("S"===u)break;p+=o,o="";break;case"SSS":var v="000"+n.millis.substring(0,3);p+=v.substring(v.length-3),o="";break;case"a":p+=n.hour>=12?"PM":"AM",o="";break;case"p":p+=n.hour>=12?"p.m.":"a.m.",o="";break;case"E":p+=h(l),o="";break;case"'":o="",r=!0;break;default:p+=t,o=""}}return p+=q}catch(w){return console&&console.log&&console.log(w),b}},prettyDate:function(a){var b,c,d;return("string"==typeof a||"number"==typeof a)&&(b=new Date(a)),"object"==typeof a&&(b=new Date(a.toString())),c=((new Date).getTime()-b.getTime())/1e3,d=Math.floor(c/86400),isNaN(d)||0>d?void 0:60>c?"just now":120>c?"1 minute ago":3600>c?Math.floor(c/60)+" minutes ago":7200>c?"1 hour ago":86400>c?Math.floor(c/3600)+" hours ago":1===d?"Yesterday":7>d?d+" days ago":31>d?Math.ceil(d/7)+" weeks ago":d>=31?"more than 5 weeks ago":void 0},toBrowserTimeZone:function(a,b){return this.date(new Date(a),b||"MM/dd/yyyy HH:mm:ss")}}}()}(DateFormat),function(a){a.format=DateFormat.format}(jQuery);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -25,11 +25,10 @@
|
|||
|
||||
@section('scripts')
|
||||
@parent
|
||||
{!! Theme::css('css/vendor/metricsgraphics/metricsgraphics.css') !!}
|
||||
{!! Theme::js('js/vendor/d3/d3.min.js') !!}
|
||||
{!! Theme::js('js/vendor/metricsgraphics/metricsgraphics.min.js') !!}
|
||||
{!! Theme::js('js/vendor/socketio/socket.io.min.js') !!}
|
||||
{!! Theme::js('js/bootstrap-notify.min.js') !!}
|
||||
{!! Theme::js('js/vendor/chartjs/chart.min.js') !!}
|
||||
{!! Theme::js('js/vendor/jquery/jquery-dateFormat.min.js') !!}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$.notifyDefaults({
|
||||
|
|
@ -102,9 +101,8 @@
|
|||
<div class="panel-heading" style="border-top: 1px solid #ddd;"></div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-xs-11 text-center" id="chart_memory" style="height:250px;"></div>
|
||||
<div class="col-xs-11 text-center" id="chart_cpu" style="height:250px;"></div>
|
||||
<div class="col-xs-11 text-center" id="chart_players" style="height:250px;"></div>
|
||||
<canvas id="chart_memory" style="max-height:300px;"></canvas>
|
||||
<canvas id="chart_cpu" style="max-height:300px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -545,58 +543,6 @@ $(document).ready(function () {
|
|||
3: 'Stopping'
|
||||
};
|
||||
|
||||
// -----------------+
|
||||
// Charting Methods |
|
||||
// -----------------+
|
||||
var memoryGraphSettings = {
|
||||
title: 'Memory Usage (MB)',
|
||||
data: [{
|
||||
'date': new Date(),
|
||||
'memory': 0
|
||||
}],
|
||||
full_width: true,
|
||||
full_height: true,
|
||||
target: document.getElementById('chart_memory'),
|
||||
x_accessor: 'date',
|
||||
y_accessor: 'memory',
|
||||
y_rug: true,
|
||||
area: false,
|
||||
};
|
||||
|
||||
var cpuGraphSettings = {
|
||||
title: 'CPU Usage (%)',
|
||||
data: [{
|
||||
'date': new Date(),
|
||||
'cpu': 0
|
||||
}],
|
||||
full_width: true,
|
||||
full_height: true,
|
||||
target: document.getElementById('chart_cpu'),
|
||||
x_accessor: 'date',
|
||||
y_accessor: 'cpu',
|
||||
y_rug: true,
|
||||
area: false,
|
||||
};
|
||||
|
||||
var playersGraphSettings = {
|
||||
title: 'Players Online',
|
||||
data: [{
|
||||
'date': new Date(),
|
||||
'players': 0
|
||||
}],
|
||||
full_width: true,
|
||||
full_height: true,
|
||||
target: document.getElementById('chart_players'),
|
||||
x_accessor: 'date',
|
||||
y_accessor: 'players',
|
||||
y_rug: true,
|
||||
area: false,
|
||||
};
|
||||
|
||||
MG.data_graphic(memoryGraphSettings);
|
||||
MG.data_graphic(cpuGraphSettings);
|
||||
MG.data_graphic(playersGraphSettings);
|
||||
|
||||
// Main Socket Object
|
||||
var socket = io('{{ $node->scheme }}://{{ $node->fqdn }}:{{ $node->daemonListen }}/stats/', {
|
||||
'query': 'token={{ $node->daemonSecret }}'
|
||||
|
|
@ -626,36 +572,112 @@ $(document).ready(function () {
|
|||
console.error('There was an error while attemping to connect to the websocket: ' + err + '\n\nPlease try loading this page again.');
|
||||
});
|
||||
|
||||
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: "#00A1CB",
|
||||
borderColor: "#00A1CB",
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: "rgba(75,192,192,1)",
|
||||
pointBackgroundColor: "#fff",
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: "rgba(75,192,192,1)",
|
||||
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');
|
||||
var memoryData = [];
|
||||
var MemoryChart = new Chart(ctm, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: timeLabels,
|
||||
datasets: [
|
||||
{
|
||||
label: "Memory Use",
|
||||
fill: false,
|
||||
lineTension: 0.03,
|
||||
backgroundColor: "#01A4A4",
|
||||
borderColor: "#01A4A4",
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: "rgba(75,192,192,1)",
|
||||
pointBackgroundColor: "#fff",
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: "rgba(75,192,192,1)",
|
||||
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,
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('live-stats', function (data) {
|
||||
|
||||
if (typeof memoryGraphSettings.data[0][100] !== 'undefined' || memoryGraphSettings.data[0][0].memory === -1) {
|
||||
memoryGraphSettings.data[0].shift();
|
||||
}
|
||||
if (typeof cpuGraphSettings.data[0][100] !== 'undefined' || cpuGraphSettings.data[0][0].cpu === -1) {
|
||||
cpuGraphSettings.data[0].shift();
|
||||
}
|
||||
if (typeof playersGraphSettings.data[0][100] !== 'undefined' || playersGraphSettings.data[0][0].players === -1) {
|
||||
playersGraphSettings.data[0].shift();
|
||||
if (cpuData.length > 10) {
|
||||
cpuData.shift();
|
||||
memoryData.shift();
|
||||
timeLabels.shift();
|
||||
}
|
||||
|
||||
memoryGraphSettings.data[0].push({
|
||||
'date': new Date(),
|
||||
'memory': parseInt(data.stats.memory / (1024 * 1024))
|
||||
});
|
||||
cpuData.push(data.stats.cpu);
|
||||
memoryData.push(parseInt(data.stats.memory / (1024 * 1024)));
|
||||
|
||||
cpuGraphSettings.data[0].push({
|
||||
'date': new Date(),
|
||||
'cpu': data.stats.cpu
|
||||
});
|
||||
var m = new Date();
|
||||
timeLabels.push($.format.date(new Date(), 'HH:MM:ss'));
|
||||
|
||||
playersGraphSettings.data[0].push({
|
||||
'date': new Date(),
|
||||
'players': data.stats.players
|
||||
});
|
||||
|
||||
MG.data_graphic(memoryGraphSettings);
|
||||
MG.data_graphic(cpuGraphSettings);
|
||||
MG.data_graphic(playersGraphSettings);
|
||||
CPUChart.update();
|
||||
MemoryChart.update();
|
||||
|
||||
$.each(data.servers, function (uuid, info) {
|
||||
var element = $('tr[data-server="' + uuid + '"]');
|
||||
|
|
|
|||
|
|
@ -25,20 +25,19 @@
|
|||
|
||||
@section('scripts')
|
||||
@parent
|
||||
{!! Theme::css('css/vendor/metricsgraphics/metricsgraphics.css') !!}
|
||||
{!! Theme::css('css/jquery.terminal.css') !!}
|
||||
{!! Theme::js('js/vendor/d3/d3.min.js') !!}
|
||||
{!! Theme::js('js/vendor/metricsgraphics/metricsgraphics.min.js') !!}
|
||||
{!! Theme::js('js/vendor/async/async.min.js') !!}
|
||||
{!! Theme::js('js/jquery.mousewheel-min.js') !!}
|
||||
{!! Theme::js('js/jquery.terminal-0.11.6.min.js') !!}
|
||||
{!! Theme::js('js/unix_formatting.js') !!}
|
||||
{!! Theme::js('js/vendor/chartjs/chart.min.js') !!}
|
||||
{!! Theme::js('js/vendor/jquery/jquery-dateFormat.min.js') !!}
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="col-md-12">
|
||||
<ul class="nav nav-tabs tabs_with_panel" id="config_tabs">
|
||||
<li class="active"><a href="#console" data-toggle="tab">{{ trans('server.index.control') }}</a></li>
|
||||
<li><a href="#resources" data-toggle="tab">Resource Use</a></li>
|
||||
@can('view-allocation', $server)<li><a href="#allocation" data-toggle="tab">{{ trans('server.index.allocation') }}</a></li>@endcan
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
|
|
@ -67,6 +66,23 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="resources">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading"></div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<canvas id="chart_memory" style="max-height:300px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top:15px;">
|
||||
<div class="col-md-12">
|
||||
<canvas id="chart_cpu" style="max-height:300px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@can('view-allocation', $server)
|
||||
<div class="tab-pane" id="allocation">
|
||||
<div class="panel panel-default">
|
||||
|
|
@ -108,23 +124,6 @@
|
|||
</div>
|
||||
@endcan
|
||||
</div>
|
||||
<div class="panel panel-default" style="margin-top:-22px;">
|
||||
<div class="panel-heading"></div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h4 class="text-center">Memory Usage (MB)</h4>
|
||||
<div class="col-md-12" id="chart_memory" style="height:250px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top:15px;">
|
||||
<div class="col-md-12">
|
||||
<h4 class="text-center">CPU Usage (% Total) <small><a href="#" data-action="show-all-cores">toggle cores</a></small></h4>
|
||||
<div class="col-md-12" id="chart_cpu" style="height:250px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="pauseConsole" tabindex="-1" role="dialog" aria-labelledby="PauseConsole" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
|
|
@ -199,145 +198,112 @@ $(window).load(function () {
|
|||
}
|
||||
});
|
||||
|
||||
var showOnlyTotal = true;
|
||||
$('[data-action="show-all-cores"]').click(function (event) {
|
||||
event.preventDefault();
|
||||
showOnlyTotal = !showOnlyTotal;
|
||||
$('#chart_cpu').empty();
|
||||
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: "#00A1CB",
|
||||
borderColor: "#00A1CB",
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: "rgba(75,192,192,1)",
|
||||
pointBackgroundColor: "#fff",
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: "rgba(75,192,192,1)",
|
||||
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,
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// -----------------+
|
||||
// Charting Methods |
|
||||
// -----------------+
|
||||
var memoryGraphSettings = {
|
||||
data: [{
|
||||
'date': new Date(),
|
||||
'memory': -1
|
||||
}],
|
||||
full_width: true,
|
||||
full_height: true,
|
||||
right: 40,
|
||||
target: document.getElementById('chart_memory'),
|
||||
x_accessor: 'date',
|
||||
y_accessor: 'memory',
|
||||
animate_on_load: false,
|
||||
y_rug: true,
|
||||
area: false,
|
||||
};
|
||||
|
||||
var cpuGraphData = [
|
||||
[{
|
||||
'date': new Date(),
|
||||
'cpu': -1
|
||||
}]
|
||||
];
|
||||
var cpuGraphSettings = {
|
||||
data: cpuGraphData,
|
||||
legend: ['Total', 'C0', 'C1', 'C2', 'C3', 'C4', 'C5', 'C6', 'C7'],
|
||||
colors: [
|
||||
'#113F8C',
|
||||
'#00A1CB',
|
||||
'#01A4A4',
|
||||
'#61AE24',
|
||||
'#D0D102',
|
||||
'#D70060',
|
||||
'#E54028',
|
||||
'#F18D05',
|
||||
'#616161',
|
||||
'#32742C',
|
||||
],
|
||||
right: 40,
|
||||
full_width: true,
|
||||
full_height: true,
|
||||
target: document.getElementById('chart_cpu'),
|
||||
x_accessor: 'date',
|
||||
y_accessor: 'cpu',
|
||||
aggregate_rollover: true,
|
||||
missing_is_hidden: true,
|
||||
animate_on_load: false,
|
||||
area: false,
|
||||
};
|
||||
|
||||
MG.data_graphic(memoryGraphSettings);
|
||||
MG.data_graphic(cpuGraphSettings);
|
||||
|
||||
// Socket Recieves New Server Stats
|
||||
var activeChartArrays = [];
|
||||
var ctm = $('#chart_memory');
|
||||
var memoryData = [];
|
||||
var MemoryChart = new Chart(ctm, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: timeLabels,
|
||||
datasets: [
|
||||
{
|
||||
label: "Memory Use",
|
||||
fill: false,
|
||||
lineTension: 0.03,
|
||||
backgroundColor: "#01A4A4",
|
||||
borderColor: "#01A4A4",
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: "rgba(75,192,192,1)",
|
||||
pointBackgroundColor: "#fff",
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: "rgba(75,192,192,1)",
|
||||
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,
|
||||
}
|
||||
}
|
||||
});
|
||||
socket.on('proc', function (proc) {
|
||||
|
||||
var curDate = new Date();
|
||||
if (typeof memoryGraphSettings.data[0][20] !== 'undefined' || memoryGraphSettings.data[0][0].memory === -1) {
|
||||
memoryGraphSettings.data[0].shift();
|
||||
if (cpuData.length > 10) {
|
||||
cpuData.shift();
|
||||
memoryData.shift();
|
||||
timeLabels.shift();
|
||||
}
|
||||
|
||||
if (typeof cpuGraphData[0][20] !== 'undefined' || cpuGraphData[0][0].cpu === -1) {
|
||||
cpuGraphData[0].shift();
|
||||
}
|
||||
var cpuUse = ({{ $server->cpu }} > 0) ? parseFloat(((proc.data.cpu.total / {{ $server->cpu }}) * 100).toFixed(3).toString()) : proc.data.cpu.total;
|
||||
cpuData.push(cpuUse);
|
||||
memoryData.push(parseInt(proc.data.memory.total / (1024 * 1024)));
|
||||
|
||||
memoryGraphSettings.data[0].push({
|
||||
'date': curDate,
|
||||
'memory': parseInt(proc.data.memory.total / (1024 * 1024))
|
||||
});
|
||||
var m = new Date();
|
||||
timeLabels.push($.format.date(new Date(), 'HH:MM:ss'));
|
||||
|
||||
cpuGraphData[0].push({
|
||||
'date': curDate,
|
||||
'cpu': ({{ $server->cpu }} > 0) ? parseFloat(((proc.data.cpu.total / {{ $server->cpu }}) * 100).toFixed(3).toString()) : proc.data.cpu.total
|
||||
});
|
||||
|
||||
async.waterfall([
|
||||
function (callback) {
|
||||
// Remove blank values from listing
|
||||
var activeCores = [];
|
||||
async.forEachOf(proc.data.cpu.cores, function(inner, i, eachCallback) {
|
||||
if (proc.data.cpu.cores[i] > 0) {
|
||||
activeCores.push(proc.data.cpu.cores[i]);
|
||||
}
|
||||
return eachCallback();
|
||||
}, function () {
|
||||
return callback(null, activeCores);
|
||||
});
|
||||
},
|
||||
function (active, callback) {
|
||||
var modifedActiveCores = { '0': 0 };
|
||||
async.forEachOf(active, function (inner, i, eachCallback) {
|
||||
if (i > 7) {
|
||||
modifedActiveCores['0'] = modifedActiveCores['0'] + active[i];
|
||||
} else {
|
||||
if (activeChartArrays.indexOf(i) < 0) activeChartArrays.push(i);
|
||||
modifedActiveCores[i] = active[i];
|
||||
}
|
||||
return eachCallback();
|
||||
}, function () {
|
||||
return callback(null, modifedActiveCores);
|
||||
});
|
||||
},
|
||||
function (modified, callback) {
|
||||
async.forEachOf(activeChartArrays, function (inner, i, eachCallback) {
|
||||
if (typeof cpuGraphData[(i + 1)] === 'undefined') {
|
||||
cpuGraphData[(i + 1)] = [{
|
||||
'date': curDate,
|
||||
'cpu': ({{ $server->cpu }} > 0) ? parseFloat((((modified[i] || 0)/ {{ $server->cpu }}) * 100).toFixed(3).toString()) : modified[i] || null
|
||||
}];
|
||||
} else {
|
||||
if (typeof cpuGraphData[(i + 1)][20] !== 'undefined') cpuGraphData[(i + 1)].shift();
|
||||
cpuGraphData[(i + 1)].push({
|
||||
'date': curDate,
|
||||
'cpu': ({{ $server->cpu }} > 0) ? parseFloat((((modified[i] || 0)/ {{ $server->cpu }}) * 100).toFixed(3).toString()) : modified[i] || null
|
||||
});
|
||||
}
|
||||
return eachCallback();
|
||||
}, function () {
|
||||
return callback();
|
||||
});
|
||||
},
|
||||
function (callback) {
|
||||
cpuGraphSettings.data = (showOnlyTotal === true) ? cpuGraphData[0] : cpuGraphData;
|
||||
return callback();
|
||||
},
|
||||
], function () {
|
||||
MG.data_graphic(memoryGraphSettings);
|
||||
MG.data_graphic(cpuGraphSettings);
|
||||
});
|
||||
CPUChart.update();
|
||||
MemoryChart.update();
|
||||
});
|
||||
|
||||
// Socket Recieves New Query
|
||||
|
|
|
|||
Loading…
Reference in a new issue