AMBARI-8575. Alerts UI: Fix various alerts badge issues on Host Details page

ambari-web/app/controllers/global/update_controller.js

@@ -156,7 +156,7 @@ App.UpdateController = Em.Controller.extend({
       self = this,
       hostDetailsFilter = '';
     var realUrl = '/hosts?<parameters>fields=Hosts/host_name,Hosts/maintenance_state,Hosts/public_host_name,Hosts/cpu_count,Hosts/ph_cpu_count,' +
-      'Hosts/host_status,Hosts/last_heartbeat_time,Hosts/ip,host_components/HostRoles/state,host_components/HostRoles/maintenance_state,' +
+      'alerts_summary,Hosts/host_status,Hosts/last_heartbeat_time,Hosts/ip,host_components/HostRoles/state,host_components/HostRoles/maintenance_state,' +
       'host_components/HostRoles/stale_configs,host_components/HostRoles/service_name,host_components/HostRoles/desired_admin_state,' +
         'metrics/disk,metrics/load/load_one,Hosts/total_mem<hostAuxiliaryInfo><stackVersions>&minimal_response=true';
     var hostAuxiliaryInfo = ',Hosts/os_arch,Hosts/os_type,metrics/cpu/cpu_system,metrics/cpu/cpu_user,metrics/memory/mem_total,metrics/memory/mem_free';

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

@@ -103,8 +103,8 @@ App.MainHostController = Em.ArrayController.extend(App.TableServerMixin, {
       type: 'EQUAL'
     },
     {
-      name: 'criticalAlertsCount',
-      key: 'legacy_alerts/summary/CRITICAL{0}|legacy_alerts/summary/WARNING{1}',
+      name: 'criticalWarningAlertsCount',
+      key: 'alerts_summary/CRITICAL{0}|alerts_summary/WARNING{1}',
       type: 'CUSTOM'
     },
     {
@@ -301,7 +301,7 @@ App.MainHostController = Em.ArrayController.extend(App.TableServerMixin, {
       'UNHEALTHY': data.Clusters.health_report['Host/host_status/UNHEALTHY'],
       'ALERT': data.Clusters.health_report['Host/host_status/ALERT'],
       'UNKNOWN': data.Clusters.health_report['Host/host_status/UNKNOWN'],
-      'health-status-WITH-ALERTS': (data.legacy_alerts) ? data.legacy_alerts.summary.CRITICAL + data.legacy_alerts.summary.WARNING : 0,
+      'health-status-WITH-ALERTS': (data.alerts_summary) ? data.alerts_summary.CRITICAL + data.alerts_summary.WARNING : 0,
       'health-status-RESTART': data.Clusters.health_report['Host/stale_config'],
       'health-status-PASSIVE_STATE': data.Clusters.health_report['Host/maintenance_state'],
       'TOTAL': data.Clusters.total_hosts
@@ -486,7 +486,11 @@ App.MainHostController = Em.ArrayController.extend(App.TableServerMixin, {
     App.db.setFilterConditions(this.get('name'), [filterForStack]);
   },
 
-  showAlertsPopup: function (event) {
+  goToHostAlerts: function (event) {
+    var host = event && event.context;
+    if (host) {
+      App.router.transitionTo('main.hosts.hostDetails.alerts', host);
+    }
   },
 
   /**
@@ -918,7 +922,7 @@ App.MainHostController = Em.ArrayController.extend(App.TableServerMixin, {
     associations[4] = 'memoryFormatted';
     associations[5] = 'loadAvg';
     associations[6] = 'hostComponents';
-    associations[7] = 'criticalAlertsCount';
+    associations[7] = 'criticalWarningAlertsCount';
     associations[8] = 'componentsWithStaleConfigsCount';
     associations[9] = 'componentsInPassiveStateCount';
     associations[10] = 'selected';

ambari-web/app/controllers/main/host/host_alerts_controller.js

@@ -26,8 +26,8 @@ App.MainHostAlertsController = Em.ArrayController.extend({
   }.property('App.router.mainHostDetailsController.content'),
 
   /**
-   * List of all <code>App.AlertDefinition</code> by Host
-   * @type {App.AlertDefinition[]}
+   * List of all <code>App.AlertInstance</code> by Host
+   * @type {App.AlertInstance[]}
    */
   content: function() {
     return App.AlertInstance.find().toArray().filterProperty('host', this.get('selectedHost'));

ambari-web/app/data/host/categories.js

@@ -55,7 +55,7 @@ module.exports = [
   },
   {
     value: Em.I18n.t('hosts.host.alerts.label'),
-    hostProperty: 'criticalAlertsCount',
+    hostProperty: 'criticalWarningAlertsCount',
     class: 'icon-exclamation-sign',
     isHealthStatus: false,
     healthClass: 'health-status-WITH-ALERTS',

ambari-web/app/mappers/hosts_mapper.js

@@ -33,7 +33,8 @@ App.hostsMapper = App.QuickDataMapper.create({
     host_components: {
       item: 'id'
     },
-    critical_alerts_count: 'critical_alerts_count',
+    alerts_summary: 'alerts_summary',
+    critical_warning_alerts_count: 'critical_warning_alerts_count',
     cpu: 'Hosts.cpu_count',
     cpu_physical: 'Hosts.ph_cpu_count',
     memory: 'Hosts.total_mem',
@@ -113,7 +114,8 @@ App.hostsMapper = App.QuickDataMapper.create({
           }, this);
         }
 
-        item.critical_alerts_count = (item.legacy_alerts) ? item.legacy_alerts.summary.CRITICAL + item.legacy_alerts.summary.WARNING : 0;
+        var alertsSummary = item.alerts_summary;
+        item.critical_warning_alerts_count = alertsSummary ? (alertsSummary.CRITICAL || 0) + (alertsSummary.WARNING || 0) : 0;
         item.cluster_id = App.get('clusterName');
         item.index = index;
 

ambari-web/app/models/alert_instance.js

@@ -36,10 +36,6 @@ App.AlertInstance = DS.Model.extend({
   text: DS.attr('string'),
   notification: DS.hasMany('App.AlertNotification'),
 
-  formattedNotifications: function () {
-    return this.get('notification').mapProperty('name').join(', ');
-  }.property('notification'),
-
   /**
    * Status icon markup
    * @type {string}
@@ -53,7 +49,7 @@ App.AlertInstance = DS.Model.extend({
    * Formatted timestamp for latest instance triggering
    * @type {string}
    */
-  lastTriggered: function() {
+  lastTriggeredFormatted: function() {
     return dateUtils.dateFormat(this.get('originalTimestamp'));
   }.property('originalTimestamp'),
 

ambari-web/app/models/host.js

@@ -44,7 +44,8 @@ App.Host = DS.Model.extend({
   memFree:DS.attr('number'),
   cpuSystem:DS.attr('number'),
   cpuUser:DS.attr('number'),
-  criticalAlertsCount: DS.attr('number'),
+  criticalWarningAlertsCount: DS.attr('number'),
+  alertsSummary: DS.attr('object'),
   passiveState: DS.attr('string'),
   index: DS.attr('number'),
   stackVersions: DS.hasMany('App.HostStackVersion'),

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

@@ -105,8 +105,12 @@
             <span class="trim_hostname">
               <a title="{{unbound host.hostName}}" href="#" {{action "showDetails" host}}>{{unbound host.hostName}}</a>
             </span>
-            {{#if host.criticalAlertsCount}}
-              <span class="label label-important alerts-count" {{action "showAlertsPopup" host target="controller"}}>{{host.criticalAlertsCount}}</span>
+            {{#if host.criticalWarningAlertsCount}}
+              {{#if host.alertsSummary.CRITICAL}}
+                <span class="label alerts-count label-important" {{action "goToHostAlerts" host target="controller"}}>{{host.criticalWarningAlertsCount}}</span>
+              {{else}}
+                <span class="label alerts-count label-warning" {{action "goToHostAlerts" host target="controller"}}>{{host.criticalWarningAlertsCount}}</span>
+              {{/if}}
             {{/if}}
           </td>
           <td class="restart">

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

@@ -1,37 +0,0 @@
-{{!
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-}}
-
-<div id="host-alerts">
-    <div class="box-header row">
-    </div>
-    <table class="table advanced-header-table table-bordered table-striped" id="">
-        <thead>
-          <tr class="filter-row">
-          </tr>
-        </thead>
-        <tbody>
-        </tbody>
-    </table>
-
-    <div>
-        <div class="spinner"></div>
-    </div>
-
-    <div class="page-bar">
-    </div>
-</div>

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

@@ -21,11 +21,6 @@
     <div class="status-info">
       <span rel="HealthTooltip" {{bindAttr class="view.content.healthClass view.content.healthIconClass"}} {{bindAttr data-original-title="view.content.healthToolTip" }}></span><span
             class='host-title'>{{unbound view.content.hostName}}</span>
-      {{#if view.content.criticalAlertsCount}}
-        <span class="label label-important alerts-count" {{action "showAlertsPopup" content target="App.router.mainHostController"}}>{{view.content.criticalAlertsCount}}</span>
-      {{else}}
-        <span class="label label-success alerts-count" {{action "showAlertsPopup" content target="App.router.mainHostController"}}>{{t hosts.host.alert.noAlerts}}</span>
-      {{/if}}
       {{#unless view.isActive}}
         <span class="host-maintenance-notice pull-right"><span class="icon-medkit"></span> {{t hosts.host.passive.mode}}</span>
       {{/unless}}
@@ -33,7 +28,7 @@
     <div><a href="javascript:void(null)" data-toggle="modal" {{action back}}><i
             class="icon-arrow-left"></i>&nbsp;{{t common.back}}</a></div>
     <div class="content">
-      {{view App.MainHostMenuView}}
+      {{view App.MainHostMenuView hostBinding="view.content"}}
       {{#isAccessible ADMIN}}
         <div class="service-button">
           <div class="btn-group display-inline-block">

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="alertInstance.lastTriggered"}}>{{alertInstance.lastTriggeredAgoFormatted}}</time></td>
+          <td><time class="timeago" {{bindAttr data-original-title="alertInstance.lastTriggeredFormatted"}}>{{alertInstance.lastTriggeredAgoFormatted}}</time></td>
           <td>{{alertInstance.formattedNotifications}}</td>
         </tr>
       {{/each}}

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

@@ -2005,7 +2005,7 @@ var urls = {
     }
   },
   'host.status.counters': {
-    'real': '/clusters/{clusterName}?fields=Clusters/health_report,Clusters/total_hosts&minimal_response=true',
+    'real': '/clusters/{clusterName}?fields=Clusters/health_report,Clusters/total_hosts,alerts_summary&minimal_response=true',
     'mock': '/data/hosts/HDP2/host_status_counters.json'
   },
   'components.filter_by_status': {

ambari-web/app/views.js

@@ -66,7 +66,6 @@ require('views/main/host/details/host_component_views/tasktracker_view');
 require('views/main/host/menu');
 require('views/main/host/summary');
 require('views/main/host/configs');
-require('views/main/host/alerts');
 require('views/main/host/configs_service');
 require('views/main/host/configs_service_menu');
 require('views/main/host/metrics');

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

@@ -1,27 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-var App = require('app');
-var date = require('utils/date');
-
-App.MainHostAlertsView = Em.View.extend({
-  templateName: require('templates/main/host/alerts')
-
-
-
-});

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', 'service.serviceName', 'lastTriggered', 'notifications'],
+  colPropAssoc: ['', 'label', 'state', 'service.serviceName', 'originalTimestamp', 'notifications'],
 
   sortView: sort.wrapperView,
 

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

@@ -21,6 +21,7 @@ var App = require('app');
 App.MainHostMenuView = Em.CollectionView.extend({
   tagName: 'ul',
   classNames: ["nav", "nav-tabs"],
+  host: null,
   content: function () {
     var array = [
       {
@@ -42,7 +43,9 @@ App.MainHostMenuView = Em.CollectionView.extend({
     if (App.get('supports.alerts')) {
       array.push({
         label: 'Alerts',
-        routing: 'alerts'
+        routing: 'alerts',
+        badgeText: '0',
+        badgeClasses: 'label '
       });
     }
     return array;
@@ -55,6 +58,7 @@ App.MainHostMenuView = Em.CollectionView.extend({
     $.each(this._childViews, function () {
       this.set('active', (this.get('content.routing') == defaultRoute ? "active" : ""));
     });
+    this.hostAlertsObserver();
   },
 
   deactivateChildViews: function() {
@@ -63,9 +67,36 @@ App.MainHostMenuView = Em.CollectionView.extend({
     });
   },
 
+  hostAlertsObserver : function() {
+    var criticalWarningCount = this.get('host.criticalWarningAlertsCount');
+    var criticalCount = this.get('host.alertsSummary.CRITICAL');
+    var warningCount = this.get('host.alertsSummary.WARNING');
+    var badgeText = "" + criticalWarningCount;
+    var badgeClasses = "label ";
+    if (criticalCount > 0) {
+      badgeClasses += "label-important";
+    } else if (warningCount > 0){
+      badgeClasses += "label-warning ";
+    }
+    // Update content
+    var content = this.get('content');
+    if (content) {
+      content.forEach(function(item) {
+        if (item.label == 'Alerts' && (item.badgeText !== badgeText || item.badgeClasses != badgeClasses)) {
+          Ember.set(item, 'badgeText', badgeText);
+          Ember.set(item, 'badgeClasses', badgeClasses);
+        }
+      });
+    }
+  }.observes('host.alertsSummary.CRITICAL', 'host.alertsSummary.WARNING', 'host.criticalWarningAlertsCount'),
+
   itemViewClass: Em.View.extend({
     classNameBindings: ["active"],
     active: "",
-    template: Ember.Handlebars.compile('<a {{action hostNavigate view.content.routing }} href="#"> {{unbound view.content.label}}</a>')
+    template: Ember.Handlebars.compile('<a {{action hostNavigate view.content.routing }} href="#"> {{unbound view.content.label}} ' +
+        '{{#if view.content.badgeText}} '+
+          '<span {{bindAttr class="view.content.badgeClasses"}}> '+
+            '{{view.content.badgeText}}'+
+          '</span>  {{/if}}</a>')
   })
 });