AMBARI-8971. Alerts UI: display Maint Mode status. (akovalenko)

ambari-web/app/models/alert_instance.js

@@ -42,9 +42,12 @@ App.AlertInstance = DS.Model.extend({
    * @type {string}
    */
   status: function () {
+    var isMaintenanceStateOn = this.get('maintenanceState') === 'ON';
     var state = this.get('state');
+    var stateClass = isMaintenanceStateOn ? 'PENDING' : state;
     var shortState = this.get('shortState')[state];
-    return '<span class="label alert-state-single-host alert-state-' + state + '">' + shortState + '</span>';
+    var maintenanceIcon = isMaintenanceStateOn ? '<span class="icon-medkit"></span> ' : '';
+    return '<div class="label alert-state-single-host alert-state-' + stateClass + '">' + maintenanceIcon + shortState + '</div>';
   }.property('state'),
 
   /**

ambari-web/app/styles/alerts.less

@@ -45,6 +45,7 @@
   display: inline-block;
   width: 70px;
   text-align: center;
+  line-height: 20px;
 }
 
 .groups-filter {

ambari-web/test/models/alert_instance_test.js

@@ -85,5 +85,29 @@ describe('App.AlertInstance', function () {
     });
 
   });
-  
+
+  describe('#status', function () {
+
+    it('should show maint mode icon', function () {
+
+      model.set('maintenanceState', 'ON');
+      model.set('state', 'OK');
+      var status = model.get('status');
+
+      expect(status).to.equal('<div class="label alert-state-single-host alert-state-PENDING"><span class="icon-medkit"></span> OK</div>');
+
+    });
+
+    it('should not show maint mode icon', function () {
+
+      model.set('maintenanceState', 'OFF');
+      model.set('state', 'OK');
+      var status = model.get('status');
+
+      expect(status).to.equal('<div class="label alert-state-single-host alert-state-OK">OK</div>');
+
+    });
+
+  });
+
 });