viewJmxMon.html
4.85 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
<title>LIL JMX Monitor</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<h1 id="main_title">LIL JMX Monitor</h1>
<div style="background-color: lightgrey; line-height:1em; min-height:3em;"><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;
main_div.appendChild(newdiv);
ac_chart[i] = new google.visualization.LineChart(newdiv);
}
created = true;
}
function getData() {
if(location.search != '')
{
// Update the data
statusP.innerHTML = "Calling getData...";
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
statusP.innerHTML += "<br>Calling getMetrics...";
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 (ms:" + res.ms + " age:" + res.age + ")<br>" + res.msg;
getMetrics();
} else {
statusP.innerHTML += " Received responsecode " + this.status;
}
}
}
function handler2() {
if (this.readyState == 4) {
if (this.status == 200 &&
this.responseText != null) {
statusP.innerHTML += " Received 200 OK";
var res = eval('(' + this.responseText + ')');
addData(res);
} else {
statusP.innerHTML += " Received responsecode " + this.status;
}
}
}
function addData(res) {
if(res.error == false && res.nvarray.length > 0) {
main_title.innerHTML = res.name + " JMX Monitor";
document.title = "JmxMon " + res.name;
if (created == false) {
createChart(res.nvarray);
}
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);
ac_options.title = res.nvarray[i].name + ": " + res.nvarray[i].value;
ac_chart[i].draw(ac_data[i], ac_options);
}
}
window.setTimeout('getData()', 15000);
}
</script>
</body>
</html>