build page improvements

static/css/index.less

@@ -5,7 +5,7 @@
 // bootstrap
 @import "@{bowerPath}/bootstrap/less/bootstrap.less";
 
-//flatly
+/*//flatly*/
 @import "./sources/common/variables-flatly.less";
 
 //font-awesome

static/css/sources/components/builds.less

@@ -14,7 +14,7 @@
 	.row();
 	padding: 15px 0;
 	margin-bottom: 3px;
-	background: lighten(@well-bg, 3%);
+	background: @well-bg;
 
 	&_status {
 		float: left;
@@ -41,6 +41,7 @@
 		&_progress {
 			padding-top: 14px;
 			.progress {
+				height: 18px;
 				margin-bottom: 0;
 			}
 		}
@@ -64,6 +65,28 @@
 			opacity: 1;
 		}
 	}
+
+	&__small {
+		.build_status {
+			padding-top: 5px;
+		}
+		.build_header {
+			font-size: 14px;
+		}
+		.build_content {
+			.make-xs-column(7);
+		}
+		.build_controls {
+			.make-xs-column(5);
+			font-size: 12px;
+			&_progress {
+				padding-top: 4px;
+				.progress {
+					height: 12px;
+				}
+			}
+		}
+	}
 }
 
 @animation-duration: 1.5s;
@@ -94,6 +117,11 @@
 	&__queued {
 		background: @brand-primary;
 	}
+
+	&__small {
+		width: 10px;
+		height: 10px;
+	}
 }
 
 .pulsate-frames() {

static/js/app/components/buildSidebar/index.jade

@@ -0,0 +1,17 @@
+.builds(style={paddingTop: '20px'})
+	each item in this.state.items
+		.build.build__small(key=item.id)
+			.build_content
+				.build_status
+					.status.status__small(class="status__#{item.status}")
+				.build_header
+					Link(to="build", params={id: item.id})
+						span build #
+						span= item.number
+			.build_controls
+				if item.status === 'in-progress'
+					.build_controls_progress
+						if item.project.avgBuildDuration
+							Progress(build=item)
+				if item.endDate
+					DateTime(value=item.endDate)

static/js/app/components/buildSidebar/index.js

@@ -0,0 +1,33 @@
+'use strict';
+
+define([
+	'underscore',
+	'react', 'react-router',
+	'app/stores/builds', 'reflux',
+	'templates/app/components/buildSidebar/index', 'app/components/common/index',
+], function(
+	_,
+	React, Router,
+	buildsStore, Reflux,
+	template, CommonComponents
+) {
+	template = template.locals(_({
+		Link: Router.Link
+	}).extend(CommonComponents));
+
+	return React.createClass({
+		mixins: [
+			Reflux.connectFilter(buildsStore, 'items', function(items) {
+				var projectName = this.props.projectName;
+				if (projectName) {
+					return _(items).filter(function(item) {
+						return item.project && item.project.name === projectName;
+					});
+				} else {
+					return items;
+				}
+			})
+		],
+		render: template
+	});
+});

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

@@ -11,9 +11,11 @@ mixin statusBadge(build)
 	if build.status === 'error'
 		span.label.label-danger error
 
-div.row
+.row
 	if this.state.build
-		.col-md-8
+		.col-sm-3.hidden-xs
+			BuildSidebar(projectName=this.state.build.project.name)
+		.col-sm-9
 			h1
 				.pull-right(style={fontSize: '22px'})
 					mixin statusBadge(this.state.build)
@@ -114,14 +116,22 @@ div.row
 				| 
 				| Console output
 			.build-view_terminal
-				Terminal(build=this.state.build.id)
+				if this.state.showConsole
+					Terminal(build=this.state.build.id, showPreloader=true)
 
-			if this.state.build.completed
+					if this.state.build.completed
-				if this.state.build.error
+						if this.state.build.error
-					.text-center.alert.alert-danger
+							.text-center.alert.alert-danger
-						| Build ended with error 
+								| Build ended with error 
-						Duration(value=(this.state.build.endDate - this.state.build.startDate), withSuffix=true)
+								Duration(value=(this.state.build.endDate - this.state.build.startDate), withSuffix=true)
+						else
+							.text-center.alert.alert-success
+								| Build successfully completed  
+								Duration(value=(this.state.build.endDate - this.state.build.startDate), withSuffix=true)
 				else
-					.text-center.alert.alert-success
+					.well.text-center
-						| Build successfully completed  
+						button.btn.btn-primary(onClick=this.toggleConsole)
-						Duration(value=(this.state.build.endDate - this.state.build.startDate), withSuffix=true)
+							i.fa.fa-fw.fa-refresh
+							| 
+							| Load console output...
+

static/js/app/components/builds/view.js

@@ -7,18 +7,20 @@ define([
 	'app/actions/build',
 	'app/stores/build',
 	'app/components/terminal/terminal',
+	'app/components/buildSidebar/index',
 	'templates/app/components/builds/view',
 	'app/components/common/index'
 ], function(
-	React, Router, Reflux, BuildActions, buildStore, TerminalComponent, template,
+	React, Router, Reflux, BuildActions, buildStore, TerminalComponent,
-	CommonComponents
+	BuildSidebar, template, CommonComponents
 ) {
 	template = template.locals({
 		DateTime: CommonComponents.DateTime,
 		Duration: CommonComponents.Duration,
 		Scm: CommonComponents.Scm,
 		Terminal: TerminalComponent,
-		Link: Router.Link
+		Link: Router.Link,
+		BuildSidebar: BuildSidebar
 	});
 
 	var Component = React.createClass({
@@ -32,16 +34,24 @@ define([
 			this.listenTo(buildStore, this.updateBuild);
 		},
 		updateBuild: function(build) {
-			if (!this.state.build && build) {
+			if (build) {
-				BuildActions.readTerminalOutput(build);
+				BuildActions.readAll({projectName: build.project.name});
 			}
 			this.setState({build: build});
 		},
 		render: template,
 		getInitialState: function() {
 			return {
-				build: null
+				build: null,
+				showConsole: false
 			};
+		},
+		toggleConsole: function() {
+			var consoleState = !this.state.showConsole;
+			if (consoleState) {
+				BuildActions.readTerminalOutput(this.state.build);
+			}
+			this.setState({showConsole: consoleState});
 		}
 	});
 

static/js/app/components/dashboard/index.jade

@@ -1,5 +1,5 @@
 .main-row
 	.row
-		.col-md-8
+		.col-md-8.col-sm-12
-			h2 Last builds
+			h2 Builds history
 			BuildsList()