AMBARI-8516. Alerts UI: Alert-definition instance counts should be displayed consistently.(xiwang)

ambari-web/app/models/alert_definition.js

@@ -74,21 +74,38 @@ App.AlertDefinition = DS.Model.extend({
 
   /**
    * Status generates from child-alerts
-   * Format: 1 OK / 2 WARN / 1 CRIT / 1 UNKNOWN
+   * Format: OK(1)  WARN(2)  CRIT(1)  UNKN(1)
+   * If single host: show: OK/WARNING/CRITICAL/UNKNOWN
    * If some there are no alerts with some state, this state isn't shown
+   * If no OK/WARN/CRIT/UNKN state, then show PENDING
    * Order is equal to example
    * @type {string}
    */
   status: function () {
-    var typeIcons = this.get('typeIcons'),
-        order = this.get('order'),
-        summary = this.get('summary');
-    return order.map(function (state) {
-      if (summary[state]) {
-        return summary[state] + ' <span class="' + typeIcons[state] + ' alert-state-' + state + '"></span>';
-      }
-      return null;
-    }).compact().join(' / ');
+    var order = this.get('order'),
+        summary = this.get('summary'),
+        hostCnt = 0;
+    order.forEach(function(state) {
+      var cnt = summary[state] ? summary[state] : 0;
+      hostCnt += cnt;
+    });
+    if (hostCnt > 1) {
+      // multiple hosts
+      return order.map(function (state) {
+        var shortState = state.substring(0, 4);
+        return summary[state] ? '<span class="label alert-state-' + state + '">' + shortState + ' ( ' + summary[state] + ' )</span>' : null;
+      }).compact().join(' ');
+    } else if (hostCnt == 1) {
+      // single host, single status
+      return order.map(function (state) {
+        return summary[state] ? '<span class="alert-state-single-host label alert-state-'+ state + '">' + state + '</span>' : null;
+      }).compact().join(' ');
+    } else if (hostCnt == 0) {
+      // penging
+      var state = 'PENDING';
+      return '<span class="alert-state-single-host label alert-state-'+ state + '">' + state + '</span>';
+    }
+    return null;
   }.property('summary'),
 
   /**
@@ -124,11 +141,7 @@ App.AlertDefinition = DS.Model.extend({
    * @type {object}
    */
   typeIcons: {
-    'OK': 'icon-ok-sign',
-    'WARNING': 'icon-warning-sign',
-    'CRITICAL': 'icon-remove',
-    'DISABLED': 'icon-off',
-    'UNKNOWN': 'icon-question-sign'
+    'DISABLED': 'icon-off'
   },
 
   /**

ambari-web/app/models/alert_instance.js

@@ -45,9 +45,8 @@ App.AlertInstance = DS.Model.extend({
    * @type {App.AlertDefinition[]}
    */
   status: function () {
-    var typeIcons = this.get('typeIcons');
     var state = this.get('state');
-    return '<span class="' + typeIcons[state] + ' alert-state-' + state + '"></span>';
+    return '<span class="label alert-state-single-host alert-state-' + state + '">' + state + '</span>';
   }.property('state'),
 
   /**
@@ -72,11 +71,7 @@ App.AlertInstance = DS.Model.extend({
    * @type {object}
    */
   typeIcons: {
-    'OK': 'icon-ok-sign',
-    'WARNING': 'icon-warning-sign',
-    'CRITICAL': 'icon-remove',
-    'DISABLED': 'icon-off',
-    'UNKNOWN': 'icon-question-sign'
+    'DISABLED': 'icon-off'
   }
 });
 

ambari-web/app/styles/alerts.less

@@ -18,15 +18,15 @@
 @import 'common.less';
 
 .alert-state-OK {
-  color: @health-status-green;
+  background-color: @health-status-green;
 }
 
 .alert-state-WARNING {
-  color: @health-status-red;
+  background-color: @health-status-orange;
 }
 
 .alert-state-CRITICAL {
-  color: @health-status-red;
+  background-color: @health-status-red;
 }
 
 .alert-state-DISABLED {
@@ -34,7 +34,17 @@
 }
 
 .alert-state-UNKNOWN {
-  color: @health-status-yellow;
+  background-color: @health-status-yellow;
+}
+
+.alert-state-PENDING {
+  background-color: #999;
+}
+
+.alert-state-single-host {
+  display: inline-block;
+  width: 70px;
+  text-align: center;
 }
 
 .groups-filter {
@@ -160,7 +170,10 @@
   .status {
     margin-bottom: 30px;
     text-align: center;
-    font-size: 20px;
+    .label {
+      font-size: 14px;
+      padding: 5px 8px;
+    }
   }
 
   .right-column {
@@ -387,7 +400,7 @@
       .status-icon {
         padding-left: 5px;
         float: left;
-        width: 5%;
+        width: 10%;
         min-width: 20px;
       }
       .name-text {

ambari-web/app/templates/main/alerts/configs/alert_config_threshold.hbs

@@ -16,9 +16,15 @@
 * limitations under the License.
 }}
 
-<span class="icon-ok-sign alert-state-OK"></span>
-{{view Em.TextField valueBinding="view.property.from" disabledBinding="view.property.isDisabled" class="span2"}}
-<span class="icon-warning-sign alert-state-WARNING"></span>
-{{view Em.TextField valueBinding="view.property.to" disabledBinding="view.property.isDisabled" class="span2"}}
-<span class="icon-remove-sign alert-state-CRITICAL"></span>
+<div class="control-group">
+ <span class="alert-state-single-host label alert-state-WARNING">WARNING</span>&nbsp;
+ {{view Em.TextField valueBinding="view.property.from" disabledBinding="view.property.isDisabled" class="span2"}}
+</div>
+
+<div>
+ <span class="alert-state-single-host label alert-state-CRITICAL">CRITICAL</span>&nbsp;
+ {{view Em.TextField valueBinding="view.property.to" disabledBinding="view.property.isDisabled" class="span2"}}
+</div>
+
+
 

ambari-web/test/models/alert_definition_test.js

@@ -36,17 +36,27 @@ describe('App.AlertDefinition', function() {
       {
         summary: {OK: 1, UNKNOWN: 1, WARNING: 2},
         m: 'No CRITICAL',
-        e: '1 <span class="icon-ok-sign alert-state-OK"></span> / ' +
-          '2 <span class="icon-warning-sign alert-state-WARNING"></span> / ' +
-          '1 <span class="icon-question-sign alert-state-UNKNOWN"></span>'
+        e: '<span class="label alert-state-OK">OK ( 1 )</span> ' +
+          '<span class="label alert-state-WARNING">WARN ( 2 )</span> ' +
+          '<span class="label alert-state-UNKNOWN">UNKN ( 1 )</span>'
       },
       {
         summary: {WARNING: 2, CRITICAL: 3, UNKNOWN: 1, OK: 1},
         m: 'All states exists',
-        e: '1 <span class="icon-ok-sign alert-state-OK"></span> / ' +
-          '2 <span class="icon-warning-sign alert-state-WARNING"></span> / ' +
-          '3 <span class="icon-remove alert-state-CRITICAL"></span> / ' +
-          '1 <span class="icon-question-sign alert-state-UNKNOWN"></span>'
+        e: '<span class="label alert-state-OK">OK ( 1 )</span> ' +
+          '<span class="label alert-state-WARNING">WARN ( 2 )</span> ' +
+          '<span class="label alert-state-CRITICAL">CRIT ( 3 )</span> ' +
+          '<span class="label alert-state-UNKNOWN">UNKN ( 1 )</span>'
+      },
+      {
+        summary: {OK: 1},
+        m: 'Single host',
+        e: '<span class="alert-state-single-host label alert-state-OK">OK</span>'
+      },
+      {
+        summary: {},
+        m: 'Pending',
+        e: '<span class="alert-state-single-host label alert-state-PENDING">PENDING</span>'
       }
     ]).forEach(function(test) {
         it(test.m, function() {