added toast message to display when repo commit event is received

This commit is contained in:
Brad Rydzewski 2014-07-11 13:46:04 -07:00
parent b9b79b7994
commit 4aba399b3b
8 changed files with 243 additions and 175 deletions

View file

@ -118,16 +118,6 @@ app.config(['$routeProvider', '$locationProvider', function($routeProvider, $loc
}
}
})
.when('/:remote/:owner/:name/:branch', {
templateUrl: '/views/branch.html',
controller: 'BranchController',
title: 'Recent Commits',
resolve: {
user: function(authService) {
return authService.getUser();
}
}
})
.when('/:remote/:owner/:name', {
templateUrl: '/views/repo.html',
controller: 'RepoController',
@ -136,11 +126,11 @@ app.config(['$routeProvider', '$locationProvider', function($routeProvider, $loc
user: function(authService) {
return authService.getUser();
},
repo: function($route, repoService) {
repo: function($route, repos) {
var remote = $route.current.params.remote;
var owner = $route.current.params.owner;
var name = $route.current.params.name;
return repoService.getRepo(remote, owner, name);
return repos.getRepo(remote, owner, name);
}
}
});
@ -208,119 +198,9 @@ app.controller("ConfigController", function($scope, $http, user) {
});
});
app.controller("RepoConfigController", function($scope, $http, $routeParams, user) {
$scope.user = user;
var remote = $routeParams.remote;
var owner = $routeParams.owner;
var name = $routeParams.name;
// load the repo meta-data
$http({method: 'GET', url: '/v1/repos/'+remote+'/'+owner+"/"+name+"?admin=1"}).
success(function(data, status, headers, config) {
$scope.repo = data;
}).
error(function(data, status, headers, config) {
console.log(data);
});
$scope.save = function() {
// request to create a new repository
$http({method: 'PUT', url: '/v1/repos/'+remote+'/'+owner+"/"+name, data: $scope.repo }).
success(function(data, status, headers, config) {
delete $scope.failure;
}).
error(function(data, status, headers, config) {
$scope.failure = data;
});
};
});
function badgeMarkdown(repo) {
var scheme = window.location.protocol;
var host = window.location.host;
return '[![Build Status]('+scheme+'//'+host+'/v1/badge/'+repo+'/status.svg?branch=master)]('+scheme+'//'+host+'/'+repo+')'
}
function badgeMarkup(repo) {
var scheme = window.location.protocol;
var host = window.location.host;
return '<a href="'+scheme+'//'+host+'/'+repo+'"><img src="'+scheme+'//'+host+'/v1/badge/'+repo+'/status.svg?branch=master" /></a>'
}
app.controller("RepoController", function($scope, $http, $routeParams, user, repo) {
$scope.user = user;
$scope.repo = repo;
// load the repo branch list
/*
$http({method: 'GET', url: '/v1/repos/'+repo.host+'/'+repo.owner+"/"+repo.name+"/branches"}).
success(function(data, status, headers, config) {
$scope.branches = (typeof data==='string')?[]:data;
}).
error(function(data, status, headers, config) {
console.log(data);
});
*/
// load the repo commit feed
$http({method: 'GET', url: '/v1/repos/'+repo.host+'/'+repo.owner+"/"+repo.name+"/feed"}).
success(function(data, status, headers, config) {
$scope.commits = (typeof data==='string')?[]:data;
}).
error(function(data, status, headers, config) {
console.log(data);
});
$scope.activate = function() {
// request to create a new repository
$http({method: 'POST', url: '/v1/repos/'+repo.host+'/'+repo.owner+"/"+repo.name }).
success(function(data, status, headers, config) {
$scope.repo = data;
}).
error(function(data, status, headers, config) {
$scope.failure = data;
});
};
});
app.controller("BranchController", function($scope, $http, $routeParams, user) {
$scope.user = user;
var remote = $routeParams.remote;
var owner = $routeParams.owner;
var name = $routeParams.name;
var branch = $routeParams.branch;
$scope.branch = branch;
// load the repo meta-data
$http({method: 'GET', url: '/v1/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 branch list
$http({method: 'GET', url: '/v1/repos/'+remote+'/'+owner+"/"+name+"/branches"}).
success(function(data, status, headers, config) {
$scope.branches = (typeof data==='string')?[]:data;
}).
error(function(data, status, headers, config) {
console.log(data);
});
// load the repo commit feed
$http({method: 'GET', url: '/v1/repos/'+remote+'/'+owner+"/"+name+"/branches/"+branch+"/commits"}).
success(function(data, status, headers, config) {
$scope.commits = data;
}).
error(function(data, status, headers, config) {
console.log(data);
});
});
app.controller("CommitController", function($scope, $http, $routeParams, stdout, feed, notify) {
@ -372,15 +252,6 @@ app.controller("CommitController", function($scope, $http, $routeParams, stdout,
console.log(data);
});
// load the repo build data
$http({method: 'GET', url: '/v1/repos/'+remote+'/'+owner+"/"+name+"/branches/"+branch+"/commits/"+commit+"/builds/1"}).
success(function(data, status, headers, config) {
$scope.build = data;
}).
error(function(data, status, headers, config) {
console.log(data);
});
// load the repo build stdout
$http({method: 'GET', url: '/v1/repos/'+remote+'/'+owner+"/"+name+"/branches/"+branch+"/commits/"+commit+"/console"}).
success(function(data, status, headers, config) {
@ -390,7 +261,4 @@ app.controller("CommitController", function($scope, $http, $routeParams, stdout,
console.log(data);
});
});

View file

@ -1 +1,103 @@
'use strict';
angular.module('app').controller("RepoController", function($scope, $http, $routeParams, $route, repos, feed, repo, notify) {
$scope.repo = repo;
// subscribes to the global feed to receive
// build status updates.
feed.subscribe(function(item) {
if (item.repo.host == repo.host &&
item.repo.owner == repo.owner &&
item.repo.name == repo.name) {
// display a toast message with the
// commit details, allowing the user to
// reload the page.
$scope.msg = item;
$scope.$apply();
} else {
// we trigger an html5 notification so the
// user is aware another build started
notify.sendCommit(
item.repo,
item.commit
);
}
});
// load the repo commit feed
repos.feed(repo.host, repo.owner, repo.name).success(function (feed) {
$scope.commits = (typeof feed==='string')?[]:feed;
$scope.state = 1;
})
.error(function (error) {
$scope.commits = undefined;
$scope.state = 1;
});
//$http({method: 'GET', url: '/v1/repos/'+repo.host+'/'+repo.owner+"/"+repo.name+"/feed"}).
// success(function(data, status, headers, config) {
// $scope.commits = (typeof data==='string')?[]:data;
// }).
// error(function(data, status, headers, config) {
// console.log(data);
// });
$scope.activate = function() {
// request to create a new repository
$http({method: 'POST', url: '/v1/repos/'+repo.host+'/'+repo.owner+"/"+repo.name }).
success(function(data, status, headers, config) {
$scope.repo = data;
}).
error(function(data, status, headers, config) {
$scope.failure = data;
});
};
$scope.reload = function() {
$route.reload();
};
//$scope.activate = function() {
// repos.activate($scope.host, $scope.name).success(function () {
// window.location.href="/admin/users";
// })
// .error(function (error) {
// console.log(error);
// });
//};
});
angular.module('app').controller("RepoConfigController", function($scope, $http, $routeParams, user) {
$scope.user = user;
var remote = $routeParams.remote;
var owner = $routeParams.owner;
var name = $routeParams.name;
// load the repo meta-data
// request admin details for the repository as well.
$http({method: 'GET', url: '/v1/repos/'+remote+'/'+owner+"/"+name+"?admin=1"}).
success(function(data, status, headers, config) {
$scope.repo = data;
}).
error(function(data, status, headers, config) {
console.log(data);
});
$scope.save = function() {
// request to create a new repository
$http({method: 'PUT', url: '/v1/repos/'+remote+'/'+owner+"/"+name, data: $scope.repo }).
success(function(data, status, headers, config) {
delete $scope.failure;
}).
error(function(data, status, headers, config) {
$scope.failure = data;
});
};
});

View file

@ -1,14 +1,45 @@
'use strict';
angular.module('app').service('repoService', function($q, $http) {
return{
getRepo : function(host, owner, name) {
// Service facilitates interaction with the repository API.
angular.module('app').service('repos', ['$q', '$http', function($q, $http) {
// Gets a repository by host, owner and name.
// @deprecated
this.getRepo = function(host, owner, name) {
var defer = $q.defer();
var route = '/v1/repos/'+host+'/'+owner+'/'+name;
$http.get(route).success(function(data){
defer.resolve(data);
});
return defer.promise;
}
}
});
};
// Gets a repository by host, owner and name.
this.get = function(host, owner, name) {
return $http.get('/v1/repos/'+host+'/'+owner+'/'+name);
};
// Gets a repository by host, owner and name.
this.feed = function(host, owner, name) {
return $http.get('/v1/repos/'+host+'/'+owner+'/'+name+'/feed');
};
// Updates an existing repository
this.update = function(repo) {
// todo(bradrydzewski) add repo to the request body
return $http.post('/v1/repos/'+repo.host+'/'+repo.owner+'/'+repo.name);
};
// Activates a repository on the backend, registering post-commit
// hooks with the remote hosting service (ie github).
this.activate = function(repo) {
// todo(bradrydzewski) add repo to the request body
return $http.post('/v1/repos/'+repo.host+'/'+repo.owner+'/'+repo.name);
};
// Deactivate a repository sets the active flag to false, instructing
// the system to ignore all post-commit hooks for the repository.
this.deactivate = function(repo) {
return $http.delete('/v1/repos/'+repo.host+'/'+repo.owner+'/'+repo.name);
};
}]);

View file

@ -1397,3 +1397,30 @@ nav div.options .pure-button i {
left: 20px;
box-shadow: inset 0 0 0 1px #4ab1ce, 0 2px 4px rgba(0, 0, 0, 0.2);
}
.toast {
position: fixed;
bottom: 50px;
left: 20%;
right: 20%;
background: #363636;
border-radius: 3px;
z-index: 999;
color: #FFF;
padding: 15px 20px;
font-size: 14px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.toast a,
.toast a:visited,
.toast a:hover,
.toast a:active {
color: #FFF;
}
.toast button {
float: right;
background: transparent;
border: none;
color: #EEFF41;
text-transform: uppercase;
margin-left: 10px;
}

View file

@ -1285,3 +1285,32 @@ nav {
}
}
}
.toast {
position: fixed;
bottom: 50px;
left: 20%;
right: 20%;
background: #363636;
border-radius: 3px;
z-index: 999;
color: #FFF;
padding: 15px 20px;
font-size: 14px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
a, a:visited, a:hover, a:active {
color:#FFF;
}
button {
float: right;
background: transparent;
border: none;
border: none;
color: #EEFF41;
text-transform: uppercase;
margin-left:10px;
}
}

File diff suppressed because one or more lines are too long

View file

@ -1,3 +1,12 @@
<div class="toast" ng-if="msg != undefined">
<span>commit </span>
<a href="/{{ msg.repo | fullPath }}/{{ msg.commit.branch }}/{{ msg.commit.sha }}">{{ msg.commit.sha | shortHash }}</a>
<span ng-if="msg.commit.status == 'Started'">is running</span>
<span ng-if="msg.commit.status == 'Success'">finished successfully</span>
<span ng-if="msg.commit.status == 'Failure'">finished with errors</span>
<button ng-click="reload()">Reload</button>
</div>
<article id="repopage">
<nav>
<div class="options">

View file

@ -10,6 +10,42 @@
<a href="#">settings</a>
</nav>
<!-- this section is used to toggle builds and pull requests builds on and off -->
<section>
<div class="pure-g">
<div class="pure-u-1">
<div>
<h2>Build Flags</h2>
<div class="toggle">
<input type="checkbox" ng-model="repo.post_commits" id="post_commit" />
<label for="post_commit"></label>
<span>Enable Post Commit Hooks</span>
</div>
<div class="toggle">
<input type="checkbox" ng-model="repo.pull_requests" id="pull_requests" />
<label for="pull_requests"></label>
<span>Enable Pull Request Hooks</span>
</div>
<button ng-click="save()" class="pure-button pure-button-primary">Save Flags</button>
</div>
</div>
</div>
</section>
<section>
<div class="pure-g">
<div class="pure-u-1">
<div>
<h2>Private Variables</h2>
<textarea class="params" ng-model="repo.params" placeholder="FOO=BAR"></textarea>
<button ng-click="save()" class="pure-button pure-button-primary">Save Variables</button>
</div>
</div>
</div>
</section>
<!-- this section is used for generating the build status badge's url -->
<section>
<div class="pure-g">
@ -36,38 +72,4 @@
</div>
</section>
<section>
<div class="pure-g">
<div class="pure-u-1">
<div>
<h2>Private Variables</h2>
<textarea class="params" ng-model="repo.params" placeholder="FOO=BAR"></textarea>
<button ng-click="save()" class="pure-button pure-button-primary">Save Variables</button>
</div>
</div>
</div>
</section>
<!-- this section is used to toggle builds and pull requests builds on and off -->
<section>
<div class="pure-g">
<div class="pure-u-1">
<div>
<h2>Build Flags</h2>
<div class="toggle">
<input type="checkbox" ng-model="repo.post_commits" id="post_commit" />
<label for="post_commit"></label>
<span>Enable Post Commit Hooks</span>
</div>
<div class="toggle">
<input type="checkbox" ng-model="repo.pull_requests" id="pull_requests" />
<label for="pull_requests"></label>
<span>Enable Pull Request Hooks</span>
</div>
<button ng-click="save()" class="pure-button pure-button-primary">Save Flags</button>
</div>
</div>
</div>
</section>
</article>