feature #3718: Show monitoring info in vm info panel

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

@@ -62,6 +62,18 @@ define(function(require) {
     var resched = (parseInt(this.element.RESCHED) ? Locale.tr("yes") : Locale.tr("no"))
     var templateTableHTML = TemplateTable.html(this.element.USER_TEMPLATE, RESOURCE, Locale.tr("Attributes"));
 
+    var monitoring = $.extend({}, this.element.MONITORING);
+    delete monitoring.CPU;
+    delete monitoring.MEMORY;
+    delete monitoring.NETTX;
+    delete monitoring.NETRX;
+    delete monitoring.STATE;
+    delete monitoring.DISK_SIZE;
+    var monitoringTableContentHTML;
+    if (!$.isEmptyObject(monitoring)) {
+      monitoringTableContentHTML = Humanize.prettyPrintJSON(monitoring);
+    }
+
     return TemplateInfo({
       'element': this.element,
       'renameTrHTML': renameTrHTML,
@@ -73,6 +85,7 @@ define(function(require) {
       'resched': resched,
       'permissionsTableHTML': permissionsTableHTML,
       'templateTableHTML': templateTableHTML,
+      'monitoringTableContentHTML': monitoringTableContentHTML,
       'renameTrHTML': renameTrHTML
     });
   }

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

@@ -50,4 +50,20 @@
 </div>
 <div class="row">
 <div class="large-9 columns">{{{templateTableHTML}}}</div>
-</div>
+</div>
+{{#if monitoringTableContentHTML}}
+<div class="row">
+<div class="large-9 columns">
+  <table class="dataTable extended_table">
+    <thead>
+      <tr>
+        <th colspan="2">{{tr "Monitoring"}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {{{monitoringTableContentHTML}}}
+    </tbody>
+  </table>
+</div>
+</div>
+{{/if}}

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

@@ -39,13 +39,20 @@ define(function(require) {
    */
 
   function _html() {
-    return '<div class="row">\
-      <div class="large-12 columns">\
-        <table id="vm_template_table" class="info_table dataTable">' +
+    return '<div class="row">'+
+      '<div class="large-12 columns">'+
+        '<table class="dataTable extended_table">'+
+          '<thead>'+
+            '<tr>'+
+              '<th colspan="2">' + Locale.tr("Template") + '</th>'+
+            '</tr>'+
+          '</thead>'+
+          '<tbody>'+
             Humanize.prettyPrintJSON(this.element.TEMPLATE) +
-        '</table>\
-      </div>\
-    </div>'
+          '</tbody>'+
+        '</table>'+
+      '</div>'+
+    '</div>'
   }
 
   function _setup(context) {

src/sunstone/public/app/utils/humanize.js

@@ -147,9 +147,9 @@ define(function(require) {
     var str = ""
     if (!template_json) { return "Not defined";}
     if (!padding) {padding = 10};
-    if (!weight) {weight = "bold";}
-    if (!border_bottom) {border_bottom = "1px solid #efefef";}
-    if (!padding_top_bottom) {padding_top_bottom = 6;}
+    if (!weight) {weight = "none";}
+    if (!border_bottom) {border_bottom = "0px solid #efefef";}
+    if (!padding_top_bottom) {padding_top_bottom = 5;}
     var field = null;
 
     if (template_json.constructor == Array) {

src/sunstone/public/scss/app.scss

@@ -321,10 +321,11 @@ select {
 .value_td {
     text-overflow:ellipsis;
     word-break: break-all;
+    width: 100%;
 }
 
 .key_td {
-  color: #777 !important;
+  color: #999 !important;
 }
 
 .configuration_attrs {