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 <yus...@hortonworks.com> Authored: Wed Mar 8 11:30:36 2017 -0800 Committer: Yusaku Sako <yus...@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>
