diff options
| -rw-r--r-- | docs/examples/index.html | 112 | ||||
| -rw-r--r-- | docs/examples/jarmon_example_recipes.js | 130 | ||||
| -rw-r--r-- | jarmon/jarmon.js | 24 |
3 files changed, 112 insertions, 154 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) + } }; diff --git a/jarmon/jarmon.js b/jarmon/jarmon.js index 5952aa2..0919915 100644 --- a/jarmon/jarmon.js +++ b/jarmon/jarmon.js @@ -679,30 +679,6 @@ jarmon.Chart.prototype.draw = function() { }; -jarmon.Chart.fromRecipe = function(recipes, templateFactory, downloader) { - /** - * A static factory method to generate a list of I{Chart} from a list of - * recipes and a list of available rrd files in collectd path format. - * - * @method fromRecipe - * @param recipes {Array} A list of recipe objects. - * @param templateFactory {Function} A callable which generates an html - * template for a chart. - * @param downloader {Function} A download function which returns a Deferred - * @return {Array} A list of Chart objects - **/ - - var charts = []; - - for(var i=0; i<recipes.length; i++) { - charts.push( - new jarmon.Chart(templateFactory(), recipes[i], downloader) - ); - } - return charts; -}; - - /** * Generate a form through which to choose a data source from a remote RRD file * |