Skip to content

Commit

Permalink
Only show scroll links when log is offscreen
Browse files Browse the repository at this point in the history
  • Loading branch information
@spadgett
spadgett committed Nov 2, 2015
1 parent 0e08c78 commit 674f101
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 81 deletions.
46 changes: 28 additions & 18 deletions assets/app/scripts/directives/logViewer.js
View file
Expand Up @@ -4,7 +4,8 @@ angular.module('openshiftConsole')
.directive('logViewer', [
'DataService',
'logLinks',
function(DataService, logLinks) {
'$timeout',
function(DataService, logLinks, $timeout) {

// Create a template for each log line that we clone below.
var logLineTemplate = $('<div row class="log-line"/>');
Expand Down Expand Up @@ -36,6 +37,13 @@ angular.module('openshiftConsole')
// Default to false. Let the user click the follow link to start auto-scrolling.
$scope.autoScroll = false;

var updateScrollLinks = function() {
$scope.$apply(function() {
var html = document.documentElement, r = document.getElementById('logContent').getBoundingClientRect();
$scope.showScrollLinks = r && r.bottom > html.clientHeight;
});
};

// Set to true before auto-scrolling.
var autoScrollingNow = false;
var onScroll = function() {
Expand All @@ -52,6 +60,9 @@ angular.module('openshiftConsole')
};
$(window).scroll(onScroll);

var onResize = _.debounce(updateScrollLinks, 50);
$(window).resize(onResize);

var scrollBottom = function() {
// Tell the scroll listener this is an auto-scroll. The listener
// will reset it to false.
Expand Down Expand Up @@ -88,6 +99,9 @@ angular.module('openshiftConsole')
if ($scope.autoScroll) {
scrollBottom();
}
if (!$scope.showScrollLinks) {
updateScrollLinks();
}
}, 100, { maxWait: 300 });

// maintaining one streamer reference & ensuring its closed before we open a new,
Expand Down Expand Up @@ -119,7 +133,8 @@ angular.module('openshiftConsole')
loading: true,
error: false,
autoScroll: false,
limitReached: false
limitReached: false,
showScrollLinks: false
});

var options = angular.extend({
Expand All @@ -131,13 +146,12 @@ angular.module('openshiftConsole')
DataService.createStream($scope.kind, $scope.name, $scope.context, options);

var lastLineNumber = 0;

var addLine = function(lineNumber, text) {
var addLine = function(text) {
lastLineNumber++;

// Append the line to the document fragment buffer.
var line = logLineTemplate.cloneNode(true);
line.childNodes[0].childNodes[0].appendChild(document.createTextNode(lineNumber));
line.childNodes[0].childNodes[0].appendChild(document.createTextNode(lastLineNumber));
line.lastChild.appendChild(document.createTextNode(text));
buffer.appendChild(line);

Expand All @@ -153,14 +167,7 @@ angular.module('openshiftConsole')
stopStreaming(true);
}

addLine(lastLineNumber, msg);

// Show the start and end links if the log is more than 25 lines.
if (!$scope.showScrollLinks && lastLineNumber > 25) {
$scope.$evalAsync(function() {
$scope.showScrollLinks = true;
});
}
addLine(msg);

// Warn the user if we might be showing a partial log.
if (!$scope.largeLog && lastLineNumber >= options.tailLines) {
Expand All @@ -173,11 +180,13 @@ angular.module('openshiftConsole')
streamer.onClose(function() {
streamer = null;
$scope.$evalAsync(function() {
angular.extend($scope, {
loading: false,
autoScroll: false
});
$scope.autoScroll = false;
});

// Wrap in a timeout so that content displays before we remove the loading ellipses.
$timeout(function() {
$scope.loading = false;
}, 100);
});

streamer.onError(function() {
Expand All @@ -200,8 +209,9 @@ angular.module('openshiftConsole')
// Close streamer if open. (No-op if not streaming.)
stopStreaming();

// Stop listening for scroll events.
// Stop listening for scroll and resize events.
$(window).off('scroll', onScroll);
$(window).off('resize', onResize);
});

angular.extend($scope, {
Expand Down
6 changes: 3 additions & 3 deletions assets/app/views/directives/logs/_log-formatted.html
View file
Expand Up @@ -11,11 +11,11 @@
offset-top="445"
offset-bottom="90">
<a ng-if="loading" href="" ng-click="toggleAutoScroll()">
<span ng-if="!autoScroll">Follow log</span>
<span ng-if="!autoScroll">Follow</span>
<span ng-if="autoScroll">Stop following</span>
</a>
<a ng-if="!loading" href="" ng-click="scrollBottom()">
Go to end of log
Go to end
</a>
</div>
<div flex column class="log-view-output">
Expand All @@ -27,7 +27,7 @@
<div
ng-show="showScrollLinks"
class="log-scroll log-scroll-bottom">
<a href="" ng-click="scrollTop()">Go to start of log</a>
<a href="" ng-click="scrollTop()">Go to top</a>
</div>
</div>
<a
Expand Down
2 changes: 1 addition & 1 deletion assets/app/views/directives/logs/_log-viewer.html
View file
Expand Up @@ -42,6 +42,6 @@
End of log
</div>
<div ng-if="error" class="text-muted">
An error occurred.
An error occurred loading the log.
<a href="" ng-click="restartLogs()">Reload</a>
</div>
123 changes: 64 additions & 59 deletions pkg/assets/bindata.go
View file
Expand Up @@ -5140,9 +5140,9 @@ k && (a.cancel(k), k = null);
});
}
};
} ]), angular.module("openshiftConsole").directive("logViewer", [ "DataService", "logLinks", function(a, b) {
var c = $('<div row class="log-line"/>');
return $('<div class="log-line-number"><div row flex main-axis="end"></div></div>').appendTo(c), $('<div flex class="log-line-text"/>').appendTo(c), c = c.get(0), {
} ]), angular.module("openshiftConsole").directive("logViewer", [ "DataService", "logLinks", "$timeout", function(a, b, c) {
var d = $('<div row class="log-line"/>');
return $('<div class="log-line-number"><div row flex main-axis="end"></div></div>').appendTo(d), $('<div flex class="log-line-text"/>').appendTo(d), d = d.get(0), {
restrict:"AE",
transclude:!0,
templateUrl:"views/directives/logs/_log-viewer.html",
Expand All @@ -5156,81 +5156,86 @@ start:"=?",
end:"=?",
chromeless:"=?"
},
controller:[ "$scope", function(d) {
d.loading = !0, d.autoScroll = !1;
var e = !1, f = function() {
e ? e = !1 :d.$evalAsync(function() {
d.autoScroll = !1;
controller:[ "$scope", function(e) {
e.loading = !0, e.autoScroll = !1;
var f = function() {
e.$apply(function() {
var a = document.documentElement, b = document.getElementById("logContent").getBoundingClientRect();
e.showScrollLinks = b && b.bottom > a.clientHeight;
});
}, g = !1, h = function() {
g ? g = !1 :e.$evalAsync(function() {
e.autoScroll = !1;
});
};
$(window).scroll(f);
var g, h = function() {
e = !0, b.scrollBottom();
}, i = function() {
d.autoScroll = !d.autoScroll, d.autoScroll && h();
}, j = function() {
d.autoScroll = !1, b.scrollTop();
}, k = document.createDocumentFragment(), l = _.debounce(function() {
$(window).scroll(h);
var i = _.debounce(f, 50);
$(window).resize(i);
var j, k = function() {
g = !0, b.scrollBottom();
}, l = function() {
e.autoScroll = !e.autoScroll, e.autoScroll && k();
}, m = function() {
e.autoScroll = !1, b.scrollTop();
}, n = document.createDocumentFragment(), o = _.debounce(function() {
var a = document.getElementById("logContent");
a.appendChild(k), k = document.createDocumentFragment(), d.autoScroll && h();
a.appendChild(n), n = document.createDocumentFragment(), e.autoScroll && k(), e.showScrollLinks || f();
}, 100, {
maxWait:300
}), m = function(a) {
g && (g.stop(), g = null), a || (l.cancel(), $("#logContent").empty(), k = document.createDocumentFragment());
}, n = function() {
if (m(), d.name) {
angular.extend(d, {
}), p = function(a) {
j && (j.stop(), j = null), a || (o.cancel(), $("#logContent").empty(), n = document.createDocumentFragment());
}, q = function() {
if (p(), e.name) {
angular.extend(e, {
loading:!0,
error:!1,
autoScroll:!1,
limitReached:!1
limitReached:!1,
showScrollLinks:!1
});
var b = angular.extend({
follow:!0,
tailLines:1e3,
limitBytes:10485760
}, d.options);
g = a.createStream(d.kind, d.name, d.context, b);
var e = 0, f = function(a, b) {
e++;
var d = c.cloneNode(!0);
d.childNodes[0].childNodes[0].appendChild(document.createTextNode(a)), d.lastChild.appendChild(document.createTextNode(b)), k.appendChild(d), l();
};
g.onMessage(function(a, c, g) {
b.limitBytes && g >= b.limitBytes && (d.$evalAsync(function() {
d.limitReached = !0, d.loading = !1;
}), m(!0)), f(e, a), !d.showScrollLinks && e > 25 && d.$evalAsync(function() {
d.showScrollLinks = !0;
}), !d.largeLog && e >= b.tailLines && d.$evalAsync(function() {
d.largeLog = !0;
});
}), g.onClose(function() {
g = null, d.$evalAsync(function() {
angular.extend(d, {
loading:!1,
autoScroll:!1
});
});
}), g.onError(function() {
g = null, d.$evalAsync(function() {
angular.extend(d, {
}, e.options);
j = a.createStream(e.kind, e.name, e.context, b);
var f = 0, g = function(a) {
f++;
var b = d.cloneNode(!0);
b.childNodes[0].childNodes[0].appendChild(document.createTextNode(f)), b.lastChild.appendChild(document.createTextNode(a)), n.appendChild(b), o();
};
j.onMessage(function(a, c, d) {
b.limitBytes && d >= b.limitBytes && (e.$evalAsync(function() {
e.limitReached = !0, e.loading = !1;
}), p(!0)), g(a), !e.largeLog && f >= b.tailLines && e.$evalAsync(function() {
e.largeLog = !0;
});
}), j.onClose(function() {
j = null, e.$evalAsync(function() {
e.autoScroll = !1;
}), c(function() {
e.loading = !1;
}, 100);
}), j.onError(function() {
j = null, e.$evalAsync(function() {
angular.extend(e, {
loading:!1,
error:!0,
autoScroll:!1
});
});
}), g.start();
}), j.start();
}
};
d.$watchGroup([ "name", "options.container" ], n), d.$on("$destroy", function() {
m(), $(window).off("scroll", f);
}), angular.extend(d, {
e.$watchGroup([ "name", "options.container" ], q), e.$on("$destroy", function() {
p(), $(window).off("scroll", h), $(window).off("resize", i);
}), angular.extend(e, {
ready:!0,
scrollBottom:b.scrollBottom,
scrollTop:j,
toggleAutoScroll:i,
scrollTop:m,
toggleAutoScroll:l,
goChromeless:b.chromelessLink,
restartLogs:n
restartLogs:q
});
} ]
};
Expand Down Expand Up @@ -8610,11 +8615,11 @@ var _scriptsTemplatesJs = []byte(`angular.module('openshiftConsoleTemplates', []
"<div flex class=\"log-view\">\n" +
"<div ng-show=\"showScrollLinks\" class=\"log-scroll log-scroll-top\" affix offset-top=\"445\" offset-bottom=\"90\">\n" +
"<a ng-if=\"loading\" href=\"\" ng-click=\"toggleAutoScroll()\">\n" +
"<span ng-if=\"!autoScroll\">Follow log</span>\n" +
"<span ng-if=\"!autoScroll\">Follow</span>\n" +
"<span ng-if=\"autoScroll\">Stop following</span>\n" +
"</a>\n" +
"<a ng-if=\"!loading\" href=\"\" ng-click=\"scrollBottom()\">\n" +
"Go to end of log\n" +
"Go to end\n" +
"</a>\n" +
"</div>\n" +
"<div flex column class=\"log-view-output\">\n" +
Expand All @@ -8624,7 +8629,7 @@ var _scriptsTemplatesJs = []byte(`angular.module('openshiftConsoleTemplates', []
"</div>\n" +
"</div>\n" +
"<div ng-show=\"showScrollLinks\" class=\"log-scroll log-scroll-bottom\">\n" +
"<a href=\"\" ng-click=\"scrollTop()\">Go to start of log</a>\n" +
"<a href=\"\" ng-click=\"scrollTop()\">Go to top</a>\n" +
"</div>\n" +
"</div>\n" +
"<a id=\"logBottom\" name=\"logBottom\"></a>\n" +
Expand Down Expand Up @@ -8679,7 +8684,7 @@ var _scriptsTemplatesJs = []byte(`angular.module('openshiftConsoleTemplates', []
"End of log\n" +
"</div>\n" +
"<div ng-if=\"error\" class=\"text-muted\">\n" +
"An error occurred.\n" +
"An error occurred loading the log.\n" +
"<a href=\"\" ng-click=\"restartLogs()\">Reload</a>\n" +
"</div>"
);
Expand Down

0 comments on commit 674f101

Please sign in to comment.