From 49f3919117dd7fc209b5741b0b39fd54b88d49a8 Mon Sep 17 00:00:00 2001 From: nimrodshn Date: Wed, 29 Nov 2017 14:50:39 +0200 Subject: [PATCH] view full log on alerts minor refactoring to pr second iteration minor refactoring making code climate happy minor refactoring and tests minor refactoring adding dealing with small alerts minor refactoring extracting txt and trimming whitespaces fixed the specs moved to link refactoing class selector adding view more minor refactoring hardcoded msg length solution reverting to elipsis solution fix dangling link adding stylesheet for scrollbar fix whitespaces and tests --- .../ems_common/ems_common_form_controller.js | 2 +- app/assets/javascripts/miq_flash.js | 51 +++++++++++++++++++ .../javascripts/services/miq_service.js | 4 +- .../stylesheets/patternfly_overrides.scss | 5 ++ app/controllers/mixins/ems_common_angular.rb | 2 +- app/controllers/mixins/generic_form_mixin.rb | 4 +- spec/javascripts/miq_flash_spec.js | 20 ++++++++ 7 files changed, 82 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/controllers/ems_common/ems_common_form_controller.js b/app/assets/javascripts/controllers/ems_common/ems_common_form_controller.js index cfaa5d1cdb37..592483cb35e2 100644 --- a/app/assets/javascripts/controllers/ems_common/ems_common_form_controller.js +++ b/app/assets/javascripts/controllers/ems_common/ems_common_form_controller.js @@ -617,7 +617,7 @@ ManageIQ.angular.app.controller('emsCommonFormController', ['$http', '$scope', ' } else { $scope.updateAuthStatus(true); } - miqService.miqFlash(data.level, data.message); + miqService.miqFlash(data.level, data.message, data.options); miqSparkleOff(); }); }); diff --git a/app/assets/javascripts/miq_flash.js b/app/assets/javascripts/miq_flash.js index 4542642dadb0..53934ded9ec1 100644 --- a/app/assets/javascripts/miq_flash.js +++ b/app/assets/javascripts/miq_flash.js @@ -27,6 +27,10 @@ function add_flash(msg, level, options) { throw("add_flash: unknown level: " + level); } + if (options.long_alert) { + cls.alert += " text-overflow-pf"; + } + var iconSpan = $(''); var textStrong = $(''); @@ -35,6 +39,17 @@ function add_flash(msg, level, options) { var alertDiv = $('
'); alertDiv.append(iconSpan, textStrong); + // if options.long alert is given than add a `See More` button to the alert div to allow user the get more details of the error/alert. + if (options.long_alert) { + var detailsLinkTxt = _("View More"); + var detailsLink = $('
' + detailsLinkTxt + '
'); + var params = {clicked: false, alert_elem: alertDiv, link: detailsLink}; + $(document).on('click', '.alert_expand_link', function() { + expandAlert(params); + }); + alertDiv.append(detailsLink); + } + var textDiv = $('
'); textDiv.append(alertDiv); @@ -46,12 +61,48 @@ function add_flash(msg, level, options) { } $('#flash_msg_div').append(textDiv).show(); + + // remove dangling 'Show More' link when the alert msg is short. + if ( options.long_alert && !checkElipsis(alertDiv) ) { + detailsLink.hide(); + } } function clearFlash() { $('#flash_msg_div').empty(); } +function checkElipsis(element) { + var found = false; + var $c = element + .clone() + .css({display: 'inline', width: 'auto', visibility: 'hidden'}) + .appendTo('body'); + if ( $c.width() > element.width() ) { + found = true; + } + + $c.remove(); + + return found; +} + +function expandAlert(params) { + var viewMoreTxt = _("View More"); + var viewLessTxt = _("View Less"); + if (! params.clicked) { + params.clicked = true; + params.alert_elem.removeClass('text-overflow-pf'); + params.alert_elem.addClass('text-vertical-overflow-pf'); + params.link.find('a').text(viewLessTxt); + } else { + params.clicked = false; + params.alert_elem.removeClass('text-vertical-overflow-pf'); + params.alert_elem.addClass('text-overflow-pf'); + params.link.find('a').text(viewMoreTxt); + } +} + function _miqFlashLoad() { return JSON.parse(sessionStorage.getItem('flash_msgs') || '[]'); } diff --git a/app/assets/javascripts/services/miq_service.js b/app/assets/javascripts/services/miq_service.js index f5eabbdb89ca..9901329257f3 100644 --- a/app/assets/javascripts/services/miq_service.js +++ b/app/assets/javascripts/services/miq_service.js @@ -44,9 +44,9 @@ ManageIQ.angular.app.service('miqService', ['$timeout', '$document', '$q', 'API' miqSparkleOff(); }; - this.miqFlash = function(type, msg) { + this.miqFlash = function(type, msg, options) { miqService.miqFlashClear(); - add_flash(msg, type); + add_flash(msg, type, options); }; // FIXME: usually we just hide it, merge the logic diff --git a/app/assets/stylesheets/patternfly_overrides.scss b/app/assets/stylesheets/patternfly_overrides.scss index 181024a0c7d8..7ff2c07271c9 100644 --- a/app/assets/stylesheets/patternfly_overrides.scss +++ b/app/assets/stylesheets/patternfly_overrides.scss @@ -913,6 +913,11 @@ img.tiny { margin: 0; padding: 0;width:20px;height:20px; border: 0; vertical-ali border: 2px dashed #ddd; } +.text-vertical-overflow-pf { + overflow-y: auto; + max-height: 17ex; +} + /// =================================================================== /// end misc styling /// =================================================================== diff --git a/app/controllers/mixins/ems_common_angular.rb b/app/controllers/mixins/ems_common_angular.rb index f1f8a531ffae..8db5cf1d4a12 100644 --- a/app/controllers/mixins/ems_common_angular.rb +++ b/app/controllers/mixins/ems_common_angular.rb @@ -98,7 +98,7 @@ def render_validation_result(result, details) level = :error end - render_flash_json(msg, level) + render_flash_json(msg, level, :long_alert => true) end def create diff --git a/app/controllers/mixins/generic_form_mixin.rb b/app/controllers/mixins/generic_form_mixin.rb index bcfa2c9ecee3..006c849e61fc 100644 --- a/app/controllers/mixins/generic_form_mixin.rb +++ b/app/controllers/mixins/generic_form_mixin.rb @@ -16,8 +16,8 @@ def delete_action end end - def render_flash_json(msg, level = :success) - render :json => {:message => msg, :level => level} + def render_flash_json(msg, level = :success, options = {}) + render :json => {:message => msg, :level => level, :options => options} end end end diff --git a/spec/javascripts/miq_flash_spec.js b/spec/javascripts/miq_flash_spec.js index abb2abf0cf9d..00052dcef289 100644 --- a/spec/javascripts/miq_flash_spec.js +++ b/spec/javascripts/miq_flash_spec.js @@ -10,4 +10,24 @@ describe('miq_flash.js', function() { expect($('#flash_msg_div').html()).toEqual(''); }); }); + describe('longAlert', function() { + beforeEach(function() { + var html = '
'; + setFixtures(html); + }); + + it('displays flash_msg_div "View More" button', function() { + // Expect alert msg div to add the "See More" button to the div. + add_flash("Lorem ipsum dolor sit amet, usu ei mollis vivendum, ancillae indoctum philosophia an pri, affert partiendo cum ne. Nec animal tincidunt philosophia ea. Ne mea liber gloriatur, ignota dictas mei ne. Omittam eleifend consequuntur vix eu, everti accusata accommodare et eam. Ut vidit semper instructior duo, usu in autem inermis. Viris pertinax constituto per id, at debet apeirian persecuti has. Nostrum expetenda qui ad, mazim iriure id duo, est alii wisi at.", 'error' , {long_alert: true}); + var flash_msg_div = '
Lorem ipsum dolor sit amet, usu ei mollis vivendum, ancillae indoctum philosophia an pri, affert partiendo cum ne. Nec animal tincidunt philosophia ea. Ne mea liber gloriatur, ignota dictas mei ne. Omittam eleifend consequuntur vix eu, everti accusata accommodare et eam. Ut vidit semper instructior duo, usu in autem inermis. Viris pertinax constituto per id, at debet apeirian persecuti has. Nostrum expetenda qui ad, mazim iriure id duo, est alii wisi at.
' + expect($('#flash_msg_div').html()).toEqual(flash_msg_div); + }); + + it('does not display flash_msg_div "See More" button', function() { + // Expect alert msg div to *not add* the "See More" button to the div. + add_flash("This is a really long alert!", 'error'); + var flash_msg_div = '
This is a really long alert!
' + expect($('#flash_msg_div').html()).toEqual(flash_msg_div); + }); + }); });