AMBARI-8461. Alerts: UI cleanup. (xiwang via yusaku)

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

@@ -314,6 +314,7 @@ App.ClusterController = Em.Controller.extend({
      * 10. update stale_configs of host-components (depends on App.supports.hostOverrides)
      * 11. load root service (Ambari)
      * 12. load alert definitions to model
+     * 13. load unhealthy alert instances
      */
     self.loadStackServiceComponents(function (data) {
       data.items.forEach(function (service) {
@@ -345,8 +346,11 @@ App.ClusterController = Em.Controller.extend({
             updater.updateAlertGroups(function () {
               updater.updateAlertDefinitions(function() {
                 updater.updateAlertDefinitionSummary(function () {
-                  self.updateLoadStatus('alertGroups');
-                  self.updateLoadStatus('alertDefinitions');
+                  updater.updateUnhealthyAlertInstances(function () {
+                    self.updateLoadStatus('alertGroups');
+                    self.updateLoadStatus('alertDefinitions');
+                    self.updateLoadStatus('alertInstancesUnhealthy');
+                  });
                 });
               });
             });
@@ -354,6 +358,7 @@ App.ClusterController = Em.Controller.extend({
           else {
             self.updateLoadStatus('alertGroups');
             self.updateLoadStatus('alertDefinitions');
+            self.updateLoadStatus('alertInstancesUnhealthy');
           }
         });
       });

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

@@ -132,6 +132,7 @@ App.UpdateController = Em.Controller.extend({
         App.updater.run(this, 'updateAlertGroups', 'isWorking', App.alertGroupsUpdateInterval);
         App.updater.run(this, 'updateAlertDefinitions', 'isWorking', App.alertDefinitionsUpdateInterval);
         App.updater.run(this, 'updateAlertDefinitionSummary', 'isWorking', App.alertDefinitionsUpdateInterval);
+        App.updater.run(this, 'updateUnhealthyAlertInstances', 'isWorking', App.alertInstancesUpdateInterval);
       }
     }
   }.observes('isWorking'),
@@ -460,6 +461,16 @@ App.UpdateController = Em.Controller.extend({
     });
   },
 
+  updateUnhealthyAlertInstances: function (callback) {
+    var testUrl = '/data/alerts/alert_instances.json';
+    var realUrl = '/alerts?fields=*&Alert/state.in(CRITICAL,WARNING)';
+    var url = this.getUrl(testUrl, realUrl);
+
+    App.HttpClient.get(url, App.alertInstanceMapper, {
+      complete: callback
+    });
+  },
+
   updateAlertDefinitionSummary: function(callback) {
     var testUrl = '/data/alerts/alert_summary.json';
     var realUrl = '/alerts?format=groupedSummary';

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

@@ -83,22 +83,6 @@ App.MainAlertDefinitionsController = Em.ArrayController.extend({
     });
   },
 
-  /**
-   * Alerts number to show up on top-nav bar: number of critical/warning alerts
-   * @type {number}
-   */
-  allAlertsCount: function () {
-    return this.get('content').filterProperty('isCriticalOrWarning').get('length');
-  }.property('content.@each.isCriticalOrWarning'),
-
-  /**
-   * If critical alerts exist, if true, the alert badge should be red.
-   * @type {boolean}
-   */
-  isCriticalAlerts: function () {
-    return this.get('content').someProperty('isCritical');
-  }.property('content.@each.isCritical'),
-
   /**
    * Calculate critical/warning count for each service, to show up the label on services menu
    * @method getCriticalAlertsCountForService
@@ -109,6 +93,32 @@ App.MainAlertDefinitionsController = Em.ArrayController.extend({
     return alertsForService.filterProperty('isCriticalOrWarning').get('length');
   },
 
+
+  /**
+   *  ========================== alerts popup dialog =========================
+   */
+
+  /**
+   * Alerts number to show up on top-nav bar: number of critical/warning alerts
+   * @type {number}
+   */
+  allAlertsCount: function () {
+    return this.get('unhealthyAlertInstances').get('length');
+  }.property('unhealthyAlertInstances.length'),
+
+  unhealthyAlertInstances: function() {
+    return App.AlertInstance.find().toArray().filterProperty('state', 'CRITICAL').concat(
+      App.AlertInstance.find().toArray().filterProperty('state', 'WARNING')
+    );
+  }.property('mapperTimestamp'),
+
+  /**
+   * if critical alerts exist, if true, the alert badge should be red.
+   */
+  isCriticalAlerts: function () {
+    return this.get('unhealthyAlertInstances').someProperty('state', 'CRITICAL');
+  }.property('unhealthyAlertInstances.@each.state'),
+
   /**
    * Onclick handler for alerts number located right to bg ops number (see application.hbs)
    * @method showPopup
@@ -134,36 +144,60 @@ App.MainAlertDefinitionsController = Em.ArrayController.extend({
 
         controller: self,
 
-        content: function () {
-          // show crit/warn alerts only.
-          return this.get('controller.content').filterProperty('isCriticalOrWarning');
-        }.property('controller.content.@each.isCriticalOrWarning'),
+        contents: function () {
+          return this.get('controller.unhealthyAlertInstances');
+        }.property('controller.unhealthyAlertInstances.length', 'controller.unhealthyAlertInstances.@each.state'),
 
         isLoaded: function () {
-          return !!this.get('controller.content.length');
-        }.property('controller.content.length'),
+          return !!this.get('controller.unhealthyAlertInstances');
+        }.property('controller.unhealthyAlertInstances'),
 
         isAlertEmptyList: function () {
-          return !this.get('content.length');
-        }.property('content.length'),
+          return !this.get('contents.length');
+        }.property('contents.length'),
 
+        /**
+         * Router transition to alert definition details page
+         * @param event
+         */
         gotoAlertDetails: function (event) {
-          this.get('parentView').hide();
-          App.router.transitionTo('main.alerts.alertDetails', event.context);
+          if (event && event.context) {
+            this.get('parentView').hide();
+            var definition = this.get('controller.content').findProperty('id', event.context.get('definitionId'));
+            App.router.transitionTo('main.alerts.alertDetails', definition);
+          }
         },
 
+        /**
+         * Router transition to service summary page
+         * @param event
+         */
         gotoService: function (event) {
-          this.get('parentView').hide();
-          App.router.transitionTo('main.services.service', event.context);
+          if (event && event.context) {
+            this.get('parentView').hide();
+            App.router.transitionTo('main.services.service', event.context);
+          }
         },
 
+        /**
+         * Router transition to host level alerts page
+         * @param event
+         */
+        goToHostAlerts: function (event) {
+          if (event && event.context) {
+            this.get('parentView').hide();
+            App.router.transitionTo('main.hosts.hostDetails.alerts', event.context);
+          }
+        },
+
+        /**
+         * Router transition to alert summary page
+         */
         showMore: function () {
           this.get('parentView').hide();
           App.router.transitionTo('main.alerts.index');
         }
-
       })
     })
   }
-
 });

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

@@ -85,8 +85,7 @@ App.MainAlertDefinitionActionsController = Em.ArrayController.extend({
         controllerBinding: 'App.router.manageAlertGroupsController'
       }),
 
-      classNames: ['sixty-percent-width-modal', 'manage-configuration-group-popup'],
-
+      classNames: ['sixty-percent-width-modal', 'manage-alert-group-popup'],
       primary: Em.I18n.t('common.save'),
 
       onPrimary: function () {

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

@@ -180,6 +180,16 @@ App.MainAlertDefinitionDetailsController = Em.Controller.extend({
     });
   },
 
+  /**
+   * Router transition to service page
+   * @param event
+   */
+  goToService: function (event) {
+    if (event && event.context) {
+      App.router.transitionTo('main.services.service', event.context);
+    }
+  },
+
   /**
    * Router transition to host level alerts page
    * @param {object} event

ambari-web/app/messages.js

@@ -844,14 +844,15 @@ Em.I18n.translations = {
   'alerts.add.step2.header': 'Configure',
   'alerts.add.step3.header': 'Review',
 
-  'alerts.fastAccess.popup.header': '{0} critical or warning alerts',
-  'alerts.fastAccess.popup.body.name': 'Alert name',
-  'alerts.fastAccess.popup.body.showmore': 'Show all Alerts',
-  'alerts.fastAccess.popup.body.noalerts': 'No critical or warning alerts',
+  'alerts.fastAccess.popup.header': '{0} Critical or Warning Alerts',
+  'alerts.fastAccess.popup.body.name': 'Alert Name',
+  'alerts.fastAccess.popup.body.showmore': 'Show all Alerts Definitions',
+  'alerts.fastAccess.popup.body.noalerts': 'No critical or warning alerts to display',
 
   'alerts.actions.create': 'Create Alert',
   'alerts.actions.manageGroups': 'Manage Alert Groups',
   'alerts.actions.manageNotifications': 'Manage Notifications',
+  'alerts.actions.manageNotifications.info': 'You can manage notification methods and recipients.',
 
   'alerts.table.noAlerts': 'No Alerts to display',
   'alerts.table.header.lastTriggered': 'Last Triggered',
@@ -873,6 +874,7 @@ Em.I18n.translations = {
   'alerts.definition.details.enableDisable': 'Enable / Disable',
   'alerts.definition.details.groups': 'Groups',
   'alerts.definition.details.instances': 'Instances',
+  'alerts.definition.details.serviceHost': 'Service: Host',
   'alerts.definition.details.24-hour': '24-Hour',
   'alerts.definition.details.notification': 'Notification',
   'alerts.definition.details.noAlerts': 'No alert instances to show',
@@ -1774,7 +1776,7 @@ Em.I18n.translations = {
   'alerts.actions.manage_alert_groups_popup.group_name_lable':'Name',
   'alerts.actions.manage_alert_groups_popup.group_desc_lable':'Description',
   'alerts.actions.manage_alert_groups_popup.notifications':'Notifications',
-  'alerts.actions.manage_alert_groups_popup.addButton':'Create new Alert Group',
+  'alerts.actions.manage_alert_groups_popup.addButton':'Create Alert Group',
   'alerts.actions.manage_alert_groups_popup.addGroup.exist': 'Alert Group with given name already exists',
   'alerts.actions.manage_alert_groups_popup.removeButton':'Delete Alert Group',
   'alerts.actions.manage_alert_groups_popup.renameButton':'Rename Alert Group',
@@ -1783,7 +1785,7 @@ Em.I18n.translations = {
   'alerts.actions.manage_alert_groups_popup.addDefinitionDisabled':'There are no available alert definitions to add',
   'alerts.actions.manage_alert_groups_popup.addDefinitionToDefault': 'You cannot add alert definition to a default group',
   'alerts.actions.manage_alert_groups_popup.removeDefinition':'Remove alert definitions from selected Alert Group',
-  'alerts.actions.manage_alert_groups_popup.selectDefsDialog.title': 'Select Alert Group\'s Alert Definitions',
+  'alerts.actions.manage_alert_groups_popup.selectDefsDialog.title': 'Select Alert Group Definitions',
   'alerts.actions.manage_alert_groups_popup.selectDefsDialog.message': 'Select alert definitions to be added to this "{0}" Alert Group.',
   'alerts.actions.manage_alert_groups_popup.selectDefsDialog.filter.placeHolder': 'All',
   'alerts.actions.manage_alert_groups_popup.selectDefsDialog.selectedDefsLink': '{0} out of {1} alert definitions selected',

ambari-web/app/styles/alerts.less

@@ -157,8 +157,10 @@
     text-decoration: none;
   }
 
-  .service-name {
+  .status {
     margin-bottom: 30px;
+    text-align: center;
+    font-size: 20px;
   }
 
   .right-column {
@@ -180,11 +182,21 @@
     font-weight: bold;
   }
 
-  .definition-name input {
-    width: 99%;
-    margin-bottom: 0px;
-    margin-top: -4px;
-    margin-left: -5px;
+  .definition-name {
+    .name-text-field{
+      margin-left: 2px;
+      margin-bottom: 0px;
+      input {
+        width: 99%;
+        margin-bottom: 0px;
+        margin-top: -4px;
+        margin-left: -5px;
+      }
+    }
+    .edit-buttons {
+      margin-bottom: 0px;
+      margin-top: -4px;
+    }
   }
 
   .edit-buttons {
@@ -293,6 +305,34 @@
   }
 }
 
+/*****start styles for manage alerts popup*****/
+.sixty-percent-width-modal.manage-alert-group-popup {
+  .modal{
+    max-height: 650px;
+  }
+  .modal-body {
+    max-height: 500px;
+  }
+  .group-select {
+    width: 100%;
+    height: 250px;
+  }
+  .btn-toolbar {
+    margin-top: 0px;
+  }
+  .manage-configuration-group-content {
+    margin-bottom: 0px;
+  }
+  .notification-editable-list {
+    .title {
+      font-weight: bold;
+    }
+  }
+}
+
+
+/*****end styles for manage alerts popup*****/
+
 /*****start styles for alerts popup*****/
 .alerts-popup {
   .modal-body, .modal-footer, .modal-header {
@@ -313,32 +353,24 @@
     padding: 0 0 20px 0;
     height: 20px;
     .status-top {
-      width: 10%;
+      width: 5%;
       padding-left: 20px;
     }
     .name-top {
-      width: 40%;
+      width: 30%;
       padding-left: 110px;
     }
     .service-top {
-      width: 15%;
+      width: 30%;
       padding-left: 5px;
     }
     .last-triggered-top {
-      width: 20%;
       padding-left: 5px;
     }
     .status-top,.name-top,.service-top,.last-triggered-top {
       float: left;
       text-align: left;
     }
-    .select-wrap {
-      float: right;
-      margin-top: -8px;
-      select {
-        width: 140px;
-      }
-    }
   }
   #alert-info{
     overflow: auto;
@@ -355,18 +387,21 @@
       .status-icon {
         padding-left: 5px;
         float: left;
-        width: 10%;
-        min-width: 30px;
+        width: 5%;
+        min-width: 20px;
       }
       .name-text {
         padding-left: 10px;
-        width: 40%;
+        width: 35%;
         float: left;
       }
       .service-text {
         padding-left: 5px;
-        width: 15%;
+        width: 30%;
         float: left;
+        .na-text {
+          color: #808080;
+        }
       }
       .last-triggered-text {
         padding-left: 5px;

ambari-web/app/styles/application.less

@@ -259,7 +259,7 @@ footer {
         left: 0;
         z-index: 1000;
         float: left;
-        min-width: 160px;
+        min-width: 180px;
         padding: 5px 0;
         margin: 2px 0 0;
         list-style: none;
@@ -291,7 +291,7 @@ footer {
           background: #953B39;
           padding: 1px 4px;
           float: right;
-          margin-right: 10px;
+          margin-right: 5px;
           margin-top: 3px;
         }
       }
@@ -301,9 +301,8 @@ footer {
       .top-nav-dropdown-menu > li > a {
         text-decoration: none;
         text-align: left;
-        padding: 5px;
         display: block;
-        padding: 3px 20px;
+        padding: 3px 10px;
         clear: both;
         font-weight: normal;
         line-height: 20px;
@@ -2762,7 +2761,7 @@ width:100%;
         padding: 1px 4px;
         background: #953B39;
         float: right;
-        margin-right: 10px;
+        margin-right: 5px;
         margin-top: 3px;
       }
     }
@@ -6614,16 +6613,13 @@ i.icon-asterisks {
   }
 }
 
-.notification-editable-list {
-  .title {
-    font-weight: bold;
-  }
-}
-
 .new-config-group-div {
   td {
     vertical-align: top;
   }
+  td.title {
+    padding-top: 4px;
+  }
   .textarea-full-width {
     padding-right: 10px;
     textarea {

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

@@ -22,24 +22,26 @@
       <div class="top-wrap">
         <div class="status-top"></div>
         <div class="name-top">{{t alerts.fastAccess.popup.body.name}}</div>
-        <div class="service-top">{{t common.service}}</div>
+        <div class="service-top">{{t alerts.definition.details.serviceHost}}</div>
         <div class="last-triggered-top">{{t alerts.table.header.lastTriggered}}</div>
       </div>
-      <div id="alert-info">
-        {{#if view.isAlertEmptyList}}
-          <div class="alert-list-wrap">{{t alerts.fastAccess.popup.body.noalerts}}</div>
-        {{else}}
-          {{#each alertDefinition in view.content}}
-            <div class="alert-list-wrap">
-              <div class="alert-list-line-cursor">
-                <div class="status-icon">{{{alertDefinition.status}}}</div>
-                <div class="name-text">
-                  <a href="#" {{action "gotoAlertDetails" alertDefinition target="view"}}>{{alertDefinition.label}}</a>
-                </div>
-                <div class="service-text">
-                  <a href="#" {{action "gotoService" alertDefinition.service target="view"}}>{{alertDefinition.service.displayName}}</a>
-                </div>
-                <div class="last-triggered-text">{{alertDefinition.lastTriggeredFormatted}}</div>
+        <div id="alert-info">
+          {{#if view.isAlertEmptyList}}
+            <div class="alert-list-wrap">{{t alerts.fastAccess.popup.body.noalerts}}</div>
+          {{else}}
+            {{#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>:&nbsp;
+                    {{#if alertInstance.host}}
+                      <a {{action "goToHostAlerts" alertInstance.host target="view"}} href="#">{{alertInstance.host.hostName}}</a>
+                    {{else}}
+                      <span class="na-text">{{t common.na}}</span>
+                    {{/if}}
+                  </div>
+                  <div class="last-triggered-text">{{alertInstance.lastTriggered}}</div>
               </div>
             </div>
           {{/each}}

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

@@ -18,7 +18,7 @@
 
 <div class="dropdown">
   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">{{t common.actions}} <span class="caret"></span></a>
-  <ul class="dropdown-menu">
+  <ul class="dropdown-menu pull-left">
     {{#each action in controller}}
       <li>
         <a href="#" {{action actionHandler action target="controller"}}>

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

@@ -16,18 +16,18 @@
 * limitations under the License.
 }}
 
-<div class="new-config-group-div">
-    <div class="text-warning">
-      {{#if view.parentView.warningMessage}}
-        {{view.parentView.warningMessage}}
-      {{else}}
-          &nbsp;
-      {{/if}}
-    </div>
-    <table>
-        <tr>
-            <td>{{t services.service.config_groups_popup.group_name_lable }}:</td>
-            <td>{{view Ember.TextField maxlength="255" valueBinding="alertGroupName"}}</td>
-        </tr>
-    </table>
+<div class="new-config-group-div" id="create-new-alert-group">
+  <div class="text-warning">
+    {{#if view.parentView.warningMessage}}
+      {{view.parentView.warningMessage}}
+    {{else}}
+        &nbsp;
+    {{/if}}
+  </div>
+  <table>
+    <tr>
+       <td class="title">{{t common.name}}: &nbsp;</td>
+       <td>{{view Ember.TextField maxlength="255" valueBinding="alertGroupName"}}</td>
+    </tr>
+  </table>
 </div>

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

@@ -23,19 +23,21 @@
 
     {{! Left column }}
     <div class="span9">
-      <div class="definition-name">
+      <div class="definition-name row-fluid">
         {{#if controller.editing.label.isEditing}}
-          <div {{bindAttr class="controller.editing.label.isError:error :control-group"}}>
+          <div {{bindAttr class="controller.editing.label.isError:error :span8 :name-text-field :control-group"}}>
             {{view Em.TextField valueBinding="controller.editing.label.value"}}
           </div>
-          <div class="edit-buttons">
+          <div class="edit-buttons span3">
             <button {{action cancelEdit controller.editing.label target="controller"}} class="btn">{{t common.cancel}}</button>
             <button {{bindAttr disabled="controller.editing.label.isError"}} {{action saveEdit controller.editing.label target="controller"}}
                 class="btn btn-primary">{{t common.save}}
             </button>
           </div>
         {{else}}
-          {{{controller.content.status}}} {{controller.content.label}}
+          <span>
+            {{controller.content.label}}
+          </span>
         {{/if}}
         {{#unless controller.editing.label.isEditing}}
           {{#isAccessible ADMIN}}
@@ -95,8 +97,8 @@
 
     {{! Right column }}
     <div class="span3 right-column">
-      <div class="service-name">
-        {{t common.service}}: <span class="label label-info">{{controller.content.service.displayName}}</span>
+      <div class="status">
+        {{{controller.content.status}}}
       </div>
       <div>
         {{#isAccessible ADMIN}}
@@ -112,9 +114,16 @@
         {{/isAccessible}}
       </div>
       <div class="properties-list">
-        <span>{{t common.type}}: {{controller.content.type}}</span>
         <table>
           <tbody>
+          <tr>
+            <td>{{t common.service}}:</td>
+            <td><span class="label label-info">{{controller.content.service.displayName}}</span></td>
+          </tr>
+          <tr>
+            <td>{{t common.type}}:</td>
+            <td>{{controller.content.type}}</td>
+          </tr>
           <tr>
             <td>{{t alerts.definition.details.groups}}:</td>
             <td>HDFS Default (Admins)</td>
@@ -145,7 +154,7 @@
         <thead>
         <tr>
           <th class="first">{{t common.status}}</th>
-          <th>{{t common.host}}</th>
+          <th>{{t alerts.definition.details.serviceHost}}</th>
           <th>{{t alerts.table.header.lastTriggered}}</th>
           <th>{{t alerts.definition.details.24-hour}}</th>
           <th>{{t alerts.definition.details.notification}}</th>
@@ -155,8 +164,15 @@
         {{#if view.pageContent}}
           {{#each instance in view.pageContent}}
             <tr>
-              <td class="first">{{instance.state}}</td>
-              <td><a {{action goToHostAlerts instance.host target="controller"}} href="#">{{instance.host.hostName}}</a></td>
+              <td class="first">{{{instance.status}}}</td>
+              <td>
+                <a {{action goToService instance.service target="controller"}} href="#">{{instance.service.displayName}}</a>:&nbsp;
+                {{#if instance.host}}
+                  <a {{action goToHostAlerts instance.host target="controller"}} href="#">{{instance.host.hostName}}</a>
+                {{else}}
+                  {{t common.na}}
+                {{/if}}
+              </td>
               <td><time class="timeago" {{bindAttr data-original-title="instance.lastTriggered"}}>{{instance.lastTriggeredAgoFormatted}}</time></td>
               <td>10</td>
               <td class="last">Admins</td>

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

@@ -67,12 +67,12 @@
               </div>
             </div>
 
-            <div class="row-fluid">&nbsp;</div>
             <div class="clearfix"></div>
-
             <div class="row-fluid notification-editable-list">
-              <div class="span3 title"><span class="icon-envelope-alt"></span>&nbsp;{{t alerts.actions.manage_alert_groups_popup.notifications}}</div>
-              <div class="span8">
+              <div class="span4 title"><span class="icon-envelope-alt"></span>&nbsp;{{t alerts.actions.manage_alert_groups_popup.notifications}}</div>
+            </div>
+            <div class="row-fluid notification-editable-list">
+              <div class="span11">
                 {{view App.EditableList itemsBinding="selectedAlertGroup.notifications" resourcesBinding="selectedAlertGroup.alertNotifications" nameBinding="selectedAlertGroup.displayName"}}
               </div>
             </div>

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

@@ -15,7 +15,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-
+<div class="alert alert-info margin-bottom-5">{{t alerts.actions.manageNotifications.info}}</div>
 {{#if controller.isLoaded}}
   <div class="row-fluid  manage-configuration-group-content">
     <div class="span12">

ambari-web/app/templates/main/service/new_config_group.hbs

@@ -26,11 +26,11 @@
   </div>
   <table>
     <tr>
-      <td>{{t services.service.config_groups_popup.group_name_lable }}:</td>
+      <td class="title">{{t services.service.config_groups_popup.group_name_lable }}:&nbsp;</td>
       <td>{{view Ember.TextField maxlength="255" valueBinding="configGroupName"}}</td>
     </tr>
     <tr>
-      <td>{{t services.service.config_groups_popup.group_desc_lable }}:</td>
+      <td class="title">{{t services.service.config_groups_popup.group_desc_lable }}:&nbsp;</td>
       <td class="row-fluid">
         {{view Ember.TextArea classNames="span12" valueBinding="configGroupDesc" rows="4"}}
       </td>

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

@@ -366,11 +366,11 @@ var urls = {
     'mock': ''
   },
   'alerts.instances.by_definition': {
-    'real': '/clusters/{clusterName}/alerts?fields=*&Alert/definition_id={definitionId}',
+    'real': '/clusters/{clusterName}/alerts?fields=*&(Alert/definition_id={definitionId}|Alert/state.in(CRITICAL,WARNING))',
     'mock': '/data/alerts/alert_instances.json'
   },
   'alerts.instances.by_host': {
-    'real': '/clusters/{clusterName}/alerts?fields=*&Alert/host_name={hostName}',
+    'real': '/clusters/{clusterName}/alerts?fields=*&(Alert/host_name={hostName}|Alert/state.in(CRITICAL,WARNING))',
     'mock': '/data/alerts/alert_instances.json'
   },
   'alerts.update_alert_definition': {

ambari-web/test/controllers/global/update_controller_test.js

@@ -62,7 +62,7 @@ describe('App.UpdateController', function () {
 
     it('isWorking = true', function () {
       controller.set('isWorking', true);
-      expect(App.updater.run.callCount).to.equal(9);
+      expect(App.updater.run.callCount).to.equal(10);
     });
   });
 

ambari-web/test/controllers/main/alert_definitions_controller_test.js

@@ -60,17 +60,17 @@ describe('App.MainAlertDefinitionsController', function() {
       var bodyView;
 
       beforeEach(function () {
-        controller.reopen({content: [
-          App.AlertDefinition.createRecord({summary: {CRITICAL: 1}}),
-          App.AlertDefinition.createRecord({summary: {WARNING: 1}}),
-          App.AlertDefinition.createRecord({summary: {OK: 1}}),
-          App.AlertDefinition.createRecord({summary: {UNKNOWN: 1}})
+        controller.reopen({unhealthyAlertInstances: [
+          App.AlertInstance.createRecord({state: 'CRITICAL'}),
+          App.AlertInstance.createRecord({state: 'WARNING'}),
+          App.AlertInstance.createRecord({state: 'WARNING'}),
+          App.AlertInstance.createRecord({state: 'CRITICAL'})
         ]});
         bodyView = controller.showPopup().get('bodyClass').create();
       });
 
-      it('#content', function () {
-        expect(bodyView.get('content.length')).to.equal(2);
+      it('#contents', function () {
+        expect(bodyView.get('contents.length')).to.equal(4);
       });
 
       it('#isLoaded', function () {