F #5745: present error information in Sunstone (#1814)

src/sunstone/public/app/sunstone/panels.hbs

@@ -15,6 +15,7 @@
 {{! -------------------------------------------------------------------------- }}
 
 <div id="{{containerId}}">
+  <div id="{{containerId}}Errors"></div>
   <ul id="{{containerId}}Tabs" class="tabs sunstone-info-tabs text-center" data-tabs>
     {{#each panels}}
     <li class="{{class}} tabs-title {{#if active}}is-active{{/if}}">

src/sunstone/public/app/tabs/vms-tab/panels/info.js

@@ -71,6 +71,7 @@ define(function(require) {
    */
 
   function _html() {
+    var that = this;
     var renameTrHTML = RenameTr.html(TAB_ID, RESOURCE, this.element.NAME);
     var permissionsTableHTML = PermissionsTable.html(TAB_ID, RESOURCE, this.element);
     var prettyStartTime = Humanize.prettyTime(this.element.STIME);
@@ -124,7 +125,8 @@ define(function(require) {
               error_msg: this.element.USER_TEMPLATE.ERROR,
               error_title: Locale.tr("Driver Error"),
               canDismiss: true,
-              dismissId: "close_vm_async_error"
+              dismissId: "close_vm_async_error",
+              size: 12
             }
           );
     }
@@ -137,7 +139,8 @@ define(function(require) {
               error_msg: this.element.USER_TEMPLATE.SCHED_MESSAGE,
               error_title: Locale.tr("Scheduler Error"),
               canDismiss: true,
-              dismissId: "close_vm_scheduler_async_error"
+              dismissId: "close_vm_scheduler_async_error",
+              size: 12
             }
           );
     }
@@ -155,12 +158,15 @@ define(function(require) {
                 error_msg: lastErrorAndId.error,
                 error_title: Locale.tr("Scheduled Action Error") + " (ID: #" + lastErrorAndId.id + ")",
                 canDismiss: false,
-                dismissId: ""
+                dismissId: "",
+                size: 12
               }
             );
           }
     }
 
+    that.errorMessageHTML = errorMessageHTML;
+
     return TemplateInfo({
       "element": this.element,
       "renameTrHTML": renameTrHTML,
@@ -178,8 +184,7 @@ define(function(require) {
       "templateTableVcenterHTML": templateTableVcenterHTML,
       "templateTableHTML": templateTableHTML,
       "monitoringTableContentHTML": monitoringTableContentHTML,
-      "vrouterHTML": vrouterHTML,
-      "errorMessageHTML": errorMessageHTML
+      "vrouterHTML": vrouterHTML
     });
   }
 
@@ -247,5 +252,7 @@ define(function(require) {
     } else {
       $("button[href=\"VM.upload_marketplace_dialog\"]").removeAttr("disabled");
     }
+
+    $("#vms-tab-panelsErrors", context).html(that.errorMessageHTML);
   }
 });

src/sunstone/public/app/tabs/vms-tab/panels/info/html.hbs

@@ -105,7 +105,6 @@
 </div>
 <div class="large-6 columns">{{{permissionsTableHTML}}}</div>
 </div>
-{{{errorMessageHTML}}}
 {{#isFeatureEnabled "show_attributes_info"}}
   <div class="row vcenter">
   <div class="large-9 columns">{{{templateTableVcenterHTML}}}</div>

src/sunstone/public/app/tabs/vms-tab/utils/datatable-common.js

@@ -237,6 +237,8 @@ define(function(require) {
 
     var color_html = Status.state_lock_to_color("VM", value_state, element_json[RESOURCE.toUpperCase()]["LOCK"]);
 
+    var vm_name = element.USER_TEMPLATE.ERROR || element.USER_TEMPLATE.SCHED_MESSAGE ?  "<span class='warning-message'><i class='fas fa-exclamation-triangle'></i></span> " + element.NAME : element.NAME;
+
     return [
       "<input class=\"check_item\" "+
         "style=\"vertical-align: inherit;\""+
@@ -246,7 +248,7 @@ define(function(require) {
         "value=\"" + element.ID + "\" "+
         "state=\""+element.STATE+"\" lcm_state=\""+element.LCM_STATE+"\"/>"+color_html,
       element.ID,
-      element.NAME,
+      vm_name,
       element.UNAME,
       element.GNAME,
       state,

src/sunstone/public/app/utils/info-error/html.hbs

@@ -15,7 +15,7 @@
 {{! -------------------------------------------------------------------------- }}
 
 <div class='row'>
-    <div class='large-9 columns'>
+    <div class='large-{{#if size}}{{size}}{{else}}9{{/if}} columns'>
         <div class='callout warning warning-message' style='border-radius: .5em;' data-closable>
             <div class='row'>
                 <div class='columns large-1'>