Added AJAX updating error handling.

  * Splits the AJAX complete method into complete, success, and error.
  * Cleans up 404 (e.g. gone/deleted) handling.
  * Adds 5XX error handling.
  * Adds client-side alert message templating.
  * Adds client-side conf (debug and static_url) loaded from backend.

Fixes bug 957461.

Change-Id: I5114430d35e2d20603e817651540b2db1f8a4d07

horizon/static/horizon/js/horizon.js

@@ -47,7 +47,7 @@ var Horizon = function() {
       $("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() == "") {
+        if($sourceGroup.val() === "") {
           $cidrContainer.removeClass("hide");
         } else {
           $cidrContainer.addClass("hide");
@@ -78,39 +78,59 @@ var Horizon = function() {
           var $row = $(this),
               $table = $row.closest('table');
           $.ajax($row.attr('data-update-url'), {
-            complete: function (jqXHR, status) {
-              var $new_row = $(jqXHR.responseText);
+            error: function (jqXHR, textStatus, errorThrown) {
+              switch (jqXHR.status) {
+                // A 404 indicates the object is gone, and should be removed from the table
+                case 404:
+                  // Update the footer count and reset to default empty row if needed
+                  var $footer = $table.find('tr:last'),
+                      row_count, footer_text, colspan, template, params, $empty_row;
+
+                  // existing count minus one for the row we're removing
+                  row_count = $table.find('tbody tr').length - 1;
+                  footer_text = "Displaying " + row_count + " item";
+                  if(row_count !== 1) {
+                      footer_text += 's';
+                  }
+                  $footer.find('span').text(footer_text);
+
+                  if(row_count === 0) {
+                    colspan = $footer.find('td').attr('colspan');
+                    template = horizon.templates.compiled_templates["#empty_row_template"];
+                    console.log(template);
+                    params = {"colspan": colspan};
+                    empty_row = template.render(params);
+                    console.log(empty_row);
+                    $row.replaceWith(empty_row);
+                  } else {
+                    $row.remove();
+                  }
+                  break;
+                default:
+                  if (horizon.conf.debug) {
+                    horizon.alert("error", "An error occurred while updating.");
+                  }
+                  $row.removeClass("ajax-update");
+                  $row.find("i.ajax-updating").remove();
+                  break;
+              }
+            },
+            success: function (data, textStatus, jqXHR) {
+              var $new_row = $(data);
               $new_row.find("td.status_unknown").prepend('<i class="icon-updating ajax-updating"></i>');
               // Only replace row if the html content has changed
               if($new_row.html() != $row.html()) {
                 if($row.find(':checkbox').is(':checked')) {
                   // Preserve the checkbox if it's already clicked
                   $new_row.find(':checkbox').prop('checked', true);
                 }
-                if($new_row.length == 0) {
-                  // Update the footer count and reset to default empty row if needed
-                  var $footer = $table.find('tr:last');
-
-                  // remove one row from existing count
-                  var row_count = $table.find('tbody tr').length -1;
-                  var footer_text = "Displaying " + row_count + " item";
-
-                  if(row_count > 1) { footer_text += 's'; }
-                  $footer.find('span').text(footer_text);
-
-                  if(row_count == 0) {
-                    var colspan = $footer.find('td').attr('colspan'),
-                        template = horizon.templates.compiled_templates["#empty_row_template"],
-                        params = {colspan: colspan},
-                        empty_row = $(template.render(params));
-
-                    $new_row = $(empty_row);
-                  }
-                }
                 $row.replaceWith($new_row);
-                $table.removeAttr('decay_constant');
               }
-              // Revalidate the button check for updated table
+            },
+            complete: function (jqXHR, textStatus) {
+              // Reset decay constant.
+              $table.removeAttr('decay_constant');
+              // Revalidate the button check for the updated table
               horizon.datatables.validate_button();
             }
           });
@@ -130,6 +150,7 @@ var Horizon = function() {
         setTimeout(horizon.datatables.update, next_poll);
       }
     },
+
     validate_button: function () {
       // Disable form button if checkbox are not checked
       $("form").each(function (i) {
@@ -189,7 +210,7 @@ var Horizon = function() {
 
   /* Namespace for core functionality related to client-side templating. */
   horizon.templates = {
-    template_ids: ["#modal_template", "#empty_row_template"],
+    template_ids: ["#modal_template", "#empty_row_template", "#alert_message_template"],
     compiled_templates: {}
   };
 
@@ -214,6 +235,21 @@ var Horizon = function() {
     return modal;
   };
 
+  /* Utilities for common needs which aren't JS builtins. */
+  horizon.utils = {
+    capitalize: function(string) {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+    }
+  };
+
+  horizon.alert = function (type, message) {
+    var template = horizon.templates.compiled_templates["#alert_message_template"],
+        params = {"type": type,
+                  "type_capitalized": horizon.utils.capitalize(type),
+                  "message": message};
+    return $(template.render(params)).prependTo("#main_content .messages");
+  };
+
   return horizon;
 };
 

horizon/static/horizon/js/plugins.js

@@ -10,7 +10,7 @@
     }, opt);
 
     $(this).bind(options.trigger, function(e) {
-      options.container.find( options.selector + $(this).attr(options.retrieve) ).toggleClass(options.selected_class)
+      options.container.find( options.selector + $(this).attr(options.retrieve) ).toggleClass(options.selected_class);
     });
   };
 } (jQuery, this, document));

horizon/templates/horizon/_messages.html

@@ -1,4 +1,5 @@
 {% load i18n %}
+<div class="messages">
 {% for message in messages %}
   {% if "info" in message.tags %}
     <div class="alert alert-block alert-info fade in">
@@ -25,3 +26,4 @@
     </div>
   {% endif %}
 {% endfor %}
+</div>

horizon/templates/horizon/client_side/_alert_message.html

@@ -0,0 +1,13 @@
+{% extends "horizon/client_side/template.html" %}
+{% load horizon %}
+
+{% block id %}alert_message_template{% endblock %}
+
+{% block template %}
+{% jstemplate %}
+<div class="alert alert-block fade in alert-[[type]]">
+  <a class="close" data-dismiss="alert" href="#">&times;</a>
+  <p><strong>[[type_capitalized]]: </strong>[[message]]</p>
+</div>
+{% endjstemplate %}
+{% endblock %}

horizon/templates/horizon/client_side/conf.html

@@ -0,0 +1,9 @@
+<script type='text/javascript' charset='utf-8'>
+/* Storage for backend configuration variables which the frontend
+ * should be aware of.
+ */
+horizon.conf = {
+    debug: {{ debug|yesno:"true,false" }},
+    static_url: "{{ STATIC_URL }}"
+}
+</script>

horizon/templates/horizon/client_side/templates.html

@@ -0,0 +1,3 @@
+{% include "horizon/client_side/_modal.html" %}
+{% include "horizon/client_side/_table_row.html" %}
+{% include "horizon/client_side/_alert_message.html" %}

openstack_dashboard/templates/_scripts.html

@@ -12,9 +12,13 @@
 
 {% comment %} Horizon-specific JS {% endcomment %}
 <script src='{{ STATIC_URL }}horizon/js/horizon.js' type='text/javascript' charset='utf-8'></script>
+{% include "horizon/client_side/conf.html" %}
 <script src='{{ STATIC_URL }}horizon/js/tabs.js' type='text/javascript' charset='utf-8'></script>
 <script src='{{ STATIC_URL }}horizon/js/plugins.js' type='text/javascript' charset='utf-8'></script>
 <script src='{{ STATIC_URL }}horizon/js/tables.js' type='text/javascript' charset='utf-8'></script>
 <script src='{{ STATIC_URL }}horizon/js/modals.js' type='text/javascript' charset='utf-8'></script>
 <script src='{{ STATIC_URL }}horizon/js/forms.js' type='text/javascript' charset='utf-8'></script>
 <script src='{{ STATIC_URL }}horizon/js/form_examples.js' type='text/javascript' charset='utf-8'></script>
+
+{% comment %} Client-side Templates {% endcomment %}
+{% include "horizon/client_side/templates.html" %}

openstack_dashboard/templates/base.html

@@ -26,8 +26,6 @@
     </div>
     {% block js %}
       {% include "_scripts.html" %}
-      {% include "horizon/client_side/_modal.html" %}
-      {% include "horizon/client_side/_table_row.html" %}
     {% endblock %}
   </body>
 </html>