From 45aac65a3c6f413f6d51bbad5c73e6b8ff45b6dc Mon Sep 17 00:00:00 2001
From: Vladimir Polyakov <nrd11k@gmail.com>
Date: Sun, 29 Nov 2015 23:29:39 +0300
Subject: [PATCH] without react terminal updating

---
 .../js/app/components/terminal/terminal.jade  |  7 +---
 static/js/app/components/terminal/terminal.js | 38 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/static/js/app/components/terminal/terminal.jade b/static/js/app/components/terminal/terminal.jade
index 867e1ca..1d314ad 100644
--- a/static/js/app/components/terminal/terminal.jade
+++ b/static/js/app/components/terminal/terminal.jade
@@ -1,6 +1,3 @@
-.terminal
-	pre.terminal_code(ref="code")
-		each row, index in this.state.data
-			Row(row=row, key=index)
-
+.terminal(ref="code")
+	pre.terminal_code
 	.terminal_footer(style={height: '30px'})
diff --git a/static/js/app/components/terminal/terminal.js b/static/js/app/components/terminal/terminal.js
index 8e8a239..ff54c1c 100644
--- a/static/js/app/components/terminal/terminal.js
+++ b/static/js/app/components/terminal/terminal.js
@@ -24,14 +24,20 @@ define([
 		mixins: [Reflux.ListenerMixin],
 		shouldScrollBottom: true,
 		ignoreScrollEvent: false,
+		linesCount: 0,
 		componentDidMount: function() {
+			console.log('did mount');
 			this.listenTo(terminalStore, this.updateItems);
 			var node = this.refs.code.getDOMNode();
 			this.initialScrollPosition = node.getBoundingClientRect().top;
 		},
+		prepareRow: function(row) {
+			return ansiUp.ansi_to_html(row.replace('\r', ''));
+		},
 		prepareOutput: function(output) {
+			var self = this;
 			return output.map(function(row) {
-				return ansiUp.ansi_to_html(row.replace('\r', ''));
+				return self.prepareRow(row);
 			});
 		},
 		componentWillUpdate: function() {
@@ -47,12 +53,40 @@ define([
 				body.scrollTop = this.initialScrollPosition + node.offsetHeight;
 			}
 		},
+		makeCodeLineContent: function(line) {
+			return '<span class="code-line_counter">' + '</span>' +
+				'<div class="code-line_body">' + this.prepareRow(line) + '</div>';
+		},
+		makeCodeLine: function(line, index) {
+			return '<div class="code-line" data-number="' + index + '">' +
+				this.makeCodeLineContent(line) + '</div>';
+		},
 		updateItems: function(build) {
 			// listen just our console update
 			if (build.buildId === this.props.build) {
-				this.setState({data: this.prepareOutput(build.data)});
+				var currentLinesCount = build.data.length,
+					terminal = $('.terminal_code'),
+					rows = terminal.children();
+
+				if (rows.length) {
+					// replace our last node
+					var index = this.linesCount - 1;
+					$(rows[index]).html(this.makeCodeLineContent(build.data[index]));
+				}
+
+				var self = this;
+				terminal.append(
+					_(build.data.slice(this.linesCount)).map(function(line, index) {
+						return self.makeCodeLine(line, self.linesCount + index);
+					})
+				);
+
+				this.linesCount = currentLinesCount;
 			}
 		},
+		shouldComponentUpdate: function() {
+			return false;
+		},
 		render: template,
 		getInitialState: function() {
 			return {