Files
grafana-statusmap/src/module.html
T
Ivan Mikheykin ef4b0e1228 feat: pagination
Continuation of PR #93.

- reworked layout for pagination controls on graph
- use BucketMatrixPager for pagination logic and state
2020-07-13 21:31:14 +03:00

38 lines
1.9 KiB
HTML

<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>