');
+ var params = {clicked: false, alert_elem: alertDiv, link: detailsLink};
+ detailsLink.on('click', 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-block', 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 f5eabbdb89c..9901329257f 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 215935cb873..5a5f2b48cbe 100644
--- a/app/assets/stylesheets/patternfly_overrides.scss
+++ b/app/assets/stylesheets/patternfly_overrides.scss
@@ -870,6 +870,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 f1f8a531ffa..8db5cf1d4a1 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 bcfa2c9ecee..006c849e61f 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 abb2abf0cf9..00052dcef28 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 = '