AMBARI-15120 Alerts UI Usability Changes (Joe Wang via rzang)

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

@@ -329,8 +329,6 @@ 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.alerts_summary_hosts) ? data.alerts_summary_hosts.CRITICAL + data.alerts_summary_hosts.WARNING : 0,
-      'health-status-CRITICAL': (data.alerts_summary_hosts) ? data.alerts_summary_hosts.CRITICAL : 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

ambari-web/app/controllers/main/service/info/summary.js

@@ -294,9 +294,9 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
   },
 
   showServiceAlertsPopup: function (event) {
-    var service = event.context;
+    var context = event.context;
     return App.ModalPopup.show({
-      header: Em.I18n.t('services.service.summary.alerts.popup.header').format(service.get('displayName')),
+      header: Em.I18n.t('services.service.summary.alerts.popup.header').format(context.get('displayName')),
       autoHeight: false,
       classNames: ['forty-percent-width-modal'],
       bodyClass: Em.View.extend({
@@ -312,7 +312,8 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
           this.$(".timeago").tooltip('destroy');
         },
         alerts: function () {
-          var serviceDefinitions = this.get('controller.content').filterProperty('service', service);
+          var property = context.get('componentName') ? 'componentName' : 'serviceName';
+          var serviceDefinitions = this.get('controller.content').filterProperty(property, context.get(property));
           // definitions should be sorted in order: critical, warning, ok, unknown, other
           var criticalDefinitions = [], warningDefinitions = [], okDefinitions = [], unknownDefinitions = [];
           serviceDefinitions.forEach(function (definition) {

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

@@ -53,17 +53,6 @@ module.exports = [
     healthStatus: 'UNKNOWN',
     healthClass: 'health-status-DEAD-YELLOW'
   },
-  {
-    value: Em.I18n.t('hosts.host.alerts.label'),
-    hostProperty: 'criticalWarningAlertsCount',
-    class: 'icon-exclamation-sign',
-    isHealthStatus: false,
-    healthClass: 'health-status-WITH-ALERTS',
-    healthStatus: 'health-status-WITH-ALERTS',
-    column: 7,
-    type: 'custom',
-    filterValue: ['>0', '>0']
-  },
   {
     value: Em.I18n.t('common.restart'),
     hostProperty: 'componentsWithStaleConfigsCount',

ambari-web/app/mappers/alert_definition_summary_mapper.js

@@ -67,6 +67,7 @@ App.alertDefinitionSummaryMapper = App.QuickDataMapper.create({
     });
     // set alertsCount and hasCriticalAlerts for each service
     var groupedByServiceName = dataManipulation.groupPropertyValues(alertDefinitions, 'service.serviceName');
+    var groupedByComponentName = dataManipulation.groupPropertyValues(alertDefinitions, 'componentName');
     var services = App.Service.find();
     var servicesMap = services.toArray().toMapByProperty('id');
     Object.keys(groupedByServiceName).forEach(function(serviceName) {
@@ -90,6 +91,28 @@ App.alertDefinitionSummaryMapper = App.QuickDataMapper.create({
           alertsCount: alertsCount,
           hasCriticalAlerts: hasCriticalAlerts
         });
+
+        var masters = service.get('hostComponents').filterProperty('isMaster');
+        masters.forEach(function (master) {
+          var hasCriticalAlerts = false;
+
+          var alertsCount = groupedByComponentName[master.get('componentName')].map(function (alertDefinition) {
+
+            var criticalCount = alertDefinition.getWithDefault('summary.CRITICAL.count', 0);
+            var warningCount = alertDefinition.getWithDefault('summary.WARNING.count', 0);
+
+            if (criticalCount) {
+              hasCriticalAlerts = true;
+            }
+            return criticalCount + warningCount;
+
+          }).reduce(Em.sum, 0);
+
+          master.setProperties({
+            alertsCount: alertsCount,
+            hasCriticalAlerts: hasCriticalAlerts
+          });
+        });
       }
     });
     if (!$.mocho) {

ambari-web/app/models/host_component.js

@@ -128,6 +128,18 @@ App.HostComponent = DS.Model.extend({
     return !App.get('components.nonHDP').contains(this.get('componentName'));
   }.property('componentName', 'App.components.nonHDP'),
 
+  /**
+   * Does component have Critical Alerts
+   * @type {boolean}
+   */
+  hasCriticalAlerts: false,
+
+  /**
+   * Number of the Critical and Warning alerts for current component
+   * @type {number}
+   */
+  alertsCount: 0,
+
   statusClass: function () {
     return this.get('isActive') ? this.get('workStatus') : 'icon-medkit';
   }.property('workStatus', 'isActive'),

ambari-web/app/styles/alerts.less

@@ -477,19 +477,23 @@
     padding: 4px 5px;
     margin: 4px;
     font-size: 14px;
-    cursor: pointer;
-  }
-  .alerts-crit-count {
-    background: @health-status-red;
-  }
-  .alerts-warn-count {
-    background: @health-status-orange;
-  }
-  .no-alerts-label {
-    background: @health-status-green;
   }
 }
 
+.alerts-crit-count, .alerts-warn-count, .no-alerts-label {
+  cursor: pointer;
+}
+
+.alerts-crit-count {
+  background: @health-status-red;
+}
+.alerts-warn-count {
+  background: @health-status-orange;
+}
+.no-alerts-label {
+  background: @health-status-green;
+}
+
 #summary-alerts-popup {
   .alert-list-wrap {
     padding: 10px 5px;

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

@@ -19,11 +19,6 @@
 
 <a href="#" {{action goToSection view.content.routing target="view"}}>
   {{{unbound view.content.label}}}
-  {{#if view.hasAlertsLabel}}
-    <span {{bindAttr class=":label view.hasCriticalAlerts:alerts-crit-count:alerts-warn-count"}}>
-      {{view.alertsCount}}
-    </span>
-  {{/if}}
 </a>
 
 <!--dropdown menu for the items had dropdowns-->

ambari-web/app/templates/main/service/info/summary/master_components.hbs

@@ -30,6 +30,14 @@
     <td {{bindAttr class=":summary-value comp.summaryValueClassName"}}>
       <span rel='SummaryComponentHealthTooltip' {{bindAttr class="comp.statusClass comp.statusIconClass" data-original-title="comp.passiveTooltip"}}></span>
       {{comp.componentTextStatus}}
+      {{#if comp.alertsCount}}
+        <span {{action "showServiceAlertsPopup" comp target="controller"}}
+          {{bindAttr class=":label comp.hasCriticalAlerts:alerts-crit-count:alerts-warn-count"}}>
+          {{comp.alertsCount}} {{pluralize comp.alertsCount singular="alert" plural="alerts"}}</span>
+      {{else}}
+        <span {{action "showServiceAlertsPopup" comp target="controller"}}
+          class="label no-alerts-label">{{t services.service.summary.alerts.noAlerts}}</span>
+      {{/if}}
     </td>
   </tr>
 {{/each}}

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

@@ -39,7 +39,7 @@ App.MainMenuView = Em.CollectionView.extend({
           result.push(
               {label: Em.I18n.t('menu.item.dashboard'), routing: 'dashboard', active: 'active'},
               {label: Em.I18n.t('menu.item.services'), routing: 'services'},
-              {label: Em.I18n.t('menu.item.hosts'), routing: 'hosts', hasAlertsLabel: true},
+              {label: Em.I18n.t('menu.item.hosts'), routing: 'hosts'},
               {label: Em.I18n.t('menu.item.alerts'), routing: 'alerts'}
           );
         }
@@ -76,12 +76,6 @@ App.MainMenuView = Em.CollectionView.extend({
       return "";
     }.property('App.router.location.lastSetURL', 'App.router.clusterController.isLoaded'),
 
-    alertsCount: Em.computed.alias('App.router.mainHostController.hostsCountMap.health-status-WITH-ALERTS'),
-
-    hasCriticalAlerts: Em.computed.gt('App.router.mainHostController.hostsCountMap.health-status-CRITICAL', 0),
-
-    hasAlertsLabel: Em.computed.and('content.hasAlertsLabel', 'alertsCount'),
-
     templateName: require('templates/main/menu_item'),
 
     dropdownMenu: Em.computed.existsIn('content.routing', ['services', 'admin', 'views']),