AMBARI-8555. Alerts UI: Multiple column changes to alert-definition table

ambari-web/app/messages.js

@@ -857,8 +857,9 @@ Em.I18n.translations = {
   'alerts.actions.manageNotifications.info': 'You can manage notification methods and recipients.',
 
   'alerts.table.noAlerts': 'No Alerts to display',
-  'alerts.table.header.lastTriggered': 'Last Triggered',
+  'alerts.table.header.lastTriggered': 'Last Status Changed',
   'alerts.table.header.lastTrigger': 'Last Trigger',
+  'alerts.table.header.triggeredOn': 'Triggered On',
   'alerts.table.header.definitionName': 'Definition Name',
   'alerts.table.header.notification': 'Notification',
   'alerts.table.state': 'State',

ambari-web/app/models/alert_definition.js

@@ -116,6 +116,18 @@ App.AlertDefinition = DS.Model.extend({
     return null;
   }.property('summary'),
 
+  isHostAlertDefinition: function () {
+    var serviceID = (this.get('service')._id === "AMBARI"),
+        component = (this.get('componentName') === "AMBARI_AGENT");
+    return serviceID && component;
+  }.property('service', 'componentName'),
+
+  typeIconClass: function () {
+    var typeIcons = this.get('typeIcons'),
+        type = this.get('type');
+    return typeIcons[type];
+  }.property('type'),
+
   /**
    * if this definition is in state: CRIT / WARNING, if true, will show up in alerts fast access popup
    * @type {boolean}
@@ -149,7 +161,11 @@ App.AlertDefinition = DS.Model.extend({
    * @type {object}
    */
   typeIcons: {
-    'DISABLED': 'icon-off'
+    'METRIC': 'icon-bolt',
+    'SCRIPT': 'icon-file-text',
+    'WEB': 'icon-globe',
+    'PORT': 'icon-signin',
+    'AGGREGATE': 'icon-plus'
   },
 
   /**

ambari-web/app/styles/alerts.less

@@ -102,7 +102,7 @@
   .col1,
   td:first-child + td,
   th:first-child + th {
-    width: 18%;
+    width: 11%;
     .filter-input-width {
       width: 80%;
     }
@@ -111,7 +111,7 @@
   .col2,
   td:first-child + td + td,
   th:first-child + th + th {
-    width: 17%;
+    width: 19%;
     .filter-input-width {
       width: 80%;
     }
@@ -119,7 +119,7 @@
   .col3,
   td:first-child + td + td + td,
   th:first-child + th + th + th {
-    width: 20%;
+    width: 12%;
     .filter-input-width {
       width: 80%;
     }
@@ -128,11 +128,29 @@
   .col4,
   td:first-child + td + td + td + td,
   th:first-child + th + th + th + th {
-    width: 13%;
+    width: 16%;
     .filter-input-width {
       width: 80%;
     }
   }
+
+  .col5,
+  td:first-child + td + td + td + td + td,
+  th:first-child + th + th + th + th + th {
+    width: 10%;
+    .filter-input-width {
+      width: 80%;
+    }
+  }
+
+  .type-icon {
+    margin-right: 5%;
+  }
+
+  .place-for-host-icon {
+    display: inline-block;
+    width: 14px;
+  }
 }
 
 #alert-instances-table {

ambari-web/app/templates/common/alerts_popup.hbs

@@ -23,7 +23,7 @@
         <div class="status-top">&nbsp;</div>
         <div class="name-top">{{t alerts.fastAccess.popup.body.name}}</div>
         <div class="service-top">{{t alerts.definition.details.serviceHost}}</div>
-        <div class="last-triggered-top">{{t alerts.table.header.lastTriggered}}</div>
+        <div class="last-triggered-top">{{t alerts.table.header.triggeredOn}}</div>
       </div>
         <div id="alert-info">
           {{#if view.isAlertEmptyList}}

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

@@ -35,6 +35,7 @@
         {{view view.parentView.nameSort class="first"}}
         {{view view.parentView.statusSort}}
         {{view view.parentView.serviceSort}}
+        {{view view.parentView.typeSort}}
         {{view view.parentView.lastTriggeredSort}}
         {{view view.parentView.enabledSort}}
       {{/view}}
@@ -42,6 +43,7 @@
       <th class="first">{{view view.nameFilterView}}</th>
       <th>{{view view.stateFilterView}}</th>
       <th>{{view view.serviceFilterView}}</th>
+      <th>{{view view.typeFilterView}}</th>
       <th>{{view view.triggeredFilterView}}</th>
       <th>{{view view.enabledFilterView}}</th>
     </tr>
@@ -51,10 +53,14 @@
       {{#each alertDefinition in view.pageContent}}
         <tr>
           <td class="first">
+            <span {{bindAttr class=":place-for-host-icon alertDefinition.isHostAlertDefinition:icon-desktop"}}></span>
             <a href="#" {{action "gotoAlertDetails" alertDefinition}}>{{alertDefinition.label}}</a>
           </td>
           <td>{{{alertDefinition.status}}}</td>
           <td>{{alertDefinition.service.displayName}}</td>
+          <td>
+            <span {{bindAttr class=":type-icon  alertDefinition.typeIconClass"}}></span>{{alertDefinition.type}}
+          </td>
           <td><time class="timeago" {{bindAttr data-original-title="alertDefinition.lastTriggeredFormatted"}}>{{alertDefinition.lastTriggeredAgoFormatted}}</time></td>
           <td class="last toggle-state-button">
             {{#if alertDefinition.enabled}}

ambari-web/app/views/main/alert_definitions_view.js

@@ -40,7 +40,7 @@ App.MainAlertDefinitionsView = App.TableView.extend({
     return this.get('content.length');
   }.property('content.length'),
 
-  colPropAssoc: ['', 'label', 'summary', 'service.serviceName', 'lastTriggered', 'groups', 'enabled'],
+  colPropAssoc: ['', 'label', 'summary', 'service.serviceName', 'type', 'lastTriggered', 'enabled', 'groups'],
 
   /**
    * @type {string}
@@ -87,12 +87,23 @@ App.MainAlertDefinitionsView = App.TableView.extend({
     type: 'string'
   }),
 
+  /**
+   * Sorting header for <label>alertDefinition.type</label>
+   * @type {Em.View}
+   */
+  typeSort: sort.fieldView.extend({
+    column: 4,
+    name: 'type',
+    displayName: Em.I18n.t('common.type'),
+    type: 'string'
+  }),
+
   /**
    * Sorting header for <label>alertDefinition.lastTriggeredSort</label>
    * @type {Em.View}
    */
   lastTriggeredSort: sort.fieldView.extend({
-    column: 4,
+    column: 5,
     name: 'lastTriggered',
     displayName: Em.I18n.t('alerts.table.header.lastTriggered'),
     type: 'number'
@@ -183,12 +194,50 @@ App.MainAlertDefinitionsView = App.TableView.extend({
     }
   }),
 
+  /**
+   * Filtering header for <label>alertDefinition.type</label>
+   * @type {Em.View}
+   */
+  typeFilterView: filters.createSelectView({
+    column: 4,
+    fieldType: 'filter-input-width',
+    content: [
+      {
+        value: '',
+        label: Em.I18n.t('common.all')
+      },
+      {
+        value: 'SCRIPT',
+        label: 'SCRIPT'
+      },
+      {
+        value: 'WEB',
+        label: 'WEB'
+      },
+      {
+        value: 'PORT',
+        label: 'PORT'
+      },
+      {
+        value: 'METRIC',
+        label: 'METRIC'
+      },
+      {
+        value: 'AGGREGATE',
+        label: 'AGGREGATE'
+      }
+    ],
+    onChangeValue: function(){
+      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'select');
+    }
+  }),
+
   /**
    * Filtering header for <label>alertDefinition.lastTriggered</label>
    * @type {Em.View}
    */
   triggeredFilterView: filters.createSelectView({
-    column: 4,
+    column: 5,
     appliedEmptyValue: ["", ""],
     fieldType: 'filter-input-width,modified-filter',
     content: [
@@ -258,7 +307,7 @@ App.MainAlertDefinitionsView = App.TableView.extend({
    * @type {Em.View}
    */
   alertGroupFilterView: filters.createSelectView({
-    column: 5,
+    column: 7,
     fieldType: 'filter-input-width',
     template: Ember.Handlebars.compile(
       '<div class="btn-group display-inline-block">' +

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

@@ -128,6 +128,9 @@ describe('App.ManageAlertNotificationsController', function () {
         severityFilter: {
           value: [],
           defaultValue: [true, true, true, true]
+        },
+        global: {
+          value: false
         }
       }));
       controller.addAlertNotification();
@@ -219,7 +222,8 @@ describe('App.ManageAlertNotificationsController', function () {
           value: ''
         },
         global: {
-          value: true
+          value: true,
+          disabled: true
         },
         method: {
           value: 'EMAIL'