You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by ol...@apache.org on 2017/03/09 16:40:08 UTC
[39/50] [abbrv] ambari git commit: AMBARI-20254. Service Alert Popup
- Unexpected User Experience. (Vivek Subramanian via yusaku)
AMBARI-20254. Service Alert Popup - Unexpected User Experience. (Vivek Subramanian via yusaku)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/69102638
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/69102638
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/69102638
Branch: refs/heads/branch-dev-logsearch
Commit: 6910263850c504195477a1d67adaa1820646975c
Parents: c5d2d5b
Author: Yusaku Sako <yu...@hortonworks.com>
Authored: Wed Mar 8 11:30:36 2017 -0800
Committer: Yusaku Sako <yu...@hortonworks.com>
Committed: Wed Mar 8 11:30:36 2017 -0800
----------------------------------------------------------------------
.../controllers/main/service/info/summary.js | 43 ++++++++------------
.../app/models/alerts/alert_definition.js | 10 +++++
ambari-web/app/styles/alerts.less | 10 ++++-
.../main/service/info/service_alert_popup.hbs | 19 ++++-----
4 files changed, 44 insertions(+), 38 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/ambari/blob/69102638/ambari-web/app/controllers/main/service/info/summary.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/controllers/main/service/info/summary.js b/ambari-web/app/controllers/main/service/info/summary.js
index b3d7b35..7327255 100644
--- a/ambari-web/app/controllers/main/service/info/summary.js
+++ b/ambari-web/app/controllers/main/service/info/summary.js
@@ -369,7 +369,7 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
return App.ModalPopup.show({
header: Em.I18n.t('services.service.summary.alerts.popup.header').format(context.get('displayName')),
autoHeight: false,
- classNames: ['forty-percent-width-modal'],
+ classNames: ['sixty-percent-width-modal'],
bodyClass: Em.View.extend({
templateName: require('templates/main/service/info/service_alert_popup'),
classNames: ['service-alerts'],
@@ -377,43 +377,36 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
didInsertElement: function () {
Em.run.next(this, function () {
App.tooltip(this.$(".timeago"));
+ App.tooltip(this.$(".definition-latest-text"), {placement: 'bottom'});
});
},
willDestroyElement:function () {
this.$(".timeago").tooltip('destroy');
+ this.$(".definition-latest-text").tooltip('destroy');
},
alerts: function () {
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 definitionTypes = {
- "isCritical": [],
- "isWarning": [],
- "isOK": [],
- "isUnknown": []
- };
- var others = [];
+ var criticalDefinitions = [], warningDefinitions = [], okDefinitions = [], unknownDefinitions = [];
serviceDefinitions.forEach(function (definition) {
- definition.set('isCollapsed', true);
- var pushed = false; // make sure each definition gets pushed only one time
- Object.keys(definitionTypes).forEach(function (type) {
- if (!pushed && definition.get(type)) {
- definitionTypes[type].push(definition);
- pushed = true;
- }
- });
- if (!pushed) {
- others.push(definition);
+ if (definition.get('isCritical')) {
+ criticalDefinitions.push(definition);
+ serviceDefinitions = serviceDefinitions.without(definition);
+ } else if (definition.get('isWarning')) {
+ warningDefinitions.push(definition);
+ serviceDefinitions = serviceDefinitions.without(definition);
+ } else if (definition.get('isOK')) {
+ okDefinitions.push(definition);
+ serviceDefinitions = serviceDefinitions.without(definition);
+ } else if (definition.get('isUnknown')) {
+ unknownDefinitions.push(definition);
+ serviceDefinitions = serviceDefinitions.without(definition);
}
});
- serviceDefinitions = definitionTypes.isCritical.concat(definitionTypes.isWarning, definitionTypes.isOK, definitionTypes.isUnknown, others);
-
+ serviceDefinitions = criticalDefinitions.concat(warningDefinitions, okDefinitions, unknownDefinitions, serviceDefinitions);
return serviceDefinitions;
}.property('controller.content'),
- onToggleBlock: function (alert) {
- this.$('#' + alert.context.clientId).toggle('blind', 500);
- alert.context.toggleProperty('isCollapsed');
- },
gotoAlertDetails: function (e) {
if (e && e.context) {
this.get('parentView').hide();
@@ -865,4 +858,4 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
App.router.route('main' + event.context.href);
}
-});
+});
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/ambari/blob/69102638/ambari-web/app/models/alerts/alert_definition.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/models/alerts/alert_definition.js b/ambari-web/app/models/alerts/alert_definition.js
index 4da7199..d8a6a3f 100644
--- a/ambari-web/app/models/alerts/alert_definition.js
+++ b/ambari-web/app/models/alerts/alert_definition.js
@@ -160,6 +160,16 @@ App.AlertDefinition = DS.Model.extend({
return text;
}.property('summary'),
+ latestTextSummary: function () {
+ var latestText = this.get('latestText');
+ var ellipsis = '...';
+ var summaryLength = 400;
+ if(latestText.length > summaryLength) {
+ latestText = latestText.substring(0, summaryLength - ellipsis.length) + ellipsis;
+ }
+ return latestText;
+ }.property('latestText'),
+
isAmbariService: Em.computed.equal('service._id', 'AMBARI'),
isAmbariAgentComponent: Em.computed.equal('componentName', 'AMBARI_AGENT'),
http://git-wip-us.apache.org/repos/asf/ambari/blob/69102638/ambari-web/app/styles/alerts.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/alerts.less b/ambari-web/app/styles/alerts.less
index e31ea30..d31ba47 100644
--- a/ambari-web/app/styles/alerts.less
+++ b/ambari-web/app/styles/alerts.less
@@ -551,6 +551,14 @@
}
}
+.sixty-percent-width-modal {
+ .definition-latest-text {
+ overflow-x: auto;
+ text-overflow: inherit;
+ white-space: normal;
+ }
+}
+
/*****end styles for manage alerts popup*****/
/*****start styles for alerts popup*****/
@@ -566,7 +574,7 @@
}
.service-alerts {
- max-height: 246px;
+ max-height: 400px;
}
.instance-text {
http://git-wip-us.apache.org/repos/asf/ambari/blob/69102638/ambari-web/app/templates/main/service/info/service_alert_popup.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/info/service_alert_popup.hbs b/ambari-web/app/templates/main/service/info/service_alert_popup.hbs
index 6ab6b3f..253c624 100644
--- a/ambari-web/app/templates/main/service/info/service_alert_popup.hbs
+++ b/ambari-web/app/templates/main/service/info/service_alert_popup.hbs
@@ -21,20 +21,15 @@
{{#each alert in view.alerts}}
<li class="alert-list-wrap">
<div class="row-fluid">
- <div class="span8 name-text">
- <div class="accordion-group block">
- <div class="accordion-heading" {{action "onToggleBlock" alert target="view"}}>
- <i {{bindAttr class=":pull-left :accordion-toggle alert.isCollapsed:icon-caret-right:icon-caret-down"}}></i>
- <a class="accordion-toggle" href="#" {{action "gotoAlertDetails" alert target="view"}}>{{alert.label}}</a>
- </div>
- <div id="{{unbound alert.clientId}}" class="accordion-body collapse in" style="display: none">
- <div class="accordion-inner definition-latest-text">
- {{alert.latestText}}
- </div>
- </div>
+ <div class="span9 name-text">
+ <div>
+ <a href="#" {{action "gotoAlertDetails" alert target="view"}}>{{alert.label}}</a>
+ </div>
+ <div class="definition-latest-text" {{bindAttr data-original-title="alert.latestText"}}>
+ {{alert.latestTextSummary}}
</div>
</div>
- <div class="span4 status-col" rel="alert-status-tooltip" >
+ <div class="span3 status-col" rel="alert-status-tooltip" >
{{view App.AlertDefinitionSummary contentBinding="alert"}}
<span class="timeago" {{bindAttr data-original-title="alert.lastTriggeredVerboseDisplay"}}>
<span class="status-icon">{{{alert.status}}}</span>