Skip to content

Commit d1d3da7

Browse files
cjcenizalcjcenizal
committed
Add pager_controls directive and pager service. Add pagination to Dashboard and Visualize landing pages. Change Dashboard listing to use hrefs for each dashboard.
1 parent 43ceb6e commit d1d3da7

12 files changed

Lines changed: 284 additions & 48 deletions

File tree

‎src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html‎

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,6 @@
3131
</div>
3232
</div>
3333

34-
<div class="kuiToolBarSection">
35-
<!-- We need an empty section for the buttons to be positioned consistently. -->
36-
</div>
37-
3834
<div class="kuiToolBarSection">
3935
<!-- Bulk delete button -->
4036
<button
@@ -59,6 +55,21 @@
5955
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
6056
</a>
6157
</div>
58+
59+
<div class="kuiToolBarSection">
60+
<!-- Pagination -->
61+
<tool-bar-pager-text
62+
start-item="listingController.pager.startItem"
63+
end-item="listingController.pager.endItem"
64+
total-items="listingController.pager.totalItems"
65+
></tool-bar-pager-text>
66+
<tool-bar-pager-buttons
67+
has-previous-page="listingController.pager.hasPreviousPage"
68+
has-next-page="listingController.pager.hasNextPage"
69+
on-page-next="listingController.onPageNext"
70+
on-page-previous="listingController.onPagePrevious"
71+
></tool-bar-pager-buttons>
72+
</div>
6273
</div>
6374

6475
<!-- NoResults -->
@@ -118,7 +129,7 @@
118129

119130
<tbody>
120131
<tr
121-
ng-repeat="item in listingController.items track by item.id"
132+
ng-repeat="item in listingController.pageOfItems track by item.id"
122133
class="kuiTableRow"
123134
>
124135
<td class="kuiTableRowCell kuiTableRowCell--checkBox">
@@ -132,7 +143,7 @@
132143

133144
<td class="kuiTableRowCell">
134145
<div class="kuiTableRowCell__liner">
135-
<a class="kuiLink" ng-click="listingController.open(item)">
146+
<a class="kuiLink" ng-href="{{ listingController.getUrlForItem(item) }}">
136147
{{ item.title }}
137148
</a>
138149
</div>
@@ -149,8 +160,20 @@
149160
{{ listingController.getSelectedItemsCount() }} selected
150161
</div>
151162
</div>
152-
<div class="kuiToolBarFooterSection">
153-
<!-- We need an empty section for the buttons to be positioned consistently. -->
163+
164+
<div class="kuiToolBarSection">
165+
<!-- Pagination -->
166+
<tool-bar-pager-text
167+
start-item="listingController.pager.startItem"
168+
end-item="listingController.pager.endItem"
169+
total-items="listingController.pager.totalItems"
170+
></tool-bar-pager-text>
171+
<tool-bar-pager-buttons
172+
has-previous-page="listingController.pager.hasPreviousPage"
173+
has-next-page="listingController.pager.hasNextPage"
174+
on-page-next="listingController.onPageNext"
175+
on-page-previous="listingController.onPagePrevious"
176+
></tool-bar-pager-buttons>
154177
</div>
155178
</div>
156179
</div>

‎src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js‎

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,71 @@
11
import SavedObjectRegistryProvider from 'ui/saved_objects/saved_object_registry';
2+
import 'ui/pager_control';
3+
import 'ui/pager';
24
import { DashboardConstants } from '../dashboard_constants';
35
import _ from 'lodash';
46

57
export function DashboardListingController(
8+
$filter,
69
$scope,
10+
confirmModal,
711
kbnUrl,
812
Notifier,
13+
pagerService,
914
Private,
10-
timefilter,
11-
confirmModal
15+
timefilter
1216
) {
1317
timefilter.enabled = false;
1418

19+
const limitTo = $filter('limitTo');
1520
// TODO: Extract this into an external service.
1621
const services = Private(SavedObjectRegistryProvider).byLoaderPropertiesName;
1722
const dashboardService = services.dashboards;
1823
const notify = new Notifier({ location: 'Dashboard' });
1924

2025
let selectedItems = [];
2126

27+
/**
28+
* Sorts hits either ascending or descending
29+
* @param {Array} hits Array of saved finder object hits
30+
* @return {Array} Array sorted either ascending or descending
31+
*/
32+
const sortItems = () => {
33+
this.items =
34+
this.isAscending
35+
? _.sortBy(this.items, 'title')
36+
: _.sortBy(this.items, 'title').reverse();
37+
};
38+
39+
const calculateItemsOnPage = () => {
40+
sortItems();
41+
this.pager.setTotalItems(this.items.length);
42+
this.pageOfItems = limitTo(this.items, this.pager.pageSize, this.pager.startIndex);
43+
};
44+
2245
const fetchObjects = () => {
2346
dashboardService.find(this.filter)
2447
.then(result => {
2548
this.items = result.hits;
26-
this.sortItems();
49+
calculateItemsOnPage();
2750
});
2851
};
2952

3053
this.items = [];
54+
this.pageOfItems = [];
3155
this.filter = '';
3256

57+
this.pager = pagerService.create(this.items.length, 20, 1);
58+
3359
/**
3460
* Boolean that keeps track of whether hits are sorted ascending (true)
3561
* or descending (false) by title
3662
* @type {Boolean}
3763
*/
3864
this.isAscending = true;
3965

40-
/**
41-
* Sorts hits either ascending or descending
42-
* @param {Array} hits Array of saved finder object hits
43-
* @return {Array} Array sorted either ascending or descending
44-
*/
45-
this.sortItems = function sortItems() {
46-
this.items =
47-
this.isAscending
48-
? _.sortBy(this.items, 'title')
49-
: _.sortBy(this.items, 'title').reverse();
50-
};
51-
5266
this.toggleSort = function toggleSort() {
5367
this.isAscending = !this.isAscending;
54-
this.sortItems();
68+
calculateItemsOnPage();
5569
};
5670

5771
this.toggleAll = function toggleAll() {
@@ -102,8 +116,18 @@ export function DashboardListingController(
102116
});
103117
};
104118

105-
this.open = function open(item) {
106-
kbnUrl.change(item.url.substr(1));
119+
this.onPageNext = () => {
120+
this.pager.nextPage();
121+
calculateItemsOnPage();
122+
};
123+
124+
this.onPagePrevious = () => {
125+
this.pager.previousPage();
126+
calculateItemsOnPage();
127+
};
128+
129+
this.getUrlForItem = function getUrlForItem(item) {
130+
return `#/dashboard/${item.id}`;
107131
};
108132

109133
$scope.$watch(() => this.filter, () => {

‎src/core_plugins/kibana/public/visualize/listing/visualize_listing.html‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,6 @@
3030
</div>
3131
</div>
3232

33-
<div class="kuiToolBarSection">
34-
<!-- We need an empty section for the buttons to be positioned consistently. -->
35-
</div>
36-
3733
<div class="kuiToolBarSection">
3834
<!-- Bulk delete button -->
3935
<button
@@ -57,6 +53,21 @@
5753
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
5854
</a>
5955
</div>
56+
57+
<div class="kuiToolBarSection">
58+
<!-- Pagination -->
59+
<tool-bar-pager-text
60+
start-item="listingController.pager.startItem"
61+
end-item="listingController.pager.endItem"
62+
total-items="listingController.pager.totalItems"
63+
></tool-bar-pager-text>
64+
<tool-bar-pager-buttons
65+
has-previous-page="listingController.pager.hasPreviousPage"
66+
has-next-page="listingController.pager.hasNextPage"
67+
on-page-next="listingController.onPageNext"
68+
on-page-previous="listingController.onPagePrevious"
69+
></tool-bar-pager-buttons>
70+
</div>
6071
</div>
6172

6273
<!-- NoResults -->
@@ -101,7 +112,7 @@
101112

102113
<tbody>
103114
<tr
104-
ng-repeat="item in listingController.items track by item.id"
115+
ng-repeat="item in listingController.pageOfItems track by item.id"
105116
class="kuiTableRow"
106117
>
107118
<td class="kuiTableRowCell kuiTableRowCell--checkBox">
@@ -141,8 +152,20 @@
141152
{{ listingController.getSelectedItemsCount() }} selected
142153
</div>
143154
</div>
155+
144156
<div class="kuiToolBarFooterSection">
145-
<!-- We need an empty section for the buttons to be positioned consistently. -->
157+
<!-- Pagination -->
158+
<tool-bar-pager-text
159+
start-item="listingController.pager.startItem"
160+
end-item="listingController.pager.endItem"
161+
total-items="listingController.pager.totalItems"
162+
></tool-bar-pager-text>
163+
<tool-bar-pager-buttons
164+
has-previous-page="listingController.pager.hasPreviousPage"
165+
has-next-page="listingController.pager.hasNextPage"
166+
on-page-next="listingController.onPageNext"
167+
on-page-previous="listingController.onPagePrevious"
168+
></tool-bar-pager-buttons>
146169
</div>
147170
</div>
148171
</div>

‎src/core_plugins/kibana/public/visualize/listing/visualize_listing.js‎

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,62 @@
11
import SavedObjectRegistryProvider from 'ui/saved_objects/saved_object_registry';
2+
import 'ui/pager_control';
3+
import 'ui/pager';
24
import _ from 'lodash';
35

46
export function VisualizeListingController(
7+
$filter,
58
$scope,
69
confirmModal,
710
kbnUrl,
811
Notifier,
12+
pagerService,
913
Private,
1014
timefilter
1115
) {
1216
timefilter.enabled = false;
1317

18+
const limitTo = $filter('limitTo');
1419
// TODO: Extract this into an external service.
1520
const services = Private(SavedObjectRegistryProvider).byLoaderPropertiesName;
1621
const visualizationService = services.visualizations;
1722
const notify = new Notifier({ location: 'Visualize' });
1823

1924
let selectedItems = [];
2025

26+
/**
27+
* Sorts hits either ascending or descending
28+
* @param {Array} hits Array of saved finder object hits
29+
* @return {Array} Array sorted either ascending or descending
30+
*/
31+
const sortItems = () => {
32+
const sortProperty = this.getSortProperty();
33+
34+
this.items =
35+
sortProperty.isAscending
36+
? _.sortBy(this.items, sortProperty.getValue)
37+
: _.sortBy(this.items, sortProperty.getValue).reverse();
38+
};
39+
40+
const calculateItemsOnPage = () => {
41+
sortItems();
42+
this.pager.setTotalItems(this.items.length);
43+
this.pageOfItems = limitTo(this.items, this.pager.pageSize, this.pager.startIndex);
44+
};
45+
2146
const fetchObjects = () => {
2247
visualizationService.find(this.filter)
2348
.then(result => {
2449
this.items = result.hits;
25-
this.sortItems();
50+
calculateItemsOnPage();
2651
});
2752
};
2853

2954
this.items = [];
55+
this.pageOfItems = [];
3056
this.filter = '';
3157

58+
this.pager = pagerService.create(this.items.length, 20, 1);
59+
3260
/**
3361
* Remember sort direction per property.
3462
*/
@@ -57,20 +85,6 @@ export function VisualizeListingController(
5785
return sortProperty.isAscending;
5886
};
5987

60-
/**
61-
* Sorts hits either ascending or descending
62-
* @param {Array} hits Array of saved finder object hits
63-
* @return {Array} Array sorted either ascending or descending
64-
*/
65-
this.sortItems = function sortItems() {
66-
const sortProperty = this.getSortProperty();
67-
68-
this.items =
69-
sortProperty.isAscending
70-
? _.sortBy(this.items, sortProperty.getValue)
71-
: _.sortBy(this.items, sortProperty.getValue).reverse();
72-
};
73-
7488
this.sortOn = function sortOn(propertyName) {
7589
const sortProperty = this.getSortProperty();
7690

@@ -81,7 +95,7 @@ export function VisualizeListingController(
8195
this.getSortPropertyByName(propertyName).isSelected = true;
8296
}
8397

84-
this.sortItems();
98+
calculateItemsOnPage();
8599
};
86100

87101
this.toggleAll = function toggleAll() {
@@ -133,6 +147,16 @@ export function VisualizeListingController(
133147
});
134148
};
135149

150+
this.onPageNext = () => {
151+
this.pager.nextPage();
152+
calculateItemsOnPage();
153+
};
154+
155+
this.onPagePrevious = () => {
156+
this.pager.previousPage();
157+
calculateItemsOnPage();
158+
};
159+
136160
this.getUrlForItem = function getUrlForItem(item) {
137161
return `#/visualize/edit/${item.id}`;
138162
};

‎src/ui/public/pager/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './pager_service.factory';

‎src/ui/public/pager/pager_service.factory.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import uiModules from 'ui/modules';
2+
import { PagerService } from './pager_service';
3+
4+
const app = uiModules.get('kibana');
5+
6+
app.factory('pagerService', () => {
7+
return {
8+
create(...args) {
9+
return new PagerService(...args);
10+
}
11+
};
12+
});

0 commit comments

Comments
 (0)