From bc609373ac7aa6f8885c47e54dfe0fb8132236ab Mon Sep 17 00:00:00 2001
From: oleg <oleg.korobenko@gmail.com>
Date: Thu, 15 Oct 2015 08:20:08 +0300
Subject: [PATCH] start working on build log virtual scrolling

---
 resources/builds.js                          | 12 ++++--
 static/js/app/components/buildLog/index.jade | 13 +++++-
 static/js/app/components/buildLog/index.js   | 44 ++++++++++++++++++--
 static/js/app/stores/buildLog.js             |  5 +++
 4 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/resources/builds.js b/resources/builds.js
index ea0853e..2e0d046 100644
--- a/resources/builds.js
+++ b/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
diff --git a/static/js/app/components/buildLog/index.jade b/static/js/app/components/buildLog/index.jade
index 7477e2b..9d34db4 100644
--- a/static/js/app/components/buildLog/index.jade
+++ b/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
diff --git a/static/js/app/components/buildLog/index.js b/static/js/app/components/buildLog/index.js
index f973856..3822419 100644
--- a/static/js/app/components/buildLog/index.js
+++ b/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
 	});
 });
diff --git a/static/js/app/stores/buildLog.js b/static/js/app/stores/buildLog.js
index 6e4eb81..0d54489 100644
--- a/static/js/app/stores/buildLog.js
+++ b/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);
 			});