AMBARI-8551. Alerts UI: Host alerts has couple of issues

ambari-web/app/models/alert_instance.js

@@ -42,7 +42,7 @@ App.AlertInstance = DS.Model.extend({
 
   /**
    * Status icon markup
-   * @type {App.AlertDefinition[]}
+   * @type {string}
    */
   status: function () {
     var state = this.get('state');

ambari-web/app/routes/main.js

@@ -271,9 +271,6 @@ module.exports = Em.Route.extend({
       alerts: Em.Route.extend({
         route: '/alerts',
         connectOutlets: function (router, context) {
-          var hostName = router.get('mainHostDetailsController.content.hostName');
-          router.get('mainAlertInstancesController').loadAlertInstancesByHost(hostName);
-          router.set('mainAlertInstancesController.isUpdating', true);
           router.get('mainHostDetailsController').connectOutlet('mainHostAlerts');
         },
         exit: function(router) {

ambari-web/app/templates/main/host/host_alerts.hbs

@@ -47,7 +47,7 @@
           <td class="first">{{alertInstance.label}}</td>
           <td>{{{alertInstance.status}}}</td>
           <td>{{alertInstance.service.displayName}}</td>
-          <td><time class="timeago" {{bindAttr data-original-title="instance.lastTriggered"}}>{{instance.lastTriggeredAgoFormatted}}</time></td>
+          <td><time class="timeago" {{bindAttr data-original-title="alertInstance.lastTriggered"}}>{{alertInstance.lastTriggeredAgoFormatted}}</time></td>
           <td>{{alertInstance.formattedNotifications}}</td>
         </tr>
       {{/each}}

ambari-web/app/views/main/host/host_alerts_view.js

@@ -20,9 +20,78 @@ var App = require('app');
 var filters = require('views/common/filter_view'),
   sort = require('views/common/sort_view');
 
-App.MainHostAlertsView = App.MainAlertDefinitionsView.extend({
+App.MainHostAlertsView = App.TableView.extend({
   templateName: require('templates/main/host/host_alerts'),
 
+  content: function() {
+    return this.get('controller.content');
+  }.property('controller.content.@each'),
+
+  willInsertElement: function () {
+    var hostName = this.get('parentView.controller.content.hostName');
+    App.router.get('mainAlertInstancesController').loadAlertInstancesByHost(hostName);
+    App.router.set('mainAlertInstancesController.isUpdating', true);
+  },
+
+  didInsertElement: function () {
+    this.tooltipsUpdater();
+  },
+
+  /**
+   * @type {number}
+   */
+  totalCount: function () {
+    return this.get('content.length');
+  }.property('content.length'),
+
+  colPropAssoc: ['', 'label', 'state', 'service.serviceName', 'lastTriggered', 'notifications'],
+
+  sortView: sort.wrapperView,
+
+  /**
+   * Sorting header for <label>alertDefinition.label</label>
+   * @type {Em.View}
+   */
+  nameSort: sort.fieldView.extend({
+    column: 1,
+    name: 'label',
+    displayName: Em.I18n.t('common.name')
+  }),
+
+  /**
+   * Sorting header for <label>alertDefinition.status</label>
+   * @type {Em.View}
+   */
+  statusSort: sort.fieldView.extend({
+    column: 2,
+    name: 'state',
+    displayName: Em.I18n.t('common.status'),
+    type: 'select'
+  }),
+
+  /**
+   * Sorting header for <label>alertDefinition.service.serviceName</label>
+   * @type {Em.View}
+   */
+  serviceSort: sort.fieldView.extend({
+    column: 3,
+    name: 'service.serviceName',
+    displayName: Em.I18n.t('common.service'),
+    type: 'string'
+  }),
+
+  /**
+   * Sorting header for <label>alertDefinition.lastTriggeredSort</label>
+   * @type {Em.View}
+   */
+  lastTriggeredSort: sort.fieldView.extend({
+    column: 4,
+    name: 'lastTriggered',
+    displayName: Em.I18n.t('alerts.table.header.lastTriggered'),
+    type: 'number'
+  }),
+
+
   /**
    * Sorting header for <label>alertInstance.formattedNotifications</label>
    * @type {Em.View}
@@ -34,12 +103,58 @@ App.MainHostAlertsView = App.MainAlertDefinitionsView.extend({
     type: 'string'
   }),
 
+  /**
+   * Filtering header for <label>alertDefinition.label</label>
+   * @type {Em.View}
+   */
+  nameFilterView: filters.createTextView({
+    column: 1,
+    fieldType: 'filter-input-width',
+    onChangeValue: function(){
+      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'string');
+    }
+  }),
+
+  /**
+   * Filtering header for <label>alertDefinition.status</label>
+   * @type {Em.View}
+   */
+  stateFilterView: filters.createSelectView({
+    column: 2,
+    fieldType: 'filter-input-width',
+    content: [
+      {
+        value: '',
+        label: Em.I18n.t('common.all')
+      },
+      {
+        value: 'OK',
+        label: 'OK'
+      },
+      {
+        value: 'WARNING',
+        label: 'WARNING'
+      },
+      {
+        value: 'CRITICAL',
+        label: 'CRITICAL'
+      },
+      {
+        value: 'UNKNOWN',
+        label: 'UNKNOWN'
+      }
+    ],
+    onChangeValue: function () {
+      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'select');
+    }
+  }),
+
   /**
    * Filtering header for <label>alertDefinition.service.serviceName</label>
    * @type {Em.View}
    */
-  formattedNotificationsView: filters.createSelectView({
-    column: 5,
+  serviceFilterView: filters.createSelectView({
+    column: 3,
     fieldType: 'filter-input-width',
     content: function () {
       return [
@@ -47,10 +162,132 @@ App.MainHostAlertsView = App.MainAlertDefinitionsView.extend({
           value: '',
           label: Em.I18n.t('common.all')
         }
-      ]
-    }.property(''),
+      ].concat(App.Service.find().map(function (service) {
+            return {
+              value: service.get('serviceName'),
+              label: service.get('displayName')
+            }
+          }));
+    }.property('App.router.clusterController.isLoaded'),
+    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,
+    appliedEmptyValue: ["", ""],
+    fieldType: 'filter-input-width,modified-filter',
+    content: [
+      {
+        value: 'Any',
+        label: Em.I18n.t('any')
+      },
+      {
+        value: 'Past 1 hour',
+        label: 'Past 1 hour'
+      },
+      {
+        value: 'Past 1 Day',
+        label: 'Past 1 Day'
+      },
+      {
+        value: 'Past 2 Days',
+        label: 'Past 2 Days'
+      },
+      {
+        value: 'Past 7 Days',
+        label: 'Past 7 Days'
+      },
+      {
+        value: 'Past 14 Days',
+        label: 'Past 14 Days'
+      },
+      {
+        value: 'Past 30 Days',
+        label: 'Past 30 Days'
+      }
+    ],
+    emptyValue: 'Any',
+    onChangeValue: function () {
+      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'date');
+    }
+  }),
+
+
+  /**
+   * Filtering header for <label>alertDefinition.service.serviceName</label>
+   * @type {Em.View}
+   */
+  formattedNotificationsView: filters.createTextView({
+    column: 5,
+    fieldType: 'filter-input-width',
     onChangeValue: function () {
     }
-  })
+  }),
+
+  /**
+   * Filtered number of all content number information displayed on the page footer bar
+   * @returns {String}
+   */
+  filteredContentInfo: function () {
+    return this.t('alerts.filters.filteredAlertsInfo').format(this.get('filteredCount'), this.get('totalCount'));
+  }.property('filteredCount', 'totalCount'),
+
+  /**
+   * Determines how display "back"-link - as link or text
+   * @type {string}
+   */
+  paginationLeftClass: function () {
+    if (this.get("startIndex") > 1) {
+      return "paginate_previous";
+    }
+    return "paginate_disabled_previous";
+  }.property("startIndex", 'filteredCount'),
+
+  /**
+   * Determines how display "next"-link - as link or text
+   * @type {string}
+   */
+  paginationRightClass: function () {
+    if ((this.get("endIndex")) < this.get("filteredCount")) {
+      return "paginate_next";
+    }
+    return "paginate_disabled_next";
+  }.property("endIndex", 'filteredCount'),
+
+  /**
+   * Show previous-page if user not in the first page
+   * @method previousPage
+   */
+  previousPage: function () {
+    if (this.get('paginationLeftClass') === 'paginate_previous') {
+      this._super();
+    }
+  },
+
+  /**
+   * Show next-page if user not in the last page
+   * @method nextPage
+   */
+  nextPage: function () {
+    if (this.get('paginationRightClass') === 'paginate_next') {
+      this._super();
+    }
+  },
+
+  /**
+   * Update tooltips when <code>pageContent</code> is changed
+   * @method tooltipsUpdater
+   */
+  tooltipsUpdater: function () {
+    Em.run.next(this, function () {
+      App.tooltip($(".enable-disable-button, .timeago"));
+    });
+  }.observes('pageContent.@each')
 
 });