Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-12-23 09:08:26 +01:00
Code Issues Projects Releases Wiki Activity

add paginator, add pagination to the logs.

Browse Source
This commit is contained in:
kunw 2016-08-05 20:37:58 +08:00
parent 36914f566a
commit f44e6f5991
8 changed files with 238 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/resources/js/components/log/list-log.directive.html
View File

@ -47,6 +47,7 @@
</tr>
</tbody>
</table>
<paginator class="pull-right" total-count="//vm.totalCount//" page-size="1" page="vm.page" display-count="3" retrieve="vm.search({op: vm.op, username: vm.username})"></paginator>
</div>
</div>
</div>

30
static/resources/js/components/log/list-log.directive.js
View File

@ -51,8 +51,23 @@
'projectId': vm.projectId,
'username' : vm.username
};
retrieve(vm.queryParams);
vm.page = 1;
vm.pageSize = 1;
$scope.$watch('vm.totalCount', function(current) {
if(current) {
vm.totalCount = current;
}
});
$scope.$watch('vm.page', function(current) {
if(current) {
vm.page = current;
retrieve(vm.queryParams, vm.page, vm.pageSize);
}
});
retrieve(vm.queryParams, vm.page, vm.pageSize);
$scope.$on('$locationChangeSuccess', function() {
@ -69,7 +84,7 @@
'username' : vm.username
};
vm.username = '';
retrieve(vm.queryParams);
retrieve(vm.queryParams, vm.page, vm.pageSize);
});
function search(e) {
@ -87,7 +102,7 @@
vm.queryParams.beginTimestamp = toUTCSeconds(vm.fromDate, 0, 0, 0);
vm.queryParams.endTimestamp = toUTCSeconds(vm.toDate, 23, 59, 59);
retrieve(vm.queryParams);
retrieve(vm.queryParams, vm.page, vm.pageSize);
}
function showAdvancedSearch() {
@ -98,14 +113,17 @@
}
}
function retrieve(queryParams) {
ListLogService(queryParams)
function retrieve(queryParams, page, pageSize) {
ListLogService(queryParams, page, pageSize)
.then(listLogComplete)
.catch(listLogFailed);
}
function listLogComplete(response) {
vm.logs = response.data;
vm.totalCount = response.headers('X-Total-Count');
console.log('Total Count in logs:' + vm.totalCount + ', page:' + vm.page);
vm.queryParams = {
'beginTimestamp' : 0,

14
static/resources/js/components/paginator/paginator.directive.html Normal file
View File

@ -0,0 +1,14 @@
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="javascript:void(0);" ng-click="vm.previous()" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li>
<a href="javascript:void(0);" ng-click="vm.next()" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

183
static/resources/js/components/paginator/paginator.directive.js Normal file
View File

@ -0,0 +1,183 @@
(function() {
'use strict';
angular
.module('harbor.paginator')
.directive('paginator', paginator);
PaginatorController.$inject = [];
function PaginatorController() {
var vm = this;
}
paginator.$inject = [];
function paginator() {
var directive = {
'restrict': 'E',
'templateUrl': '/static/resources/js/components/paginator/paginator.directive.html',
'scope': {
'totalCount': '@',
'pageSize': '@',
'page': '=',
'displayCount': '@',
'retrieve': '&'
},
'link': link,
'controller': PaginatorController,
'controllerAs': 'vm',
'bindToController': true
};
return directive;
function link(scope, element, attrs, ctrl) {
scope.$watch('vm.totalCount', function(current) {
if(current) {
var totalCount = current;
var pageSize = parseInt(ctrl.pageSize);
var displayCount = parseInt(ctrl.displayCount);
console.log('Total Count:' + totalCount + ', Page Size:' + pageSize + ', Display Count:' + displayCount);
var TimeCounter = function() {
this.time = 0;
this.minimum = 0;
this.maximum = 0;
}
TimeCounter.prototype.setMaximum = function(maximum) {
this.maximum = maximum;
}
TimeCounter.prototype.increment = function() {
if(this.time < this.maximum) {
++this.time;
++ctrl.page;
}
}
TimeCounter.prototype.canIncrement = function() {
if(this.time < this.maximum) {
return true;
}
return false;
}
TimeCounter.prototype.decrement = function() {
if(this.time > this.minimum) {
--this.time;
--ctrl.page;
}
}
TimeCounter.prototype.canDecrement = function() {
if(this.time > this.minimum) {
return true;
}
return false;
}
TimeCounter.prototype.getTime = function() {
return this.time;
}
var buttonCount = Math.ceil(totalCount / pageSize);
var tc = new TimeCounter();
if(buttonCount <= displayCount) {
tc.setMaximum(0);
}else{
tc.setMaximum(Math.floor(buttonCount / displayCount));
}
element.find('ul li:first a').on('click', previous);
ctrl.showPrevious = false;
element.find('ul li:last a').on('click', next);
ctrl.showNext = (buttonCount > displayCount);
var drawButtons = function(time) {
element.find('li[tag="pagination-button"]').remove();
var buttons = [];
for(var i = 1; i <= displayCount; i++) {
var displayNumber = displayCount * time + i;
if(displayNumber <= buttonCount) {
buttons.push('<li tag="pagination-button"><a href="javascript:void(0)" page="' + displayNumber + '">' + displayNumber + '</a></li>');
}
}
$(buttons.join(''))
.insertAfter(element.find('ul li:eq(0)')).end()
.on('click', buttonClickHandler);
}
drawButtons(tc.getTime());
togglePrevious(false);
toggleNext((buttonCount > displayCount));
togglePageButton();
function togglePrevious(status) {
if(status){
element.find('ul li:first').removeClass('disabled');
}else{
element.find('ul li:first').addClass('disabled');
}
}
function toggleNext(status) {
if(status) {
element.find('ul li:last').removeClass('disabled');
}else{
element.find('ul li:last').addClass('disabled');
}
}
function buttonClickHandler(e) {
ctrl.page = $(e.target).attr('page');
togglePageButton();
ctrl.retrieve();
if(tc.canIncrement()) {
toggleNext(true);
}else {
toggleNext(false);
}
if(tc.canDecrement()) {
togglePrevious(true);
}else{
togglePrevious(false);
}
}
function togglePageButton() {
element.find('li[tag="pagination-button"]').removeClass('active');
element.find('li[tag="pagination-button"] a[page="' + ctrl.page + '"]').parent().addClass('active');
}
function previous() {
if(tc.canDecrement()) {
tc.decrement();
drawButtons(tc.getTime());
element.find('li[tag="pagination-button"] a[page="' + ctrl.page + '"]').trigger('click');
}
}
function next() {
if(tc.canIncrement()) {
tc.increment();
drawButtons(tc.getTime());
element.find('li[tag="pagination-button"] a[page="' + ctrl.page + '"]').trigger('click');
}
}
}
});
}
}
})();

8
static/resources/js/components/paginator/paginator.module.js Normal file
View File

@ -0,0 +1,8 @@
(function() {
'use strict';
angular
.module('harbor.paginator', []);
})();

3
static/resources/js/harbor.module.js
View File

@ -60,6 +60,7 @@
'harbor.system.management',
'harbor.loading.progress',
'harbor.inline.help',
'harbor.dismissable.alerts'
'harbor.dismissable.alerts',
'harbor.paginator'
]);
})();

4
static/resources/js/services/log/services.list-log.js
View File

@ -26,7 +26,7 @@
return LogResult;
function LogResult(queryParams) {
function LogResult(queryParams, page, pageSize) {
var projectId = queryParams.projectId;
var username = queryParams.username;
var beginTimestamp = queryParams.beginTimestamp;
@ -34,7 +34,7 @@
var keywords = queryParams.keywords;
return $http
.post('/api/projects/' + projectId + '/logs/filter', {
.post('/api/projects/' + projectId + '/logs/filter?page=' + page + '&page_size=' + pageSize, {
'begin_timestamp' : beginTimestamp,
'end_timestamp' : endTimestamp,
'keywords' : keywords,

5
views/sections/script-include.htm
View File

@ -191,4 +191,7 @@
<script src="/static/resources/js/components/inline-help/inline-help.directive.js"></script>
<script src="/static/resources/js/components/dismissable-alerts/dismissable-alerts.module.js"></script>
<script src="/static/resources/js/components/dismissable-alerts/dismissable-alerts.directive.js"></script>
<script src="/static/resources/js/components/dismissable-alerts/dismissable-alerts.directive.js"></script>
<script src="/static/resources/js/components/paginator/paginator.module.js"></script>
<script src="/static/resources/js/components/paginator/paginator.directive.js"></script>