add paginator, add pagination to the logs.

static/resources/js/components/log/list-log.directive.html

@@ -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>

static/resources/js/components/log/list-log.directive.js

@@ -52,7 +52,22 @@
       '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) {
+    function retrieve(queryParams, page, pageSize) {     
-      ListLogService(queryParams)
+      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,

static/resources/js/components/paginator/paginator.directive.html

@@ -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>

static/resources/js/components/paginator/paginator.directive.js

@@ -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');
+              
+            }
+          }
+        }
+      }); 
+    }
+  }
+  
+})();

static/resources/js/components/paginator/paginator.module.js

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

static/resources/js/harbor.module.js

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

static/resources/js/services/log/services.list-log.js

@@ -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,

views/sections/script-include.htm

@@ -192,3 +192,6 @@
 
 <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/paginator/paginator.module.js"></script>
+<script src="/static/resources/js/components/paginator/paginator.directive.js"></script>