ui: Error view overlay improvements

additionally display api error message when provided in the error response
object.

snf-cyclades-app/synnefo/ui/static/snf/css/main.css

@@ -4938,6 +4938,11 @@ table.list-machines .wave {
     font-size: 0.8em;
 }
 
+.overlay-error .message p .api-message {
+  color: #444;
+  font-size: 0.9em;
+}
+
 .overlay-error span.value, .overlay-error div.value {
     padding: 0.4em;
     display: block;

snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_error_view.js

@@ -121,6 +121,7 @@
                 "Code: " + this.code + "\n" + 
                 "Type: " + this.type + "\n" +
                 "Message: " + this.message + "\n" +
+                "API Message: " + this.api_message + "\n" +
                 "Module: " + this.ns + "\n" +
                 "Details: " + this.details + "\n\n" +
                 "Please describe the actions that triggered the error:\n"
@@ -128,9 +129,9 @@
             return fdb_msg;
         },
         
-        show_error: function(ns, code, message, type, details, error_options) {
+        show_error: function(ns, code, message, api_message, type, details, error_options) {
             
-            var error_entry = [ns, code, message, type, details, error_options];
+            var error_entry = [ns, code, message, api_message, type, details, error_options];
             var last_error_key = this.update_errors_stack(error_entry);
             
             if (!this.is_visible && !this.displaying_error) {
@@ -196,7 +197,9 @@
 
         display_error: function(stack_key) {
             var err = this.error_stack[stack_key];
-            var ns = err[0], code = err[1], message = err[2], type = err[3], details = err[4], error_options = err[5]
+            var ns = err[0], code = err[1], message = err[2];
+            var api_message = err[3], type = err[4];
+            var details = err[5], error_options = err[6];
 
             this.error_options = {'allow_report': true, 'allow_reload': true, 
                 'extra_details': {}, 'non_critical': false, 
@@ -212,7 +215,8 @@
             this.type = type;
             this.details = details ? (details.toString ? details.toString() : details) : undefined;
             this.message = message;
-            this.title = error_options.title || undefined;
+            this.api_message = api_message;
+            this.title = _.escape(error_options.title) || undefined;
 
             this.update_details();
             
@@ -244,7 +248,14 @@
             this.$(".error-code").text(this.code || "");
             this.$(".error-type").text(this.type || "");
             this.$(".error-module").text(this.ns || "");
-            this.$(".message p").text(this.message || "");
+            if (this.api_message) {
+              this.$(".message p").html($(
+                "<span>{0}</span><br /><span class='api-message'>{1}</span>".format(
+                _.escape(this.message), 
+                _.escape(this.api_message))));
+            } else {
+              this.$(".message p").text(this.message || "");
+            }
             this.$(".error-more-details p").html($("<pre />", {text:this.details}) || "no info");
 
             this.$(".extra-details").remove();

snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_icon_view.js

@@ -108,7 +108,7 @@
             // force logout if UNAUTHORIZED request arrives
             if (args.code == 401) { snf.ui.logout(); return };
             
-            var error_entry = [args.ns, args.code, args.message, args.type, args.details, args];
+            var error_entry = [args.ns, args.code, args.message, '', args.type, args.details, args];
             ui.main.error_view.show_error.apply(ui.main.error_view, error_entry);
         },
 

snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_main_view.js

@@ -678,7 +678,9 @@
             // force logout if UNAUTHORIZED request arrives
             if (args.code == 401) { snf.auth_client.redirect_to_login(); return };
 
-            var error_entry = [args.ns, args.code, args.message, args.type, args.details, args];
+            var error_entry = [args.ns, args.code, args.message, 
+                               args.api_message, args.type, 
+                               args.details, args];
             this.error_view.show_error.apply(this.error_view, error_entry);
         },
 
@@ -688,7 +690,8 @@
             params = { title: "UI error", extra_details: data.extra };
             delete data.extra.allow_close;
             params.allow_close = data.extra.allow_close === undefined ? true : data.extra.allow_close;
-            this.error_view.show_error("UI", -1, msg, "JS Exception", error, params);
+            this.error_view.show_error("UI", -1, msg, undefined, 
+                                       "JS Exception", error, params);
         },
 
         init_overlays: function() {

snf-cyclades-app/synnefo/ui/static/snf/js/utils.js

@@ -575,6 +575,8 @@
         options = _.extend(options, synnefo.i18n.API_ERROR_MESSAGES[error_message] || {});
         options = _.extend(options, synnefo.i18n.API_ERROR_MESSAGES[code] || {});
         
+        options.api_message = options.message;
+
         if (window.ERROR_OVERRIDES && window.ERROR_OVERRIDES[options.message]) {
             options.message = window.ERROR_OVERRIDES[options.message];
         }
@@ -582,7 +584,10 @@
         if (code && window.ERROR_OVERRIDES && window.ERROR_OVERRIDES[code]) {
             options.message = window.ERROR_OVERRIDES[code];
         }
-
+        
+        if (options.api_message == options.message) {
+          options.api_message = '';
+        }
         options = _.extend(defaults, options);
         options.code = code;