summaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
authorRichard Wall <richard@largo>2011-01-08 15:05:38 +0000
committerRichard Wall <richard@largo>2011-01-08 15:05:38 +0000
commit7e7a9e36693919bd79a11be271a379303f581c54 (patch)
tree5894270a25e9ca26eb39d61d022dc0b7957bac17 /docs
parent91d9735a448bb519fd5683bfef9635fc77ac7008 (diff)
start to reorganise the example application
Diffstat (limited to 'docs')
-rw-r--r--docs/examples/index.html112
-rw-r--r--docs/examples/jarmon_example_recipes.js130
2 files changed, 112 insertions, 130 deletions
diff --git a/docs/examples/index.html b/docs/examples/index.html
index 3debd18..ec5143d 100644
--- a/docs/examples/index.html
+++ b/docs/examples/index.html
@@ -18,31 +18,36 @@
<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)
- }
- ];
+ var application_recipe = {
+ 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 cc = new jarmon.ChartCoordinator($('.chartRangeControl'));
+
+ var TABS = [
+ ['System', ['cpu', 'memory','load']],
+ ['Network', ['interface']],
+ ['DNS', ['dns_query_types', 'dns_return_codes']]
+ ];
var p = new jarmon.Parallimiter(1);
function serialDownloader(url) {
@@ -50,17 +55,36 @@
}
// 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 $chartTemplate = $('.chart-container').remove();
+
+ var $tabs = $('<ul/>', {'class': 'css-tabs'}).appendTo('.tabbed-chart-interface');
+ var $tabPanels = $('<div/>', {'class': 'css-panes charts'}).appendTo('.tabbed-chart-interface');
+ var tabName, $tabPanel, chartNames;
+ for(var i=0; i<TABS.length; i++) {
+ tabName = TABS[i][0];
+ chartNames = TABS[i][1];
+ // Add a tab
+ $('<li/>').append(
+ $('<a/>', {href: ['#', tabName].join('')}).text(tabName)
+ ).appendTo($tabs);
+
+ // Add tab panel
+ $tabPanel = $('<div/>').appendTo($tabPanels);
+
+ for(var j=0; j<chartNames.length; j++) {
+ cc.charts.push(
+ new jarmon.Chart(
+ $chartTemplate.clone().appendTo($tabPanel),
+ jarmon.COLLECTD_RECIPES[chartNames[j]],
+ serialDownloader
+ )
+ );
}
}
- var cc = new jarmon.ChartCoordinator($('.chartRangeControl'));
+ // Setup dhtml tabs
+ $(".css-tabs").tabs(".css-panes > div", {history: true});
+
var t;
// Initialise tabs and update charts when tab is clicked
$(".css-tabs:first").bind('click', function(i) {
@@ -70,24 +94,6 @@
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();
}
@@ -157,9 +163,6 @@
}
);
- // Setup dhtml tabs
- $(".css-tabs").tabs(".css-panes > div", {history: true});
-
initialiseCharts();
});
</script>
@@ -194,18 +197,7 @@
<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="tabbed-chart-interface"></div>
<div class="chart-container">
<h2 class="title"></h2>
<div class="error"></div>
diff --git a/docs/examples/jarmon_example_recipes.js b/docs/examples/jarmon_example_recipes.js
index 90b5c2e..e2e42b9 100644
--- a/docs/examples/jarmon_example_recipes.js
+++ b/docs/examples/jarmon_example_recipes.js
@@ -10,79 +10,69 @@ if(typeof jarmon == 'undefined') {
}
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)
- }
- ],
+ '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)
+ },
- '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)
- }
- ],
+ '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)
+ },
- '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)
- },
+ '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)
+ },
- {
- 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_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)
+ },
- '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)
- }
- ],
+ '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)
- }
- ]
+ '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)
+ }
};