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/66c94e99 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/66c94e99 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/66c94e99 Branch: refs/heads/branch-dev-logsearch Commit: 66c94e9937343be0c1db9f51fad22556c18fb77e Parents: 8b7c661 Author: Yusaku Sako <[email protected]> Authored: Wed Mar 8 11:29:39 2017 -0800 Committer: Yusaku Sako <[email protected]> Committed: Wed Mar 8 11:29:39 2017 -0800 ---------------------------------------------------------------------- .../controllers/main/service/info/summary.js | 43 ++++++++------------ .../app/models/alerts/alert_definition.js | 10 +++++ ambari-web/app/styles/alerts.less | 8 ++++ .../main/service/info/service_alert_popup.hbs | 19 ++++----- 4 files changed, 43 insertions(+), 37 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/66c94e99/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 183d5df..15f3861 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(); @@ -866,4 +859,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/66c94e99/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 5d61112..b55ef1b 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/66c94e99/ambari-web/app/styles/alerts.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/alerts.less b/ambari-web/app/styles/alerts.less index c13c8c9..5134daf 100644 --- a/ambari-web/app/styles/alerts.less +++ b/ambari-web/app/styles/alerts.less @@ -425,6 +425,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*****/ http://git-wip-us.apache.org/repos/asf/ambari/blob/66c94e99/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 8b72a50..9600aba 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"> - <div class="col-md-8 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="col-md-9 name-text"> + <div> + <a class="accordion-toggle" 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="col-md-4 status-col" rel="alert-status-tooltip" > + <div class="col-md-3 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>
