<!DOCTYPE html>
<html>
<head>
<title>JMX Monitor</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<style>
.ac_div {
width: 33%;
display: inline-block;
height: 18%;
margin: 0;
padding: 0;
}
.top_left_div {
width: 33%;
display: inline-block;
margin: 0;
padding: 0;
line-height:1em;
min-height:3em;
font-family:sans-serif;
}
.top_middle_div {
width: 33%;
display: inline-block;
margin: 0;
padding: 0;
line-height:1em;
min-height:3em;
font-family:sans-serif;
text-align: center;
}
.top_right_div {
width: 33%;
display: inline-block;
margin: 0;
padding: 0;
line-height:1em;
min-height:3em;
font-family:sans-serif;
text-align: right;
}
</style>
</head>
<body>
<div class="top_left_div"><h3 id="main_title">JMX Monitor</h3></div>
<div class="top_middle_div">
<p>
Interval (s): <input type="text" id="updateTextBox" size="3" value="15">
Precision: <input type="text" id="precisionTextBox" size="3" value="6">
</p>
</div>
<div class="top_right_div"><p id="statusP">Nothing loaded</p></div>
<div id="main_div"></div>
<script type="text/javascript">
var ac_data = [];
var ac_chart = [];
var created = false;
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(getData);
var ac_options = {
title: 'Current Activity',
hAxis: { title: 'Timeline', titleTextStyle: { color: '#333'}, format: 'HH:mm:ss' },
vAxis: { },
isStacked: false,
legend: { position: 'none' }
};
function createChart(nvarray) {
for(var i=0; i < nvarray.length; i++) {
ac_data[i] = new google.visualization.DataTable();
ac_data[i].addColumn('datetime', 'Time');
ac_data[i].addColumn('number', nvarray[i].name);
var newdiv = document.createElement('div');
newdiv.id = 'ac_div' + i;
newdiv.className = 'ac_div';
main_div.appendChild(newdiv);
ac_chart[i] = new google.visualization.LineChart(newdiv);
}
created = true;
}
function getData() {
if(location.search != '')
{
// Update the data
statusP.innerHTML = "Updating...";
var client1 = new XMLHttpRequest();
client1.onreadystatechange = handler1;
client1.open("GET", "JmxMonREST/getData?age=14&connectionString=" + location.search.substring(1));
client1.setRequestHeader('Cache-Control', 'no-cache');
client1.setRequestHeader('Pragma', 'no-cache');
client1.send();
} else {
// Error, no monitor specified
statusP.innerHTML = "No monitor specified in URL QueryString (use ?enter%20uri%20encoded%20con%20string)";
}
}
function getMetrics() {
if(location.search != '')
{
// Get the metrics
var client2 = new XMLHttpRequest();
client2.onreadystatechange = handler2;
client2.open("GET", "JmxMonREST/getMetrics?connectionString=" + location.search.substring(1));
client2.setRequestHeader('Cache-Control', 'no-cache');
client2.setRequestHeader('Pragma', 'no-cache');
client2.send();
} else {
// Error, no monitor specified
statusP.innerHTML = "No monitor specified in URL QueryString (use ?enter%20uri%20encoded%20con%20string)";
}
}
function handler1() {
if (this.readyState == 4) {
if ((this.status == 200 || this.status == 202) &&
this.responseText != null) {
var res = eval('(' + this.responseText + ')');
statusP.innerHTML = " Received 200 OK (in " + (res.ms ? res.ms : 0) + "ms with age " + (res.age ? res.age : 0) + "ms)";
getMetrics();
} else {
statusP.innerHTML += " getData code " + this.status + " msg: " + res.msg;
}
}
}
function handler2() {
if (this.readyState == 4) {
if (this.status == 200 &&
this.responseText != null) {
var res = eval('(' + this.responseText + ')');
addData(res);
} else {
statusP.innerHTML += " getMetrics code " + this.status + " msg: " + res.msg;
}
}
}
function addData(res) {
if(res.error == false && res.nvarray.length > 0) {
main_title.innerHTML = res.name + " JMX Monitor";
document.title = res.name;
if (created == false) {
createChart(res.nvarray);
}
var precision = parseInt(precisionTextBox.value);
if(isNaN(precision)) {
precision = 6;
precisionTextBox.value = "6";
}
for(var i=0; i < res.nvarray.length; i++) {
var dataRow = [];
dataRow[0] = new Date();
dataRow[1] = res.nvarray[i].value;
ac_data[i].addRow(dataRow);
if (ac_data[i].getNumberOfRows() > 100) ac_data[i].removeRow(0);
if (Math.floor(res.nvarray[i].value) === res.nvarray[i].value) {
ac_options.title = res.nvarray[i].name + ": " + res.nvarray[i].value;
} else {
ac_options.title = res.nvarray[i].name + ": " + res.nvarray[i].value.toPrecision(precision);
}
ac_chart[i].draw(ac_data[i], ac_options);
}
}
var updateTime = parseInt(updateTextBox.value);
if(isNaN(updateTime)) {
updateTime = 15000;
updateTextBox.value = "15";
}
else updateTime = updateTime * 1000;
window.setTimeout('getData()', updateTime);
}
</script>
</body>
</html>