new components structure, navigation in header

static/css/sources/components/projects.less

@@ -32,6 +32,10 @@
 
 	&_item {
 		padding: 5px 10px;
+		&_link {
+			color: white;
+			text-decoration: none;
+		}
 		&_run {
 			color: rgba(255, 255, 255, 0.5);
 			&:hover {

static/js/app/app.js

@@ -17,8 +17,8 @@ define([
 		DefaultRoute = React.createFactory(Router.DefaultRoute);
 
 	var routes = (
-		Route({name: 'index', path: '/'},
-			Route({name: 'dashboard', path: '/', handler: Components.App}),
+		Route({handler: Components.App},
+			Route({name: 'dashboard', path: '/', handler: Components.Dashboard}),
 			Route({
 				name: 'projects',
 				path: 'projects/:name',
@@ -30,7 +30,7 @@ define([
 
 	Router.run(routes, Router.HistoryLocation, function(Handler) {
 		React.render(
-			template({Component: Handler, Header: Components.Header}),
+			React.createElement(Handler),
 			document.getElementById('content')
 		);
 	});

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

@@ -0,0 +1,6 @@
+div
+	Header()
+
+	.container-fluid
+		.page-wrapper
+			RouteHandler()

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

@@ -0,0 +1,24 @@
+'use strict';
+
+define([
+	'react',
+	'react-router',
+	'app/actions/project',
+	'app/components/header/index',
+	'templates/app/components/app/index'
+], function(React, Router, ProjectActions, Header, template) {
+	template = template.locals({
+		Link: Router.Link,
+		Header: Header,
+		RouteHandler: Router.RouteHandler
+	});
+
+	var Component = React.createClass({
+		componentWillMount: function() {
+			ProjectActions.readAll();
+		},
+		render: template
+	});
+
+	return Component;
+});

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

@@ -2,14 +2,15 @@
 
 define([
 	'react',
+	'react-router',
 	'app/actions/project',
 	'app/actions/build',
-	'app/components/projects/index',
-	'app/components/builds/index',
-	'templates/app/components/app/template'
-], function(React, ProjectActions, BuildActions, Projects, Builds, template) {
+	'app/components/builds/list',
+	'templates/app/components/dashboard/index'
+], function(React, Router, ProjectActions, BuildActions, BuildsList, template) {
 	template = template.locals({
-		BuildsList: Builds.List
+		Link: Router.Link,
+		BuildsList: BuildsList
 	});
 
 	var Component = React.createClass({

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

@@ -1,7 +1,7 @@
 .navbar.navbar-default.navbar-fixed-top
 	.container-fluid
 		.navbar-header
-			a.navbar-brand(href="/")
+			Link.navbar-brand(to="dashboard")
 				span NCI
 		.navbar-left.navbar-form(style={paddingTop: "11px"})
 			ProjectsSelector()

static/js/app/components/header/index.js

@@ -4,7 +4,7 @@ define([
 	'react',
 	'react-router',
 	'app/components/projects/selector/index',
-	'templates/app/components/header/template'
+	'templates/app/components/header/index'
 ], function(React, Router, ProjectsSelector, template) {
 	template = template.locals({
 		Link: Router.Link,

static/js/app/components/index.js

@@ -3,13 +3,15 @@
 define([
 	'app/components/projects/index',
 	'app/components/builds/index',
-	'app/components/app/component',
-	'app/components/header/component'
-], function(ProjectsComponents, BuildsComponents, App, Header) {
+	'app/components/app/index',
+	'app/components/header/index',
+	'app/components/dashboard/index'
+], function(ProjectsComponents, BuildsComponents, App, Header, Dashboard) {
 	return {
 		App: App,
 		Header: Header,
 		Project: ProjectsComponents,
-		Build: BuildsComponents
+		Build: BuildsComponents,
+		Dashboard: Dashboard
 	};
 });

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

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

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

@@ -10,7 +10,7 @@ define([
 	});
 
 	return React.createClass({
-		mixins: [Reflux.ListenerMixin],
+		mixins: [Reflux.ListenerMixin, Router.Navigation],
 		componentDidMount: function() {
 			this.listenTo(projectsStore, this.updateItems);
 		},
@@ -23,6 +23,9 @@ define([
 			ProjectActions.run(projectName)
 			this.setState({showSearch: false});
 		},
+		onSelectProject: function(name) {
+			this.transitionTo('projects', {name: name});
+		},
 		updateItems: function(projects) {
 			this.setState({projects: projects});
 		},

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

@@ -1,2 +1,3 @@
-h1= this.state.project.name
-Builds()
+div
+	h1= this.state.project.name
+	Builds()

static/js/app/index.jade

@@ -1,5 +0,0 @@
-Header()
-
-.container-fluid
-	.page-wrapper
-		Component()

static/js/app/stores/terminal.js

@@ -8,8 +8,6 @@ define([
 		listenables: BuildActions,
 
 		init: function() {
-			console.log('init builds console output');
-
 			// the only purpose of this hash to reconnect all the time
 			// except first, see notes at using
 			this.connectedResourcesHash = {};