<!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>