You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by xi...@apache.org on 2014/11/20 21:07:35 UTC
ambari git commit: AMBARI-8401. Alerts UI: make changes to the
service left nav and top nav.(xiwang)
Repository: ambari
Updated Branches:
refs/heads/trunk 6adc6a500 -> 9a8752573
AMBARI-8401. Alerts UI: make changes to the service left nav and top nav.(xiwang)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/9a875257
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/9a875257
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/9a875257
Branch: refs/heads/trunk
Commit: 9a8752573653bacd9f293cf9bb790f655920cd83
Parents: 6adc6a5
Author: Xi Wang <xi...@apache.org>
Authored: Wed Nov 19 11:18:36 2014 -0800
Committer: Xi Wang <xi...@apache.org>
Committed: Thu Nov 20 12:06:57 2014 -0800
----------------------------------------------------------------------
.../main/alert_definitions_controller.js | 74 +++++++++
ambari-web/app/messages.js | 5 +
ambari-web/app/models/alert_definition.js | 16 ++
ambari-web/app/models/service.js | 8 +-
ambari-web/app/styles/application.less | 158 ++++++++++++++++++-
ambari-web/app/templates/application.hbs | 9 ++
.../app/templates/common/alerts_popup.hbs | 52 ++++++
.../app/templates/main/service/menu_item.hbs | 6 +-
.../main/alerts/manage_alert_groups_view.js | 1 -
9 files changed, 319 insertions(+), 10 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/ambari/blob/9a875257/ambari-web/app/controllers/main/alert_definitions_controller.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/controllers/main/alert_definitions_controller.js b/ambari-web/app/controllers/main/alert_definitions_controller.js
index df02e0e..88c9ff7 100644
--- a/ambari-web/app/controllers/main/alert_definitions_controller.js
+++ b/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')
+ })
+ })
}
});
http://git-wip-us.apache.org/repos/asf/ambari/blob/9a875257/ambari-web/app/messages.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js
index 14ee759..9943582 100644
--- a/ambari-web/app/messages.js
+++ b/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',
http://git-wip-us.apache.org/repos/asf/ambari/blob/9a875257/ambari-web/app/models/alert_definition.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/models/alert_definition.js b/ambari-web/app/models/alert_definition.js
index 2005595..9d5f52c 100644
--- a/ambari-web/app/models/alert_definition.js
+++ b/ambari-web/app/models/alert_definition.js
@@ -83,6 +83,22 @@ App.AlertDefinition = DS.Model.extend({
}.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}
*/
http://git-wip-us.apache.org/repos/asf/ambari/blob/9a875257/ambari-web/app/models/service.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/models/service.js b/ambari-web/app/models/service.js
index caa872e..5e032dd 100644
--- a/ambari-web/app/models/service.js
+++ b/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 = {
http://git-wip-us.apache.org/repos/asf/ambari/blob/9a875257/ambari-web/app/styles/application.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less
index d223fa4..99a6d45 100644
--- a/ambari-web/app/styles/application.less
+++ b/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;
http://git-wip-us.apache.org/repos/asf/ambari/blob/9a875257/ambari-web/app/templates/application.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/application.hbs b/ambari-web/app/templates/application.hbs
index 4034b03..81fb0db 100644
--- a/ambari-web/app/templates/application.hbs
+++ b/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>
http://git-wip-us.apache.org/repos/asf/ambari/blob/9a875257/ambari-web/app/templates/common/alerts_popup.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/alerts_popup.hbs b/ambari-web/app/templates/common/alerts_popup.hbs
new file mode 100644
index 0000000..086e3b4
--- /dev/null
+++ b/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>
+
http://git-wip-us.apache.org/repos/asf/ambari/blob/9a875257/ambari-web/app/templates/main/service/menu_item.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/menu_item.hbs b/ambari-web/app/templates/main/service/menu_item.hbs
index 17100aa..47bf41f 100644
--- a/ambari-web/app/templates/main/service/menu_item.hbs
+++ b/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>
http://git-wip-us.apache.org/repos/asf/ambari/blob/9a875257/ambari-web/app/views/main/alerts/manage_alert_groups_view.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/alerts/manage_alert_groups_view.js b/ambari-web/app/views/main/alerts/manage_alert_groups_view.js
index 61448f8..7449803 100644
--- a/ambari-web/app/views/main/alerts/manage_alert_groups_view.js
+++ b/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'});