AMBARI-10674. Content shown in widgets must be confined to the widget space.(xiwang)

ambari-web/app/styles/enhanced_service_dashboard.less

@@ -79,12 +79,17 @@
       color: @health-status-green;
       font-weight: bold;
       font-size: 35px;
+      width: 95%;
+      position: absolute;
     }
     .template-widget,
     .number-widget {
       .frame;
       .content {
         padding-top: 70px;
+        height: 50px;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
     .graph-widget {
@@ -115,6 +120,9 @@
     .green {
       color: @health-status-green;
     }
+    .grey {
+      color: #D6DDDF;
+    }
   }
 }
 

ambari-web/app/templates/common/widget/number_widget.hbs

@@ -28,7 +28,7 @@
     <a class="corner-icon pull-right" href="#" {{action editWidget target="view"}}>
       <i class="icon-edit"></i>
     </a>
-    <div {{bindAttr class="view.contentColor :content"}}>{{view.value}}</div>
+    <div {{bindAttr class="view.contentColor :content"}}>{{view.displayValue}}</div>
   {{else}}
     <div class="spinner"></div>
   {{/if}}

ambari-web/app/views/common/widget/gauge_widget_view.js

@@ -73,8 +73,8 @@ App.GaugeWidgetView = Em.View.extend(App.WidgetMixin, {
 
     data: function () {
       var data = parseFloat(this.get('parentView.value')) * this.get('FACTOR');
-      if (isNaN(data)) return [0, this.get('MAX_VALUE')];
-      return [data, this.get('MAX_VALUE') - data];
+      if (isNaN(data) || data > this.get('MAX_VALUE')) return [0, this.get('MAX_VALUE')];
+      return [data.toFixed(0), this.get('MAX_VALUE') - data.toFixed(0)];
     }.property('parentView.value'),
 
     contentColor: function () {

ambari-web/app/views/common/widget/number_widget_view.js

@@ -26,6 +26,14 @@ App.NumberWidgetView = Em.View.extend(App.WidgetMixin, {
    */
   value: '',
 
+  displayValue: function () {
+    var value = parseFloat(this.get('value'));
+    if (isNaN(value)) return Em.I18n.t('common.na');
+    var value = value % 1 != 0? value.toFixed(2): value;
+    var unit = this.get('content.properties.display_unit')? this.get('content.properties.display_unit'): '';
+    return value + unit;
+  }.property('value'),
+
   /**
    * common metrics container
    * @type {Array}
@@ -41,7 +49,9 @@ App.NumberWidgetView = Em.View.extend(App.WidgetMixin, {
     var warningThreshold = parseFloat(this.get('content.properties.warning_threshold'));
     var errorThreshold = parseFloat(this.get('content.properties.error_threshold'));
 
-    if (isNaN(warningThreshold) || isNaN(errorThreshold) || value <= warningThreshold) {
+    if (isNaN(value)) {
+      return 'grey';
+    } else if (isNaN(warningThreshold) || isNaN(errorThreshold) || value <= warningThreshold) {
       return 'green';
     } else if (value <= errorThreshold) {
       return 'orange';