Merge pull request #1294 from spadgett/logs-reisze-bug

Merged by openshift-bot

Author: OpenShift Bot

app/scripts/directives/logViewer.js

@@ -182,8 +182,12 @@ angular.module('openshiftConsole')
               }
             };
 
+            var getLogOutputElement = function() {
+              return $('#' + $scope.logViewerID + ' .log-view-output');
+            };
+
             var fillHeight = function(animate) {
-              var content = $("#" + $scope.logViewerID + ' .log-view-output');
+              var content = getLogOutputElement();
               var contentTop = content.offset().top;
               if (contentTop < 0) {
                 // Content top is off the page already.
@@ -208,6 +212,37 @@ angular.module('openshiftConsole')
               }
             };
 
+            var visibleInterval;
+            var resizeWhenVisible = function() {
+              if (visibleInterval) {
+                return;
+              }
+
+              var done = function() {
+                clearInterval(visibleInterval);
+                visibleInterval = null;
+                // To avoid flicker, the log doesn't display until sized === true
+                $scope.$evalAsync(function() {
+                  $scope.sized = true;
+                });
+              };
+
+              var retries = 0;
+              visibleInterval = setInterval(function() {
+                if (retries > 10) {
+                  done();
+                  return;
+                }
+
+                retries++;
+                var content = getLogOutputElement();
+                if (content.is(':visible')) {
+                  fillHeight();
+                  done();
+                }
+              }, 100);
+            };
+
             // roll up & debounce the various fns to call on resize
             var onResize = _.debounce(function() {
               fillHeight(true);
@@ -318,8 +353,7 @@ angular.module('openshiftConsole')
                   $scope.empty = false;
                   if($scope.state !== 'logs') {
                     $scope.state = 'logs';
-                    // setTimeout so that the log content is visible to correctly calculate fill height.
-                    setTimeout(fillHeight);
+                    resizeWhenVisible();
                   }
                 });
 

app/views/directives/logs/_log-viewer.html

@@ -68,7 +68,8 @@ <h2>Logs are not available.</h2>
 
 
 <!-- must be ng-show rather than ng-if, else DOM is not rendered in time to cache nodes -->
-<div ng-show="state=='logs'">
+<!-- Keep invisible until sized to avoid flicker on initial display. -->
+<div ng-show="state=='logs'" ng-class="{ invisible: !sized }">
   <div class="log-view" ng-attr-id="{{logViewerID}}" ng-class="{'log-fixed-height': fixedHeight}">
     <div
       id="{{logViewerID}}-affixedFollow"
@@ -81,7 +82,7 @@ <h2>Logs are not available.</h2>
         Go to End
       </a>
     </div>
-    <div class="log-view-output" id="{{logViewerID}}-fixed-scrollable" >
+    <div class="log-view-output" id="{{logViewerID}}-fixed-scrollable">
       <table>
         <tbody id="{{logViewerID}}-logContent"></tbody>
       </table>

dist/scripts/scripts.js

@@ -12343,20 +12343,20 @@ var j, n, p, q, r, s = document.documentElement;
 i.logViewerID = _.uniqueId("log-viewer"), i.empty = !0;
 var t, u;
 "ReplicationController" === i.object.kind ? (t = "deploymentconfigs/log", u = d("annotation")(i.object, "deploymentConfig")) :(t = f.kindToResource(i.object.kind) + "/log", u = i.object.metadata.name);
-var v = function() {
+var v, w = function() {
 q = window.innerWidth < l.screenSmMin && !i.fixedHeight ? null :n;
-}, w = function() {
+}, x = function() {
 i.$apply(function() {
 var a = j.getBoundingClientRect();
 i.fixedHeight ? i.showScrollLinks = a && a.height > i.fixedHeight :i.showScrollLinks = a && (a.top < 0 || a.bottom > s.clientHeight);
 });
-}, x = !1, y = function() {
-x ? x = !1 :i.$evalAsync(function() {
+}, y = !1, z = function() {
+y ? y = !1 :i.$evalAsync(function() {
 i.autoScrollActive = !1;
 });
-}, z = function() {
-p.off("scroll", y), m.off("scroll", y), window.innerWidth <= l.screenSmMin && !i.fixedHeight ? m.on("scroll", y) :p.on("scroll", y);
 }, A = function() {
+p.off("scroll", z), m.off("scroll", z), window.innerWidth <= l.screenSmMin && !i.fixedHeight ? m.on("scroll", z) :p.on("scroll", z);
+}, B = function() {
 i.fixedHeight || (window.innerWidth < l.screenSmMin && !i.fixedHeight ? r.removeClass("target-logger-node").affix({
 target:window,
 offset:{
@@ -12368,30 +12368,46 @@ offset:{
 top:i.followAffixTop || 0
 }
 }));
-}, B = function(a) {
-var b = $("#" + i.logViewerID + " .log-view-output"), c = b.offset().top;
+}, C = function() {
+return $("#" + i.logViewerID + " .log-view-output");
+}, D = function(a) {
+var b = C(), c = b.offset().top;
 if (!(c < 0)) {
 var d = $(".ellipsis-pulser").outerHeight(!0), e = i.fixedHeight ? i.fixedHeight :Math.floor($(window).height() - c - d);
 i.chromeless || i.fixedHeight || (e -= 40), a ? b.animate({
 "min-height":e + "px"
 }, "fast") :b.css("min-height", e + "px"), i.fixedHeight && b.css("max-height", e);
 }
-}, C = _.debounce(function() {
-B(!0), v(), z(), w(), A(), y();
+}, E = function() {
+if (!v) {
+var a = function() {
+clearInterval(v), v = null, i.$evalAsync(function() {
+i.sized = !0;
+});
+}, b = 0;
+v = setInterval(function() {
+if (b > 10) return void a();
+b++;
+var c = C();
+c.is(":visible") && (D(), a());
+}, 100);
+}
+}, F = _.debounce(function() {
+D(!0), w(), A(), x(), B(), z();
 }, 100);
-m.on("resize", C);
-var D, E = function() {
-x = !0, k.scrollBottom(q);
-}, F = function() {
-i.autoScrollActive = !i.autoScrollActive, i.autoScrollActive && E();
-}, G = document.createDocumentFragment(), H = _.debounce(function() {
-j.appendChild(G), G = document.createDocumentFragment(), i.autoScrollActive && E(), i.showScrollLinks || w();
+m.on("resize", F);
+var G, H = function() {
+y = !0, k.scrollBottom(q);
+}, I = function() {
+i.autoScrollActive = !i.autoScrollActive, i.autoScrollActive && H();
+}, J = document.createDocumentFragment(), K = _.debounce(function() {
+j.appendChild(J), J = document.createDocumentFragment(), i.autoScrollActive && H(), i.showScrollLinks || x();
 }, 100, {
 maxWait:300
-}), I = function(a) {
-D && (D.stop(), D = null), a || (H.cancel(), j && (j.innerHTML = ""), G = document.createDocumentFragment());
-}, J = function() {
-if (I(), i.run) {
+}), L = function(a) {
+G && (G.stop(), G = null), a || (K.cancel(), j && (j.innerHTML = ""), J = document.createDocumentFragment());
+}, M = function() {
+if (L(), i.run) {
 angular.extend(i, {
 loading:!0,
 autoScrollActive:!0,
@@ -12403,32 +12419,32 @@ follow:!0,
 tailLines:5e3,
 limitBytes:10485760
 }, i.options);
-D = h.createStream(t, u, i.context, a);
+G = h.createStream(t, u, i.context, a);
 var c = 0, d = function(a) {
-c++, G.appendChild(o(c, a)), H();
+c++, J.appendChild(o(c, a)), K();
 };
-D.onMessage(function(b, e, f) {
+G.onMessage(function(b, e, f) {
 i.$evalAsync(function() {
-i.empty = !1, "logs" !== i.state && (i.state = "logs", setTimeout(B));
+i.empty = !1, "logs" !== i.state && (i.state = "logs", E());
 }), b && (a.limitBytes && f >= a.limitBytes && (i.$evalAsync(function() {
 i.limitReached = !0, i.loading = !1;
-}), I(!0)), d(b), !i.largeLog && c >= a.tailLines && i.$evalAsync(function() {
+}), L(!0)), d(b), !i.largeLog && c >= a.tailLines && i.$evalAsync(function() {
 i.largeLog = !0;
 }));
-}), D.onClose(function() {
-D = null, i.$evalAsync(function() {
+}), G.onClose(function() {
+G = null, i.$evalAsync(function() {
 i.autoScrollActive = !1, 0 !== c || i.emptyStateMessage || (i.state = "empty", i.emptyStateMessage = "The logs are no longer available or could not be loaded.");
 }), b(function() {
 i.loading = !1;
 }, 100);
-}), D.onError(function() {
-D = null, i.$evalAsync(function() {
+}), G.onError(function() {
+G = null, i.$evalAsync(function() {
 angular.extend(i, {
 loading:!1,
 autoScrollActive:!1
 }), 0 === c ? (i.state = "empty", i.emptyStateMessage = "The logs are no longer available or could not be loaded.") :i.errorWhileRunning = !0;
 });
-}), D.start();
+}), G.start();
 }
 };
 return g.getLoggingURL().then(function(b) {
@@ -12454,7 +12470,7 @@ j = a;
 }, this.cacheAffixable = function(a) {
 r = $(a);
 }, this.start = function() {
-v(), z(), A();
+w(), A(), B();
 }, angular.extend(i, {
 ready:!0,
 loading:!0,
@@ -12466,12 +12482,12 @@ k.scrollBottom(q);
 onScrollTop:function() {
 i.autoScrollActive = !1, k.scrollTop(q);
 },
-toggleAutoScroll:F,
+toggleAutoScroll:I,
 goChromeless:k.chromelessLink,
-restartLogs:J
+restartLogs:M
 }), i.$on("$destroy", function() {
-I(), m.off("resize", C), m.off("scroll", y), p.off("scroll", y);
-}), "deploymentconfigs/logs" !== t || u ? void i.$watchGroup([ "name", "options.container", "run" ], J) :(i.state = "empty", void (i.emptyStateMessage = "Logs are not available for this replication controller because it was not generated from a deployment configuration."));
+L(), m.off("resize", F), m.off("scroll", z), p.off("scroll", z);
+}), "deploymentconfigs/logs" !== t || u ? void i.$watchGroup([ "name", "options.container", "run" ], M) :(i.state = "empty", void (i.emptyStateMessage = "Logs are not available for this replication controller because it was not generated from a deployment configuration."));
 } ],
 require:"logViewer",
 link:function(a, c, d, e) {

dist/scripts/templates.js

@@ -7586,7 +7586,8 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "\n" +
-    "<div ng-show=\"state=='logs'\">\n" +
+    "\n" +
+    "<div ng-show=\"state=='logs'\" ng-class=\"{ invisible: !sized }\">\n" +
     "<div class=\"log-view\" ng-attr-id=\"{{logViewerID}}\" ng-class=\"{'log-fixed-height': fixedHeight}\">\n" +
     "<div id=\"{{logViewerID}}-affixedFollow\" class=\"log-scroll log-scroll-top\">\n" +
     "<a ng-if=\"loading\" href=\"\" ng-click=\"toggleAutoScroll()\">\n" +