From 4084e7c8ece779fce323b05358b1b8c2d7f569b9 Mon Sep 17 00:00:00 2001
From: xAt0mZ <xAt0mZ@users.noreply.github.com>
Date: Thu, 4 Jul 2019 23:46:59 +0200
Subject: [PATCH] feat(home): pagination on endpoints list (#2981)

---
 .../endpoint-list/endpoint-list-controller.js | 12 ++++++++---
 .../endpoint-list/endpointList.html           | 21 ++++++++++++++++++-
 app/portainer/views/home/home.html            |  2 +-
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/app/portainer/components/endpoint-list/endpoint-list-controller.js b/app/portainer/components/endpoint-list/endpoint-list-controller.js
index 53c9308a9..b9851a804 100644
--- a/app/portainer/components/endpoint-list/endpoint-list-controller.js
+++ b/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();
diff --git a/app/portainer/components/endpoint-list/endpointList.html b/app/portainer/components/endpoint-list/endpointList.html
index f429be03f..9909a6ed7 100644
--- a/app/portainer/components/endpoint-list/endpointList.html
+++ b/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>
diff --git a/app/portainer/views/home/home.html b/app/portainer/views/home/home.html
index 2fb8a4afc..ac008b153 100644
--- a/app/portainer/views/home/home.html
+++ b/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"