/base/000_base/index.html/index.html |
@@ -19,9 +19,6 @@ |
<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> |
@@ -58,9 +55,6 @@ |
<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> |
<!-- 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. --> |
@@ -67,241 +61,5 @@ |
<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> |