AMBARI-8577. Alerts UI: Refactor alert table columns and column contents (srimanth)

ambari-web/app/controllers/main/alert_definitions_controller.js

@@ -190,6 +190,12 @@ App.MainAlertDefinitionsController = Em.ArrayController.extend({
           }
         },
 
+        didInsertElement: function () {
+          Em.run.next(this, function () {
+            App.tooltip($(".timeago"));
+          });
+        },
+
         /**
          * Router transition to alert summary page
          */

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

@@ -25,12 +25,12 @@ App.MainAlertDefinitionActionsController = Em.ArrayController.extend({
    * @type {{title: string, icon: string, action: string, showDivider: boolean}[]}
    */
   content: [
-    {
+    /*{
       title: Em.I18n.t('alerts.actions.create'),
       icon: 'icon-plus',
       action: 'createNewAlertDefinition',
       showDivider: true
-    },
+    },*/
     {
       title: Em.I18n.t('alerts.actions.manageGroups'),
       icon: 'icon-th-large',

ambari-web/app/messages.js

@@ -243,6 +243,8 @@ Em.I18n.translations = {
   'common.finalize': "Finalize",
   'common.severity': "Severity",
 
+  'models.alert_instance.tiggered.verbose': "Occured on {0} <br> Checked on {1}",
+
   'passiveState.turnOn':'Turn On Maintenance Mode',
   'passiveState.turnOff':'Turn Off Maintenance Mode',
   'passiveState.turnOnFor':'Turn On Maintenance Mode for {0}',
@@ -309,6 +311,8 @@ Em.I18n.translations = {
   'login.error.disabled':'Unable to sign in. Invalid username/password combination.',
   'login.error.bad.connection':'Unable to connect to Ambari Server. Confirm Ambari Server is running and you can reach Ambari Server from this machine.',
 
+  'titlebar.alerts.noAlerts': 'No Alerts',
+
   'graphs.noData.title': 'No Data',
   'graphs.noData.message': 'There was no data available. Possible reasons include inaccessible/unsupported metrics service.',
   'graphs.noDataAtTime.message': 'No available data for the time period.',
@@ -851,7 +855,7 @@ Em.I18n.translations = {
   'alerts.add.step3.selectedType': 'Selected Type',
 
   'alerts.fastAccess.popup.header': '{0} Critical or Warning Alerts',
-  'alerts.fastAccess.popup.body.name': 'Alert Name',
+  'alerts.fastAccess.popup.body.name': 'Alert Definition Name',
   'alerts.fastAccess.popup.body.showmore': 'Go to Alerts Definitions',
   'alerts.fastAccess.popup.body.noalerts': 'No critical or warning alerts to display',
 
@@ -862,9 +866,11 @@ Em.I18n.translations = {
 
   'alerts.table.noAlerts': 'No Alerts to display',
   'alerts.table.header.lastTriggered': 'Last Status Changed',
-  'alerts.table.header.lastTrigger': 'Last Trigger',
+  'alerts.table.header.lastChecked': 'Last Checked',
+  'alerts.table.header.lastTrigger': 'Last Changed',
+  'alerts.table.header.text': 'Text',
   'alerts.table.header.triggeredOn': 'Triggered On',
-  'alerts.table.header.definitionName': 'Definition Name',
+  'alerts.table.header.definitionName': 'Alert Definition Name',
   'alerts.table.header.notification': 'Notification',
   'alerts.table.state': 'State',
   'alerts.table.state.enabled': 'Enabled',

ambari-web/app/models/alert_instance.js

@@ -63,6 +63,14 @@ App.AlertInstance = DS.Model.extend({
     return serviceName;
   }.property('serviceName', 'service.displayName'),
 
+  /**
+   * Formatted timestamp for latest instance triggering
+   * @type {string}
+   */
+  lastCheckedFormatted: function() {
+    return dateUtils.dateFormat(this.get('latestTimestamp'));
+  }.property('latestTimestamp'),
+
   /**
    * Formatted timestamp for latest instance triggering
    * @type {string}
@@ -80,6 +88,30 @@ App.AlertInstance = DS.Model.extend({
     return lastTriggered ? $.timeago(new Date(lastTriggered)): '';
   }.property('originalTimestamp'),
 
+  lastTriggeredVerboseDisplay : function() {
+    var originalTimestamp = this.get('originalTimestamp');
+    var latestTimestamp = this.get('latestTimestamp');
+    return Em.I18n.t('models.alert_instance.tiggered.verbose').format(
+        dateUtils.dateFormat(originalTimestamp),
+        dateUtils.dateFormat(latestTimestamp));
+  }.property('originalTimestamp', 'latestTimestamp'),
+
+  /**
+   * Formatted timestamp with <code>$.timeago</code>
+   * @type {string}
+   */
+  lastTriggeredForFormatted: function () {
+    var lastTriggered = this.get('originalTimestamp');
+    var previousSuffixAgo = $.timeago.settings.strings.suffixAgo;
+    var previousPrefixAgo = $.timeago.settings.strings.prefixAgo;
+    $.timeago.settings.strings.suffixAgo = null;
+    $.timeago.settings.strings.prefixAgo = 'for';
+    var triggeredFor = lastTriggered ? $.timeago(new Date(lastTriggered)): '';
+    $.timeago.settings.strings.suffixAgo = previousSuffixAgo;
+    $.timeago.settings.strings.prefixAgo = previousPrefixAgo;
+    return triggeredFor;
+  }.property('originalTimestamp'),
+
   /**
    * List of css-classes for alert instance status
    * @type {object}

ambari-web/app/styles/alerts.less

@@ -96,13 +96,13 @@
   .col0,
   td:first-child,
   th:first-child {
-    width: 30%;
+    width: 35%;
   }
 
   .col1,
   td:first-child + td,
   th:first-child + th {
-    width: 11%;
+    width: 15%;
     .filter-input-width {
       width: 80%;
     }
@@ -111,7 +111,7 @@
   .col2,
   td:first-child + td + td,
   th:first-child + th + th {
-    width: 19%;
+    width: 20%;
     .filter-input-width {
       width: 80%;
     }
@@ -119,7 +119,7 @@
   .col3,
   td:first-child + td + td + td,
   th:first-child + th + th + th {
-    width: 12%;
+    width: 15%;
     .filter-input-width {
       width: 80%;
     }
@@ -128,7 +128,7 @@
   .col4,
   td:first-child + td + td + td + td,
   th:first-child + th + th + th + th {
-    width: 16%;
+    width: 15%;
     .filter-input-width {
       width: 80%;
     }
@@ -144,12 +144,7 @@
   }
 
   .type-icon {
-    margin-right: 5%;
-  }
-
-  .place-for-host-icon {
-    display: inline-block;
-    width: 14px;
+    margin-right: 5px;
   }
 }
 
@@ -157,19 +152,19 @@
   .col0,
   td:first-child,
   th:first-child {
-    width: 10%;
+    width: 30%;
   }
 
   .col1,
   td:first-child + td,
   th:first-child + th {
-    width: 45%;
+    width: 15%;
   }
 
   .col2,
   td:first-child + td + td,
   th:first-child + th + th {
-    width: 20%;
+    width: 15%;
   }
   .col3,
   td:first-child + td + td + td,
@@ -180,7 +175,15 @@
   .col4,
   td:first-child + td + td + td + td,
   th:first-child + th + th + th + th {
-    width: 15%;
+    width: 30%;
+  }
+
+  .alert-text {
+    overflow: hidden;
+    float: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
   }
 }
 
@@ -322,13 +325,16 @@
   .col0,
   td:first-child,
   th:first-child {
-    width: 30%;
+    width: 10%;
+    .filter-input-width {
+      width: 80%;
+    }
   }
 
   .col1,
   td:first-child + td,
   th:first-child + th {
-    width: 10%;
+    width: 25%;
     .filter-input-width {
       width: 90%;
     }
@@ -337,21 +343,32 @@
   .col2,
   td:first-child + td + td,
   th:first-child + th + th {
-    width: 20%;
+    width: 15%;
     .filter-input-width {
-      width: 90%;
+      width: 80%;
     }
   }
   .col3,
   td:first-child + td + td + td,
   th:first-child + th + th + th {
-    width: 20%
+    width: 15%;
+    .filter-input-width {
+      width: inherit;
+    }
   }
 
   .col4,
   td:first-child + td + td + td + td,
   th:first-child + th + th + th + th {
-    width: 20%;
+    width: 35%;
+  }
+
+  .alert-text {
+    overflow: hidden;
+    float: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
   }
 }
 
@@ -440,11 +457,11 @@
       min-width: 20px;
     }
     .name-top {
-      width: 33%;
+      width: 32%;
       padding-left: 10px;
     }
     .service-top {
-      width: 28%;
+      width: 31%;
       padding-left: 10px;
     }
     .last-triggered-top {
@@ -467,10 +484,13 @@
     .alert-list-line-cursor{
       width: 100%;
       min-height: 20px;
-      .status-icon {
+      .status {
         padding-left: 5px;
         float: left;
         width: 12%;
+      }
+      .status-icon {
+        padding-right: 5px;
         min-width: 20px;
       }
       .name-text {
@@ -486,13 +506,6 @@
           color: #808080;
         }
       }
-      .last-triggered-text {
-        padding-left: 5px;
-        float: left;
-        width: 18%;
-        color: #808080;
-        font-size: 12px;
-      }
     }
     .alert-list-line-cursor:before,.alert-list-line-cursor:after {
       display: table;

ambari-web/app/styles/application.less

@@ -185,9 +185,12 @@ footer {
       .label.alert-crit-count {
         background-color: @health-status-red;
       }
-      .label.alerts-warn-count {
+      .label.alert-warn-count {
         background-color: @health-status-orange;
       }
+      .label.alerts-none-count {
+        cursor: default;
+      }
       .label {
          padding: 3px 5px 3px;
          color: @top-nav-ops-count-color;

ambari-web/app/templates/application.hbs

@@ -40,7 +40,7 @@
                   <span {{bindAttr class=":label isCriticalAlerts:alert-crit-count:alert-warn-count"}} {{action "showPopup" target="App.router.mainAlertDefinitionsController"}}>
                   {{allAlertsCount}} {{pluralize allAlertsCount singular="alert" plural="alerts"}}</span>
                 {{else}}
-                  <span class="label" {{action "showPopup" target="App.router.mainAlertDefinitionsController"}}>
+                  <span rel="tooltip" {{translateAttr title="titlebar.alerts.noAlerts"}} class="label alerts-none-count" {{action "showPopup" target="App.router.mainAlertDefinitionsController"}}>
                   {{allAlertsCount}} {{pluralize allAlertsCount singular="alert" plural="alerts"}}</span>
                 {{/if}}
               {{/with}}

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

@@ -20,9 +20,8 @@
   {{#if view.isLoaded}}
     <div class="alert-list-main-warp">
       <div class="top-wrap">
-        <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="name-top">{{t alerts.fastAccess.popup.body.name}}</div>
         <div class="last-triggered-top">{{t alerts.table.header.triggeredOn}}</div>
       </div>
         <div id="alert-info">
@@ -32,8 +31,6 @@
             {{#each alertInstance in view.contents}}
               <div class="alert-list-wrap">
                 <div class="alert-list-line-cursor">
-                  <div class="status-icon">{{{alertInstance.status}}}</div>
-                  <div class="name-text"><a href="#" {{action "gotoAlertDetails" alertInstance target="view"}}>{{alertInstance.label}}</a></div>
                   <div class="service-text"><a href="#" {{action "gotoService" alertInstance.service target="view"}}>{{alertInstance.service.displayName}}</a>
                     {{#if alertInstance.host.hostName}}
                       {{#if alertInstance.service.displayName}}
@@ -42,7 +39,13 @@
                       <a {{action "goToHostAlerts" alertInstance.host target="view"}} href="#">{{alertInstance.host.hostName}}</a>
                     {{/if}}
                   </div>
-                  <div class="last-triggered-text">{{alertInstance.lastTriggered}}</div>
+                  <div class="name-text"><a href="#" {{action "gotoAlertDetails" alertInstance target="view"}}>{{alertInstance.label}}</a></div>
+                  <div class="status-col" rel="alert-status-tooltip" {{bindAttr title="alertInstance.lastTriggered"}}>
+                    <span class="timeago" {{bindAttr data-original-title="alertInstance.lastTriggeredVerboseDisplay"}}>
+                      <span class="status-icon">{{{alertInstance.status}}}</span>
+                      <time>{{alertInstance.lastTriggeredForFormatted}}</time>
+                    </span>
+                  </div>
               </div>
             </div>
           {{/each}}

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

@@ -35,7 +35,6 @@
         {{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}}
@@ -43,7 +42,6 @@
       <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>
@@ -53,14 +51,11 @@
       {{#each alertDefinition in view.pageContent}}
         <tr>
           <td class="first">
-            <span {{bindAttr class=":place-for-host-icon alertDefinition.isHostAlertDefinition:icon-desktop"}}></span>
+            <span {{bindAttr title="alertDefinition.type"}} {{bindAttr class=":type-icon  alertDefinition.typeIconClass"}}></span>
             <a href="#" {{action "gotoAlertDetails" alertDefinition}}>{{alertDefinition.label}}</a>
           </td>
           <td>{{{alertDefinition.status}}}</td>
           <td>{{alertDefinition.serviceDisplayName}}</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/templates/main/alerts/definition_details.hbs

@@ -95,6 +95,20 @@
         {{/isAccessible}}
       </div>
       <div class="properties-list">
+        <div class="row-fluid">
+          <div class="span4 property-name">{{t alerts.table.state}}:</div>
+          <div class="span8">
+            {{#if controller.content.enabled}}
+              <span {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}>
+                <span class="icon-off"></span> {{t alerts.table.state.enabled}}
+              </span>
+            {{else}}
+              <span {{bindAttr class="controller.content.enabled:alert-definition-enable:alert-definition-disable"}}>
+                <span class="icon-off"></span> {{t alerts.table.state.disabled}}
+              </span>
+            {{/if}}
+          </div>
+        </div>
         {{#if controller.content.serviceDisplayName}}
         <div class="row-fluid">
           <div class="span4 property-name">{{t common.service}}:</div>
@@ -109,7 +123,7 @@
         {{/if}}
         <div class="row-fluid">
           <div class="span4 property-name">{{t common.type}}:</div>
-          <div class="span8"> {{controller.content.type}}</div>
+          <div class="span8"><span {{bindAttr class=":type-icon  controller.content.typeIconClass"}}></span> {{controller.content.type}}</div>
         </div>
       {{#if controller.groupsList.length}}
         <div class="row-fluid">
@@ -145,19 +159,18 @@
       <table class="table table-bordered table-striped alerts-table" id="alert-instances-table">
         <thead>
         <tr>
-          <th class="first">{{t common.status}}</th>
-          <th>{{t alerts.definition.details.serviceHost}}</th>
+          <th class="first">{{t alerts.definition.details.serviceHost}}</th>
           <th>{{t alerts.table.header.lastTriggered}}</th>
+          <th>{{t common.status}}</th>
           <th>{{t alerts.definition.details.24-hour}}</th>
-          <th>{{t alerts.definition.details.notification}}</th>
+          <th>{{t alerts.table.header.text}}</th>
         </tr>
         </thead>
         <tbody>
         {{#if view.pageContent}}
           {{#each instance in view.pageContent}}
             <tr>
-              <td class="first">{{{instance.status}}}</td>
-              <td>
+              <td class="first">
                 <a {{action goToService instance.service target="controller"}} href="#">{{instance.service.displayName}}</a>
                 {{#if instance.host.hostName}}
                   {{#if instance.service.displayName}}
@@ -166,9 +179,10 @@
                   <a {{action goToHostAlerts instance.host target="controller"}} href="#">{{instance.host.hostName}}</a>
                 {{/if}}
               </td>
-              <td><time class="timeago" {{bindAttr data-original-title="instance.lastTriggered"}}>{{instance.lastTriggeredAgoFormatted}}</time></td>
+              <td>{{instance.lastTriggeredFormatted}}</td>
+              <td>{{{instance.status}}}  <time class="timeago" {{bindAttr data-original-title="instance.lastTriggeredFormatted"}}>{{instance.lastTriggeredForFormatted}}</time></td>
               <td>{{view view.lastDayCount hostBinding="instance.host"}}</td>
-              <td class="last">Admins</td>
+              <td><span class="alert-text" {{bindAttr data-original-title="instance.text"}} class="alert-text">{{instance.text}}</span></td>
             </tr>
           {{/each}}
         {{else}}

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

@@ -25,30 +25,29 @@
   <table class="table advanced-header-table table-bordered table-striped alerts-table" id="host-alerts-table">
     <thead>
       {{#view view.sortView classNames="label-row" contentBinding="view.filteredContent"}}
-        {{view view.parentView.nameSort class="first"}}
+        {{view view.parentView.serviceSort class="first"}}
+        {{view view.parentView.nameSort}}
+        {{view view.parentView.lastCheckedSort}}
         {{view view.parentView.statusSort}}
-        {{view view.parentView.serviceSort}}
-        {{view view.parentView.lastTriggeredSort}}
-        {{view view.parentView.formattedNotificationsSort}}
+        {{view view.parentView.textSort}}
       {{/view}}
     <tr class="filter-row">
-      <th class="first">{{view view.nameFilterView}}</th>
+      <th class="first">{{view view.serviceFilterView}}</th>
+      <th>{{view view.nameFilterView}}</th>
+      <th>{{view view.checkedFilterView}}</th>
       <th>{{view view.stateFilterView}}</th>
-      <th>{{view view.serviceFilterView}}</th>
-      <th>{{view view.triggeredFilterView}}</th>
-      <th>{{view view.formattedNotificationsView}}</th>
-      <th></th>
+      <th>{{view view.textView}}</th>
     </tr>
     </thead>
     <tbody>
     {{#if view.pageContent}}
       {{#each alertInstance in view.pageContent}}
         <tr>
-          <td class="first">{{alertInstance.label}}</td>
-          <td>{{{alertInstance.status}}}</td>
-          <td>{{alertInstance.serviceDisplayName}}</td>
-          <td><time class="timeago" {{bindAttr data-original-title="alertInstance.lastTriggeredFormatted"}}>{{alertInstance.lastTriggeredAgoFormatted}}</time></td>
-          <td>{{alertInstance.formattedNotifications}}</td>
+          <td class="first">{{alertInstance.serviceDisplayName}}</td>
+          <td>{{alertInstance.label}}</td>
+          <td>{{alertInstance.lastCheckedFormatted}}</td>
+          <td>{{{alertInstance.status}}} <time class="timeago" {{bindAttr data-original-title="alertInstance.lastTriggeredFormatted"}}>{{alertInstance.lastTriggeredForFormatted}}</time></td>
+          <td><span class="alert-text" {{bindAttr data-original-title="alertInstance.text"}} class="alert-text">{{alertInstance.text}}</span></td>
         </tr>
       {{/each}}
     {{else}}

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

@@ -56,6 +56,7 @@ App.MainAlertDefinitionDetailsView = App.TableView.extend({
 
   didInsertElement: function () {
     this.filter();
+    this.tooltipsUpdater();
   },
 
   /**
@@ -63,8 +64,8 @@ App.MainAlertDefinitionDetailsView = App.TableView.extend({
    * @method tooltipsUpdater
    */
   tooltipsUpdater: function () {
-    Em.run.next(this, function () {
-      App.tooltip($(".timeago"));
+    Em.run.next(function () {
+      App.tooltip($(".timeago, .alert-text"));
     });
   }.observes('pageContent.@each'),
 

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

@@ -44,7 +44,7 @@ App.MainHostAlertsView = App.TableView.extend({
     return this.get('content.length');
   }.property('content.length'),
 
-  colPropAssoc: ['', 'label', 'state', 'serviceName', 'originalTimestamp', 'notifications'],
+  colPropAssoc: ['', 'serviceName', 'label', 'latestTimestamp', 'state', 'text'],
 
   sortView: sort.wrapperView,
 
@@ -53,7 +53,7 @@ App.MainHostAlertsView = App.TableView.extend({
    * @type {Em.View}
    */
   nameSort: sort.fieldView.extend({
-    column: 1,
+    column: 2,
     name: 'label',
     displayName: Em.I18n.t('common.name')
   }),
@@ -63,7 +63,7 @@ App.MainHostAlertsView = App.TableView.extend({
    * @type {Em.View}
    */
   statusSort: sort.fieldView.extend({
-    column: 2,
+    column: 4,
     name: 'state',
     displayName: Em.I18n.t('common.status'),
     type: 'select'
@@ -74,8 +74,8 @@ App.MainHostAlertsView = App.TableView.extend({
    * @type {Em.View}
    */
   serviceSort: sort.fieldView.extend({
-    column: 3,
-    name: 'service.serviceName',
+    column: 1,
+    name: 'serviceName',
     displayName: Em.I18n.t('common.service'),
     type: 'string'
   }),
@@ -84,31 +84,30 @@ App.MainHostAlertsView = App.TableView.extend({
    * 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'),
+  lastCheckedSort: sort.fieldView.extend({
+    column: 3,
+    name: 'latestTimestamp',
+    displayName: Em.I18n.t('alerts.table.header.lastChecked'),
     type: 'number'
   }),
 
-
   /**
-   * Sorting header for <label>alertInstance.formattedNotifications</label>
+   * Sorting header for <label>alertDefinition.label</label>
    * @type {Em.View}
    */
-  formattedNotificationsSort: sort.fieldView.extend({
+  textSort: sort.fieldView.extend({
     column: 5,
-    name: 'formattedNotifications',
-    displayName: Em.I18n.t('alerts.table.header.notification'),
-    type: 'string'
+    name: 'text',
+    displayName: Em.I18n.t('alerts.table.header.text')
   }),
 
+
   /**
    * Filtering header for <label>alertDefinition.label</label>
    * @type {Em.View}
    */
   nameFilterView: filters.createTextView({
-    column: 1,
+    column: 2,
     fieldType: 'filter-input-width',
     onChangeValue: function(){
       this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'string');
@@ -120,7 +119,7 @@ App.MainHostAlertsView = App.TableView.extend({
    * @type {Em.View}
    */
   stateFilterView: filters.createSelectView({
-    column: 2,
+    column: 4,
     fieldType: 'filter-input-width',
     content: [
       {
@@ -154,7 +153,7 @@ App.MainHostAlertsView = App.TableView.extend({
    * @type {Em.View}
    */
   serviceFilterView: filters.createSelectView({
-    column: 3,
+    column: 1,
     fieldType: 'filter-input-width',
     content: function () {
       return [
@@ -181,8 +180,8 @@ App.MainHostAlertsView = App.TableView.extend({
    * Filtering header for <label>alertDefinition.lastTriggered</label>
    * @type {Em.View}
    */
-  triggeredFilterView: filters.createSelectView({
-    column: 4,
+  checkedFilterView: filters.createSelectView({
+    column: 3,
     appliedEmptyValue: ["", ""],
     fieldType: 'filter-input-width,modified-filter',
     content: [
@@ -226,10 +225,11 @@ App.MainHostAlertsView = App.TableView.extend({
    * Filtering header for <label>alertDefinition.service.serviceName</label>
    * @type {Em.View}
    */
-  formattedNotificationsView: filters.createTextView({
+  textView: filters.createTextView({
     column: 5,
     fieldType: 'filter-input-width',
     onChangeValue: function () {
+      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'string');
     }
   }),
 
@@ -289,7 +289,7 @@ App.MainHostAlertsView = App.TableView.extend({
    */
   tooltipsUpdater: function () {
     Em.run.next(this, function () {
-      App.tooltip($(".enable-disable-button, .timeago"));
+      App.tooltip($(".enable-disable-button, .timeago, .alert-text"));
     });
   }.observes('pageContent.@each')