AMBARI-7077. Views UI: iframe container for View should auto expand to fit. (onechiporenko)

ambari-web/app/assets/licenses/NOTICE.txt

@@ -42,4 +42,6 @@ Copyright (c) 2008-2012, Ryan McGeary (ryan -[at]- mcgeary [*dot*] org)
 This product includes Spin.js (http://fgnass.github.com/spin.js/ - MIT license)
 Copyright (c) 2011 Felix Gnass [fgnass at neteye dot de]
 
-This product includes Moment.js (https://github.com/moment/moment/ - MIT license)
+This product includes Moment.js (https://github.com/moment/moment/ - MIT license)
+
+This product includes iframeAutoHeight.js (http://github.com/house9/jquery-iframe-auto-height - MIT license)

ambari-web/app/styles/application.less

@@ -6816,7 +6816,6 @@ i.icon-asterisks {
 }
 .views_sizes {
   width:100%;
-  min-height:600px;
   border: 0;
 }
 

ambari-web/app/views/main/views/details.js

@@ -27,6 +27,34 @@ App.MainViewsDetailsView = Em.View.extend({
   attributeBindings: ['src','seamless'],
   seamless: "seamless",
 
+  interval: null,
+
+  /**
+   * Drop autoHeight timer
+   */
+  willDestroyElement: function() {
+    var interval = this.get('interval');
+    if (interval) {
+      clearInterval(interval);
+    }
+  },
+
+  /**
+   * For view's iframe do autoHeight with timer
+   * Timer is dropped when user navigates away
+   */
+  didInsertElement: function() {
+    var interval,
+      self = this,
+      timer = function (resizeFunction, iframe) {
+        interval = setInterval(function() {
+          resizeFunction(iframe);
+        }, 100);
+        self.set('interval', interval);
+    };
+    $('iframe').iframeAutoHeight({triggerFunctions: [timer]});
+  },
+
   src: function() {
     return window.location.origin + this.get('controller.content.href');
   }.property('controller.content')

ambari-web/vendor/scripts/jquery.iframe-auto-height.plugin.1.9.5.js

@@ -0,0 +1,224 @@
+/*jslint white: true, indent: 2, onevar: false, browser: true, undef: true, nomen: false, eqeqeq: true, plusplus: false, bitwise: true, regexp: true, strict: false, newcap: true, immed: true */
+/*global window, console, jQuery, setTimeout */
+
+/*
+  Plugin: iframe autoheight jQuery Plugin
+  Version: 1.9.5
+  Author and Contributors
+  ========================================
+  NATHAN SMITH (http://sonspring.com/)
+  Jesse House (https://github.com/house9)
+  aaron manela (https://github.com/aaronmanela)
+  Hideki Abe (https://github.com/hideki-a)
+  Patrick Clark (https://github.com/hellopat)
+  ChristineP2 (https://github.com/ChristineP2)
+  Mmjavellana (https://github.com/Mmjavellana)
+  yiqing-95 (https://github.com/yiqing-95)
+  jcaspian (https://github.com/jcaspian)
+  adamjgray (https://github.com/adamjgray)
+  Jens Bissinger (https://github.com/dpree)
+  jbreton (https://github.com/jbreton)
+  mindmelting (https://github.com/mindmelting)
+
+  File: jquery.iframe-auto-height.plugin.js
+  Remarks: original code from http://sonspring.com/journal/jquery-iframe-sizing
+  Description: when the page loads set the height of an iframe based on the height of its contents
+  see README: http://github.com/house9/jquery-iframe-auto-height
+
+*/
+(function ($) {
+  $.fn.iframeAutoHeight = function (spec) {
+
+    var undef;
+    if ($.browser === undef) {
+      var message = [];
+      message.push("WARNING: you appear to be using a newer version of jquery which does not support the $.browser variable.");
+      message.push("The jQuery iframe auto height plugin relies heavly on the $.browser features.");
+      message.push("Install jquery-browser: https://raw.github.com/house9/jquery-iframe-auto-height/master/release/jquery.browser.js");
+      alert(message.join("\n"));
+      return $;
+    }
+
+    // set default option values
+    var options = $.extend({
+        heightOffset: 0,
+        minHeight: 0,
+        maxHeight: 0,
+        callback: function (newHeight) {},
+        animate: false,
+        debug: false,
+        diagnostics: false, // used for development only
+        resetToMinHeight: false,
+        triggerFunctions: [],
+        heightCalculationOverrides: []
+      }, spec);
+
+    // logging
+    function debug(message) {
+      if (options.debug && options.debug === true && window.console) {
+        console.log(message);
+      }
+    }
+
+    // not used by production code
+    function showDiagnostics(iframe, calledFrom) {
+      debug("Diagnostics from '" + calledFrom + "'");
+      try {
+        debug("  " + $(iframe, window.top.document).contents().find('body')[0].scrollHeight + " for ...find('body')[0].scrollHeight");
+        debug("  " + $(iframe.contentWindow.document).height() + " for ...contentWindow.document).height()");
+        debug("  " + $(iframe.contentWindow.document.body).height() + " for ...contentWindow.document.body).height()");
+      } catch (ex) {
+        // ie fails when called during for each, ok later on
+        // probably not an issue if called in a document ready block
+        debug("  unable to check in this state");
+      }
+      debug("End diagnostics -> results vary by browser and when diagnostics are requested");
+    }
+
+    // show all option values
+    debug(options);
+
+    // ******************************************************
+    // iterate over the matched elements passed to the plugin ; return will make it chainable
+    return this.each(function () {
+
+      // ******************************************************
+      // http://api.jquery.com/jQuery.browser/
+      var strategyKeys = ['webkit', 'mozilla', 'msie', 'opera'];
+      var strategies = {};
+      strategies['default'] = function (iframe, $iframeBody, options, browser) {
+        // NOTE: this is how the plugin determines the iframe height, override if you need custom
+        return $iframeBody[0].scrollHeight + options.heightOffset;
+      };
+
+      jQuery.each(strategyKeys, function (index, value) {
+        // use the default strategy for all browsers, can be overridden if desired
+        strategies[value] = strategies['default'];
+      });
+
+      // override strategies if registered in options
+      jQuery.each(options.heightCalculationOverrides, function (index, value) {
+        strategies[value.browser] = value.calculation;
+      });
+
+      function findStrategy(browser) {
+        var strategy = null;
+
+        jQuery.each(strategyKeys, function (index, value) {
+          if (browser[value]) {
+            strategy = strategies[value];
+            return false;
+          }
+        });
+
+        if (strategy === null) {
+          strategy = strategies['default'];
+        }
+
+        return strategy;
+      }
+      // ******************************************************
+
+      // for use by webkit only
+      var loadCounter = 0;
+
+      var iframeDoc = this.contentDocument || this.contentWindow.document;
+
+      // resizeHeight
+      function resizeHeight(iframe) {
+        if (options.diagnostics) {
+          showDiagnostics(iframe, "resizeHeight");
+        }
+
+        // set the iframe size to minHeight so it'll get smaller on resizes in FF and IE
+        if (options.resetToMinHeight && options.resetToMinHeight === true) {
+          iframe.style.height = options.minHeight + 'px';
+        }
+
+        // get the iframe body height and set inline style to that plus a little
+        var $body = $(iframe, window.top.document).contents().find('body');
+        var strategy = findStrategy($.browser);
+        var newHeight = strategy(iframe, $body, options, $.browser);
+        debug(newHeight);
+
+        if (newHeight < options.minHeight) {
+          debug("new height is less than minHeight");
+          newHeight = options.minHeight;
+        }
+
+        if (options.maxHeight > 0 && newHeight > options.maxHeight) {
+          debug("new height is greater than maxHeight");
+          newHeight = options.maxHeight;
+        }
+
+        newHeight += options.heightOffset;
+
+        debug("New Height: " + newHeight);
+        if (options.animate) {
+          $(iframe).animate({height: newHeight + 'px'}, {duration: 500});
+        } else {
+          iframe.style.height = newHeight + 'px';
+        }
+
+        options.callback.apply($(iframe), [{newFrameHeight: newHeight}]);
+      } // END resizeHeight
+
+      // debug me
+      debug(this);
+      if (options.diagnostics) {
+        showDiagnostics(this, "each iframe");
+      }
+
+      // if trigger functions are registered, invoke them
+      if (options.triggerFunctions.length > 0) {
+        debug(options.triggerFunctions.length + " trigger Functions");
+        for (var i = 0; i < options.triggerFunctions.length; i++) {
+          options.triggerFunctions[i](resizeHeight, this);
+        }
+      }
+
+      // Check if browser is Webkit (Safari/Chrome) or Opera
+      if ($.browser.webkit || $.browser.opera || $.browser.chrome) {
+        debug("browser is webkit or opera");
+
+        // Start timer when loaded.
+        $(this).load(function () {
+          var delay = 0;
+          var iframe = this;
+
+          var delayedResize = function () {
+            resizeHeight(iframe);
+          };
+
+          if (loadCounter === 0) {
+            // delay the first one
+            delay = 500;
+          } else {
+            // Reset iframe height to 0 to force new frame size to fit window properly
+            // this is only an issue when going from large to small iframe, not executed on page load
+            iframe.style.height = options.minHeight + 'px';
+          }
+
+          debug("load delay: " + delay);
+          setTimeout(delayedResize, delay);
+          loadCounter++;
+        });
+
+        // Safari and Opera need a kick-start.
+        var source = $(this).attr('src');
+        $(this).attr('src', '');
+        $(this).attr('src', source);
+      } else {
+        // For other browsers.
+        if(iframeDoc.readyState  === 'complete') {
+          resizeHeight(this);
+        } else {
+          $(this).load(function () {
+            resizeHeight(this);
+          });
+        }
+      } // if browser
+
+    }); // $(this).each(function () {
+  }; // $.fn.iframeAutoHeight = function (options) {
+}(jQuery)); // (function ($) {