Add pager_controls directive and pager service. Add pagination to Das…

…hboard and Visualize landing pages. Change Dashboard listing to use hrefs for each dashboard.
cjcenizal · Feb 4, 2017 · d1d3da7 · d1d3da7
1 parent 43ceb6e
commit d1d3da7
Show file tree

Hide file tree

Showing 12 changed files with 284 additions and 48 deletions.
diff --git a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
@@ -31,10 +31,6 @@
         </div>
       </div>
 
-      <div class="kuiToolBarSection">
-        <!-- We need an empty section for the buttons to be positioned consistently. -->
-      </div>
-
       <div class="kuiToolBarSection">
         <!-- Bulk delete button -->
         <button
@@ -59,6 +55,21 @@
           <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
         </a>
       </div>
+
+      <div class="kuiToolBarSection">
+        <!-- Pagination -->
+        <tool-bar-pager-text
+          start-item="listingController.pager.startItem"
+          end-item="listingController.pager.endItem"
+          total-items="listingController.pager.totalItems"
+        ></tool-bar-pager-text>
+        <tool-bar-pager-buttons
+          has-previous-page="listingController.pager.hasPreviousPage"
+          has-next-page="listingController.pager.hasNextPage"
+          on-page-next="listingController.onPageNext"
+          on-page-previous="listingController.onPagePrevious"
+        ></tool-bar-pager-buttons>
+      </div>
     </div>
 
     <!-- NoResults -->
@@ -118,7 +129,7 @@
 
       <tbody>
       <tr
-        ng-repeat="item in listingController.items track by item.id"
+        ng-repeat="item in listingController.pageOfItems track by item.id"
         class="kuiTableRow"
       >
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
@@ -132,7 +143,7 @@
 
         <td class="kuiTableRowCell">
           <div class="kuiTableRowCell__liner">
-            <a class="kuiLink" ng-click="listingController.open(item)">
+            <a class="kuiLink" ng-href="{{ listingController.getUrlForItem(item) }}">
               {{ item.title }}
             </a>
           </div>
@@ -149,8 +160,20 @@
           {{ listingController.getSelectedItemsCount() }} selected
         </div>
       </div>
-      <div class="kuiToolBarFooterSection">
-        <!-- We need an empty section for the buttons to be positioned consistently. -->
+
+      <div class="kuiToolBarSection">
+        <!-- Pagination -->
+        <tool-bar-pager-text
+          start-item="listingController.pager.startItem"
+          end-item="listingController.pager.endItem"
+          total-items="listingController.pager.totalItems"
+        ></tool-bar-pager-text>
+        <tool-bar-pager-buttons
+          has-previous-page="listingController.pager.hasPreviousPage"
+          has-next-page="listingController.pager.hasNextPage"
+          on-page-next="listingController.onPageNext"
+          on-page-previous="listingController.onPagePrevious"
+        ></tool-bar-pager-buttons>
       </div>
     </div>
   </div>

diff --git a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
@@ -1,57 +1,71 @@
 import SavedObjectRegistryProvider from 'ui/saved_objects/saved_object_registry';
+import 'ui/pager_control';
+import 'ui/pager';
 import { DashboardConstants } from '../dashboard_constants';
 import _ from 'lodash';
 
 export function DashboardListingController(
+  $filter,
   $scope,
+  confirmModal,
   kbnUrl,
   Notifier,
+  pagerService,
   Private,
-  timefilter,
-  confirmModal
+  timefilter
 ) {
   timefilter.enabled = false;
 
+  const limitTo = $filter('limitTo');
   // TODO: Extract this into an external service.
   const services = Private(SavedObjectRegistryProvider).byLoaderPropertiesName;
   const dashboardService = services.dashboards;
   const notify = new Notifier({ location: 'Dashboard' });
 
   let selectedItems = [];
 
+  /**
+   * Sorts hits either ascending or descending
+   * @param  {Array} hits Array of saved finder object hits
+   * @return {Array} Array sorted either ascending or descending
+   */
+  const sortItems = () => {
+    this.items =
+      this.isAscending
+      ? _.sortBy(this.items, 'title')
+      : _.sortBy(this.items, 'title').reverse();
+  };
+
+  const calculateItemsOnPage = () => {
+    sortItems();
+    this.pager.setTotalItems(this.items.length);
+    this.pageOfItems = limitTo(this.items, this.pager.pageSize, this.pager.startIndex);
+  };
+
   const fetchObjects = () => {
     dashboardService.find(this.filter)
       .then(result => {
         this.items = result.hits;
-        this.sortItems();
+        calculateItemsOnPage();
       });
   };
 
   this.items = [];
+  this.pageOfItems = [];
   this.filter = '';
 
+  this.pager = pagerService.create(this.items.length, 20, 1);
+
   /**
    * Boolean that keeps track of whether hits are sorted ascending (true)
    * or descending (false) by title
    * @type {Boolean}
    */
   this.isAscending = true;
 
-  /**
-   * Sorts hits either ascending or descending
-   * @param  {Array} hits Array of saved finder object hits
-   * @return {Array} Array sorted either ascending or descending
-   */
-  this.sortItems = function sortItems() {
-    this.items =
-      this.isAscending
-      ? _.sortBy(this.items, 'title')
-      : _.sortBy(this.items, 'title').reverse();
-  };
-
   this.toggleSort = function toggleSort() {
     this.isAscending = !this.isAscending;
-    this.sortItems();
+    calculateItemsOnPage();
   };
 
   this.toggleAll = function toggleAll() {
@@ -102,8 +116,18 @@ export function DashboardListingController(
       });
   };
 
-  this.open = function open(item) {
-    kbnUrl.change(item.url.substr(1));
+  this.onPageNext = () => {
+    this.pager.nextPage();
+    calculateItemsOnPage();
+  };
+
+  this.onPagePrevious = () => {
+    this.pager.previousPage();
+    calculateItemsOnPage();
+  };
+
+  this.getUrlForItem = function getUrlForItem(item) {
+    return `#/dashboard/${item.id}`;
   };
 
   $scope.$watch(() => this.filter, () => {

diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -30,10 +30,6 @@
         </div>
       </div>
 
-      <div class="kuiToolBarSection">
-        <!-- We need an empty section for the buttons to be positioned consistently. -->
-      </div>
-
       <div class="kuiToolBarSection">
         <!-- Bulk delete button -->
         <button
@@ -57,6 +53,21 @@
           <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
         </a>
       </div>
+
+      <div class="kuiToolBarSection">
+        <!-- Pagination -->
+        <tool-bar-pager-text
+          start-item="listingController.pager.startItem"
+          end-item="listingController.pager.endItem"
+          total-items="listingController.pager.totalItems"
+        ></tool-bar-pager-text>
+        <tool-bar-pager-buttons
+          has-previous-page="listingController.pager.hasPreviousPage"
+          has-next-page="listingController.pager.hasNextPage"
+          on-page-next="listingController.onPageNext"
+          on-page-previous="listingController.onPagePrevious"
+        ></tool-bar-pager-buttons>
+      </div>
     </div>
 
     <!-- NoResults -->
@@ -101,7 +112,7 @@
 
       <tbody>
         <tr
-          ng-repeat="item in listingController.items track by item.id"
+          ng-repeat="item in listingController.pageOfItems track by item.id"
           class="kuiTableRow"
         >
           <td class="kuiTableRowCell kuiTableRowCell--checkBox">
@@ -141,8 +152,20 @@
           {{ listingController.getSelectedItemsCount() }} selected
         </div>
       </div>
+
       <div class="kuiToolBarFooterSection">
-        <!-- We need an empty section for the buttons to be positioned consistently. -->
+        <!-- Pagination -->
+        <tool-bar-pager-text
+          start-item="listingController.pager.startItem"
+          end-item="listingController.pager.endItem"
+          total-items="listingController.pager.totalItems"
+        ></tool-bar-pager-text>
+        <tool-bar-pager-buttons
+          has-previous-page="listingController.pager.hasPreviousPage"
+          has-next-page="listingController.pager.hasNextPage"
+          on-page-next="listingController.onPageNext"
+          on-page-previous="listingController.onPagePrevious"
+        ></tool-bar-pager-buttons>
       </div>
     </div>
   </div>

diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -1,34 +1,62 @@
 import SavedObjectRegistryProvider from 'ui/saved_objects/saved_object_registry';
+import 'ui/pager_control';
+import 'ui/pager';
 import _ from 'lodash';
 
 export function VisualizeListingController(
+  $filter,
   $scope,
   confirmModal,
   kbnUrl,
   Notifier,
+  pagerService,
   Private,
   timefilter
 ) {
   timefilter.enabled = false;
 
+  const limitTo = $filter('limitTo');
   // TODO: Extract this into an external service.
   const services = Private(SavedObjectRegistryProvider).byLoaderPropertiesName;
   const visualizationService = services.visualizations;
   const notify = new Notifier({ location: 'Visualize' });
 
   let selectedItems = [];
 
+  /**
+   * Sorts hits either ascending or descending
+   * @param  {Array} hits Array of saved finder object hits
+   * @return {Array} Array sorted either ascending or descending
+   */
+  const sortItems = () => {
+    const sortProperty = this.getSortProperty();
+
+    this.items =
+      sortProperty.isAscending
+      ? _.sortBy(this.items, sortProperty.getValue)
+      : _.sortBy(this.items, sortProperty.getValue).reverse();
+  };
+
+  const calculateItemsOnPage = () => {
+    sortItems();
+    this.pager.setTotalItems(this.items.length);
+    this.pageOfItems = limitTo(this.items, this.pager.pageSize, this.pager.startIndex);
+  };
+
   const fetchObjects = () => {
     visualizationService.find(this.filter)
     .then(result => {
       this.items = result.hits;
-      this.sortItems();
+      calculateItemsOnPage();
     });
   };
 
   this.items = [];
+  this.pageOfItems = [];
   this.filter = '';
 
+  this.pager = pagerService.create(this.items.length, 20, 1);
+
   /**
    * Remember sort direction per property.
    */
@@ -57,20 +85,6 @@ export function VisualizeListingController(
     return sortProperty.isAscending;
   };
 
-  /**
-   * Sorts hits either ascending or descending
-   * @param  {Array} hits Array of saved finder object hits
-   * @return {Array} Array sorted either ascending or descending
-   */
-  this.sortItems = function sortItems() {
-    const sortProperty = this.getSortProperty();
-
-    this.items =
-      sortProperty.isAscending
-      ? _.sortBy(this.items, sortProperty.getValue)
-      : _.sortBy(this.items, sortProperty.getValue).reverse();
-  };
-
   this.sortOn = function sortOn(propertyName) {
     const sortProperty = this.getSortProperty();
 
@@ -81,7 +95,7 @@ export function VisualizeListingController(
       this.getSortPropertyByName(propertyName).isSelected = true;
     }
 
-    this.sortItems();
+    calculateItemsOnPage();
   };
 
   this.toggleAll = function toggleAll() {
@@ -133,6 +147,16 @@ export function VisualizeListingController(
       });
   };
 
+  this.onPageNext = () => {
+    this.pager.nextPage();
+    calculateItemsOnPage();
+  };
+
+  this.onPagePrevious = () => {
+    this.pager.previousPage();
+    calculateItemsOnPage();
+  };
+
   this.getUrlForItem = function getUrlForItem(item) {
     return `#/visualize/edit/${item.id}`;
   };

diff --git a/src/ui/public/pager/index.js b/src/ui/public/pager/index.js
@@ -0,0 +1 @@
+import './pager_service.factory';
diff --git a/src/ui/public/pager/pager_service.factory.js b/src/ui/public/pager/pager_service.factory.js
@@ -0,0 +1,12 @@
+import uiModules from 'ui/modules';
+import { PagerService } from './pager_service';
+
+const app = uiModules.get('kibana');
+
+app.factory('pagerService', () => {
+  return {
+    create(...args) {
+      return new PagerService(...args);
+    }
+  };
+});