start working on build log virtual scrolling

resources/builds.js

@@ -70,7 +70,7 @@ module.exports = function(app) {
 				db.logLines.find(findParams, this.slot());
 			},
 			function(err, logLines) {
-				var lines = _(logLines).pluck('text').reverse(),
+				var lines = logLines.reverse(),
 					total = logLines.length ? logLines[0].number : 0;
 
 				res.send({lines: lines, total: total});
@@ -84,16 +84,20 @@ module.exports = function(app) {
 			function() {
 				var buildId = req.data.buildId,
 					from = req.data.from,
-					to = req.data.to;
+					to = req.data.to,
+					count = to - from;
 
 				db.logLines.find({
 					start: {buildId: buildId, numberStr: utils.toNumberStr(from)},
 					end: {buildId: buildId, numberStr: utils.toNumberStr(to)}
 				}, this.slot());
+
+				this.pass(count);
 			},
-			function(err, logLines) {
+			function(err, logLines, count) {
 				res.send({
-					lines: _(logLines).pluck('text')
+					lines: logLines,
+					isLast: logLines.length < count
 				});
 			},
 			next

static/js/app/components/buildLog/index.jade

@@ -14,6 +14,17 @@ div
 div
 	| from: 
 	input(type="text", value=this.state.from, onChange=this.onFromChange)
+
 br
-.terminal
+.terminal(style="width: 900px; float: left;")
 	.terminal_code(ref="code")!= output
+
+div.terminal-virtual-scroll(
+	style="width: 15px; height: 320px; overflow: scroll; float: clear;",
+	onScroll=this.onVirtualScroll
+)
+	- var height = total * 15;
+	div(style="height: #{height}px;")
+div
+	| virtual scroll top:
+	span= this.state.virtualScrollTop

static/js/app/components/buildLog/index.js

@@ -2,17 +2,19 @@
 
 define([
 	'react', 'reflux', 'app/actions/buildLog', 'app/stores/buildLog',
-	'ansi_up', 'underscore', 'templates/app/components/buildLog/index'
+	'ansi_up', 'underscore', 'templates/app/components/buildLog/index',
+	'jquery'
 ], function(
 	React, Reflux, BuildLogActions, buildLogStore,
-	ansiUp, _, template
+	ansiUp, _, template,
+	$
 ) {
-	var chunkSize = 20;
+	var chunkSize = 40;
 
 	return React.createClass({
 		mixins: [
 			Reflux.connectFilter(buildLogStore, 'data', function(data) {
-				data.output = data.lines.join('');
+				data.output = _(data.lines).pluck('text').join('');
 				data.output = data.output.replace(
 					/(.*)\n/gi,
 					'<span class="terminal_code_newline">$1</span>'
@@ -36,6 +38,40 @@ define([
 				to: from + chunkSize - 1
 			});
 		},
+		onVirtualScroll: function(event) {
+			this.virtualScrollTop = $(event.target).scrollTop();
+
+			this.setState({virtualScrollTop: this.virtualScrollTop});
+
+			var isDown = this.virtualScrollTop > this.lastVirtualScrollTop;
+			var inc = isDown ? 15 : -15;
+
+			var scrollTop = $('.terminal_code').scrollTop(),
+				viewHeight = $('.terminal_code').height(),
+				contentHeight = $('.terminal_code div:first').height();
+
+			if (
+				(isDown && scrollTop + viewHeight + inc < contentHeight) ||
+				(!isDown && scrollTop + inc > 0)
+			) {
+				$('.terminal_code').scrollTop(scrollTop + inc);
+			} else {
+				var lines = this.state.data.lines,
+					line = lines[isDown ? lines.length - 1 : 0],
+					from = isDown ? line.number : line.number - chunkSize;
+
+				from = from < 0 ? 1 : from;
+				console.log('>>> end = ', line, from);
+
+				BuildLogActions.getLines({
+					buildId: this.props.params.buildId,
+					from: from,
+					to: from + chunkSize - 1
+				});
+			}
+
+			this.lastVirtualScrollTop = this.virtualScrollTop;
+		},
 		render: template
 	});
 });

static/js/app/stores/buildLog.js

@@ -20,8 +20,10 @@ define([
 
 		onGetTail: function(params) {
 			var self = this;
+			console.time('>>> getBuildLogTail');
 			resource.sync('getBuildLogTail', params, function(err, data) {
 				if (err) throw err;
+				console.timeEnd('>>> getBuildLogTail');
 				self.data = data;
 				self.trigger(self.data);
 			});
@@ -29,8 +31,11 @@ define([
 
 		onGetLines: function(params) {
 			var self = this;
+			console.time('>>> getBuildLogLines');
 			resource.sync('getBuildLogLines', params, function(err, data) {
 				if (err) throw err;
+				console.timeEnd('>>> getBuildLogLines');
+				console.log('>>> isLast log lines = ', data.isLast);
 				self.data.lines = data.lines;
 				self.trigger(self.data);
 			});