itermediary page to list sub-builds in matrix before output

cmd/drone-server/static/scripts/controllers/builds.js

@@ -66,6 +66,46 @@
 	 */
 	function BuildCtrl($scope, $routeParams, $window, logs, builds, repos, users) {
 
+		var number = $routeParams.number;
+		var owner = $routeParams.owner;
+		var name  = $routeParams.name;
+		var fullName = owner+'/'+name;
+
+		// Gets the currently authenticated user
+		users.getCached().then(function(payload){
+			$scope.user = payload.data;
+		});
+
+		// Gets a repository
+		repos.get(fullName).then(function(payload){
+			$scope.repo = payload.data;
+		}).catch(function(err){
+			$scope.error = err;
+		});
+
+		// Gets the build
+		builds.get(fullName, number).then(function(payload){
+			$scope.build = payload.data;
+		}).catch(function(err){
+			$scope.error = err;
+		});
+
+		repos.subscribe(fullName, function(event) {
+			if (event.sequence !== parseInt(number)) {
+				return; // ignore
+			}
+			// update the build
+			$scope.build = event;
+			$scope.$apply();
+		});
+	}
+
+
+	/**
+	 * BuildOutCtrl responsible for rendering a build output.
+	 */
+	function BuildOutCtrl($scope, $routeParams, $window, logs, builds, repos, users) {
+
 		var step = parseInt($routeParams.step) || 1;
 		var number = $routeParams.number;
 		var owner = $routeParams.owner;
@@ -171,12 +211,12 @@
 				streaming = false;
 			}
 		});
-
-
 	}
 
+
 	angular
 		.module('drone')
+		.controller('BuildOutCtrl', BuildOutCtrl)
 		.controller('BuildCtrl', BuildCtrl)
 		.controller('BuildsCtrl', BuildsCtrl);
 })();

cmd/drone-server/static/scripts/drone.js

@@ -98,8 +98,8 @@
 			resolve: resolveUser
 		})
 		.when('/:owner/:name/:number/:step', {
-			templateUrl: '/static/scripts/views/build.html',
+			templateUrl: '/static/scripts/views/build_out.html',
-			controller: 'BuildCtrl',
+			controller: 'BuildOutCtrl',
 			resolve: resolveUser
 		});
 

cmd/drone-server/static/scripts/views/build.html

@@ -12,9 +12,7 @@
 		<a ng-href="/{{ repo.full_name }}" class="icon icon-home"></a>
 		<a ng-href="/{{ repo.full_name }}">{{ repo.owner }} / {{ repo.name }}</a>
 		<span class="spacer"></span>
-		<a ng-href="/{{ repo.full_name }}/{{ build.sequence }}">{{ build.sequence }}</a>
+		<a ng-href="#">{{ build.sequence }}</a>
-		<span class="spacer"></span>
-		<a href="#">{{ task.sequence }}</a>
 	</div>
 
 	<div class="menu">
@@ -29,7 +27,6 @@
 
 
 	<article>
-
 			<section class="commit-section">
 					<div class="commit-status">
 						<div class="status {{ task.state }}" ng-if="task"></div>
@@ -43,17 +40,13 @@
 						<span class="octicon octicon-git-commit">{{ build.sha.substr(0,8) }}</span>
 						<span class="octicon octicon-git-branch">{{ build.branch }}</span>
 						<span class="octicon octicon-clock" style="background:#FFF;">{{ build.duration | toDuration }} duration</span>
-
-
 					</div>
+			</section>
 
-				</section>
+			<section>
-
-			<section ng-if="build.builds.length > 1">
-
 				<a class="row build-row sub-build-row" ng-repeat="task in build.builds" ng-href="{{ repo.full_name }}/{{ build.sequence }}/{{ task.sequence }}">
 					<div>
-						<div ng-class="[ 'build-num', build.state ]">{{task.sequence}}</div>
+						<div ng-class="[ 'build-num', build.state ]"></div>
 					</div>
 					<div>
 						<h3>
@@ -61,19 +54,10 @@
 								{{ key.toUpperCase() }}={{ value }}
 							</div>
 						</h3>
+						<div style="position:absolute;top:30px;right:30px;color:#CCC;"># {{task.sequence}}</div>
 					</div>
 				</a>
-
-
-
-
 			</section>
-
-			<pre id="term" ng-if="task && task.state !== 'pending'"></pre>
-
-
-
-			<button class="fab" ng-if="build.state === 'running'" ng-click="tail()"></button>
 	</article>
 
 

cmd/drone-server/static/scripts/views/build_out.html

@@ -0,0 +1,62 @@
+<header>
+	<a class="logo float-left" href="/"></a>
+	<a class="menu-item settings float-right" href="/profile"></a>
+	<a class="menu-item users float-right" href="/users" ng-if="user.admin"></a>
+	<a class="menu-item help float-right" href="http://readme.drone.io" target="_blank"></a>
+	<a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a>
+</header>
+
+<div class="toolbar">
+
+	<div class="breadcrumb"  style="position:relative;top:0px;">
+		<a ng-href="/{{ repo.full_name }}/{{ build.sequence }}" class="icon icon-home"></a>
+		<a ng-href="/{{ repo.full_name }}">{{ repo.owner }} / {{ repo.name }}</a>
+		<span class="spacer"></span>
+		<a ng-href="/{{ repo.full_name }}/{{ build.sequence }}">{{ build.sequence }}</a>
+		<span class="spacer"></span>
+		<a href="#">{{ task.sequence }}</a>
+	</div>
+
+	<div class="menu">
+		<a ng-href="/{{ repo.full_name }}/edit" class="nav-item settings float-right"></a>
+		<button ng-click="watch(repo)"   ng-if="!repo.starred" class="nav-item star float-right"></button>
+		<button ng-click="unwatch(repo)" ng-if="repo.starred"  class="nav-item unstar float-right"></button>
+	</div>
+
+</div>
+
+
+
+	<article>
+
+			<section class="commit-section">
+					<div class="commit-status">
+						<div class="status {{ task.state }}" ng-if="task"></div>
+						<div class="status {{ build.state }}" ng-if="!task"></div>
+					</div>
+					<div class="commit-meta">
+						<h3>{{ build.message }}</h3>
+						<p><strong>{{ build.author }}</strong> pushed <strong>{{ build.sha.substr(0,8) }}</strong> to <strong>{{ build.branch }}</strong></p>
+						{{ build.exit_code }}
+						{{ build.started_at | fromNow }}
+						<span class="octicon octicon-git-commit">{{ build.sha.substr(0,8) }}</span>
+						<span class="octicon octicon-git-branch">{{ build.branch }}</span>
+						<span class="octicon octicon-clock" style="background:#FFF;">{{ build.duration | toDuration }} duration</span>
+
+
+					</div>
+
+							<div ng-repeat="(key, value) in task.environment">
+								{{ key.toUpperCase() }}={{ value }}
+							</div>
+		</section>
+
+
+		<pre id="term" ng-if="task && task.state !== 'pending'"></pre>
+		<button class="fab" ng-if="build.state === 'running'" ng-click="tail()"></button>
+	</article>
+
+
+
+	<button ng-if="build.state !== 'pending' && build.state !== 'running'" ng-click="restart()">Restart</button>
+	<button ng-if="build.state === 'pending' || build.state === 'running'" ng-click="cancel()">Cancel</button>

cmd/drone-server/static/scripts/views/builds.html

@@ -27,11 +27,12 @@
 	<section>
 		<a class="row build-row" ng-repeat="build in builds | orderBy:'-sequence'" ng-href="/{{ repo.full_name }}/{{ build.sequence }}">
 			<div>
-				<div ng-class="[ 'build-num', build.state ]">{{ build.sequence }}</div>
+				<div ng-class="[ 'build-num', build.state ]"></div>
 			</div>
 			<div>
 				<h3>{{ build.message }}</h3>
 				<p><strong>{{ build.author }}</strong> pushed to <strong>{{ build.branch }}</strong> {{ build.started_at | fromNow }}</p>
+				<div style="position:absolute;top:30px;right:30px;color:#CCC;"># {{build.sequence}}</div>
 			</div>
 		</a>
 	</section>

cmd/drone-server/static/styles/drone.css

@@ -1395,6 +1395,10 @@ section .build-row .build-num {
     color: rgba(255,255,255,0.9);
     font-size: 16px;
     text-align: center;
+
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
 }
 
 section .build-row .build-num.success:after {
@@ -1463,6 +1467,10 @@ section .icon {
     color: rgba(255,255,255,0.9);
     font-size: 16px;
     text-align: center;
+
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
 }
 section .icon-repo:after {
   font-size: 18px;
@@ -1495,9 +1503,10 @@ section .build-row.sub-build-row > div {
 }
 section .build-row.sub-build-row h3 {
     color:#212121;
-    font-size:14px;
+    font-size:13px;
     margin-bottom:0px;
     margin-top: 12px;
+    font-family: "Droid Sans Mono","Roboto","Arial";
 }
 
 section .build-row.sub-build-row h3 > div {