-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
94 lines (75 loc) · 4 KB
/
demo.html
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Simple REST4JMX Visualisation Demo</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" charset="utf-8">
/* == SIMPLE HEAP PLOTTER ===============================================================================
* This example will show a simple usage of the rest4jmx library to plot the current heap usage of
* a Java system. Uses jQuery 1.4.1 and the Flot graphing library to access rest4jmx via JSONP.
*/
/* The URL was generated by simply visiting http://student.polopoly.com/rest4jmx/jmx.html and copy-pasting
* the second level node "java.lang:type=Memory" from the tree view, and adding a "/HeapMemoryUsage" to get
* to the attribute value that I want.
*
* The ?callback parameter is added so that jQuery and rest4jmx will understand that I want JSONP, which is
* cross-domain.
*/
var heapURL = "http://student.polopoly.com/rest4jmx/mbeans/java.lang:type=Memory/HeapMemoryUsage?callback=?";
/* This function acts as the main drawing loop. It will parse the heap value from JMX, add it to our stack
* of values and redraw the graph.
*/
var readMbeanValue = function() {
// Stack used to keep track of data for the plot
var heapSeries = [];
return function() {
$.getJSON(heapURL, function(data, textStatus) {
var unparsedValue = data.value;
// We get a structure that is suitable for Java deserialization back, so we need to parse it out to
// get the heap value that we want. We look for the last occurence of used=, that's a string containing
// the current heap usage. Some string magic later and we have it.
var usedIndex = unparsedValue.lastIndexOf(" used=");
// 6 is for the length of " used=". parseInt gets us an integer and disregards the cruft on the end.
var currentUsed = parseInt(unparsedValue.substr(usedIndex + 6));
// We need to multiply and div due to lack of proper rounding function to get nice precision.
var currentUsedMb = Math.round(100*currentUsed/(1024*1024))/100;
// Push the data onto our series with an index based on the current time, and redraw
heapSeries.push([new Date().getTime(), currentUsedMb]);
$("#heapUsage span").text(currentUsedMb);
$.plot($("#graph"), [heapSeries], options);
});
};
};
/* Flot configuration.
* Nothing interesting really. Just ot get some Polopoly Green colours and remove labels
* that are just in the way.
*/
var options = {
lines: { show: true, fill: true, fillColor: "rgba(50, 200, 50, 50)", shadowSize: 0 },
points: { show: false },
colors: ["#00ee00"],
grid: { aboveData: false, tickColor: "rgba(0,0,0,0)" },
xaxis: { tickDecimals: 0, tickSize: 1, ticks: [] }
};
/* We need to share the mbean reader between document.ready and the timer, so we'll create
* an instance of the mbean reader here.
*/
var graphUpdater = readMbeanValue();
/* Now, this just sets up the graph for rendering and starts of a timer that'll poll the server
* every few seconds for updates.
*/
$(document).ready(graphUpdater);
window.setInterval(graphUpdater, 4000);
</script>
<style type="text/css" media="screen">
#heapUsage { font: 12px "Lucida Grande", Verdana; margin: 10px 0 0 20px; }
</style>
</head>
<body>
<div id="graph" style="width:600px;height:300px;"></div>
<div id="heapUsage">Current heap usage: <span></span> mb</div>
</body>
</html>