Various changes and re-factoring towards implementation of a customisable interface. Old and unfinished but needs merging before starting work on Jquery 1.5 compatibility work.

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)
+    }
 };