Builds UI fixes

This commit is contained in:
Alexander Simonov 2015-07-13 08:23:50 +03:00
parent 229e88a438
commit 63408147b2
No known key found for this signature in database
GPG key ID: 5CCFFED829314C35
9 changed files with 189 additions and 124 deletions

View file

@ -64,7 +64,6 @@
* BuildCtrl responsible for rendering a build. * BuildCtrl responsible for rendering a build.
*/ */
function BuildCtrl($scope, $stateParams, $window, logs, builds, repos, users) { function BuildCtrl($scope, $stateParams, $window, logs, builds, repos, users) {
var number = $stateParams.number; var number = $stateParams.number;
var owner = $stateParams.owner; var owner = $stateParams.owner;
var name = $stateParams.name; var name = $stateParams.name;
@ -97,6 +96,27 @@
$scope.build = event; $scope.build = event;
$scope.$apply(); $scope.$apply();
}); });
$scope.restart = function () {
console.log('restart');
builds.restart(fullName, number).then(function (payload) {
$scope.build = payload.data;
}).catch(function (err) {
$scope.error = err;
});
};
$scope.cancel = function () {
builds.cancel(fullName, number).then(function (payload) {
$scope.build = payload.data;
}).catch(function (err) {
$scope.error = err;
});
};
$scope.tail = function () {
tail = !tail;
};
} }
@ -172,6 +192,7 @@
}); });
$scope.restart = function () { $scope.restart = function () {
console.log('restart');
builds.restart(fullName, number).then(function (payload) { builds.restart(fullName, number).then(function (payload) {
$scope.build = payload.data; $scope.build = payload.data;
$scope.task = payload.data.builds[step - 1]; $scope.task = payload.data.builds[step - 1];
@ -212,7 +233,6 @@
}); });
} }
angular angular
.module('drone') .module('drone')
.controller('BuildOutCtrl', BuildOutCtrl) .controller('BuildOutCtrl', BuildOutCtrl)

View file

@ -78,9 +78,14 @@
}) })
.state('login', { .state('login', {
url: '/login', url: '/login',
templateUrl: '/static/scripts/views/login.html', views: {
title: 'Login', 'layout': {
controller: 'UserLoginCtrl' templateUrl: '/static/scripts/views/login.html',
controller: 'UserLoginCtrl',
resolve: resolveUser
}
},
title: 'Login'
}) })
.state('app.profile', { .state('app.profile', {
url: '/profile', url: '/profile',
@ -123,13 +128,15 @@
views: { views: {
'toolbar': { 'toolbar': {
templateUrl: '/static/scripts/views/builds/index/toolbar.html', templateUrl: '/static/scripts/views/builds/index/toolbar.html',
controller: 'BuildsCtrl' controller: 'RepoEditCtrl',
resolve: resolveUser
}, },
'content': { 'content': {
templateUrl: '/static/scripts/views/builds/index/content.html', templateUrl: '/static/scripts/views/builds/index/content.html',
controller: 'BuildsCtrl' controller: 'BuildsCtrl'
} }
} },
title: 'Builds'
}) })
.state('app.repo_edit', { .state('app.repo_edit', {
url: '/:owner/:name/edit', url: '/:owner/:name/edit',
@ -168,20 +175,33 @@
.state('app.build', { .state('app.build', {
url: '/:owner/:name/:number', url: '/:owner/:name/:number',
views: { views: {
'toolbar': {templateUrl: '/static/scripts/views/builds/show/toolbar.html'}, 'toolbar': {
'content': {templateUrl: '/static/scripts/views/builds/show/content.html'} templateUrl: '/static/scripts/views/builds/show/toolbar.html',
controller: 'BuildCtrl',
resolve: resolveUser
},
'content': {
templateUrl: '/static/scripts/views/builds/show/content.html',
controller: 'BuildCtrl',
resolve: resolveUser
}
}, },
controller: 'BuildCtrl', title: 'Build'
resolve: resolveUser
}) })
.state('app.build_step', { .state('app.build_step', {
url: '/:owner/:name/:number/:step', url: '/:owner/:name/:number/:step',
views: { views: {
'toolbar': {templateUrl: '/static/scripts/views/builds/step/toolbar.html'}, 'toolbar': {
'content': {templateUrl: '/static/scripts/views/builds/step/content.html'} templateUrl: '/static/scripts/views/builds/step/toolbar.html',
}, controller: 'BuildOutCtrl',
controller: 'BuildOutCtrl', resolve: resolveUser
resolve: resolveUser },
'content': {
templateUrl: '/static/scripts/views/builds/step/content.html',
controller: 'BuildOutCtrl',
resolve: resolveUser
}
}
}); });
// Enables html5 mode // Enables html5 mode
@ -211,8 +231,8 @@
function RouteChange($rootScope, repos, logs) { function RouteChange($rootScope, repos, logs) {
$rootScope.$on('$stateChangeStart', function () { $rootScope.$on('$stateChangeStart', function () {
// repos.unsubscribe(); repos.unsubscribe();
// logs.unsubscribe(); logs.unsubscribe();
}); });
$rootScope.$on('$stateChangeSuccess', function (event, current) { $rootScope.$on('$stateChangeSuccess', function (event, current) {

View file

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

View file

@ -1,18 +1,18 @@
<div class="breadcrumb" style="position:relative;top:0px;"> <div class="breadcrumb" style="position:relative;top:0px;">
<a href="/" class="icon icon-home"> <a href="/" class="icon icon-home">
<i class="material-icons md-18">home</i> <i class="material-icons md-18">home</i>
</a> </a>
<a href="#">{{ repo.owner }} / {{ repo.name }}</a> <a href="#">{{ repo.owner }} / {{ repo.name }}</a>
</div> </div>
<div class="menu"> <div class="menu">
<a ng-href="/{{ repo.full_name }}/edit" class="nav-item settings float-right" ng-if="repo.permissions.pull"> <a ng-href="/{{ repo.full_name }}/edit" class="nav-item settings float-right" ng-if="repo.permissions.pull">
<i class="material-icons md-18">edit</i> <i class="material-icons md-18">edit</i>
</a> </a>
<button ng-click="watch(repo)" ng-if="!repo.starred && user" class="nav-item star float-right"> <button ng-click="watch(repo)" ng-if="!repo.starred && user" class="nav-item star float-right">
<i class="material-icons md-18">star_border</i> <i class="material-icons md-18">star_border</i>
</button> </button>
<button ng-click="unwatch(repo)" ng-if="repo.starred && user" class="nav-item unstar float-right"> <button ng-click="unwatch(repo)" ng-if="repo.starred && user" class="nav-item unstar float-right">
<i class="material-icons md-18">star</i> <i class="material-icons md-18">star</i>
</button> </button>
</div> </div>

View file

@ -1,36 +1,39 @@
<article> <article>
<section class="commit-section"> <section class="commit-section">
<div class="row build-row"> <div class="row build-row">
<div> <div>
<div ng-class="[ 'build-num', build.status ]"></div> <div ng-class="[ 'build-num', build.status ]"></div>
</div> </div>
<div> <div>
<h3>{{ build.head_commit.message }}</h3> <h3>{{ build.head_commit.message }}</h3>
<p><strong>{{ build.head_commit.author.login }}</strong> pushed to <strong>{{ build.head_commit.branch }}</strong> {{ build.started_at | fromNow }}</p>
<div style="position:absolute;top:30px;right:30px;color:#CCC;"># {{build.number}}</div>
</div>
</div>
</section>
<section> <p><strong>{{ build.head_commit.author.login }}</strong> pushed to <strong>{{ build.head_commit.branch
<a class="row build-row sub-build-row" ng-repeat="job in build.jobs" ng-href="{{ repo.full_name }}/{{ build.number }}/{{ job.number }}"> }}</strong> {{ build.started_at | fromNow }}</p>
<div>
<div ng-class="[ 'build-num', build.status ]"></div> <div style="position:absolute;top:30px;right:30px;color:#CCC;"># {{build.number}}</div>
</div> </div>
<div> </div>
<h3> </section>
<div ng-repeat="(key, value) in job.environment">
{{ key.toUpperCase() }}={{ value }} <section>
</div> <a class="row build-row sub-build-row" ng-repeat="job in build.jobs"
</h3> ng-href="{{ repo.full_name }}/{{ build.number }}/{{ job.number }}">
<div style="position:absolute;top:30px;right:30px;color:#CCC;"># {{job.number}}</div> <div>
</div> <div ng-class="[ 'build-num', build.status ]"></div>
</a> </div>
</section> <div>
<h3>
<div ng-repeat="(key, value) in job.environment">
{{ key.toUpperCase() }}={{ value }}
</div>
</h3>
<div style="position:absolute;top:30px;right:30px;color:#CCC;"># {{job.number}}</div>
</div>
</a>
</section>
</article> </article>
<button ng-if="build.status !== 'pending' && build.status !== 'running'" ng-click="restart()">Restart</button> <button ng-if="build.status !== 'pending' && build.status !== 'running'" ng-click="restart()">Restart</button>
<button ng-if="build.status === 'pending' || build.status === 'running'" ng-click="cancel()">Cancel</button> <button ng-if="build.status === 'pending' || build.status === 'running'" ng-click="cancel()">Cancel</button>

View file

@ -1,15 +1,20 @@
<div class="breadcrumb" style="position:relative;top:0px;"> <div class="breadcrumb" style="position:relative;top:0px;">
<a ng-href="/{{ repo.full_name }}" class="icon icon-home"> <a ng-href="/{{ repo.full_name }}" class="icon icon-home">
<i class="material-icons md-18">home</i> <i class="material-icons md-18">home</i>
</a> </a>
<a ng-href="/{{ repo.full_name }}">{{ repo.owner }} / {{ repo.name }}</a> <a ng-href="/{{ repo.full_name }}">{{ repo.owner }} / {{ repo.name }}</a>
<span class="spacer"></span> <span class="spacer"></span>
<a ng-href="#">{{ build.number }}</a> <a ng-href="#">#{{ build.number }}</a>
</div> </div>
<div class="menu"> <div class="menu">
<a href="settings.html" class="icon icon-settings"></a> <a ng-href="/{{ repo.full_name }}/edit" class="nav-item settings float-right" ng-if="repo.permissions.pull">
<a ng-href="/{{ repo.full_name }}/edit" class="nav-item settings float-right"></a> <i class="material-icons md-18">edit</i>
<button ng-click="watch(repo)" ng-if="!repo.starred" class="nav-item star float-right"></button> </a>
<button ng-click="unwatch(repo)" ng-if="repo.starred" class="nav-item unstar float-right"></button> <button ng-click="watch(repo)" ng-if="!repo.starred && user" class="nav-item star float-right">
<i class="material-icons md-18">star_border</i>
</button>
<button ng-click="unwatch(repo)" ng-if="repo.starred && user" class="nav-item unstar float-right">
<i class="material-icons md-18">star</i>
</button>
</div> </div>

View file

@ -1,39 +1,38 @@
<article> <article>
<section class="commit-section"> <section class="commit-section">
<div class="row build-row"> <div class="row build-row">
<div> <div>
<div ng-class="[ 'build-num', task.status ]" ng-if="task"></div> <div ng-class="[ 'build-num', task.status ]" ng-if="task"></div>
<div ng-class="[ 'build-num', build.status ]" ng-if="!task"></div> <div ng-class="[ 'build-num', build.status ]" ng-if="!task"></div>
</div> </div>
<div> <div>
<h3>{{ build.head_commit.message }}</h3> <h3>{{ build.head_commit.message }}</h3>
<p><strong>{{ build.head_commit.author.login }}</strong> pushed to <strong>{{ build.head_commit.branch }}</strong> {{ build.started_at | fromNow }}</p>
</div>
</div>
<div class="row build-row sub-build-row" ng-if="build.jobs.length > 1"> <p><strong>{{ build.head_commit.author.login }}</strong> pushed to <strong>{{ build.head_commit.branch
<div> }}</strong> {{ build.started_at | fromNow }}</p>
</div>
</div>
</div> <div class="row build-row sub-build-row" ng-if="build.jobs.length > 1">
<div> <div>
<h3 style="margin-top:0px">
<div ng-repeat="(key, value) in task.environment"> </div>
{{ key.toUpperCase() }}={{ value }} <div>
</div> <h3 style="margin-top:0px">
</h3> <div ng-repeat="(key, value) in task.environment">
</div> {{ key.toUpperCase() }}={{ value }}
</div> </div>
</section> </h3>
</div>
</div>
</section>
<pre id="term" ng-if="task && task.status !== 'pending'"></pre>
<button class="fab" ng-if="build.status === 'running'" ng-click="tail()"></button>
<pre id="term" ng-if="task && task.status !== 'pending'"></pre>
<button class="fab" ng-if="build.status === 'running'" ng-click="tail()"></button>
</article> </article>
<button ng-if="build.status !== 'pending' && build.status !== 'running'" ng-click="restart()">Restart</button> <button ng-if="build.status !== 'pending' && build.status !== 'running'" ng-click="restart()">Restart</button>
<button ng-if="build.status === 'pending' || build.status === 'running'" ng-click="cancel()">Cancel</button> <button ng-if="build.status === 'pending' || build.status === 'running'" ng-click="cancel()">Cancel</button>

View file

@ -1,14 +1,22 @@
<div class="breadcrumb" style="position:relative;top:0px;"> <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 }}/{{ build.sequence }}" class="icon icon-home">
<a ng-href="/{{ repo.full_name }}">{{ repo.owner }} / {{ repo.name }}</a> <i class="material-icons md-18">home</i>
<span class="spacer"></span> </a>
<a ng-href="/{{ repo.full_name }}/{{ build.sequence }}">{{ build.sequence }}</a> <a ng-href="/{{ repo.full_name }}">{{ repo.owner }} / {{ repo.name }}</a>
<span class="spacer"></span> <span class="spacer"></span>
<a href="#">{{ task.sequence }}</a> <a ng-href="/{{ repo.full_name }}/{{ build.sequence }}">{{ build.sequence }}</a>
<span class="spacer"></span>
<a href="#">{{ task.sequence }}</a>
</div> </div>
<div class="menu"> <div class="menu">
<a ng-href="/{{ repo.full_name }}/edit" class="nav-item settings float-right"></a> <a ng-href="/{{ repo.full_name }}/edit" class="nav-item settings float-right" ng-if="repo.permissions.pull">
<button ng-click="watch(repo)" ng-if="!repo.starred" class="nav-item star float-right"></button> <i class="material-icons md-18">edit</i>
<button ng-click="unwatch(repo)" ng-if="repo.starred" class="nav-item unstar float-right"></button> </a>
<button ng-click="watch(repo)" ng-if="!repo.starred && user" class="nav-item star float-right">
<i class="material-icons md-18">star_border</i>
</button>
<button ng-click="unwatch(repo)" ng-if="repo.starred && user" class="nav-item unstar float-right">
<i class="material-icons md-18">star</i>
</button>
</div> </div>

View file

@ -6,7 +6,13 @@
</div> </div>
<div class="menu"> <div class="menu">
<a ng-href="/{{ repo.full_name }}/edit" class="nav-item settings float-right"></a> <a ng-href="/{{ repo.full_name }}/edit" class="nav-item settings float-right" ng-if="repo.permissions.pull">
<button ng-click="watch(repo)" ng-if="!repo.starred" class="nav-item star float-right"></button> <i class="material-icons md-18">edit</i>
<button ng-click="unwatch(repo)" ng-if="repo.starred" class="nav-item unstar float-right"></button> </a>
<button ng-click="watch(repo)" ng-if="!repo.starred && user" class="nav-item star float-right">
<i class="material-icons md-18">star_border</i>
</button>
<button ng-click="unwatch(repo)" ng-if="repo.starred && user" class="nav-item unstar float-right">
<i class="material-icons md-18">star</i>
</button>
</div> </div>