mirror of
https://github.com/goharbor/harbor.git
synced 2024-12-23 09:08:26 +01:00
add paginator, add pagination to the logs.
This commit is contained in:
parent
36914f566a
commit
f44e6f5991
@ -47,6 +47,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -51,8 +51,23 @@
|
|||||||
'projectId': vm.projectId,
|
'projectId': vm.projectId,
|
||||||
'username' : vm.username
|
'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() {
|
$scope.$on('$locationChangeSuccess', function() {
|
||||||
|
|
||||||
@ -69,7 +84,7 @@
|
|||||||
'username' : vm.username
|
'username' : vm.username
|
||||||
};
|
};
|
||||||
vm.username = '';
|
vm.username = '';
|
||||||
retrieve(vm.queryParams);
|
retrieve(vm.queryParams, vm.page, vm.pageSize);
|
||||||
});
|
});
|
||||||
|
|
||||||
function search(e) {
|
function search(e) {
|
||||||
@ -87,7 +102,7 @@
|
|||||||
vm.queryParams.beginTimestamp = toUTCSeconds(vm.fromDate, 0, 0, 0);
|
vm.queryParams.beginTimestamp = toUTCSeconds(vm.fromDate, 0, 0, 0);
|
||||||
vm.queryParams.endTimestamp = toUTCSeconds(vm.toDate, 23, 59, 59);
|
vm.queryParams.endTimestamp = toUTCSeconds(vm.toDate, 23, 59, 59);
|
||||||
|
|
||||||
retrieve(vm.queryParams);
|
retrieve(vm.queryParams, vm.page, vm.pageSize);
|
||||||
}
|
}
|
||||||
|
|
||||||
function showAdvancedSearch() {
|
function showAdvancedSearch() {
|
||||||
@ -98,14 +113,17 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function retrieve(queryParams) {
|
function retrieve(queryParams, page, pageSize) {
|
||||||
ListLogService(queryParams)
|
ListLogService(queryParams, page, pageSize)
|
||||||
.then(listLogComplete)
|
.then(listLogComplete)
|
||||||
.catch(listLogFailed);
|
.catch(listLogFailed);
|
||||||
}
|
}
|
||||||
|
|
||||||
function listLogComplete(response) {
|
function listLogComplete(response) {
|
||||||
vm.logs = response.data;
|
vm.logs = response.data;
|
||||||
|
vm.totalCount = response.headers('X-Total-Count');
|
||||||
|
|
||||||
|
console.log('Total Count in logs:' + vm.totalCount + ', page:' + vm.page);
|
||||||
|
|
||||||
vm.queryParams = {
|
vm.queryParams = {
|
||||||
'beginTimestamp' : 0,
|
'beginTimestamp' : 0,
|
||||||
|
@ -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">«</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="javascript:void(0);" ng-click="vm.next()" aria-label="Next">
|
||||||
|
<span aria-hidden="true">»</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
183
static/resources/js/components/paginator/paginator.directive.js
Normal file
183
static/resources/js/components/paginator/paginator.directive.js
Normal 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');
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
@ -0,0 +1,8 @@
|
|||||||
|
(function() {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
angular
|
||||||
|
.module('harbor.paginator', []);
|
||||||
|
|
||||||
|
})();
|
@ -60,6 +60,7 @@
|
|||||||
'harbor.system.management',
|
'harbor.system.management',
|
||||||
'harbor.loading.progress',
|
'harbor.loading.progress',
|
||||||
'harbor.inline.help',
|
'harbor.inline.help',
|
||||||
'harbor.dismissable.alerts'
|
'harbor.dismissable.alerts',
|
||||||
|
'harbor.paginator'
|
||||||
]);
|
]);
|
||||||
})();
|
})();
|
||||||
|
@ -26,7 +26,7 @@
|
|||||||
|
|
||||||
return LogResult;
|
return LogResult;
|
||||||
|
|
||||||
function LogResult(queryParams) {
|
function LogResult(queryParams, page, pageSize) {
|
||||||
var projectId = queryParams.projectId;
|
var projectId = queryParams.projectId;
|
||||||
var username = queryParams.username;
|
var username = queryParams.username;
|
||||||
var beginTimestamp = queryParams.beginTimestamp;
|
var beginTimestamp = queryParams.beginTimestamp;
|
||||||
@ -34,7 +34,7 @@
|
|||||||
var keywords = queryParams.keywords;
|
var keywords = queryParams.keywords;
|
||||||
|
|
||||||
return $http
|
return $http
|
||||||
.post('/api/projects/' + projectId + '/logs/filter', {
|
.post('/api/projects/' + projectId + '/logs/filter?page=' + page + '&page_size=' + pageSize, {
|
||||||
'begin_timestamp' : beginTimestamp,
|
'begin_timestamp' : beginTimestamp,
|
||||||
'end_timestamp' : endTimestamp,
|
'end_timestamp' : endTimestamp,
|
||||||
'keywords' : keywords,
|
'keywords' : keywords,
|
||||||
|
@ -191,4 +191,7 @@
|
|||||||
<script src="/static/resources/js/components/inline-help/inline-help.directive.js"></script>
|
<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.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>
|
Loading…
Reference in New Issue
Block a user