terminal output

static/css/sources/components/builds.less

@@ -29,4 +29,7 @@
 			font-size: inherit;
 		}
 	}
+	&_terminal {
+		margin-top: 10px;
+	}
 }

static/js/app/actions/build.js

@@ -2,7 +2,7 @@
 
 define(['reflux'], function(Reflux) {
 	var Actions = Reflux.createActions([
-		'readConsoleOutput',
+		'readTerminalOutput',
 		'readAll'
 	]);
 

static/js/app/app.js

@@ -21,7 +21,6 @@ define([
 	);
 
 	Router.run(routes, Router.HistoryLocation, function(Handler) {
-		console.log(Handler);
 		React.render(template({
 			Component: Handler
 		}), document.getElementById('content'));

static/js/app/components/app.js

@@ -4,15 +4,14 @@ define([
 	'react',
 	'app/components/projects/index',
 	'app/components/builds/index',
-	'app/components/console/index',
+	'app/components/terminal/index',
 	'templates/app/components/app'
 ], function(React, Projects, Builds, Console, template) {
 	var Component = React.createClass({
 		render: function() {
 			return template({
 				ProjectsList: Projects.List,
-				BuildsList: Builds.List,
-				Console: Console.Console
+				BuildsList: Builds.List
 			});
 		}
 	});

static/js/app/components/builds/item.jade

@@ -13,7 +13,10 @@ mixin statusText(build)
 .build(class="build__#{build.status}")
 	.build_controls.pull-right
 		a(href="javascript:void(0);", onClick=this.onBuildSelect(build.id))
-			i.fa.fa-2x.fa-repeat(title="Rebuild", style={marginTop: '5px'}, onClick=this.onRebuildProject(build.project.name))
+			i.fa.fa-2x.fa-repeat(title="Rebuild", style={marginRight: '15px'}, onClick=this.onRebuildProject(build.project.name))
+		a(href="javascript:void(0);", onClick=this.onShowTerminal)
+			i.fa.fa-2x.fa-terminal(title="Rebuild")
+
 	.build_header
 		span #
 		span= build.id
@@ -34,7 +37,7 @@ mixin statusText(build)
 			span.build_info
 				i.fa.fa-fw.fa-clock-o
 				| builded at 
-				DateTime(date=new Date(build.createDate))
+				DateTime(date=new Date(build.endDate))
 		else
 			if build.startDate
 				span.build_info
@@ -45,4 +48,8 @@ mixin statusText(build)
 				span.build_info
 					i.fa.fa-fw.fa-clock-o
 					| queued at 
-					DateTime(date=new Date(build.endDate))
+					DateTime(date=new Date(build.createDate))
+
+	if this.state.showTerminal
+		.build_terminal
+			Terminal(build=build)

static/js/app/components/builds/item.js

@@ -3,20 +3,32 @@
 define([
 	'react', 'app/actions/project',
 	'app/actions/build', 'templates/app/components/builds/item',
+	'app/components/terminal/terminal',
 	'app/components/common/index'
-], function(React, ProjectActions, BuildActions, template, CommonComponents) {
+], function(
+	React, ProjectActions, BuildActions, template,
+	TerminalComponent, CommonComponents
+) {
 	template = template.locals({
-		DateTime: CommonComponents.DateTime
+		DateTime: CommonComponents.DateTime,
+		Terminal: TerminalComponent
 	});
-	console.log(CommonComponents.DateTime);
 
 	var Component = React.createClass({
+		getInitialState: function() {
+			return {
+				showTerminal: false
+			};
+		},
 		onRebuildProject: function(projectName) {
 			ProjectActions.run(projectName)
 		},
+		onShowTerminal: function(build) {
+			this.setState({showTerminal: !this.state.showTerminal});
+			BuildActions.readTerminalOutput(this.props.build.id);
+		},
 		onBuildSelect: function(buildId) {
 			console.log('on build select');
-			BuildActions.readConsoleOutput(buildId);
 		},
 		render: template
 	});

static/js/app/components/console/console.jade

@@ -1,3 +0,0 @@
-if name
-	h2= name
-	pre= data

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

@@ -1,7 +1,7 @@
 'use strict';
 
 define([
-	'app/components/console/console',
+	'app/components/terminal/terminal',
 ], function(Console) {
 	return {
 		Console: Console

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

@@ -0,0 +1 @@
+pre= data

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

@@ -3,16 +3,19 @@
 define([
 	'react',
 	'reflux',
-	'app/stores/console',
-	'templates/app/components/console/console'
-], function(React, Reflux, consoleStore, template) {
+	'app/stores/terminal',
+	'templates/app/components/terminal/terminal'
+], function(React, Reflux, terminalStore, template) {
 	var Component = React.createClass({
 		mixins: [Reflux.ListenerMixin],
 		componentDidMount: function() {
-			this.listenTo(consoleStore, this.updateItems);
+			this.listenTo(terminalStore, this.updateItems);
 		},
 		updateItems: function(data) {
-			this.setState({data: data});
+			// listen just our console update
+			if (data.buildId === this.props.build.id) {
+				this.setState({data: data});
+			}
 		},
 		render: function() {
 			return template(this.state.data);

static/js/app/stores/terminal.js

@@ -13,7 +13,7 @@ define([
 			console.log('init builds console output');
 		},
 
-		onReadConsoleOutput: function(buildId) {
+		onReadTerminalOutput: function(buildId) {
 			var self = this;
 
 			self.output = '';
@@ -27,6 +27,7 @@ define([
 				if (!/\n$/.test(self.output)) self.output += '\n';
 
 				self.trigger({
+					buildId: buildId,
 					name: 'Console for build #' + buildId,
 					data: self.output
 				});