A skeleton chart editing control

2 files changed, 86 insertions, 0 deletions

diff --git a/jarmon/jarmon.js b/jarmon/jarmon.js
index d47af27..5df7cce 100644
--- a/jarmon/jarmon.js
+++ b/jarmon/jarmon.js
@@ -823,6 +823,73 @@ jarmon.RrdChooser.prototype.drawDsSummary = function() {
 };
 
 
+jarmon.ChartEditor = function($tpl) {
+    this.$tpl = $tpl;
+    this.data = {
+        title: '',
+        datasources: [
+            ['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', '%']
+        ]
+    };
+};
+
+jarmon.ChartEditor.prototype.drawChartEditForm = function() {
+    var self = this;
+    this.$tpl.empty();
+
+    $('<form/>').append(
+        $('<div/>').append(
+            $('<label/>').append(
+                'Title: ',
+                $('<input/>', {
+                    type: 'text',
+                    name: 'title',
+                    value: this.data.title
+                })
+            )
+        ),
+        $('<fieldset/>').append(
+            $('<legend/>').text('Data Sources'),
+            $('<table/>', {'class': 'datasources'}).append(
+                $('<thead/>').append(
+                    $('<tr/>').append(
+                        $('<th/>').text('RRD File'),
+                        $('<th/>').text('DS Name'),
+                        $('<th/>').text('DS Label'),
+                        $('<th/>').text('DS Unit'),
+                        $('<th/>')
+                    )
+                )
+            ),
+            $('<input/>', {type: 'button', value: 'Add'})
+        ),
+        $('<input/>', {type: 'submit', value: 'Save'}),
+        $('<div/>', {class: 'next'})
+
+    ).appendTo(this.$tpl);
+
+    $(this.data.datasources).map(
+        function(i, el) {
+            return $('<tr/>').append(
+                $('<td/>').text(el[0]),
+                $('<td/>').text(el[1]),
+                $('<td/>').text(el[2]),
+                $('<td/>').text(el[3]),
+                $('<td/>').append(
+                    $('<input/>', {type: 'button', value: 'edit'}),
+                    $('<input/>', {type: 'button', value: 'delete'})
+                )
+            );
+        }
+    ).appendTo(this.$tpl.find('.datasources'));
+};
+
+
 // Options common to all the chart on this page
 jarmon.Chart.BASE_OPTIONS = {
     grid: {
diff --git a/jarmon/jarmon.test.js b/jarmon/jarmon.test.js
index 18b82d4..ee9c7bb 100644
--- a/jarmon/jarmon.test.js
+++ b/jarmon/jarmon.test.js
@@ -447,6 +447,25 @@ YUI({ logInclude: { TestRunner: true } }).use('console', 'test', function(Y) {
     }));
 
 
+    Y.Test.Runner.add(new Y.Test.Case({
+        name: "jarmon.ChartEditor",
+
+        setUp: function() {
+            this.$tpl = $('<div/>').appendTo($('body'))
+            var c = new jarmon.ChartEditor(this.$tpl);
+            c.drawChartEditForm();
+        },
+
+        test_drawInitialForm: function () {
+            /**
+             * Test that the initial config form contains an rrd form field
+             **/
+            Y.Assert.areEqual(
+                this.$tpl.find('form input[name=rrd_url]').size(), 1);
+        }
+    }));
+
+
     //initialize the console
     var yconsole = new Y.Console({
         newestOnTop: false,