feat(home): pagination on endpoints list (#2981)

app/portainer/components/endpoint-list/endpoint-list-controller.js

@@ -1,11 +1,12 @@
 import _ from 'lodash-es';
 
-angular.module('portainer.app').controller('EndpointListController', ['DatatableService',
-  function EndpointListController(DatatableService) {
+angular.module('portainer.app').controller('EndpointListController', ['DatatableService', 'PaginationService',
+  function EndpointListController(DatatableService, PaginationService) {
     var ctrl = this;
     ctrl.state = {
       textFilter: '',
-      filteredEndpoints: []
+      filteredEndpoints: [],
+      paginatedItemLimit: '10'
     };
 
     ctrl.$onChanges = $onChanges;
@@ -58,12 +59,17 @@ angular.module('portainer.app').controller('EndpointListController', ['Datatable
       });
     }
 
+    this.changePaginationLimit = function() {
+      PaginationService.setPaginationLimit(this.tableKey, this.state.paginatedItemLimit);
+    };
+
     function convertStatusToString(status) {
       return status === 1 ? 'up' : 'down';
     }
 
     function $onInit() {
       var textFilter = DatatableService.getDataTableTextFilters(ctrl.tableKey);
+      this.state.paginatedItemLimit = PaginationService.getPaginationLimit(this.tableKey);
       if (textFilter !== null) {
         ctrl.state.textFilter = textFilter;
         onTextFilterChange();

app/portainer/components/endpoint-list/endpointList.html

@@ -26,7 +26,7 @@
 
       <div class="blocklist">
         <endpoint-item
-          ng-repeat="endpoint in $ctrl.state.filteredEndpoints"
+          dir-paginate="endpoint in $ctrl.state.filteredEndpoints | itemsPerPage: $ctrl.state.paginatedItemLimit"
           model="endpoint"
           on-select="$ctrl.dashboardAction"
           on-edit="$ctrl.editAction"
@@ -40,6 +40,25 @@
         </div>
       </div>
 
+      <div class="footer" ng-if="$ctrl.endpoints">
+        <div class="paginationControls">
+          <form class="form-inline">
+            <span class="limitSelector">
+              <span style="margin-right: 5px;">
+                Items per page
+              </span>
+              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()">
+                <option value="0">All</option>
+                <option value="10">10</option>
+                <option value="25">25</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+              </select>
+            </span>
+            <dir-pagination-controls max-size="5"></dir-pagination-controls>
+          </form>
+        </div>
+      </div>
     </rd-widget-body>
   </rd-widget>
 </div>

app/portainer/views/home/home.html

@@ -28,7 +28,7 @@
   <div class="col-sm-12">
     <endpoint-list
       title-text="Endpoints" title-icon="fa-plug"
-      endpoints="endpoints" table-key="endpoints"
+      endpoints="endpoints" table-key="home_endpoints"
       dashboard-action="goToDashboard"
       show-snapshot-action="!applicationState.application.authentication || isAdmin"
       snapshot-action="triggerSnapshot"