viewJmxMon.html 2.93 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  <title>LIL JMX Monitor</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        var ac_data = null;
        var ac_chart = null;

        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(getData);

        var ac_options = {
            title: 'Current Real User Activity',
            hAxis: { title: 'Timeline', titleTextStyle: { color: '#333'}, format: 'HH:mm:ss' },
            vAxis: { minValue: 0 },
            isStacked: false
        };

        function createChart(nvarray) {
            ac_data = new google.visualization.DataTable();
            
            ac_data.addColumn('datetime', 'Time');
            
            for(var i=0; i < nvarray.length; i++) {
                ac_data.addColumn('number', nvarray[i].name);
            }
            
            ac_chart = new google.visualization.LineChart(document.getElementById('ac_div'));
            ac_chart.draw(ac_data, ac_options);
            
        }

        function getData() {
            var client = new XMLHttpRequest();
            client.onreadystatechange = handler;
            if(location.search != '')
            {
                client.open("GET", "/JmxMonREST/getMetrics?connectionString=" + location.search.substring(1));
                client.setRequestHeader('Cache-Control', 'no-cache');
                client.setRequestHeader('Pragma', 'no-cache');
                client.send();
            } else {
            	// Error, no monitor specified
            	ac_div.innerHTML = "<p>No monitor specified in URL QueryString (use ?enter uri encoded con string)</p>";
            }
            
        }

        function handler() {
            var cT = new Date();
            if (this.readyState == 4) {
                if (this.status == 200 &&
                    this.responseText != null) {
                    addData(this.responseText);
                    return;
                }
            }
        }

        function addData(data) {
            var res = eval('(' + data + ')');
            
        	if (ac_data == null) {
        		createChart(res.nvarray);
        	}
        	
        	var dataRow = [];
        	dataRow.push(new Date());
        	for(var i=0; i < res.nvarray.length; i++) {
                dataRow[i+1] = res.nvarray[i].value;
            }
            
            if (ac_data.getNumberOfRows() > 1000) ac_data.removeRow(0);

            ac_data.addRow(dataRow);
            ac_chart.draw(ac_data, ac_options);

            window.setTimeout('getData()', 5000);
        }

    </script>
  </head>
  <body>
    <h1>LIL JMX Monitor</h1>
    <div id="ac_div" style="width: 99%; height: 80%; "></div>
  </body>
</html>