client side console text splitting and scrolling

distributor.js

@@ -61,7 +61,11 @@ exports.init = function(app, callback) {
 					}, this.slot());
 				},
 				function(err, lines) {
-					client.emit('sync', 'data', {lines: lines});
+					var fullText = _(lines).reduce(function(memo, line) {
+						return memo + line.text;
+					}, '')
+
+					client.emit('sync', 'data', {text: fullText});
 					this.pass(true);
 				},
 				function(err) {
@@ -106,39 +110,28 @@ exports.init = function(app, callback) {
 	var buildLogLineNumbersHash = {};
 
 	distributor.on('buildData', function(build, data) {
-		var lines = _(data.split('\n')).chain().map(function(line) {
-				return line.replace('\r', '');
-			}).compact().value(),
-			logLineNumber = buildLogLineNumbersHash[build.id] || 0;
-
-		lines = _(lines).map(function(line, index) {
-			return {
-				number: logLineNumber + index,
-				text: line
-			};
-		});
-		buildLogLineNumbersHash[build.id] = logLineNumber + lines.length;
+		var logLineNumber = buildLogLineNumbersHash[build.id] || 0;
 
+		buildLogLineNumbersHash[build.id] = ++logLineNumber
 		app.dataio.resource('build' + build.id).clientEmitSync(
 			'data',
-			{lines: lines}
+			{text: data}
 		);
 
-		_(lines).each(function(line) {
-			line.buildId = build.id;
-		});
 		// write build logs to db
-		if (lines.length) {
-			db.logLines.put(lines, function(err) {
-				if (err) {
-					logger.error(
-						'Error during write log line "' + logLineNumber +
-						'" for build "' + build.id + '":',
-						err.stack || err
-					);
-				}
-			});
-		}
+		db.logLines.put({
+			text: data,
+			number: logLineNumber,
+			buildId: build.id
+		}, function(err) {
+			if (err) {
+				logger.error(
+					'Error during write log line "' + logLineNumber +
+					'" for build "' + build.id + '":',
+					err.stack || err
+				);
+			}
+		});
 	});
 
 	callback(null, distributor);

static/css/sources/components/terminal.less

@@ -8,7 +8,6 @@
 
 	&_code {
 		clear: left;
-		height: 500px;
 		min-height: 42px;
 		padding: 15px 0;
 		color: #F1F1F1;

static/js/app/components/terminal/terminal.jade

@@ -4,3 +4,5 @@
 			.code-line(key=index)
 				span.code-line_counter
 				.code-line_body!= row
+
+	.terminal_footer(style={height: '30px'})

static/js/app/components/terminal/terminal.js

@@ -14,20 +14,25 @@ define([
 		ignoreScrollEvent: false,
 		componentDidMount: function() {
 			this.listenTo(terminalStore, this.updateItems);
+			var node = this.refs.code.getDOMNode();
+			this.initialScrollPosition = node.getBoundingClientRect().top;
 		},
 		prepareOutput: function(output) {
 			return output.map(function(row) {
-				return ansiUp.ansi_to_html(row.text);
+				return ansiUp.ansi_to_html(row.replace('\r', ''));
 			});
 		},
 		componentWillUpdate: function() {
-			var node = this.refs.code.getDOMNode();
-			this.shouldScrollBottom = node.scrollTop + node.offsetHeight >= node.scrollHeight;
+			var node = this.refs.code.getDOMNode(),
+				body = document.getElementsByTagName('body')[0];
+			this.shouldScrollBottom = window.innerHeight + body.scrollTop >=
+				node.offsetHeight + this.initialScrollPosition;
 		},
 		componentDidUpdate: function() {
 			if (this.shouldScrollBottom) {
-				var node = this.refs.code.getDOMNode();
-				node.scrollTop = node.scrollHeight;
+				var node = this.refs.code.getDOMNode(),
+					body = document.getElementsByTagName('body')[0];
+				body.scrollTop = this.initialScrollPosition + node.offsetHeight;
 			}
 		},
 		updateItems: function(build) {

static/js/app/stores/terminal.js

@@ -14,6 +14,30 @@ define([
 			this.connectedResourcesHash = {};
 		},
 
+		transformData: function(data) {
+			var splittedData  = data.text.split('\n');
+
+			if (this.currentLine) {
+				this.lines.pop();
+			}
+
+			this.currentLine += _(splittedData).first();
+			this.lines.push(this.currentLine);
+
+			if (splittedData.length > 1) {
+				if (_(splittedData).last() === '') {
+					this.currentLine = '';
+					splittedData = _(splittedData.slice(1)).initial();
+				} else {
+					this.currentLine = _(splittedData).last();
+					splittedData = _(splittedData).tail();
+				}
+				this.lines = this.lines.concat(splittedData);
+			}
+
+			return this.lines;
+		},
+
 		onReadTerminalOutput: function(build) {
 			var self = this,
 				output = [],
@@ -29,16 +53,17 @@ define([
 				}
 
 				connect.resource(resourceName).subscribe('data', function(data) {
-					output = output.concat(data.lines);
-
 					self.trigger({
 						buildId: build.id,
 						name: 'Console for build #' + build.id,
-						data: output
+						data: self.transformData(data)
 					});
 				});
 			};
 
+			this.lines = [];
+			this.currentLine = '';
+
 			// create data resource for completed build
 			if (build.completed) {
 				connect.resource('projects').sync(