From 7e7a9e36693919bd79a11be271a379303f581c54 Mon Sep 17 00:00:00 2001
From: Richard Wall <richard@largo>
Date: Sat, 8 Jan 2011 15:05:38 +0000
Subject: start to reorganise the example application

---
 docs/examples/index.html | 112 ++++++++++++++++++++++-------------------------
 1 file changed, 52 insertions(+), 60 deletions(-)

(limited to 'docs/examples/index.html')

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>
-- 
cgit v1.2.3-2-g168b


From 2447194a8f52ba7577ef2a0e0929d433dfa292aa Mon Sep 17 00:00:00 2001
From: Richard Wall <richard@largo>
Date: Sun, 9 Jan 2011 15:36:01 +0000
Subject: Simplify the example application - move most code to jarmon.js

---
 docs/examples/index.html | 152 +++--------------------------------------------
 1 file changed, 7 insertions(+), 145 deletions(-)

(limited to 'docs/examples/index.html')

diff --git a/docs/examples/index.html b/docs/examples/index.html
index ec5143d..e561b9e 100644
--- a/docs/examples/index.html
+++ b/docs/examples/index.html
@@ -16,154 +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_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) {
-                return p.addCallable(jarmon.downloadBinary, [url]);
-            }
-
-            // Extract the chart template from the page
-            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
-                        )
-                    );
-                }
-            }
-
-            // 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) {
-                // 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);
-            });
-
-            // 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);
-                }
+            jarmon.buildTabbedChartUi(
+                $('.chart-container').remove(),
+                jarmon.CHART_RECIPES_COLLECTD,
+                $('.tabbed-chart-interface'),
+                jarmon.TAB_RECIPES_STANDARD,
+                $('.chartRangeControl')
             );
-            $(".timerange_control img.to_custom").bind('onBeforeShow',
-                function() {
-                    var otherVal = new Date(
-                        $('.timerange_control [name="from_custom"]').val());
-
-                    $(this).data('dateinput').setMin(otherVal);
-                }
-            );
-
-            initialiseCharts();
         });
         </script>
     </head>
@@ -205,5 +66,6 @@
                 <div class="graph-legend"></div>
             </div>
         </div>
+
     </body>
 </html>
-- 
cgit v1.2.3-2-g168b


From 841d30bf4eda7a8658433d97b9c9a686c85b6e5a Mon Sep 17 00:00:00 2001
From: Richard Wall <richard@largo>
Date: Sat, 15 Jan 2011 15:34:41 +0000
Subject: decouple the chart coordinator html from the charts under its
 control. Also lighten the border of input text boxes.

---
 docs/examples/index.html | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

(limited to 'docs/examples/index.html')

diff --git a/docs/examples/index.html b/docs/examples/index.html
index e561b9e..6acf2b8 100644
--- a/docs/examples/index.html
+++ b/docs/examples/index.html
@@ -58,14 +58,13 @@
                 <div class="range-preview"
                      title="Time range preview - click and drag to select a custom timerange" ></div>
             </form>
-            <div class="tabbed-chart-interface"></div>
-            <div class="chart-container">
-                <h2 class="title"></h2>
-                <div class="error"></div>
-                <div class="chart"></div>
-                <div class="graph-legend"></div>
-            </div>
         </div>
-
+        <div class="tabbed-chart-interface"></div>
+        <div class="chart-container">
+            <h2 class="title"></h2>
+            <div class="error"></div>
+            <div class="chart"></div>
+            <div class="graph-legend"></div>
+        </div>
     </body>
 </html>
-- 
cgit v1.2.3-2-g168b


From f7143a7a053c05ac9617d3557f583ce8cf223952 Mon Sep 17 00:00:00 2001
From: Richard Wall <richard@largo>
Date: Sun, 16 Jan 2011 18:33:04 +0000
Subject: Move edit buttons

---
 docs/examples/index.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'docs/examples/index.html')

diff --git a/docs/examples/index.html b/docs/examples/index.html
index 6acf2b8..2bec8aa 100644
--- a/docs/examples/index.html
+++ b/docs/examples/index.html
@@ -61,7 +61,13 @@
         </div>
         <div class="tabbed-chart-interface"></div>
         <div class="chart-container">
-            <h2 class="title"></h2>
+            <div class="chart-header">
+                <h2 class="title"></h2>
+                <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>
-- 
cgit v1.2.3-2-g168b