AMBARI-8534. Alerts UI: Alert Definition details page has multiple issues. (akovalenko)

ambari-web/app/assets/data/alerts/alert_instances_history.json

@@ -0,0 +1,38 @@
+{
+  "href" : "http://c6401.ambari.apache.org:8080/api/v1/clusters/c/alert_history?(AlertHistory/definition_name=datanode_storage)&(AlertHistory/timestamp%3E=1414972800)",
+  "items" : [
+    {
+      "href" : "http://c6401.ambari.apache.org:8080/api/v1/clusters/c/alert_history/23",
+      "AlertHistory" : {
+        "cluster_name" : "c",
+        "definition_name" : "datanode_storage",
+        "host_name" : "c6403.ambari.apache.org",
+        "id" : 23,
+        "service_name" : "HDFS",
+        "timestamp" : 1417190593254
+      }
+    },
+    {
+      "href" : "http://c6401.ambari.apache.org:8080/api/v1/clusters/c/alert_history/35",
+      "AlertHistory" : {
+        "cluster_name" : "c",
+        "definition_name" : "datanode_storage",
+        "host_name" : "c6403.ambari.apache.org",
+        "id" : 35,
+        "service_name" : "HDFS",
+        "timestamp" : 1417190953163
+      }
+    },
+    {
+      "href" : "http://c6401.ambari.apache.org:8080/api/v1/clusters/c/alert_history/79",
+      "AlertHistory" : {
+        "cluster_name" : "c",
+        "definition_name" : "datanode_storage",
+        "host_name" : "c6403.ambari.apache.org",
+        "id" : 79,
+        "service_name" : "HDFS",
+        "timestamp" : 1417434160990
+      }
+    }
+  ]
+}

ambari-web/app/controllers/main/alerts/definition_details_controller.js

@@ -22,7 +22,7 @@ App.MainAlertDefinitionDetailsController = Em.Controller.extend({
 
   alerts: function () {
     return App.AlertInstance.find().toArray()
-      .filterProperty('definitionId', this.get('content.id'));
+        .filterProperty('definitionId', this.get('content.id'));
   }.property('App.router.mainAlertInstancesController.isLoaded'),
 
   // stores object with editing form data (label, description, thresholds)
@@ -45,6 +45,20 @@ App.MainAlertDefinitionDetailsController = Em.Controller.extend({
     })
   }),
 
+  /**
+   * Host to count of alerts on this host during last day map
+   * @type {Object}
+   */
+  lastDayAlertsCount: null,
+
+  /**
+   * List of all group names related to alert definition
+   * @type {Array}
+   */
+  groupsList: function () {
+    return this.get('content.groups').mapProperty('displayName');
+  }.property('content.groups.@each'),
+
   /**
    * Validation function to define if label field populated correctly
    * @method labelValidation
@@ -66,9 +80,43 @@ App.MainAlertDefinitionDetailsController = Em.Controller.extend({
    * Start updating loaded data
    * @method loadAlertInstances
    */
-  loadAlertInstances: function() {
+  loadAlertInstances: function () {
     App.router.get('mainAlertInstancesController').loadAlertInstancesByAlertDefinition(this.get('content.id'));
     App.router.set('mainAlertInstancesController.isUpdating', true);
+    this.loadAlertInstancesHistory();
+  },
+
+  /**
+   * Load alert instances history data
+   * used to count instances number of the last 24 hour
+   * @method loadAlertInstancesHistory
+   */
+  loadAlertInstancesHistory: function () {
+    this.set('lastDayAlertsCount', null);
+    return App.ajax.send({
+      name: 'alerts.get_instances_history',
+      sender: this,
+      data: {
+        definitionName: this.get('content.name'),
+        timestamp: App.dateTime() - 86400000 // timestamp for time 24-hours ago
+      },
+      success: 'loadAlertInstancesHistorySuccess'
+    });
+  },
+
+  /**
+   * Success-callback for <code>loadAlertInstancesHistory</code>
+   */
+  loadAlertInstancesHistorySuccess: function (data) {
+    var lastDayAlertsCount = {};
+    data.items.forEach(function (alert) {
+      if (!lastDayAlertsCount[alert.AlertHistory.host_name]) {
+        lastDayAlertsCount[alert.AlertHistory.host_name] = 1;
+      } else {
+        lastDayAlertsCount[alert.AlertHistory.host_name] += 1;
+      }
+    });
+    this.set('lastDayAlertsCount', lastDayAlertsCount);
   },
 
   /**
@@ -108,7 +156,7 @@ App.MainAlertDefinitionDetailsController = Em.Controller.extend({
 
     var data = Em.Object.create({});
     var property_name = "AlertDefinition/" + element.get('name');
-    data.set(property_name,  element.get('value'));
+    data.set(property_name, element.get('value'));
     var alertDefinition_id = this.get('content.id');
     return App.ajax.send({
       name: 'alerts.update_alert_definition',
@@ -125,20 +173,20 @@ App.MainAlertDefinitionDetailsController = Em.Controller.extend({
    * @param {object} event
    * @method deleteAlertDefinition
    */
-  deleteAlertDefinition: function(event) {
+  deleteAlertDefinition: function (event) {
     var alertDefinition = this.get('content');
     var self = this;
-    App.showConfirmationPopup(function() {
+    App.showConfirmationPopup(function () {
       App.ajax.send({
-        name : 'alerts.delete_alert_definition',
-        sender : self,
-        success : 'deleteAlertDefinitionSuccess',
-        error : 'deleteAlertDefinitionError',
-        data : {
-          id : alertDefinition.get('id')
+        name: 'alerts.delete_alert_definition',
+        sender: self,
+        success: 'deleteAlertDefinitionSuccess',
+        error: 'deleteAlertDefinitionError',
+        data: {
+          id: alertDefinition.get('id')
         }
       });
-    }, null, function() {
+    }, null, function () {
     });
   },
 
@@ -146,7 +194,7 @@ App.MainAlertDefinitionDetailsController = Em.Controller.extend({
    * Success-callback for <code>deleteAlertDefinition</code>
    * @method deleteAlertDefinitionSuccess
    */
-  deleteAlertDefinitionSuccess : function() {
+  deleteAlertDefinitionSuccess: function () {
     App.router.transitionTo('main.alerts.index');
   },
 
@@ -154,7 +202,7 @@ App.MainAlertDefinitionDetailsController = Em.Controller.extend({
    * Error-callback for <code>deleteAlertDefinition</code>
    * @method deleteAlertDefinitionError
    */
-  deleteAlertDefinitionError : function(xhr, textStatus, errorThrown, opt) {
+  deleteAlertDefinitionError: function (xhr, textStatus, errorThrown, opt) {
     console.log(textStatus);
     console.log(errorThrown);
     xhr.responseText = "{\"message\": \"" + xhr.statusText + "\"}";
@@ -166,7 +214,7 @@ App.MainAlertDefinitionDetailsController = Em.Controller.extend({
    * @returns {$.ajax}
    * @method toggleState
    */
-  toggleState: function() {
+  toggleState: function () {
     var alertDefinition = this.get('content');
     return App.ajax.send({
       name: 'alerts.update_alert_definition',

ambari-web/app/messages.js

@@ -235,6 +235,7 @@ Em.I18n.translations = {
   'common.property.undefined': "Undefined",
   'common.summary': "Summary",
   'common.configs': "Configs",
+  'common.configuration': "Configuration",
   'common.unknown': "Unknown",
   'common.install': "Install",
   'common.alertDefinition': "Alert Definition",
@@ -868,7 +869,6 @@ Em.I18n.translations = {
   'alerts.table.state.disabled.confirm.btn': 'Confirm Enable',
   'alerts.filters.filteredAlertsInfo': '{0} of {1} definitions showing',
 
-  'alerts.thresholds': 'Thresholds',
   'alerts.definition.details.enable': 'Enable',
   'alerts.definition.details.disable': 'Disable',
   'alerts.definition.details.enableDisable': 'Enable / Disable',

ambari-web/app/models/alert_definition.js

@@ -72,6 +72,14 @@ App.AlertDefinition = DS.Model.extend({
     return lastTriggered ? $.timeago(new Date(lastTriggered)): '';
   }.property('lastTriggered'),
 
+  /**
+   * Formatted displayName for <code>componentName</code>
+   * @type {String}
+   */
+  componentNameFormatted: function () {
+    return App.format.role(this.get('componentName'));
+  }.property('componentName'),
+
   /**
    * Status generates from child-alerts
    * Format: OK(1)  WARN(2)  CRIT(1)  UNKN(1)

ambari-web/app/styles/alerts.less

@@ -158,6 +158,7 @@
     margin-top: 30px;
     .multiline-text {
       padding-top: 4px;
+      height: 60px;
     }
   }
   hr {
@@ -185,11 +186,12 @@
     .properties-list {
       margin-top: 50px;
       text-align: left;
+      ul {
+        list-style: none;
+        margin: 0;
+      }
     }
   }
-  .instances-label {
-    color: #0088cc;
-  }
   .definition-name, .definition-name input {
     font-size: 20px;
     font-weight: bold;
@@ -228,6 +230,12 @@
   .edit-link {
     cursor: pointer;
   }
+
+  .buttons-block {
+    button {
+      font-size: 1.1em;
+    }
+  }
 }
 
 .alert-configs {

ambari-web/app/templates/main/alerts/definition_details.hbs

@@ -73,7 +73,7 @@
         {{/if}}
       </div>
       <div class="definition-details-block">
-        <strong>{{t alerts.thresholds}}</strong>
+        <strong>{{t common.configuration}}</strong>
           {{#isAccessible ADMIN}}
             {{#unless App.router.mainAlertDefinitionConfigsController.canEdit}}
               <a {{action editConfigs target="App.router.mainAlertDefinitionConfigsController"}} class="pull-right edit-link">
@@ -100,7 +100,7 @@
       <div class="status">
         {{{controller.content.status}}}
       </div>
-      <div>
+      <div class="buttons-block">
         {{#isAccessible ADMIN}}
           {{#if controller.content.enabled}}
             <button {{action toggleState target="controller"}} class="btn btn-danger"><i
@@ -109,42 +109,46 @@
             <button {{action toggleState target="controller"}} class="btn btn-success"><i
                class="icon-power-off"></i>&nbsp;{{t alerts.definition.details.enable}}</button>
           {{/if}}
-          <button {{action deleteAlertDefinition target="controller"}} class="btn btn-primary"><i
+          <button {{action deleteAlertDefinition target="controller"}} class="btn"><i
               class="icon-trash"></i>&nbsp;{{t common.delete}}</button>
         {{/isAccessible}}
       </div>
       <div class="properties-list">
-        <table>
-          <tbody>
-          <tr>
-            <td>{{t common.service}}:</td>
-            <td><span class="label label-info">{{controller.content.service.displayName}}</span></td>
-          </tr>
-          <tr>
-            <td>{{t common.type}}:</td>
-            <td>{{controller.content.type}}</td>
-          </tr>
-          <tr>
-            <td>{{t alerts.definition.details.groups}}:</td>
-            <td>HDFS Default (Admins)</td>
-          </tr>
-          <tr>
-            <td></td>
-            <td><strong>Group2 (Infra)</strong></td>
-          </tr>
-          </tbody>
-        </table>
-        <span>{{t alerts.table.header.lastTriggered}} : {{controller.content.lastTriggeredFormatted}}</span>
+        <div class="row-fluid">
+          <div class="span4">{{t common.service}}:</div>
+          <div class="span8"><span class="label label-info">{{controller.content.service.displayName}}</span></div>
+      </div>
+        <div class="row-fluid">
+          <div class="span4">{{t common.component}}:</div>
+          <div class="span8">{{controller.content.componentNameFormatted}}</div>
+      </div>
+        <div class="row-fluid">
+          <div class="span4">{{t common.type}}:</div>
+          <div class="span8"> {{controller.content.type}}</div>
+      </div>
+      {{#if controller.groupsList.length}}
+        <div class="row-fluid">
+          <div class="span4">{{t alerts.definition.details.groups}}:</div>
+          <div class="span8">
+            <ul>
+              {{#each groupName in controller.groupsList}}
+                <li>{{groupName}}</li>
+              {{/each}}
+            </ul>
+          </div>
+        </div>
+      {{/if}}
+        <div class="row-fluid">
+          <div class="span4">{{t alerts.table.header.lastTriggered}}:</div>
+          <div class="span8">{{controller.content.lastTriggeredFormatted}}</div>
+        </div>
       </div>
     </div>
   </div>
-  {{! Right column end }}
-
-  {{! List of alerts }}
   <div class="definition-details-block">
-    <span class="instances-label">
-      <strong>{{t alerts.definition.details.instances}}</strong>
-    </span>
+  <span>
+    <strong>{{t alerts.definition.details.instances}}</strong>
+  </span>
     <hr>
     <div>
 
@@ -174,7 +178,7 @@
                 {{/if}}
               </td>
               <td><time class="timeago" {{bindAttr data-original-title="instance.lastTriggered"}}>{{instance.lastTriggeredAgoFormatted}}</time></td>
-              <td>10</td>
+              <td>{{view view.lastDayCount hostBinding="instance.host"}}</td>
               <td class="last">Admins</td>
             </tr>
           {{/each}}

ambari-web/app/utils/ajax/ajax.js

@@ -413,6 +413,10 @@ var urls = {
     'mock': '',
     'type': 'DELETE'
   },
+  'alerts.get_instances_history': {
+    'real': '/clusters/{clusterName}/alert_history?(AlertHistory/definition_name={definitionName})&(AlertHistory/timestamp>={timestamp})',
+    'mock': '/data/alerts/alert_instances_history.json'
+  },
   'background_operations.get_most_recent': {
     'real': '/clusters/{clusterName}/requests?to=end&page_size={operationsCount}&fields=Requests',
     'mock': '/data/background_operations/list_on_start.json',

ambari-web/app/views/main/alerts/definition_details_view.js

@@ -66,6 +66,17 @@ App.MainAlertDefinitionDetailsView = App.TableView.extend({
     Em.run.next(this, function () {
       App.tooltip($(".timeago"));
     });
-  }.observes('pageContent.@each')
+  }.observes('pageContent.@each'),
+
+  /**
+   * View calculates and represents count of alerts on appropriate host during last day
+   */
+  lastDayCount: Em.View.extend({
+    template: Ember.Handlebars.compile('<span>{{view.count}}</span>'),
+    count: function () {
+      var lastDayAlertsCount = this.get('parentView.controller.lastDayAlertsCount');
+      return lastDayAlertsCount ? lastDayAlertsCount[this.get('host.hostName')] || 0 : Em.I18n.t('app.loadingPlaceholder');
+    }.property('parentView.controller.lastDayAlertsCount', 'host')
+  })
 
 });

ambari-web/test/controllers/main/alerts/definitions_details_controller_test.js

@@ -56,7 +56,7 @@ describe('App.MainAlertDefinitionDetailsController', function () {
       controller.set('editing.label.originalValue', 'test');
       controller.set('editing.label.isEditing', false);
 
-      controller.edit({context:controller.get('editing.label')});
+      controller.edit({context: controller.get('editing.label')});
 
       expect(controller.get('editing.label.value')).to.equal('label');
       expect(controller.get('editing.label.originalValue')).to.equal('label');
@@ -71,7 +71,7 @@ describe('App.MainAlertDefinitionDetailsController', function () {
       controller.set('editing.label.value', 'test');
       controller.set('editing.label.isEditing', true);
 
-      controller.saveEdit({context:controller.get('editing.label')});
+      controller.saveEdit({context: controller.get('editing.label')});
 
       expect(controller.get('content.label')).to.equal('test');
       expect(controller.get('editing.label.isEditing')).to.be.false;
@@ -93,39 +93,99 @@ describe('App.MainAlertDefinitionDetailsController', function () {
     });
 
   });
-  
-  describe("#goToHostAlerts()", function() {
-    beforeEach(function() {
+
+  describe("#goToHostAlerts()", function () {
+    beforeEach(function () {
       sinon.stub(App.get('router'), 'transitionTo', Em.K);
     });
-    afterEach(function() {
-     App.get('router').transitionTo.restore();
+    afterEach(function () {
+      App.get('router').transitionTo.restore();
     });
-    it("not route to host - no event", function() {
+    it("not route to host - no event", function () {
       controller.goToHostAlerts(null);
       expect(App.get('router').transitionTo.notCalled).to.be.true;
     });
-    it("not route to host - no event context", function() {
+    it("not route to host - no event context", function () {
       controller.goToHostAlerts({});
       expect(App.get('router').transitionTo.notCalled).to.be.true;
     });
-    it("routes to host", function() {
+    it("routes to host", function () {
       controller.goToHostAlerts({"context": "hostname"});
       expect(App.get('router').transitionTo.calledOnce).to.be.true;
     });
   });
-  
-  describe("#deleteAlertDefinition()", function() {
-    beforeEach(function() {
+
+  describe("#deleteAlertDefinition()", function () {
+    beforeEach(function () {
       sinon.stub(App.get('router'), 'transitionTo', Em.K);
     });
-    afterEach(function() {
-     App.get('router').transitionTo.restore();
+    afterEach(function () {
+      App.get('router').transitionTo.restore();
     });
-    it("deleteAlertDefinitionSuccess", function() {
+    it("deleteAlertDefinitionSuccess", function () {
       controller.deleteAlertDefinitionSuccess();
       expect(App.get('router').transitionTo.calledWith('main.alerts.index')).to.be.true;
     });
   });
 
+  describe("#loadAlertInstancesHistory()", function () {
+
+    beforeEach(function () {
+      sinon.stub(App.ajax, 'send', Em.K);
+    });
+
+    afterEach(function () {
+      App.ajax.send.restore();
+    });
+
+    it("should load alert instances history", function () {
+
+      controller.set('lastDayAlertsCount', 'test');
+
+      controller.loadAlertInstancesHistory();
+
+      expect(App.ajax.send.calledOnce).to.be.true;
+      expect(controller.get('lastDayAlertsCount')).to.equal(null);
+    });
+  });
+
+  describe("#loadAlertInstancesHistorySuccess()", function () {
+
+    it("should calculate alerts count in different hosts", function () {
+
+      controller.set('lastDayAlertsCount', null);
+
+      controller.loadAlertInstancesHistorySuccess({
+        items: [
+          {
+            AlertHistory: {
+              host_name: 'host1'
+            }
+          },
+          {
+            AlertHistory: {
+              host_name: 'host2'
+            }
+          },
+          {
+            AlertHistory: {
+              host_name: 'host1'
+            }
+          },
+          {
+            AlertHistory: {
+              host_name: 'host3'
+            }
+          }
+        ]
+      });
+
+      expect(controller.get('lastDayAlertsCount')).to.eql({
+        host1: 2,
+        host2: 1,
+        host3: 1
+      });
+    });
+  });
+
 });

ambari-web/test/models/alert_definition_test.js

@@ -22,31 +22,31 @@ require('models/alert_definition');
 
 var model;
 
-describe('App.AlertDefinition', function() {
+describe('App.AlertDefinition', function () {
 
-  beforeEach(function() {
+  beforeEach(function () {
 
     model = App.AlertDefinition.createRecord();
 
   });
 
-  describe('#status', function() {
+  describe('#status', function () {
 
     Em.A([
       {
         summary: {OK: 1, UNKNOWN: 1, WARNING: 2},
         m: 'No CRITICAL',
         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>'
+        '<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: '<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>'
+        '<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},
@@ -58,12 +58,12 @@ describe('App.AlertDefinition', function() {
         m: 'Pending',
         e: '<span class="alert-state-single-host label alert-state-PENDING">PENDING</span>'
       }
-    ]).forEach(function(test) {
-        it(test.m, function() {
-          model.set('summary', test.summary);
-          expect(model.get('status')).to.equal(test.e);
-        });
+    ]).forEach(function (test) {
+      it(test.m, function () {
+        model.set('summary', test.summary);
+        expect(model.get('status')).to.equal(test.e);
       });
+    });
 
   });
 
@@ -76,45 +76,45 @@ describe('App.AlertDefinition', function() {
       {summary: {UNKNOWN: 1}, e: false},
       {summary: {}, e: false}
     ]).forEach(function (test, i) {
-        it('test ' + (i + 1), function () {
-          model.set('summary', test.summary);
-          expect(model.get('isCriticalOrWarning')).to.equal(test.e);
-        });
+      it('test ' + (i + 1), function () {
+        model.set('summary', test.summary);
+        expect(model.get('isCriticalOrWarning')).to.equal(test.e);
       });
+    });
 
   });
 
   describe('#isCritical', function () {
 
     Em.A([
-        {summary: {CRITICAL: 1}, e: true},
-        {summary: {WARNING: 1}, e: false},
-        {summary: {OK: 1}, e: false},
-        {summary: {UNKNOWN: 1}, e: false},
-        {summary: {}, e: false}
-      ]).forEach(function (test, i) {
-        it('test ' + (i + 1), function () {
-          model.set('summary', test.summary);
-          expect(model.get('isCritical')).to.equal(test.e);
-        });
+      {summary: {CRITICAL: 1}, e: true},
+      {summary: {WARNING: 1}, e: false},
+      {summary: {OK: 1}, e: false},
+      {summary: {UNKNOWN: 1}, e: false},
+      {summary: {}, e: false}
+    ]).forEach(function (test, i) {
+      it('test ' + (i + 1), function () {
+        model.set('summary', test.summary);
+        expect(model.get('isCritical')).to.equal(test.e);
       });
+    });
 
   });
 
   describe('#isWarning', function () {
 
     Em.A([
-        {summary: {CRITICAL: 1}, e: false},
-        {summary: {WARNING: 1}, e: true},
-        {summary: {OK: 1}, e: false},
-        {summary: {UNKNOWN: 1}, e: false},
-        {summary: {}, e: false}
-      ]).forEach(function (test, i) {
-        it('test ' + (i + 1), function () {
-          model.set('summary', test.summary);
-          expect(model.get('isWarning')).to.equal(test.e);
-        });
+      {summary: {CRITICAL: 1}, e: false},
+      {summary: {WARNING: 1}, e: true},
+      {summary: {OK: 1}, e: false},
+      {summary: {UNKNOWN: 1}, e: false},
+      {summary: {}, e: false}
+    ]).forEach(function (test, i) {
+      it('test ' + (i + 1), function () {
+        model.set('summary', test.summary);
+        expect(model.get('isWarning')).to.equal(test.e);
       });
+    });
 
   });
 
@@ -132,4 +132,25 @@ describe('App.AlertDefinition', function() {
 
   });
 
+  describe('#componentNameFormatted', function () {
+
+    beforeEach(function () {
+      sinon.stub(App.format, 'role', function (a) {
+        return 'role ' + a;
+      });
+    });
+
+    it('should wrap component name by App.format.role method', function () {
+      model.set('componentName', 'test');
+      var result = model.get('componentNameFormatted');
+      expect(result).to.equal('role test');
+    });
+
+    afterEach(function () {
+      App.format.role.restore();
+    });
+
+
+  });
+
 });