Builds UI fixes
This commit is contained in:
parent
229e88a438
commit
63408147b2
9 changed files with 189 additions and 124 deletions
|
@ -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)
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
Loading…
Reference in a new issue