Merge lp:~blake-rouse/maas/add-system-to-node-html-js into lp:~maas-committers/maas/trunk

[Blake Rouse]

Add html and js to show operating system in WebUI. Release field is not dependent on the selected operating system field.

This replaces the large merge of add-osystem-to-node, and separates it into 3 different mergers. This is the third one.

In the WebUI you can select an operating system and release version from the dropdowns. The release versions change based on the selected operating system, so it looks correct, and removes the possibility to select an operating system with an incorrect release.

Note: osystem was used throughout the code instead of os, as the python os module would conflict throughout the code base.

[Jeroen T. Vermeulen (jtv)]

Good stuff. Well-documented, well-factored, and the description gives a nice perspective. The smaller branches are appreciated. Most of my review notes are about comments, so no biggies.

This is my first time trying Launchpad's inline comments... no idea how they will turn out. I'm trying not to nitpick on impulse. That's an easy trap to fall into when you can just double-click some code and start typing. :-)

review: Approve

[Jeroen T. Vermeulen (jtv)]

Ah. I need to tick the “Publish inline comments” box.

=== modified file 'src/maasserver/context_processors.py'
--- src/maasserver/context_processors.py	2014-04-01 06:54:45 +0000
+++ src/maasserver/context_processors.py	2014-05-29 17:10:27 +0000
@@ -63,6 +63,7 @@
             'js/node_views.js',
             'js/longpoll.js',
             'js/enums.js',
+            'js/os_distro_select.js',
             'js/power_parameters.js',
             'js/nodes_chart.js',
             'js/reveal.js',

=== modified file 'src/maasserver/static/js/node_add.js'
--- src/maasserver/static/js/node_add.js	2014-03-03 06:33:34 +0000
+++ src/maasserver/static/js/node_add.js	2014-05-29 17:10:27 +0000
@@ -228,11 +228,28 @@
         var heading = Y.Node.create('<h2 />')
             .set('text', "Add node");
         this.get('srcNode').append(heading).append(this.createForm());
+        this.setUpDistroSeriesField();
         this.setUpPowerParameterField();
         this.initializeNodes();
     },
 
     /**
+     * If the 'distro_series' field is present, link it to operating
+     * system field.
+     *
+     * @method setUpDistroSeriesField
+     */
+    setUpDistroSeriesField: function() {
+        if (Y.Lang.isValue(Y.one('#id_distro_series'))) {
+            var widget = new Y.maas.os_distro_select.OSReleaseWidget({
+                srcNode: '#id_distro_series'
+                });
+            widget.bindTo(Y.one('#id_osystem'), 'change');
+            widget.render();
+        }
+    },
+
+    /**
      * If the 'power_type' field is present, setup the linked
      * 'power_parameter' field.
      *
@@ -415,5 +432,6 @@
 };
 
 }, '0.1', {'requires': ['io', 'node', 'widget', 'event', 'event-custom',
-                        'maas.morph', 'maas.enums', 'maas.power_parameters']}
+                        'maas.morph', 'maas.enums', 'maas.power_parameters',
+                        'maas.os_distro_select']}
 );

=== added file 'src/maasserver/static/js/os_distro_select.js'
--- src/maasserver/static/js/os_distro_select.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/os_distro_select.js	2014-05-29 17:10:27 +0000
@@ -0,0 +1,155 @@
+/* Copyright 2014 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * OS/Release seletion utilities.
+ *
+ * @module Y.maas.power_parameter
+ */
+
+YUI.add('maas.os_distro_select', function(Y) {
+
+Y.log('loading maas.os_distro_select');
+var module = Y.namespace('maas.os_distro_select');
+
+// Only used to mockup io in tests.
+module._io = new Y.IO();
+
+var OSReleaseWidget;
+
+/**
+ * A widget class that modifies the viewable options of the release
+ * field, based on the selected operating system field.
+ *
+ */
+OSReleaseWidget = function() {
+    OSReleaseWidget.superclass.constructor.apply(this, arguments);
+};
+
+OSReleaseWidget.NAME = 'os-release-widget';
+
+Y.extend(OSReleaseWidget, Y.Widget, {
+
+   /**
+    * Initialize the widget.
+    * - cfg.srcNode is the node which will be updated when the selected
+    *   value of the 'os node' will change.
+    * - cfg.osNode is the node containing a 'select' element.  When
+    *   the selected element will change, the srcNode HTML will be
+    *   updated.
+    *
+    * @method initializer
+    */
+    initializer: function(cfg) {
+        this.initialSkip = true;
+    },
+
+   /**
+    * Bind the widget to events (to name 'event_name') generated by the given
+    * 'osNode'.
+    *
+    * @method bindTo
+    */
+    bindTo: function(osNode, event_name) {
+        var self = this;
+        Y.one(osNode).on(event_name, function(e) {
+            var osValue = e.currentTarget.get('value');
+            self.switchTo(osValue);
+        });
+        var osValue = Y.one(osNode).get('value');
+        self.switchTo(osValue);
+    },
+
+   /**
+    * React to a new value of the os node: update the HTML of
+    * 'srcNode'.
+    *
+    * @method switchTo
+    */
+    switchTo: function(newOSValue) {
+        var srcNode = this.get('srcNode');
+        var options = srcNode.all('option');
+        var selected = false;
+        Y.Array.each(options, function(option) {
+            var sel = this.modifyOption(option, newOSValue);
+            if(selected == false) {
+                selected = sel;
+            }
+        }, this);
+
+        // We skip selection on first load, as Django will already
+        // provide the users, current selection. Without this the
+        // current selection will be clobered.
+        if(this.initialSkip == true) {
+            this.initialSkip = false;
+            return;
+        }
+
+        // See if a selection was made, if not then we need
+        // to select the first visible as a default is not
+        // present.
+        if(!selected) {
+            this.selectVisableOption(options);
+        }
+    },
+
+   /**
+    * Modify an option to make it visible or hidden. Returns true
+    * if the method also make the selection active.
+    *
+    * @method modifyOption
+    */
+    modifyOption: function(option, newOSValue) {
+        var selected = false;
+        var value = option.get('value');
+        var split_value = value.split("/");
+
+        // If "Default OS" is selected, then
+        // only show "Default OS Release".
+        if(newOSValue == '') {
+            if(value == '') {
+                option.removeClass('hidden');
+                option.set('selected', 'selected');
+            }
+            else {
+                option.addClass('hidden');
+            }
+        }
+        else {
+            if(split_value[0] == newOSValue) {
+                option.removeClass('hidden');
+                if(split_value[1] == '' && !this.initialSkip) {
+                    selected = true;
+                    option.set('selected', 'selected');
+                }
+            }
+            else {
+                option.addClass('hidden');
+            }
+        }
+        return selected;
+    },
+
+   /**
+    * Selected the first option that is not hidden.
+    *
+    * @method selectVisableOption
+    */
+    selectVisableOption: function(options) {
+        var first_option = null;
+        Y.Array.each(options, function(option) {
+            if(!option.hasClass('hidden')) {
+                if(first_option == null) {
+                    first_option = option;
+                }   
+            }
+        });
+        if(first_option != null) {
+            first_option.set('selected', 'selected');
+        }
+    }
+});
+
+module.OSReleaseWidget = OSReleaseWidget;
+
+}, '0.1', {'requires': ['widget', 'io']}
+);

=== added file 'src/maasserver/static/js/tests/test_os_distro_select.html'
--- src/maasserver/static/js/tests/test_os_distro_select.html	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/tests/test_os_distro_select.html	2014-05-29 17:10:27 +0000
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+  <head>
+    <title>Test maas.os_distro_select</title>
+
+    <!-- YUI and test setup -->
+    <script type="text/javascript" src="../testing/yui_test_conf.js"></script>
+    <script type="text/javascript" src="/usr/share/javascript/yui3/yui/yui.js"></script>
+    <script type="text/javascript" src="../testing/testrunner.js"></script>
+    <script type="text/javascript" src="../testing/testing.js"></script>
+    <!-- The module under test -->
+    <script type="text/javascript" src="../os_distro_select.js"></script>
+    <!-- The test suite -->
+    <script type="text/javascript" src="test_os_distro_select.js"></script>
+  </head>
+  <body>
+  <span id="suite">maas.os_distro_select.tests</span>
+  <script type="text/x-template" id="select_node">
+    <select id="id_osystem">
+      <option value="" selected="selected">Default OS</option>
+      <option value="value1">Value1</option>
+      <option value="value2">Value2</option>
+    </select>
+  </script>
+  <script type="text/x-template" id="target_node">
+    <select id="id_distro_series">
+      <option value="" selected="selected">Default Release</option>
+      <option value="value1/series1">Value1Series1</option>
+      <option value="value1/series2">Value1Series2</option>
+      <option value="value1/series3">Value1Series3</option>
+      <option value="value2/series1">Value2Series1</option>
+      <option value="value2/series2">Value2Series2</option>
+      <option value="value2/series3">Value2Series3</option>
+    </select>
+  </script>
+  <div id="placeholder"></div>
+  </body>
+</html>

=== added file 'src/maasserver/static/js/tests/test_os_distro_select.js'
--- src/maasserver/static/js/tests/test_os_distro_select.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/tests/test_os_distro_select.js	2014-05-29 17:10:27 +0000
@@ -0,0 +1,198 @@
+/* Copyright 2014 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ */
+
+YUI({ useBrowserConsole: true }).add(
+    'maas.os_distro_select.tests', function(Y) {
+
+Y.log('loading maas.os_distro_select.tests');
+var namespace = Y.namespace('maas.os_distro_select.tests');
+
+var module = Y.maas.os_distro_select;
+var suite = new Y.Test.Suite("maas.os_distro_select Tests");
+
+var select_node_template = Y.one('#select_node').getContent();
+var target_node_template = Y.one('#target_node').getContent();
+
+suite.add(new Y.maas.testing.TestCase({
+    name: 'test-os_distro_select',
+
+    setUp: function () {
+        Y.one('#placeholder').empty().append(
+            Y.Node.create(select_node_template).append(
+                Y.Node.create(target_node_template)));
+        this.widget = new Y.maas.os_distro_select.OSReleaseWidget({
+            srcNode: '#id_distro_series'
+            });
+    },
+
+    testBindCallsSwitchTo: function() {
+        var called = false;
+        this.widget.switchTo = function() {
+            called = true;
+        }
+        this.widget.bindTo(Y.one('#id_osystem'), 'change');
+        Y.Assert.isTrue(called);
+    },
+
+    testSwitchToCalledModifyOptionOnAll: function() {
+        var options = [];
+        this.widget.modifyOption = function(option, value) {
+            options.push(option);
+        }
+        this.widget.bindTo(Y.one('#id_osystem'), 'change');
+        var expected = Y.one('#id_distro_series').all('option');
+        Y.ArrayAssert.containsItems(expected, options);
+    },
+
+    testSwitchToTogglesInitialSkip: function() {
+        this.widget.bindTo(Y.one('#id_osystem'), 'change');
+        Y.Assert.isFalse(this.widget.initialSkip);
+    },
+
+    testSwitchToCallsSelectVisableOption: function() {
+        var called = false;
+        this.widget.selectVisableOption = function() {
+            called = true;
+        }
+        this.widget.initialSkip = false;
+        this.widget.bindTo(Y.one('#id_osystem'), 'change');
+        Y.Assert.isTrue(called);
+    },
+
+    testModifyOptionSelectsDefault: function() {
+        var option = Y.Mock();
+        Y.Mock.expect(option, {
+            method: "get",
+            args: ["value"],
+            returns: ""
+            });
+        Y.Mock.expect(option, {
+            method: "removeClass",
+            args: ["hidden"]
+            });
+        Y.Mock.expect(option, {
+            method: "set",
+            args: ["selected", "selected"]
+            });
+        var selected = this.widget.modifyOption(option, '');
+        Y.Mock.verify(option);
+        Y.Assert.isFalse(selected);
+    },
+
+    testModifyOptionHidesNonDefault: function() {
+        var option = Y.Mock();
+        Y.Mock.expect(option, {
+            method: "get",
+            args: ["value"],
+            returns: "value1"
+            });
+        Y.Mock.expect(option, {
+            method: "addClass",
+            args: ["hidden"]
+            });
+        var selected = this.widget.modifyOption(option, '');
+        Y.Mock.verify(option);
+        Y.Assert.isFalse(selected);
+    },
+
+    testModifyOptionShowsOSMatch: function() {
+        var option = Y.Mock();
+        Y.Mock.expect(option, {
+            method: "get",
+            args: ["value"],
+            returns: "os/release"
+            });
+        Y.Mock.expect(option, {
+            method: "removeClass",
+            args: ["hidden"]
+            });
+        var selected = this.widget.modifyOption(option, 'os');
+        Y.Mock.verify(option);
+        Y.Assert.isFalse(selected);
+    },
+
+    testModifyOptionSelectsOSDefault: function() {
+        var option = Y.Mock();
+        Y.Mock.expect(option, {
+            method: "get",
+            args: ["value"],
+            returns: "os/"
+            });
+        Y.Mock.expect(option, {
+            method: "removeClass",
+            args: ["hidden"]
+            });
+        Y.Mock.expect(option, {
+            method: "set",
+            args: ["selected", "selected"]
+            });
+        this.widget.initialSkip = false;
+        var selected = this.widget.modifyOption(option, 'os');
+        Y.Mock.verify(option);
+        Y.Assert.isTrue(selected);
+    },
+
+    testModifyOptionSelectsOSDefaultSkippedOnInitial: function() {
+        var option = Y.Mock();
+        Y.Mock.expect(option, {
+            method: "get",
+            args: ["value"],
+            returns: "os/"
+            });
+        Y.Mock.expect(option, {
+            method: "removeClass",
+            args: ["hidden"]
+            });
+        var selected = this.widget.modifyOption(option, 'os');
+        Y.Mock.verify(option);
+        Y.Assert.isFalse(selected);
+    },
+
+    testModifyOptionHidesOSMismatch: function() {
+        var option = Y.Mock();
+        Y.Mock.expect(option, {
+            method: "get",
+            args: ["value"],
+            returns: "os/release"
+            });
+        Y.Mock.expect(option, {
+            method: "addClass",
+            args: ["hidden"]
+            });
+        var selected = this.widget.modifyOption(option, 'other');
+        Y.Mock.verify(option);
+        Y.Assert.isFalse(selected);
+    },
+
+    testSelectVisableOptionShowsFirstVisable: function() {
+        var option = Y.Mock();
+        var option2 = Y.Mock();
+        Y.Mock.expect(option, {
+            method: "hasClass",
+            args: ["hidden"],
+            returns: true
+            });
+        Y.Mock.expect(option2, {
+            method: "hasClass",
+            args: ["hidden"],
+            returns: false
+            });
+        Y.Mock.expect(option2, {
+            method: "set",
+            args: ["selected", "selected"]
+            });
+
+        var options = Y.Array([option, option2])
+        this.widget.selectVisableOption(options);
+        Y.Mock.verify(option);
+        Y.Mock.verify(option2);
+    }
+
+}));
+
+namespace.suite = suite;
+
+}, '0.1', {'requires': [
+    'node-event-simulate', 'test', 'maas.testing', 'maas.os_distro_select']}
+);

=== modified file 'src/maasserver/templates/maasserver/node_edit.html'
--- src/maasserver/templates/maasserver/node_edit.html	2014-03-03 09:44:25 +0000
+++ src/maasserver/templates/maasserver/node_edit.html	2014-05-29 17:10:27 +0000
@@ -11,9 +11,17 @@
   <script type="text/javascript">
   <!--
   YUI().use(
-    'maas.enums', 'maas.power_parameters',
+    'maas.enums', 'maas.power_parameters', 'maas.os_distro_select',
     function (Y) {
     Y.on('load', function() {
+      // Create OSDistroWidget so that the release field will be
+      // updated each time the value of the os field changes.
+      var releaseWidget = new Y.maas.os_distro_select.OSReleaseWidget({
+          srcNode: '#id_distro_series'
+          });
+      releaseWidget.bindTo(Y.one('.osystem').one('select'), 'change');
+      releaseWidget.render();
+
       // Create LinkedContentWidget widget so that the power_parameter field
       // will be updated each time the value of the power_type field changes.
       var power_types = {{ power_types }};

=== modified file 'src/maasserver/templates/maasserver/settings.html'
--- src/maasserver/templates/maasserver/settings.html	2014-04-10 04:29:20 +0000
+++ src/maasserver/templates/maasserver/settings.html	2014-05-29 17:10:27 +0000
@@ -6,6 +6,23 @@
 {% block page-title %}Settings{% endblock %}
 
 {% block head %}
+  <script type="text/javascript">
+  <!--
+  YUI().use(
+    'maas.os_distro_select',
+    function (Y) {
+    Y.on('load', function() {
+      // Create OSDistroWidget so that the release field will be
+      // updated each time the value of the os field changes.
+      var releaseWidget = new Y.maas.os_distro_select.OSReleaseWidget({
+          srcNode: '#id_deploy-default_distro_series'
+          });
+      releaseWidget.bindTo(Y.one('#id_deploy-default_osystem'), 'change');
+      releaseWidget.render();
+    });
+  });
+  // -->
+  </script>
 {% endblock %}
 
 {% block content %}
@@ -90,6 +107,21 @@
       <div class="clear"></div>
     </div>
     <div class="divider"></div>
+    <div id="deploy" class="block size7 first">
+      <h2>Deploy</h2>
+      <form action="{% url "settings" %}" method="post">
+        {% csrf_token %}
+        <ul>
+        {% for field in deploy_form %}
+          {% include "maasserver/form_field.html" %}
+        {% endfor %}
+        </ul>
+        <input type="hidden" name="deploy_submit" value="1" />
+        <input type="submit" class="button right" value="Save" />
+      </form>
+      <div class="clear"></div>
+    </div>
+    <div class="divider"></div>
     <div id="ubuntu" class="block size7 first">
       <h2>Ubuntu</h2>
       <form action="{% url "settings" %}" method="post">

=== modified file 'src/maasserver/templates/maasserver/snippets.html'
--- src/maasserver/templates/maasserver/snippets.html	2014-03-25 13:45:52 +0000
+++ src/maasserver/templates/maasserver/snippets.html	2014-05-29 17:10:27 +0000
@@ -16,6 +16,10 @@
     </div>
   </p>
   <p>
+    <label for="id_osystem">OS</label>
+    {{ node_form.osystem }}
+  </p>
+  <p>
     <label for="id_distro_series">Release</label>
     {{ node_form.distro_series }}
   </p>