project page and build page improvements

static/css/sources/components/builds.less

@@ -1,3 +1,11 @@
+.build-view {
+	&_info {
+	}
+	&_terminal {
+		margin-top: 20px;
+	}
+}
+
 .build {
 	.clearfix;
 	padding: 15px;

static/css/sources/components/projects.less

@@ -24,24 +24,39 @@
 	&_items {
 		position: absolute;
 		width: 100%;
-		padding: 15px 5px 5px;
+		padding: 0;
+		padding-top: 15px;
 		left: 0;
-		background: #2c3e50;
+		background: @brand-primary;
 		list-style: none;
 	}
 
 	&_item {
-		padding: 5px 10px;
+		.clearfix();
+
+		padding: 10px 10px;
+
 		&_link {
+			float: left;
+			display: block;
 			color: white;
 			text-decoration: none;
+			&:hover {
+				color: white;
+				text-decoration: none;
+			}
 		}
 		&_run {
+			float: right;
 			color: rgba(255, 255, 255, 0.5);
 			&:hover {
 				color: white;
 				text-decoration: none;
 			}
 		}
+
+		&:hover {
+			background: lighten(@brand-primary, 10%);
+		}
 	}
 }

static/css/sources/components/terminal.less

@@ -2,7 +2,7 @@
 	box-sizing: border-box;
 
 	&_code {
-		height: 300px;
+		height: 420px;
 		padding: 8px 12px;
 		box-sizing: border-box;
 		overflow-y: scroll;

static/js/app/app.js

@@ -20,7 +20,7 @@ define([
 		Route({handler: Components.App},
 			Route({name: 'dashboard', path: '/', handler: Components.Dashboard}),
 			Route({
-				name: 'projects',
+				name: 'project',
 				path: 'projects/:name',
 				handler: Components.Project.View
 			}),
@@ -34,5 +34,4 @@ define([
 			document.getElementById('content')
 		);
 	});
-
 });

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

@@ -1,5 +1,5 @@
 .builds
 	if !this.state.items.length
-		p Build list is empty
+		p Build history is empty
 	each build, index in this.state.items
 		Item(build=build, key=build.id)

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

@@ -1,52 +1,101 @@
-if this.state.build
+mixin statusBadge(build)
-	h2
+	if build.status === 'in-progress'
-		span= this.state.build.project.name
+		span.label.label-info in progress
-		span  build #
-		span= this.state.build.number
 
-	div
+	if build.status === 'queued'
-		| Initiated by 
+		span.label.label-default queued
-		- var initiator = this.state.build.initiator;
-		if initiator.type === 'user'
-			span user
-		else if initiator.type === 'build'
-			span= initiator.project.name
-			span  build #
-			span= initiator.number
-		else
-			span= initiator.type
 
-	if this.state.build.startDate
+	if build.status === 'done'
-		div
+		span.label.label.sm.label-success done
-			| Started at 
-			if this.state.build.startDate
-				DateTime(date=new Date(this.state.build.startDate))
-			else
-				| -
-	else
-		div
-			| Queued at 
-			if this.state.build.createDate
-				DateTime(date=new Date(this.state.build.createDate))
-			else
-				| -
 
-	div
+	if build.status === 'error'
-		| Built at 
+		span.label.label-danger error
-		if this.state.build.endDate
-			DateTime(date=new Date(this.state.build.endDate))
-		else
-			| -
 
-	div
+div.row
-		if this.state.build.error
+	if this.state.build
-			| Error: 
-			span= this.state.build.error.message
-
-			if this.state.build.error.stderr
-				div stderr: 
-				pre= this.state.build.error.stderr
-
-	.row
 		.col-md-8
-			Terminal(build=this.state.build.id)
+			h1
+				.pull-right(style={fontSize: '22px'})
+					mixin statusBadge(this.state.build)
+				span Build #
+				span= this.state.build.number
+
+			.text-muted(style={marginTop: '-10px'})
+				| Initiated by 
+				- var initiator = this.state.build.initiator;
+				if initiator.type === 'user'
+					span user
+				else if initiator.type === 'build'
+					Link(to="project", params={name: initiator.project.name})
+						span= initiator.project.name
+					| 
+					| during the 
+					| 
+					Link(to="build", params={id: initiator.id})
+						span build #
+						span= initiator.number
+				else
+					span= initiator.type
+
+			hr
+
+			.build-view_info
+				if this.state.build.error && this.state.build.error.message
+					.text-center.alert.alert-danger
+						| Error: 
+						span= this.state.build.error.message
+				.row
+					.col-md-6
+						p 
+							Scm(scm=this.state.build.project.scm.type)
+							| 
+							| Project 
+							Link(to="project", params={name: this.state.build.project.name})
+								span= this.state.build.project.name
+
+						p
+							i.fa.fa-fw.fa-clock-o
+							span 
+							if this.state.build.startDate
+								span Started at 
+								DateTime(date=new Date(this.state.build.startDate))
+							else
+								span Queued at 
+								DateTime(date=new Date(this.state.build.createDate))
+
+						if this.state.build.status !== 'in-progress'
+							p
+								i.fa.fa-fw.fa-circle
+								| 
+								| Finished at 
+								if this.state.build.endDate
+									DateTime(date=new Date(this.state.build.endDate))
+								else
+									| -
+					.col-md-6
+						p
+							i.fa.fa-fw.fa-user
+							| 
+							| Commit author
+							| 
+							span= this.state.build.scm.rev.author
+						p
+							i.fa.fa-fw.fa-code-fork
+							| 
+							| Revision
+							| 
+							span= this.state.build.scm.rev.id
+
+						p
+							i.fa.fa-fw.fa-comment-o
+							| 
+							| Comment
+							| 
+							span= this.state.build.scm.rev.comment
+
+			h2
+				i.fa.fa-fw.fa-terminal
+				| 
+				| Console output
+			.build-view_terminal
+				Terminal(build=this.state.build.id)

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

@@ -2,6 +2,7 @@
 
 define([
 	'react',
+	'react-router',
 	'reflux',
 	'app/actions/build',
 	'app/stores/build',
@@ -9,12 +10,14 @@ define([
 	'templates/app/components/builds/view',
 	'app/components/common/index'
 ], function(
-	React, Reflux, BuildActions, buildStore, TerminalComponent, template,
+	React, Router, Reflux, BuildActions, buildStore, TerminalComponent, template,
 	CommonComponents
 ) {
 	template = template.locals({
 		DateTime: CommonComponents.DateTime,
-		Terminal: TerminalComponent
+		Scm: CommonComponents.Scm,
+		Terminal: TerminalComponent,
+		Link: Router.Link
 	});
 
 	var Component = React.createClass({

static/js/app/components/common/index.js

@@ -1,9 +1,11 @@
 'use strict';
 
 define([
-	'./dateTime/index'
+	'./dateTime/index',
-], function(DateTime) {
+	'./scm/index'
+], function(DateTime, Scm) {
 	return {
-		DateTime: DateTime
+		DateTime: DateTime,
+		Scm: Scm
 	};
 });

static/js/app/components/common/scm/index.jade

@@ -0,0 +1,5 @@
+if this.props.scm
+	if this.props.scm === 'mercurial'
+		i.fa.fa-fw.fa-bitbucket
+	else
+		i.fa.fa-fw.fa-git

static/js/app/components/common/scm/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+define([
+	'react', 'templates/app/components/common/scm/index'
+], function(React, template) {
+	return React.createClass({
+		render: template
+	});
+});
+

static/js/app/components/projects/selector/index.jade

@@ -13,12 +13,12 @@
 		)
 		ul.projects-selector_items
 			each project in this.state.projects
-				li.projects-selector_item.row(key=project.name)
+				li.projects-selector_item(key=project.name)
-					.col-md-8
+					Link.projects-selector_item_link(to="project", params={name: project.name}, onMouseDown=this.onSelectProject(project.name))
-						Link.projects-selector_item_link(to="projects", params={name: project.name}, onMouseDown=this.onSelectProject(project.name))
+						Scm(scm=project.scm.type)
-							span= project.name
+						span 
-					.col-md-4.text-small.text-right
+						span= project.name
-						a.projects-selector_item_run(href="javascript:void(0);", onMouseDown=this.onRunProject(project.name))
+					a.projects-selector_item_run(href="javascript:void(0);", onMouseDown=this.onRunProject(project.name))
-							i.fa.fa-fw.fa-play
+						i.fa.fa-fw.fa-play
 
 

static/js/app/components/projects/selector/index.js

@@ -3,10 +3,14 @@
 define([
 	'react', 'react-router', 'reflux', 'app/actions/project',
 	'app/stores/projects',
+	'app/components/common/scm/index',
 	'templates/app/components/projects/selector/index'
-], function(React, Router, Reflux, ProjectActions, projectsStore, template) {
+], function(React, Router, Reflux, ProjectActions, projectsStore, Scm,
+	template
+) {
 	template = template.locals({
-		Link: Router.Link
+		Link: Router.Link,
+		Scm: Scm
 	});
 
 	return React.createClass({
@@ -24,7 +28,7 @@ define([
 			this.setState({showSearch: false});
 		},
 		onSelectProject: function(name) {
-			this.transitionTo('projects', {name: name});
+			this.transitionTo('project', {name: name});
 		},
 		updateItems: function(projects) {
 			this.setState({projects: projects});

static/js/app/components/projects/view/index.jade

@@ -1,3 +1,21 @@
-div
+.row 
-	h1= this.state.project.name
+	.col-md-8
-	Builds()
+		h1
+			.pull-right
+				span.badge.badge-default= this.state.project.scm ? this.state.project.scm.rev : ''
+
+			Scm(scm=this.state.project.scm ? this.state.project.scm.type : '')
+			span= this.state.project.name
+
+		hr
+		div.text-muted
+			p Last successfully build: ...
+			p Current successfully streak: ...
+			p Last build time: ...
+			p Average build time: ...
+
+		h2
+			i.fa.fa-fw.fa-history
+			span 
+			span Build history
+		Builds()

static/js/app/components/projects/view/index.js

@@ -6,12 +6,14 @@ define([
 	'app/actions/build',
 	'app/stores/project',
 	'app/components/builds/list',
+	'app/components/common/scm/index',
 	'templates/app/components/projects/view/index'
 ], function(React, Reflux, ProjectActions, BuildActions,
-	projectStore, Builds, template
+	projectStore, Builds, Scm, template
 ) {
 	template = template.locals({
-		Builds: Builds
+		Builds: Builds,
+		Scm: Scm
 	});
 
 	return React.createClass({

static/js/app/stores/projects.js

@@ -17,6 +17,7 @@ define([
 			resource.sync('readAll', function(err, projects) {
 				if (err) throw err;
 				self.trigger(projects);
+				console.log(projects);
 			});
 		}
 	});