terminal functionality

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"

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;
 	}
 }

static/js/app/components/app/template.jade

@@ -1,5 +1,5 @@
 .main-row
 	.row
 		.col-md-8
-			h2 Active builds
+			h2 Last builds
 			BuildsList()

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)

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

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,

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'
 	}
 });