webui: better error reporting

On page:
- styled to use proper line breaks
- "centered" by .container class and not by huge padding

Console:
- proper line breaks
- links in stack trace are clickable(Chrome)

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>

2 files changed, 14 insertions, 12 deletions

diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index 2e70a1adc..e02e282e3 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -189,7 +189,6 @@ div[name=settings].facet-group li a {
 /* --- Facet error --- */
 
 .facet-error {
-    padding: 2em 15em;
     background-color: white;
 }
 
@@ -199,7 +198,10 @@ div[name=settings].facet-group li a {
 
 .facet-error .error-details {
     margin-top: 2em;
-    font-family: monospace;
+}
+
+.facet-error .error-details code {
+    white-space: pre;
 }
 
 /* ---- Search Facet ---- */
diff --git a/install/ui/src/freeipa/Application_controller.js b/install/ui/src/freeipa/Application_controller.js
index bb9d68457..094bd3da7 100644
--- a/install/ui/src/freeipa/Application_controller.js
+++ b/install/ui/src/freeipa/Application_controller.js
@@ -247,26 +247,26 @@ define([
 
         on_phase_error: function(error) {
 
-            window.console.error(error);
             error = error || {};
             var name = error.name || 'Runtime error';
             var error_container = $('<div/>', {
-                'class': 'facet-content facet-error'
-            }).appendTo($('.content').empty());
+                'class': 'container facet-content facet-error'
+            }).appendTo($('.app-container .content').empty());
             error_container.append('<h1>'+name+'</h1>');
             var details = $('<div/>', {
                 'class': 'error-details'
             }).appendTo(error_container);
 
             details.append('<p> Web UI got in unrecoverable state during "'+error.phase+'" phase.</p>');
-
+            if (error.name) window.console.error(error.name);
             if (error.results) {
-                var msg = {
-                    message: error.results.message,
-                    stack: error.results.stack
-                };
-                details.append('<strong>Technical details:</strong>');
-                details.append('<p>'+JSON.stringify(msg)+'</p>');
+                var msg = error.results.message;
+                var stack = error.results.stack.toString();
+                window.console.error(msg);
+                window.console.error(stack);
+                details.append('<h3>Technical details:</h3>');
+                details.append($('<div/>', { text: error.results.message }));
+                details.append($('<div/>').append($('<code/>', { text: stack })));
             }
         },