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
|
<!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>
<title>RRD Charts</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://flowplayer.org/tools/demos/dateinput/css/skin1.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://svn.mochikit.com/mochikit/trunk/MochiKit/Base.js"></script>
<script type="text/javascript" src="http://svn.mochikit.com/mochikit/trunk/MochiKit/Async.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://flot.googlecode.com/svn/trunk/excanvas.min.js"></script>
<script type="text/javascript" src="http://flot.googlecode.com/svn/trunk/jquery.flot.js"></script>
<script type="text/javascript" src="http://flot.googlecode.com/svn/trunk/jquery.flot.stack.js"></script>
<script type="text/javascript" src="http://flot.googlecode.com/svn/trunk/jquery.flot.selection.js"></script>
<script type="text/javascript" src="http://javascriptrrd.cvs.sourceforge.net/viewvc/*checkout*/javascriptrrd/v0/src/lib/binaryXHR.js?revision=1.5&content-type=text%2Fplain"></script>
<script type="text/javascript" src="http://javascriptrrd.cvs.sourceforge.net/viewvc/*checkout*/javascriptrrd/v0/src/lib/rrdFile.js?revision=1.8&content-type=text%2Fplain"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.2/all/jquery.tools.min.js"></script>
<script type="text/javascript" src="jrrd.js"></script>
<script type="text/javascript">
// Recipes for the charts on this page
var recipes = [
{
title: 'Twisted Web TCP Stats',
data: [
['tcpconns-8080-local/tcp_connections-CLOSE_WAIT.rrd', 0, 'CLOSE_WAIT', ''],
['tcpconns-8080-local/tcp_connections-SYN_RECV.rrd', 0, 'SYN_RECV', ''],
['tcpconns-8080-local/tcp_connections-TIME_WAIT.rrd', 0, 'TIME_WAIT', ''],
['tcpconns-8080-local/tcp_connections-CLOSED.rrd', 0, 'CLOSED', ''],
['tcpconns-8080-local/tcp_connections-FIN_WAIT2.rrd', 0, 'FIN_WAIT2', ''],
['tcpconns-8080-local/tcp_connections-FIN_WAIT1.rrd', 0, 'FIN_WAIT1', ''],
['tcpconns-8080-local/tcp_connections-ESTABLISHED.rrd', 0, 'ESTABLISHED', ''],
['tcpconns-8080-local/tcp_connections-LAST_ACK.rrd', 0, 'LAST_ACK', ''],
['tcpconns-8080-local/tcp_connections-LISTEN.rrd', 0, 'LISTEN', ''],
['tcpconns-8080-local/tcp_connections-SYN_SENT.rrd', 0, 'SYN_SENT', ''],
['tcpconns-8080-local/tcp_connections-CLOSING.rrd', 0, 'CLOSING', '']
],
options: jQuery.extend(true, {}, jrrd.Chart.BASE_OPTIONS, jrrd.Chart.STACKED_OPTIONS)
},
].concat(jrrd.COLLECTD_RECIPES.cpu,jrrd.COLLECTD_RECIPES.memory,jrrd.COLLECTD_RECIPES.load);
function initialiseCharts(rrdUrlList) {
/**
* Setup chart date range controls and all charts
**/
console.log(jrrd.COLLECTD_RECIPES.cpu);
// Add dhtml calendars to the date input fields
$(":date").dateinput({format: 'mmm dd yyyy', max: +1});
$(":date[name=startTime]").data("dateinput").change(function() {
$(":date[name=endTime]").data("dateinput").setMin(this.getValue(), true);
});
$(":date[name=endTime]").data("dateinput").change(function() {
$(":date[name=startTime]").data("dateinput").setMax(this.getValue(), true);
});
// Extract the chart template from the page
var chartTemplate = $('.chart-container').remove();
var cc = new jrrd.ChartCoordinator($('.chartRangeControl'));
cc.charts = jrrd.collectdChartFactory(
rrdUrlList, recipes, function() {
// The chart template must be appended to the page early, so
// that flot can calculate chart dimensions etc.
return chartTemplate.clone().appendTo('.charts');
});
// Update all charts when a selection is made on one of them
$('.charts').bind("plotselected", function(event, ranges) {
cc.setTimeRange(new Date(ranges.xaxis.from),
new Date(ranges.xaxis.to));
});
// Show a loading icon when a chart is being redrawn
$('.chart-container').live('chart_loading', function(e) {
$(this).find('.title').addClass('loading');
});
$('.chart-container').live('chart_loaded', function(e) {
$(this).find('.title').removeClass('loading');
});
// Initialise all the charts
cc.reset();
}
$(function() {
// Download a list of available rrd files and use it to generate
// any viable chart recipes
$.getJSON('rrd_finder.rpy', initialiseCharts);
});
</script>
</head>
<body>
<div class="notice">
<p>To get this demo working, you will need to serve this page from a
local webserver and serve the folder that contains your RRD files.</p>
</div>
<form method="GET" class="chartRangeControl">
<div>
<label>Start: <input type="date" name="startTime" /></label>
<label>End: <input type="date" name="endTime" /></label>
<input type="submit" value="Update" />
<input type="reset" value="Reset" />
</div>
<div class="range-preview"></div>
</form>
<div class="charts">
<div class="chart-container">
<h2 class="title"></h2>
<div class="chart"></div>
</div>
</div>
</body>
</html>
|
