AMBARI-8401. Alerts UI: make changes to the service left nav and top nav.(xiwang)

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

@@ -63,6 +63,80 @@ App.MainAlertDefinitionsController = Em.ArrayController.extend({
         }
       }
     });
+  },
+
+  /**
+   *  alerts number to show up on top-nav bar: number of critical/warning alerts
+   */
+  allAlertsCount: function () {
+    return this.get('content').filterProperty('isCriticalOrWarning').get('length');
+  }.property('content.@each.isCriticalOrWarning'),
+
+  /**
+   *  calcuale critical/warning count for each service, to show up the label on services menu
+   */
+  getCriticalAlertsCountForService: function(service) {
+    var alertsForService = this.get('content').filterProperty('service', service);
+    return alertsForService.filterProperty('isCriticalOrWarning').get('length');
+  },
+
+  /**
+   * Onclick handler for alerts number located right to bg ops number
+   */
+  showPopup: function(){
+    var self = this;
+    return App.ModalPopup.show({
+      header: Em.I18n.t('alerts.fastAccess.popup.header').format(self.get('allAlertsCount')),
+      classNames: ['sixty-percent-width-modal', 'alerts-popup'],
+      secondary: null,
+      isHideBodyScroll: true,
+      closeModelPopup: function () {
+        this.hide();
+      },
+      onPrimary: function () {
+        this.closeModelPopup();
+      },
+      onClose: function () {
+        this.closeModelPopup();
+      },
+
+      bodyClass: App.TableView.extend({
+        templateName: require('templates/common/alerts_popup'),
+        controller: self,
+
+        contents: function () {
+          // show crit/warn alerts only.
+          return this.get('controller.content').filterProperty('isCriticalOrWarning');
+        }.property('controller.content.@each.isCriticalOrWarning'),
+
+        isLoaded: function () {
+          return this.get('controller.content.length');
+        }.property('controller.content.length'),
+
+        isAlertEmptyList: function () {
+          return !this.get('contents.length');
+        }.property('contents.length'),
+
+        gotoAlertDetails: function (event) {
+          this.get('parentView').closeModelPopup();
+          App.router.transitionTo('main.alerts.alertDetails', event.context);
+        },
+
+        gotoService: function (event) {
+          this.get('parentView').closeModelPopup();
+          App.router.transitionTo('main.services.service', event.context);
+        },
+
+        showMore: function () {
+          this.get('parentView').closeModelPopup();
+          App.router.transitionTo('main.alerts.index');
+        },
+
+        totalCount: function () {
+          return this.get('contents.length');
+        }.property('contents.length')
+      })
+    })
   }
 
 });

ambari-web/app/messages.js

@@ -837,6 +837,11 @@ Em.I18n.translations = {
   'form.validator.alertGroupName':'Invalid Alert Group Name. Only alphanumerics, hyphens, spaces and underscores are allowed.',
   'form.validator.configKey.specific':'"{0}" is invalid Key. Only alphanumerics, hyphens, underscores, asterisks and periods are allowed.',
 
+  '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.actions.create': 'Create Alert',
   'alerts.actions.manageGroups': 'Manage Alert Groups',
   'alerts.actions.manageNotifications': 'Manage Notifications',

ambari-web/app/models/alert_definition.js

@@ -82,6 +82,22 @@ App.AlertDefinition = DS.Model.extend({
     }).compact().join(' / ');
   }.property('summary'),
 
+  /**
+   * if this definition is in state: CRIT / WARNING, if true, will show up in alerts fast access popup
+   * @type {boolean}
+   */
+  isCriticalOrWarning: function () {
+    var summary = this.get('summary');
+    var status = ['WARNING', 'CRITICAL'];
+    var result = false;
+    status.forEach(function (state) {
+      if (summary[state]) {
+        result = true;
+      }
+    });
+    return result;
+  }.property('summary'),
+
   /**
    * List of css-classes for alert types
    * @type {object}

ambari-web/app/models/service.js

@@ -29,7 +29,6 @@ App.Service = DS.Model.extend({
   workStatus: DS.attr('string'),
   rand: DS.attr('string'),
   toolTipContent: DS.attr('string'),
-  criticalAlertsCount: DS.attr('number'),
   quickLinks: DS.hasMany('App.QuickLinks'),  // mapped in app/mappers/service_metrics_mapper.js method - mapQuickLinks
   hostComponents: DS.hasMany('App.HostComponent'),
   serviceConfigsTemplate: App.config.get('preDefinedServiceConfigs'),
@@ -141,7 +140,12 @@ App.Service = DS.Model.extend({
     }
     hostsMsg += "</ul>";
     return this.t('services.service.config.restartService.TooltipMessage').format(hcCount, hostCount, hostsMsg);
-  }.property('restartRequiredHostsAndComponents')
+  }.property('restartRequiredHostsAndComponents'),
+
+  criticalAlertsCount: function () {
+    var controller = App.router.get('mainAlertDefinitionsController');
+    return controller.getCriticalAlertsCountForService(this);
+  }.property('App.router.mainAlertDefinitionsController.content.@each.isCriticalOrWarning')
 });
 
 App.Service.Health = {

ambari-web/app/styles/application.less

@@ -60,6 +60,42 @@
   100% { color: #118fff; }
 }
 
+@-webkit-keyframes redPulse {
+  from { background-color: #FF0000; }
+  50% { background-color: #A80000; }
+  to { background-color: #FF0000; }
+}
+
+@-moz-keyframes redPulse {
+  from { background-color: #FF0000; }
+  50% { background-color: #A80000; }
+  to { background-color: #FF0000; }
+}
+
+@keyframes redPulse {
+  0% { background-color: #FF0000; }
+  50% { background-color: #A80000; }
+  100% { background-color: #FF0000; }
+}
+
+@-webkit-keyframes redPulseInner {
+  from { color: #FF0000; }
+  50% { color: #A80000; }
+  to { color: #FF0000; }
+}
+
+@-moz-keyframes redPulseInner {
+  from { color: #FF0000; }
+  50% { color: #A80000; }
+  to { color: #FF0000; }
+}
+
+@keyframes redPulseInner {
+  0% { color: #FF0000; }
+  50% { color: #A80000; }
+  100% { color: #FF0000; }
+}
+
 .gradient(@color: #FAFAFA, @start: #FFFFFF, @stop: #F2F2F2) {
   background: @color;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, @start), color-stop(1, @stop));
@@ -182,7 +218,19 @@ footer {
         animation-duration: 1s;
         animation-iteration-count: infinite;
       }
-      .label  {
+      .label.alerts-count {
+        background-color: red;
+        -webkit-animation-name: redPulse;
+        -webkit-animation-duration: 1s;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-name: redPulse;
+        -moz-animation-duration: 1s;
+        -moz-animation-iteration-count: infinite;
+        animation-name: redPulse;
+        animation-duration: 1s;
+        animation-iteration-count: infinite;
+      }
+      .label {
          padding: 3px 5px 3px;
          color: @top-nav-ops-count-color;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
@@ -283,6 +331,10 @@ footer {
         }
         .operations-count {
           background: #953B39;
+          padding: 1px 4px;
+          float: right;
+          margin-right: 10px;
+          margin-top: 3px;
         }
       }
       .top-nav-dropdown-menu > li{
@@ -2046,6 +2098,100 @@ width:100%;
   }
 }
 
+/*****start styles for alerts popup*****/
+.alerts-popup {
+  .modal-body, .modal-footer, .modal-header {
+    min-width: 600px;
+  }
+  #alert-info {
+    .log-list-wrap:hover {
+      background-color: #e6e6e6;
+    }
+  }
+}
+.alerts-popup-wrap {
+  .top-wrap {
+    width: 100%;
+    border-bottom: 1px solid #CCC;
+    text-align: center;
+    font-size: 15px;
+    padding: 0 0 20px 0;
+    height: 20px;
+    .status-top {
+      width: 10%;
+      padding-left: 20px;
+    }
+    .name-top {
+      width: 40%;
+      padding-left: 110px;
+    }
+    .service-top {
+      width: 15%;
+      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;
+    max-height: 340px;
+    width: 100%;
+    .alert-list-wrap {
+      padding: 10px 10px 10px 20px;
+      border-top: 1px solid #CCC;
+      border-bottom: 1px solid #CCC;
+    }
+    .alert-list-line-cursor{
+      width: 100%;
+      min-height: 20px;
+      .status-icon {
+        padding-left: 5px;
+        float: left;
+        width: 10%;
+        min-width: 30px;
+      }
+      .name-text {
+        padding-left: 10px;
+        width: 40%;
+        float: left;
+      }
+      .service-text {
+        padding-left: 5px;
+        width: 15%;
+        float: left;
+      }
+      .last-triggered-text {
+        padding-left: 5px;
+        color: #808080;
+        font-size: 12px;
+      }
+    }
+    .show-more {
+      width: 98.8%;
+      min-height: 20px;
+      cursor: pointer;
+      border-top: 1px solid #CCC;
+      text-align: center;
+      padding: 10px 10px 10px 0px;
+      font-size: 16px;
+    }
+  }
+}
+/*****end styles for alert popup*****/
+
 
 /*****start styles for install tasks logs*****/
 .task-list-main-warp, .task-detail-info {
@@ -2743,6 +2889,13 @@ width:100%;
       .label {
         padding: 0 0 0 3px;
       }
+      .label.operations-count {
+        padding: 1px 4px;
+        background: #953B39;
+        float: right;
+        margin-right: 10px;
+        margin-top: 3px;
+      }
     }
 
     li.clients {
@@ -2770,9 +2923,6 @@ width:100%;
     margin: 5px 5px 10px 10px;
     text-align: center;
   }
-  .operations-count {
-    background: #953B39;
-  }
   .icon-medkit {
     padding-left:6px;
     color: black!important;

ambari-web/app/templates/application.hbs

@@ -35,6 +35,15 @@
                     {{allOperationsCount}} {{pluralize allOperationsCount singular="t:op" plural="t:ops"}}</span>
                 {{/if}}
               {{/with}}
+              {{#with App.router.mainAlertDefinitionsController}}
+                {{#if allAlertsCount}}
+                  <span class="label alerts-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"}}>
+                  {{allAlertsCount}} {{pluralize allAlertsCount singular="alert" plural="alerts"}}</span>
+                {{/if}}
+              {{/with}}
             </a>
           {{else}}
             <a class="logo"><img src="/img/logo-white.png" alt="Apache Ambari" title="Apache Ambari"></a>

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

@@ -0,0 +1,52 @@
+{{!
+* 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 class="alerts-popup-wrap">
+  {{#if view.isLoaded}}
+    <div class="alert-list-main-warp">
+      <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="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.contents}}
+              <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>
+              </div>
+            {{/each}}
+          {{/if}}
+          <div class="show-more" {{action "showMore" target="view"}}><a href="#">{{t alerts.fastAccess.popup.body.showmore}}</a>
+          </div>
+        </div>
+    </div>
+  {{else}}
+    <div class="spinner"></div>
+  {{/if}}
+</div>
+

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

@@ -20,9 +20,9 @@
   {{view App.MainDashboardServiceHealthView class="service-health" serviceBinding="view.content"}} 
   <span>{{unbound view.content.displayName}}</span>
   {{#if view.alertsCount}}
-    <span class="label operations-count">
-      {{view.alertsCount}}
-    </span>
+      <span class="label operations-count">
+        {{view.alertsCount}}
+      </span>
   {{/if}}
   <i rel="tooltip" {{action goToConfigs target="view"}}{{bindAttr class=":icon-refresh :restart-required-service view.content.isRestartRequired::hidden" data-original-title="view.restartRequiredMessage"}}></i>
 </a>

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

@@ -67,7 +67,6 @@ App.MainAlertsManageAlertGroupView = Em.View.extend({
   },
 
   didInsertElement: function () {
-
     this.onLoad();
     App.tooltip($("[rel='button-info']"));
     App.tooltip($("[rel='button-info-dropdown']"), {placement: 'left'});