JavaScript Refactor.

Cleans up Horizon's JavaScript to make it properly modular and
well-organized.

Adds unit tests written in QUnit for some of the JS modules
as a starting point for the JS test framework. You can visit
/qunit/ with DEBUG=True in your settings to access the JS
test runner.

Fixes bug 961509.

Change-Id: Ica33765660d0ed80f22c71bc96f122c3fc8b80cc

horizon/dashboards/nova/instances_and_volumes/templates/instances_and_volumes/instances/detail.html

@@ -13,22 +13,3 @@
   </div>
 </div>
 {% endblock %}
-
-{% block js %}
-  {{ block.super }}
-  <script type="text/javascript" charset="utf-8">
-    $(document).on('submit', '#tail_length', function (evt) {
-      horizon.instances.user_decided_length = true;
-      horizon.instances.getConsoleLog(this, true);
-
-      evt.preventDefault();
-    });
-
-    setInterval(function() {
-      // Don't poll for something that's not there...
-      if ($("#tail_length").length) {
-        horizon.instances.getConsoleLog($("#tail_length"), false);
-      }
-    }, 10000);
-  </script>
-{% endblock %}

horizon/site_urls.py

@@ -18,6 +18,7 @@
 #    License for the specific language governing permissions and limitations
 #    under the License.
 
+from django.views.generic import TemplateView
 from django.conf.urls.defaults import patterns, url, include
 from django.conf import settings
 
@@ -37,3 +38,9 @@
     url(r'^i18n/setlang/$', 'django.views.i18n.set_language',
         name="set_language"),
     url(r'^i18n/', include('django.conf.urls.i18n')))
+
+if settings.DEBUG:
+    urlpatterns += patterns('',
+        url(r'^qunit/$',
+            TemplateView.as_view(template_name="horizon/qunit.html"),
+            name='qunit_tests'))

horizon/static/horizon/js/horizon.communication.js

@@ -0,0 +1,51 @@
+/* Queued ajax handling for Horizon.
+ *
+ * Note: The number of concurrent AJAX connections hanlded in the queue
+ * can be configured by setting an "ajax_queue_limit" key in
+ * settings.HORIZON_CONFIG to the desired number (or None to disable queue
+ * limiting).
+ */
+horizon.ajax = {
+  // This will be our jQuery queue container.
+  _queue: [],
+  _active: [],
+  get_messages: function (request) {
+    return request.getResponseHeader("X-Horizon-Messages");
+  },
+  // Function to add a new call to the queue.
+  queue: function(opts) {
+    var complete = opts.complete,
+        active = horizon.ajax._active;
+
+    opts.complete = function () {
+      var index = $.inArray(request, active);
+      if (index > -1) {
+        active.splice(index, 1);
+      }
+      horizon.ajax.next();
+      if (complete) {
+        complete.apply(this, arguments);
+      }
+    };
+
+    function request() {
+      return $.ajax(opts);
+    }
+
+    // Queue the request
+    horizon.ajax._queue.push(request);
+
+    // Start up the queue handler in case it's stopped.
+    horizon.ajax.next();
+  },
+  next: function () {
+    var queue = horizon.ajax._queue,
+        limit = horizon.conf.ajax.queue_limit,
+        request;
+    if (queue.length && (!limit || horizon.ajax._active.length < limit)) {
+      request = queue.pop();
+      horizon.ajax._active.push(request);
+      return request();
+    }
+  }
+};

horizon/static/horizon/js/horizon.conf.js

@@ -0,0 +1,31 @@
+horizon.conf = {
+  // Placeholders; updated by Django.
+  debug: null,  //
+  static_url: null,
+  ajax: {
+    queue_limit: null
+  },
+
+  // Config options which may be overridden.
+  spinner_options: {
+    inline: {
+      lines:  10,
+      length: 5,
+      width:  2,
+      radius: 3,
+      color:  '#000',
+      speed:  0.8,
+      trail:  50,
+      zIndex: 100
+    },
+    modal: {
+      lines:  10,
+      length: 15,
+      width:  4,
+      radius: 10,
+      color:  '#000',
+      speed:  0.8,
+      trail:  50
+    }
+  }
+};

horizon/static/horizon/js/horizon.cookies.js

@@ -0,0 +1,23 @@
+/* Convenience functions for dealing with namespaced Horizon cookies. */
+horizon.cookies = {
+  read: function (cookie_name) {
+    // Read in a cookie which contains JSON, and return a parsed object.
+    var cookie = $.cookie("horizon." + cookie_name);
+    if (cookie === null) {
+      return {};
+    }
+    return $.parseJSON(cookie);
+  },
+  write: function (cookie_name, data) {
+    // Overwrites a cookie.
+    $.cookie("horizon." + cookie_name, JSON.stringify(data), {path: "/"});
+  },
+  update: function (cookie_name, key, value) {
+    var data = horizon.cookies.read("horizon." + cookie_name);
+    data[key] = value;
+    horizon.cookies.write(cookie_name, data);
+  },
+  remove: function (cookie_name) {
+    $.cookie("horizon." + cookie_name, null);
+  }
+};

horizon/static/horizon/js/forms.js → horizon/static/horizon/js/horizon.forms.js

@@ -1,3 +1,19 @@
+/* Namespace for core functionality related to Forms. */
+horizon.forms = {
+  handle_source_group: function() {
+    // Delegate this handler to form, so it only should be init once
+    $("form").live("change", "#id_source_group", function(evt) {
+      var $sourceGroup = $(this).find('#id_source_group');
+      var $cidrContainer = $(this).find('#id_cidr').parent().parent();
+      if($sourceGroup.val() === "") {
+        $cidrContainer.removeClass("hide");
+      } else {
+        $cidrContainer.addClass("hide");
+      }
+    });
+  }
+};
+
 horizon.addInitFunction(function () {
   // Disable multiple submissions when launching a form.
   $("form").submit(function () {
@@ -32,7 +48,6 @@ horizon.addInitFunction(function () {
     });
 
   /* Twipsy tooltips */
-
   function getTwipsyTitle() {
     return $(this).closest('div.form-field').children('.help-block').text();
   }
@@ -51,7 +66,6 @@ horizon.addInitFunction(function () {
   // Hide the text for js-capable browsers
   $('span.help-block').hide();
 
-
   // Handle field toggles for the Launch Instance source type field
   function update_launch_source_displayed_fields (field) {
     var $this = $(field),
@@ -99,3 +113,40 @@ horizon.addInitFunction(function () {
   $('.workflow #id_volume_type').change();
 
 });
+
+horizon.addInitFunction(function() {
+  // Update/create image form.
+  $("#image_form input#id_name").example("ami-ubuntu");
+  $("#image_form input#id_kernel").example("123");
+  $("#image_form input#id_ramdisk").example("123");
+  $("#image_form input#id_state").example("available");
+  $("#image_form input#id_location").example("file:///var/lib/glance/images/123");
+  $("#image_form input#id_architecture").example("x86_64");
+  $("#image_form input#id_project_id").example("some");
+  $("#image_form input#id_disk_format").example("ari");
+  $("#image_form input#id_container_format").example("ari");
+  $("#image_form input#id_ramdisk").example("123");
+
+  // Launch instance form.
+  $("#launch_img input#id_name").example("YetAnotherInstance");
+  $("#launch_img input#id_security_groups").example("group1,group2");
+
+  // Create flavor form.
+  $("#flavor_form input#id_flavorid").example("1234");
+  $("#flavor_form input#id_name").example("small");
+  $("#flavor_form input#id_vcpus").example("256");
+  $("#flavor_form input#id_memory_mb").example("256");
+  $("#flavor_form input#id_disk_gb").example("256");
+
+  // Update/create tenant.
+  $("#tenant_form input#id__id").example("YetAnotherTenant");
+  $("#tenant_form textarea#id_description").example("One or two sentence description.");
+
+  // Update/create tenant.
+  $("#user_form input#id_id").example("username");
+  $("#user_form input#id_email").example("email@example.com");
+  $("#user_form input#id_password").example("password");
+
+  // Table search box.
+  $(".table_search input").example("Filter");
+});

horizon/static/horizon/js/horizon.instances.js

@@ -0,0 +1,41 @@
+horizon.instances = {
+  user_decided_length: false,
+
+  getConsoleLog: function(via_user_submit) {
+    var form_element = $("#tail_length"),
+        data;
+
+    if (!via_user_submit) {
+      via_user_submit = false;
+    }
+
+    if(this.user_decided_length) {
+      data = $(form_element).serialize();
+    } else {
+      data = "length=35";
+    }
+
+    $.ajax({
+      url: $(form_element).attr('action'),
+      data: data,
+      method: 'get',
+      success: function(response_body) {
+        $('pre.logs').text(response_body);
+      },
+      error: function(response) {
+        if(via_user_submit) {
+          horizon.clearErrorMessages();
+          horizon.alert('error', 'There was a problem communicating with the server, please try again.');
+        }
+      }
+    });
+  }
+};
+
+horizon.addInitFunction(function () {
+  $(document).on('submit', '#tail_length', function (evt) {
+    horizon.instances.user_decided_length = true;
+    horizon.instances.getConsoleLog(true);
+    evt.preventDefault();
+  });
+});