Merge pull request #112 from flant/feat_pagination

feat: pagination

See issue #83, pulls: #93 and #112.

dist/module.html

@@ -1,17 +1,37 @@
 <div class="status-heatmap-wrapper">
 	<div class="status-heatmap-canvas-wrapper">
-
 		<div class="datapoints-warning"  ng-if="ctrl.multipleValues || ctrl.noColorDefined || ctrl.noDatapoints">
 			<span class="small" ng-if="ctrl.multipleValues" bs-tooltip="'{{ctrl.dataWarnings.multipleValues.tip}}'">{{ctrl.dataWarnings.multipleValues.title}}</span>
 			<span class="small" ng-if="ctrl.noColorDefined" bs-tooltip="'{{ctrl.dataWarnings.noColorDefined.tip}}'">{{ctrl.dataWarnings.noColorDefined.title}}</span>
 			<span class="small" ng-if="ctrl.noDatapoints" bs-tooltip="'{{ctrl.dataWarnings.noDatapoints.tip}}'">{{ctrl.dataWarnings.noDatapoints.title}}</span>
 		</div>
-
-
 		<div class="statusmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
 	</div>
+
 	<div class="status-heatmap-legend-wrapper" ng-if="ctrl.panel.legend.show">
 		<status-heatmap-legend></status-heatmap-legend>
 	</div>
+
+	<div class="clearfix"></div>
+
+	<div class="statusmap-pagination gf-form" ng-if="ctrl.panel.usingPagination">
+		<div class="gf-form">
+			<button class="btn btn-inverse" ng-disabled="!pager.hasPrev()" ng-click="ctrl.onPrevPage()">
+				<i class="fa fa-arrow-left"></i>&nbsp;Previous
+			</button>
+			<label class="gf-form-label">{{pager.currentPage+1}}/{{pager.pages()}}</label>
+			<button class="btn btn-inverse last-in-group" ng-disabled="!pager.hasNext()" ng-click="ctrl.onNextPage()">
+				Next&nbsp;<i class="fa fa-arrow-right"></i>
+			</button>
+		</div>
+
+		<div class="gf-form">
+			<label class="gf-form-label">Rows per page</label>
+			<input type="number" class="gf-form-input width-3 last-in-group" placeholder="12" data-placement="top"
+				   bs-tooltip="'Number of rows to show per page.'" ng-model="ctrl.pageSizeViewer" ng-change="ctrl.onChangePageSize()"
+				   ng-model-onblur>
+		</div>
+		<label class="gf-form-label">Show {{pager.pageStartRow()}} to {{pager.pageEndRow()}} of {{pager.totalRows()}} rows</label>
+	</div>
 </div>
 <div class="clearfix"></div>

dist/partials/options_editor.html

@@ -216,4 +216,18 @@ <h5 class="section-heading">Buckets</h5>
     </div>
   </div>
 
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Pagination</h5>
+    <div class="gf-form">
+      <gf-form-switch class="gf-form" label="Enable pagination" label-class="width-12"
+      checked="ctrl.panel.usingPagination" on-change="ctrl.render()"></gf-form-switch>
+    </div>
+    <div class="gf-form" ng-if="ctrl.panel.usingPagination">
+      <label class="gf-form-label width-10">Rows per page</label>
+      <input type="number" class="gf-form-input width-5" placeholder="2" data-placement="top"
+        bs-tooltip="'Number of rows to show by default'" ng-model="ctrl.panel.pageSize" ng-change="ctrl.changeDefaultPaginationSize(ctrl.panel.pageSize)"
+        ng-model-onblur>
+    </div>
+  </div>
+
 </div>