From ebedeab8f250dcb0f23b2cb641a3fe01fb0f4a63 Mon Sep 17 00:00:00 2001
From: Vladimir Polyakov <nrd11k@gmail.com>
Date: Sun, 14 Jun 2015 18:24:03 +0300
Subject: [PATCH] terminal functionality

---
 bower.json                                    |  3 +-
 static/css/sources/components/terminal.less   | 11 +++++--
 static/js/app/components/app/template.jade    |  2 +-
 static/js/app/components/builds/view.jade     |  4 ++-
 .../js/app/components/terminal/terminal.jade  |  4 +--
 static/js/app/components/terminal/terminal.js | 32 ++++++++++++++++---
 static/js/main.js                             |  3 +-
 7 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/bower.json b/bower.json
index cc2b218..a4e640d 100644
--- a/bower.json
+++ b/bower.json
@@ -12,7 +12,8 @@
     "reflux": "0.2.7",
     "bootstrap": "3.3.4",
     "font-awesome": "4.3.0",
-    "react-router": "0.13.3"
+    "react-router": "0.13.3",
+    "ansi_up": "1.2.1"
   },
   "moduleType": [
     "amd"
diff --git a/static/css/sources/components/terminal.less b/static/css/sources/components/terminal.less
index 30c56f6..7d9b739 100644
--- a/static/css/sources/components/terminal.less
+++ b/static/css/sources/components/terminal.less
@@ -1,6 +1,13 @@
 .terminal {
+	box-sizing: border-box;
 	&_code {
-		/*max-height: 100px;*/
-		/*overflow-y: scroll;*/
+		max-height: 200px;
+		padding: 4px;
+		box-sizing: border-box;
+		overflow-y: scroll;
+		border: none;
+		white-space: pre-wrap;
+		color: white;
+		background-color: black;
 	}
 }
diff --git a/static/js/app/components/app/template.jade b/static/js/app/components/app/template.jade
index 649297b..aff40eb 100644
--- a/static/js/app/components/app/template.jade
+++ b/static/js/app/components/app/template.jade
@@ -1,5 +1,5 @@
 .main-row
 	.row
 		.col-md-8
-			h2 Active builds
+			h2 Last builds
 			BuildsList()
diff --git a/static/js/app/components/builds/view.jade b/static/js/app/components/builds/view.jade
index 151340b..1251b17 100644
--- a/static/js/app/components/builds/view.jade
+++ b/static/js/app/components/builds/view.jade
@@ -30,4 +30,6 @@ if this.state.build
 			| Error: 
 			span= this.state.build.error
 
-	Terminal(build=this.state.build.id)
+	.row
+		.col-md-8
+			Terminal(build=this.state.build.id)
diff --git a/static/js/app/components/terminal/terminal.jade b/static/js/app/components/terminal/terminal.jade
index 8384e61..1b7707b 100644
--- a/static/js/app/components/terminal/terminal.jade
+++ b/static/js/app/components/terminal/terminal.jade
@@ -1,2 +1,2 @@
-.terminal
-	pre.terminal_code= this.state.data
+.terminal(onScroll=this.onScroll)
+	.terminal_code(ref="code", onScroll=this.onScroll)!= this.state.data
diff --git a/static/js/app/components/terminal/terminal.js b/static/js/app/components/terminal/terminal.js
index 6a25fc9..42213d9 100644
--- a/static/js/app/components/terminal/terminal.js
+++ b/static/js/app/components/terminal/terminal.js
@@ -1,20 +1,44 @@
 'use strict';
 
 define([
+	'underscore',
 	'react',
 	'reflux',
 	'app/stores/terminal',
+	'ansi_up',
 	'templates/app/components/terminal/terminal'
-], function(React, Reflux, terminalStore, template) {
+], function(_, React, Reflux, terminalStore, ansiUp, template) {
 	var Component = React.createClass({
 		mixins: [Reflux.ListenerMixin],
+		scrollOnData: true,
+		ignoreScrollEvent: false,
 		componentDidMount: function() {
 			this.listenTo(terminalStore, this.updateItems);
 		},
-		updateItems: function(data) {
+		ensureScrollPosition: function() {
+			if (this.scrollOnData) {
+				var codeNode = this.refs.code.getDOMNode();
+				this.ignoreScrollEvent = true;
+				codeNode.scrollTop = codeNode.scrollHeight - codeNode.offsetHeight;
+			}
+		},
+		onScroll: function() {
+			if (!this.ignoreScrollEvent) {
+				var codeNode = this.refs.code.getDOMNode();
+				if (codeNode.offsetHeight + codeNode.scrollTop >= codeNode.scrollHeight) {
+					this.scrollOnData = true;
+				} else {
+					this.scrollOnData = false;
+				}
+			}
+			this.ignoreScrollEvent = false;
+		},
+		updateItems: function(build) {
 			// listen just our console update
-			if (data.buildId === this.props.build) {
-				this.setState({data: data});
+			if (build.buildId === this.props.build) {
+				this.setState({data: ansiUp.ansi_to_html(build.data)});
+				_.defer(this.ensureScrollPosition);
+				this.ensureScrollPosition();
 			}
 		},
 		render: template,
diff --git a/static/js/main.js b/static/js/main.js
index a4b4950..7972e09 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -9,6 +9,7 @@ require.config({
 		reflux: 'libs/reflux/dist/reflux',
 		_dataio: '/data.io',
 		socketio: '/socket.io/socket.io.js',
-		jquery: 'libs/jquery/jquery'
+		jquery: 'libs/jquery/jquery',
+		ansi_up: 'libs/ansi_up/ansi_up'
 	}
 });