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

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();
           });
         });

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 = $('<span class="' + cls.icon + '"></span>');
 
   var textStrong = $('<strong></strong>');
@@ -35,6 +39,17 @@ function add_flash(msg, level, options) {
   var alertDiv = $('<div class="' + cls.alert + '"><button class="close" data-dismiss="alert"><span class="pficon pficon-close"></span></button></div>');
   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 = $('<div class="alert_expand_link"><strong><a href="#">' + detailsLinkTxt + '</a></strong></div>');
+    var params = {clicked: false, alert_elem: alertDiv, link: detailsLink};
+    $(document).on('click', '.alert_expand_link', function() {
+      expandAlert(params);
+    });
+    alertDiv.append(detailsLink);
+  }
+
   var textDiv = $('<div class="flash_text_div"></div>');
 
   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') || '[]');
 }

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

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
 /// ===================================================================

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

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

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 = '<html><head></head><body><div id="flash_msg_div"></div></body></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 = '<div class="flash_text_div"><div class="alert alert-danger text-overflow-pf"><button class="close" data-dismiss="alert"><span class="pficon pficon-close"></span></button><span class="pficon pficon-error-circle-o"></span><strong>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.</strong><div class="alert_expand_link" style="display: none;"><strong><a href="#">View More</a></strong></div></div></div>'
+      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 = '<div class="flash_text_div"><div class="alert alert-danger"><button class="close" data-dismiss="alert"><span class="pficon pficon-close"></span></button><span class="pficon pficon-error-circle-o"></span><strong>This is a really long alert!</strong></div></div>'
+      expect($('#flash_msg_div').html()).toEqual(flash_msg_div);
+    });
+  });
 });