Merge pull request #641 from daMupfel/commit_controller_refactoring

small refactoring commit controller

server/app/index.html

@@ -37,6 +37,7 @@
 		<script src="/static/scripts/controllers/conf.js"></script>
 		<script src="/static/scripts/controllers/home.js"></script>
 		<script src="/static/scripts/controllers/repo.js"></script>
+		<script src="/static/scripts/controllers/commit.js"></script>
 		<script src="/static/scripts/controllers/user.js"></script>
 		<script src="/static/scripts/controllers/users.js"></script>
 		<script src="/static/scripts/controllers/setup.js"></script>

server/app/scripts/app.js

@@ -237,93 +237,3 @@ app.controller("AccountReposController", function($scope, $http, $location, user
 			return $scope.remote == "" || $scope.remote == entry.remote; 
 		}; 
 });
-
-
-app.controller("CommitController", function($scope, $http, $route, $routeParams, stdout, feed) {
-
-	var remote = $routeParams.remote;
-	var owner  = $routeParams.owner;
-	var name   = $routeParams.name;
-	var branch = $routeParams.branch;
-	var commit = $routeParams.commit;
-	$scope.console='';
-	
-	var handleOutput = function(id, clearConsole) {
-		var lineFormatter = new Drone.LineFormatter();
-		var el = document.querySelector('#output');
-		if(clearConsole === true) {
-			el.innerHTML = ''; 
-		}
-		stdout.subscribe(id, function(out){
-			angular.element(el).append(lineFormatter.format(out));
-			if ($scope.following) {
-				window.scrollTo(0, document.body.scrollHeight);
-			}
-		});
-	}
-
-	feed.subscribe(function(item) {
-		if (item.commit.sha    == commit &&
-			item.commit.branch == branch) {
-			if(item.commit.status == "Started") {
-				handleOutput(item.commit.id, true);
-			}
-			$scope.commit = item.commit;
-			$scope.$apply();
-
-		} else {
-			// we trigger an toast notification so the
-			// user is aware another build started
-			
-		}
-	});
-
-	// load the repo meta-data
-	$http({method: 'GET', url: '/api/repos/'+remote+'/'+owner+"/"+name}).
-		success(function(data, status, headers, config) {
-			$scope.repo = data;
-		}).
-		error(function(data, status, headers, config) {
-			console.log(data);
-		});
-
-	// load the repo commit data
-	$http({method: 'GET', url: '/api/repos/'+remote+'/'+owner+"/"+name+"/branches/"+branch+"/commits/"+commit}).
-		success(function(data, status, headers, config) {
-			$scope.commit = data;
-
-			if (data.status!='Started' && data.status!='Pending') {
-				$http({method: 'GET', url: '/api/repos/'+remote+'/'+owner+"/"+name+"/branches/"+branch+"/commits/"+commit+"/console"}).
-					success(function(data, status, headers, config) {
-						var lineFormatter = new Drone.LineFormatter();
-						var el = document.querySelector('#output');
-						angular.element(el).append(lineFormatter.format(data));
-					}).
-					error(function(data, status, headers, config) {
-						console.log(data);
-					});
-				return;
-			}
-
-			handleOutput(data.id, false);
-		
-		}).
-		error(function(data, status, headers, config) {
-			console.log(data);
-		});
-
-	$scope.following = false;
-	$scope.follow = function() {
-		$scope.following = true;
-		window.scrollTo(0, document.body.scrollHeight);
-	}
-	$scope.unfollow = function() {
-		$scope.following = false;
-	}
-
-	$scope.rebuildCommit = function() {
-        $http({method: 'POST', url: '/api/repos/'+remote+'/'+owner+'/'+name+'/'+'branches/'+branch+'/'+'commits/'+commit+'?action=rebuild' });
-	}
-
-
-});

server/app/scripts/controllers/commit.js

@@ -0,0 +1,95 @@
+/*global angular, Drone, console */
+angular.module('app').controller("CommitController", function ($scope, $http, $route, $routeParams, stdout, feed) {
+	'use strict';
+
+	var remote = $routeParams.remote,
+		owner  = $routeParams.owner,
+		name   = $routeParams.name,
+		branch = $routeParams.branch,
+		commit = $routeParams.commit,
+		// Create lineFormatter and outputElement since we need them anyway.
+		lineFormatter = new Drone.LineFormatter(),
+		outputElement = angular.element(document.querySelector('#output'));
+		
+	var connectRemoteConsole = function (id) {
+		// Clear console output if connecting to new remote console (rebuild)
+		if (!outputElement.html() !== 0) {
+			outputElement.empty();
+		}
+		// Subscribe to stdout of the remote build
+		stdout.subscribe(id, function (out) {
+			// Append new output to console
+			outputElement.append(lineFormatter.format(out));
+			// Scroll if following
+			if ($scope.following) {
+				window.scrollTo(0, document.body.scrollHeight);
+			}
+		});
+	};
+
+	// Subscribe to feed so we can update gui if changes to the commit happen. (Build finished, Rebuild triggered, change from Pending to Started)
+	feed.subscribe(function (item) {
+		// If event is part of the active commit currently showing.
+		if (item.commit.sha === commit &&
+				item.commit.branch === branch) {
+			// If new status is Started, connect to remote console to get live output
+			if (item.commit.status === "Started") {
+				connectRemoteConsole(item.commit.id);
+			}
+			$scope.commit = item.commit;
+			$scope.$apply();
+
+		} else {
+			// we trigger an toast notification so the
+			// user is aware another build started
+			
+		}
+	});
+
+	// Load the repo meta-data
+	$http({method: 'GET', url: '/api/repos/' + remote + '/' + owner + "/" + name}).
+		success(function (data, status, headers, config) {
+			$scope.repo = data;
+		}).
+		error(function (data, status, headers, config) {
+			console.log(data);
+		});
+
+	// Load the repo commit data
+	$http({method: 'GET', url: '/api/repos/' + remote + '/' + owner + "/" + name + "/branches/" + branch + "/commits/" + commit}).
+		success(function (data, status, headers, config) {
+			$scope.commit = data;
+
+			// If build has already finished, load console output from database
+			if (data.status !== 'Started' && data.status !== 'Pending') {
+				$http({method: 'GET', url: '/api/repos/' + remote + '/' + owner + "/" + name + "/branches/" + branch + "/commits/" + commit + "/console"}).
+					success(function (data, status, headers, config) {
+						outputElement.append(lineFormatter.format(data));
+					}).
+					error(function (data, status, headers, config) {
+						console.log(data);
+					});
+				return;
+			// If build is currently running, connect to remote console;
+			} else if (data.status === 'Started') {
+				connectRemoteConsole(data.id);
+			}
+		
+		}).
+		error(function (data, status, headers, config) {
+			console.log(data);
+		});
+
+	$scope.following = false;
+	$scope.follow = function () {
+		$scope.following = true;
+		window.scrollTo(0, document.body.scrollHeight);
+	};
+	$scope.unfollow = function () {
+		$scope.following = false;
+	};
+
+	$scope.rebuildCommit = function () {
+        $http({method: 'POST', url: '/api/repos/' + remote + '/' + owner + '/' + name + '/branches/' + branch + '/commits/' + commit + '?action=rebuild' });
+	};
+});

server/app/scripts/services/stdout.js

@@ -1,32 +1,34 @@
-'use strict';
+/*global angular, WebSocket, localStorage, console */
+angular.module('app').service('stdout', ['$window', function ($window) {
+	'use strict';
+	
+	var callback,
+		websocket,
+		token = localStorage.getItem('access_token');
 
-angular.module('app').service('stdout', ['$window', function($window) {
+	this.subscribe = function (path, _callback) {
-	var callback = undefined;
-	var websocket = undefined;
-	var token = localStorage.getItem('access_token');
-
-	this.subscribe = function(path, _callback) {
 		callback = _callback;
 
-		var proto = ($window.location.protocol == 'https:' ? 'wss' : 'ws');
+		var proto = ($window.location.protocol === 'https:' ? 'wss' : 'ws'),
-		var route = [proto, "://", $window.location.host, '/api/stream/stdout/', path, '?access_token=', token].join('');
+			route = [proto, "://", $window.location.host, '/api/stream/stdout/', path, '?access_token=', token].join('');
 
 		websocket = new WebSocket(route);
-		websocket.onmessage = function(event) {
+		websocket.onmessage = function (event) {
-			if (callback != undefined) {
+			if (callback !== undefined) {
 				callback(event.data);
 			}
 		};
-		websocket.onclose = function(event) {
+		websocket.onclose = function (event) {
-			console.log('websocket closed at '+path);
+			console.log('websocket closed at ' + path);
 		};
 	};
 
-	this.unsubscribe = function() {
+	this.unsubscribe = function () {
 		callback = undefined;
-		if (websocket != undefined) {
+		if (websocket !== undefined) {
-			console.log('unsubscribing websocket at '+websocket.url);
+			console.log('unsubscribing websocket at ' + websocket.url);
 			websocket.close();
+			websocket = undefined;
 		}
 	};
 }]);

server/app/views/commit.html

@@ -11,8 +11,8 @@
 			<dd><h1>{{ commit.duration | toDuration}}</h1></dd>
 		</dl>
 
-		<dl ng-include src="'/static/views/commit_detail.html'" ng-if="commit.pull_request.length == 0"></dl>
+		<dl ng-include="'/static/views/commit_detail.html'" ng-show="commit.pull_request.length == 0"></dl>
-		<dl ng-include src="'/static/views/commit_detail_pr.html'" ng-if="commit.pull_request.length != 0"></dl>
+		<dl ng-include="'/static/views/commit_detail_pr.html'" ng-show="commit.pull_request.length != 0"></dl>
 		<dd ng-if="commit.finished_at != 0">{{ commit.finished_at | fromNow }}</dd>
 		<dd ng-if="commit.finished_at == 0 && commit.started_at != 0">Started {{ commit.started_at | fromNow }}</dd>
 		<dd ng-if="commit.finished_at == 0 && commit.started_at == 0">Created {{ commit.created_at}}</dd>