diff options
Diffstat (limited to 'docs/examples/index.html')
-rw-r--r-- | docs/examples/index.html | 175 |
1 files changed, 17 insertions, 158 deletions
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> |