summaryrefslogtreecommitdiff
path: root/docs/examples
diff options
context:
space:
mode:
Diffstat (limited to 'docs/examples')
-rw-r--r--docs/examples/assets/css/style.css41
-rw-r--r--docs/examples/index.html175
-rw-r--r--docs/examples/jarmon_example_recipes.js138
3 files changed, 121 insertions, 233 deletions
diff --git a/docs/examples/assets/css/style.css b/docs/examples/assets/css/style.css
index 561b11e..e82ec30 100644
--- a/docs/examples/assets/css/style.css
+++ b/docs/examples/assets/css/style.css
@@ -9,11 +9,7 @@ form div {
}
h2 {
- padding: 0 0 0 55px;
- margin: 20px auto 5px auto;
font-size: 14px;
- text-align: left;
- clear: both;
}
p, li, dt, dd, td, th, div {
@@ -36,6 +32,7 @@ p, li, dt, dd, td, th, div {
height:200px;
width: 850px;
margin: 0 auto 0 auto;
+ clear: both;
}
.tickLabel {
@@ -75,6 +72,11 @@ input[type=checkbox] {
border: none;
}
+input[type=text] {
+ padding: 3px;
+ border: 1px solid #EEE;
+}
+
.notice {
border: 1px solid Green;
background: #FFDDFF;
@@ -85,3 +87,34 @@ input[type=checkbox] {
#calroot {
z-index: 2;
}
+
+.chart-header {
+ width: 790px;
+ padding: 5px 0 5px 0;
+ margin: 20px auto 0 auto;
+ position: relative;
+ left: 25px;
+}
+
+.chart-header:AFTER {
+ content: ''
+}
+
+.chart-container h2{
+ float: left;
+ margin: 0;
+}
+
+.chart-container .chart-controls{
+ float: right;
+ margin: 0;
+}
+
+.tab-controls {
+ width: 790px;
+ padding: 5px 0 5px 0;
+ margin: 20px auto 0 auto;
+ text-align: right;
+ position: relative;
+ left: 25px;
+}
diff --git a/docs/examples/index.html b/docs/examples/index.html
index 3debd18..2bec8aa 100644
--- a/docs/examples/index.html
+++ b/docs/examples/index.html
@@ -16,151 +16,15 @@
<script type="text/javascript" src="../../jarmon/jarmon.js"></script>
<script type="text/javascript" src="jarmon_example_recipes.js"></script>
<script type="text/javascript">
- // Recipes for the charts on this page
-
- var application_recipes = [
- {
- title: 'Jarmon Webserver TCP Stats',
- data: [
- ['data/tcpconns-8080-local/tcp_connections-CLOSE_WAIT.rrd', 0, 'CLOSE_WAIT', ''],
- ['data/tcpconns-8080-local/tcp_connections-SYN_RECV.rrd', 0, 'SYN_RECV', ''],
- ['data/tcpconns-8080-local/tcp_connections-TIME_WAIT.rrd', 0, 'TIME_WAIT', ''],
- ['data/tcpconns-8080-local/tcp_connections-CLOSED.rrd', 0, 'CLOSED', ''],
- ['data/tcpconns-8080-local/tcp_connections-FIN_WAIT2.rrd', 0, 'FIN_WAIT2', ''],
- ['data/tcpconns-8080-local/tcp_connections-FIN_WAIT1.rrd', 0, 'FIN_WAIT1', ''],
- ['data/tcpconns-8080-local/tcp_connections-ESTABLISHED.rrd', 0, 'ESTABLISHED', ''],
- ['data/tcpconns-8080-local/tcp_connections-LAST_ACK.rrd', 0, 'LAST_ACK', ''],
- ['data/tcpconns-8080-local/tcp_connections-LISTEN.rrd', 0, 'LISTEN', ''],
- ['data/tcpconns-8080-local/tcp_connections-SYN_SENT.rrd', 0, 'SYN_SENT', ''],
- ['data/tcpconns-8080-local/tcp_connections-CLOSING.rrd', 0, 'CLOSING', '']
- ],
- options: jQuery.extend(true, {yaxis: {tickDecimals: 0}}, jarmon.Chart.BASE_OPTIONS, jarmon.Chart.STACKED_OPTIONS)
- }
- ];
-
-
- function initialiseCharts() {
- /**
- * Setup chart date range controls and all charts
- **/
-
- var p = new jarmon.Parallimiter(1);
- function serialDownloader(url) {
- return p.addCallable(jarmon.downloadBinary, [url]);
- }
-
- // Extract the chart template from the page
- var chartTemplate = $('.chart-container').remove();
-
- function templateFactory(parentEl) {
- return function() {
- // The chart template must be appended to the page early, so
- // that flot can calculate chart dimensions etc.
- return chartTemplate.clone().appendTo(parentEl);
- }
- }
-
- var cc = new jarmon.ChartCoordinator($('.chartRangeControl'));
- var t;
- // Initialise tabs and update charts when tab is clicked
- $(".css-tabs:first").bind('click', function(i) {
- // XXX: Hack to give the tab just enough time to become visible
- // so that flot can calculate chart dimensions.
- window.clearTimeout(t);
- t = window.setTimeout(function() { cc.update(); }, 100);
- });
-
- cc.charts = [].concat(
- jarmon.Chart.fromRecipe(
- [].concat(
- jarmon.COLLECTD_RECIPES.cpu,
- jarmon.COLLECTD_RECIPES.memory,
- jarmon.COLLECTD_RECIPES.load),
- templateFactory('.system-charts'), serialDownloader),
- jarmon.Chart.fromRecipe(
- jarmon.COLLECTD_RECIPES.interface,
- templateFactory('.network-charts'), serialDownloader),
- jarmon.Chart.fromRecipe(
- jarmon.COLLECTD_RECIPES.dns,
- templateFactory('.dns-charts'), serialDownloader),
- jarmon.Chart.fromRecipe(
- application_recipes,
- templateFactory('.application-charts'), serialDownloader)
- );
-
- // Initialise all the charts
- cc.init();
- }
$(function() {
- // Add dhtml calendars to the date input fields
- $(".timerange_control img")
- .dateinput({
- 'format': 'dd mmm yyyy 00:00:00',
- 'max': +1,
- 'css': {'input': 'jquerytools_date'}})
- .bind('onBeforeShow', function(e) {
- var classes = $(this).attr('class').split(' ');
- var currentDate, input_selector;
- for(var i=0; i<=classes.length; i++) {
- input_selector = '[name="' + classes[i] + '"]';
- // Look for a neighboring input element whose name matches the
- // class name of this calendar
- // Parse the value as a date if the returned date.getTime
- // returns NaN we know it's an invalid date
- // XXX: is there a better way to check for valid date?
- currentDate = new Date($(this).siblings(input_selector).val());
- if(currentDate.getTime() != NaN) {
- $(this).data('dateinput')._input_selector = input_selector;
- $(this).data('dateinput')._initial_val = currentDate.getTime();
- $(this).data('dateinput').setValue(currentDate);
- break;
- }
- }
- })
- .bind('onHide', function(e) {
- // Called after a calendar date has been chosen by the user.
-
- // Use the sibling selector that we generated above before opening
- // the calendar
- var input_selector = $(this).data('dateinput')._input_selector;
- var oldStamp = $(this).data('dateinput')._initial_val;
- var newDate = $(this).data('dateinput').getValue();
- // Only update the form field if the date has changed.
- if(oldStamp != newDate.getTime()) {
- $(this).siblings(input_selector).val(
- newDate.toString().split(' ').slice(1,5).join(' '));
- // Trigger a change event which should automatically update the
- // graphs and change the timerange drop down selector to
- // "custom"
- $(this).siblings(input_selector).trigger('change');
- }
- });
-
- // Avoid overlaps between the calendars
- // XXX: This is a bit of hack, what if there's more than one set of calendar
- // controls on a page?
- $(".timerange_control img.from_custom").bind('onBeforeShow',
- function() {
- var otherVal = new Date(
- $('.timerange_control [name="to_custom"]').val());
-
- $(this).data('dateinput').setMax(otherVal);
- }
- );
- $(".timerange_control img.to_custom").bind('onBeforeShow',
- function() {
- var otherVal = new Date(
- $('.timerange_control [name="from_custom"]').val());
-
- $(this).data('dateinput').setMin(otherVal);
- }
+ jarmon.buildTabbedChartUi(
+ $('.chart-container').remove(),
+ jarmon.CHART_RECIPES_COLLECTD,
+ $('.tabbed-chart-interface'),
+ jarmon.TAB_RECIPES_STANDARD,
+ $('.chartRangeControl')
);
-
- // Setup dhtml tabs
- $(".css-tabs").tabs(".css-panes > div", {history: true});
-
- initialiseCharts();
});
</script>
</head>
@@ -194,24 +58,19 @@
<div class="range-preview"
title="Time range preview - click and drag to select a custom timerange" ></div>
</form>
- <ul class="css-tabs">
- <li><a href="#system">System</a></li>
- <li><a href="#network">Network</a></li>
- <li><a href="#dns">DNS</a></li>
- <li><a href="#application">Application</a></li>
- </ul>
- <div class="css-panes charts">
- <div class="system-charts"></div>
- <div class="network-charts"></div>
- <div class="dns-charts"></div>
- <div class="application-charts"></div>
- </div>
- <div class="chart-container">
+ </div>
+ <div class="tabbed-chart-interface"></div>
+ <div class="chart-container">
+ <div class="chart-header">
<h2 class="title"></h2>
- <div class="error"></div>
- <div class="chart"></div>
- <div class="graph-legend"></div>
+ <div class="chart-controls">
+ <input type="button" name="chart_edit" value="edit">
+ <input type="button" name="chart_delete" value="delete">
+ </div>
</div>
+ <div class="error"></div>
+ <div class="chart"></div>
+ <div class="graph-legend"></div>
</div>
</body>
</html>
diff --git a/docs/examples/jarmon_example_recipes.js b/docs/examples/jarmon_example_recipes.js
index 90b5c2e..610ecb2 100644
--- a/docs/examples/jarmon_example_recipes.js
+++ b/docs/examples/jarmon_example_recipes.js
@@ -9,80 +9,76 @@ if(typeof jarmon == 'undefined') {
var jarmon = {};
}
-jarmon.COLLECTD_RECIPES = {
- 'cpu': [
- {
- title: 'CPU Usage',
- data: [
- ['data/cpu-0/cpu-wait.rrd', 0, 'CPU-0 Wait', '%'],
- ['data/cpu-1/cpu-wait.rrd', 0, 'CPU-1 Wait', '%'],
- ['data/cpu-0/cpu-system.rrd', 0, 'CPU-0 System', '%'],
- ['data/cpu-1/cpu-system.rrd', 0, 'CPU-1 System', '%'],
- ['data/cpu-0/cpu-user.rrd', 0, 'CPU-0 User', '%'],
- ['data/cpu-1/cpu-user.rrd', 0, 'CPU-1 User', '%']
- ],
- options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS,
- jarmon.Chart.STACKED_OPTIONS)
- }
- ],
+jarmon.TAB_RECIPES_STANDARD = [
+ ['System', ['cpu', 'memory','load']],
+ ['Network', ['interface']],
+ ['DNS', ['dns_query_types', 'dns_return_codes']]
+];
- 'memory': [
- {
- title: 'Memory',
- data: [
- ['data/memory/memory-buffered.rrd', 0, 'Buffered', 'B'],
- ['data/memory/memory-used.rrd', 0, 'Used', 'B'],
- ['data/memory/memory-cached.rrd', 0, 'Cached', 'B'],
- ['data/memory/memory-free.rrd', 0, 'Free', 'B']
- ],
- options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS,
- jarmon.Chart.STACKED_OPTIONS)
- }
- ],
+jarmon.CHART_RECIPES_COLLECTD = {
+ 'cpu': {
+ title: 'CPU Usage',
+ data: [
+ ['data/cpu-0/cpu-wait.rrd', 0, 'CPU-0 Wait', '%'],
+ ['data/cpu-1/cpu-wait.rrd', 0, 'CPU-1 Wait', '%'],
+ ['data/cpu-0/cpu-system.rrd', 0, 'CPU-0 System', '%'],
+ ['data/cpu-1/cpu-system.rrd', 0, 'CPU-1 System', '%'],
+ ['data/cpu-0/cpu-user.rrd', 0, 'CPU-0 User', '%'],
+ ['data/cpu-1/cpu-user.rrd', 0, 'CPU-1 User', '%']
+ ],
+ options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS,
+ jarmon.Chart.STACKED_OPTIONS)
+ },
- 'dns': [
- {
- title: 'DNS Query Types',
- data: [
- ['data/dns/dns_qtype-A.rrd', 0, 'A', 'Q/s'],
- ['data/dns/dns_qtype-PTR.rrd', 0, 'PTR', 'Q/s'],
- ['data/dns/dns_qtype-SOA.rrd', 0, 'SOA', 'Q/s'],
- ['data/dns/dns_qtype-SRV.rrd', 0, 'SRV', 'Q/s']
- ],
- options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
- },
+ 'memory': {
+ title: 'Memory',
+ data: [
+ ['data/memory/memory-buffered.rrd', 0, 'Buffered', 'B'],
+ ['data/memory/memory-used.rrd', 0, 'Used', 'B'],
+ ['data/memory/memory-cached.rrd', 0, 'Cached', 'B'],
+ ['data/memory/memory-free.rrd', 0, 'Free', 'B']
+ ],
+ options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS,
+ jarmon.Chart.STACKED_OPTIONS)
+ },
- {
- title: 'DNS Return Codes',
- data: [
- ['data/dns/dns_rcode-NOERROR.rrd', 0, 'NOERROR', 'Q/s'],
- ['data/dns/dns_rcode-NXDOMAIN.rrd', 0, 'NXDOMAIN', 'Q/s'],
- ['data/dns/dns_rcode-SERVFAIL.rrd', 0, 'SERVFAIL', 'Q/s']
- ],
- options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
- }
- ],
+ 'dns_query_types': {
+ title: 'DNS Query Types',
+ data: [
+ ['data/dns/dns_qtype-A.rrd', 0, 'A', 'Q/s'],
+ ['data/dns/dns_qtype-PTR.rrd', 0, 'PTR', 'Q/s'],
+ ['data/dns/dns_qtype-SOA.rrd', 0, 'SOA', 'Q/s'],
+ ['data/dns/dns_qtype-SRV.rrd', 0, 'SRV', 'Q/s']
+ ],
+ options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
+ },
- 'load': [
- {
- title: 'Load Average',
- data: [
- ['data/load/load.rrd', 'shortterm', 'Short Term', ''],
- ['data/load/load.rrd', 'midterm', 'Medium Term', ''],
- ['data/load/load.rrd', 'longterm', 'Long Term', '']
- ],
- options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
- }
- ],
+ 'dns_return_codes': {
+ title: 'DNS Return Codes',
+ data: [
+ ['data/dns/dns_rcode-NOERROR.rrd', 0, 'NOERROR', 'Q/s'],
+ ['data/dns/dns_rcode-NXDOMAIN.rrd', 0, 'NXDOMAIN', 'Q/s'],
+ ['data/dns/dns_rcode-SERVFAIL.rrd', 0, 'SERVFAIL', 'Q/s']
+ ],
+ options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
+ },
- 'interface': [
- {
- title: 'Wlan0 Throughput',
- data: [
- ['data/interface/if_octets-wlan0.rrd', 'tx', 'Transmit', 'b/s'],
- ['data/interface/if_octets-wlan0.rrd', 'rx', 'Receive', 'b/s']
- ],
- options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
- }
- ]
+ 'load': {
+ title: 'Load Average',
+ data: [
+ ['data/load/load.rrd', 'shortterm', 'Short Term', ''],
+ ['data/load/load.rrd', 'midterm', 'Medium Term', ''],
+ ['data/load/load.rrd', 'longterm', 'Long Term', '']
+ ],
+ options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
+ },
+
+ 'interface': {
+ title: 'Wlan0 Throughput',
+ data: [
+ ['data/interface/if_octets-wlan0.rrd', 'tx', 'Transmit', 'b/s'],
+ ['data/interface/if_octets-wlan0.rrd', 'rx', 'Receive', 'b/s']
+ ],
+ options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
+ }
};
generated by cgit v1.2.3-2-g168b (git 2.25.1) at 2024-11-01 01:35:40 +0000