Skip to content

N
nexpie-grafana-theme
Commit 8a61ec4b by Torkel Ödegaard
Options

feat(tablepanel): paging is starting to work

parent 1bec6c2a
Showing with 55 additions and 14 deletions
public/app/panels/table/controller.ts
...@@ -42,6 +42,8 @@ export class TablePanelCtrl { ...@@ -42,6 +42,8 @@ export class TablePanelCtrl {
$scope.refreshData = function(datasource) { $scope.refreshData = function(datasource) {
panelHelper.updateTimeRange($scope); panelHelper.updateTimeRange($scope);
$scope.pageIndex = 0;
if ($scope.panel.transform === 'annotations') { if ($scope.panel.transform === 'annotations') {
return annotationsSrv.getAnnotations($scope.dashboard).then(annotations => { return annotationsSrv.getAnnotations($scope.dashboard).then(annotations => {
$scope.dataRaw = annotations; $scope.dataRaw = annotations;
...@@ -79,6 +81,12 @@ export class TablePanelCtrl { ...@@ -79,6 +81,12 @@ export class TablePanelCtrl {
$scope.render = function() { $scope.render = function() {
$scope.table = TableModel.transform($scope.dataRaw, $scope.panel); $scope.table = TableModel.transform($scope.dataRaw, $scope.panel);
$scope.table.sort($scope.panel.sort); $scope.table.sort($scope.panel.sort);
$scope.pageCount = Math.ceil($scope.table.rows.length / $scope.panel.pageSize);
$scope.showPagination = $scope.pageCount > 1;
$scope.showPrevPageLink = $scope.pageIndex > 0;
$scope.showNextPageLink = $scope.pageIndex < $scope.pageCount;
panelHelper.broadcastRender($scope, $scope.table, $scope.dataRaw); panelHelper.broadcastRender($scope, $scope.table, $scope.dataRaw);
}; };
......
public/app/panels/table/editor.html
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
Pagination (Page size) Pagination (Page size)
</li> </li>
<li> <li>
<input type="text" class="input-small tight-form-input" placeholder="50" <input type="number" class="input-small tight-form-input" placeholder="50"
empty-to-null ng-model="panel.pageSize" ng-change="render()" ng-model-onblur> empty-to-null ng-model="panel.pageSize" ng-change="render()" ng-model-onblur>
</li> </li>
</ul> </ul>
......
public/app/panels/table/module.ts
...@@ -20,6 +20,7 @@ export function tablePanel() { ...@@ -20,6 +20,7 @@ export function tablePanel() {
var data; var data;
var panel = scope.panel; var panel = scope.panel;
var formaters = []; var formaters = [];
var pageIndex = 0;
function getTableHeight() { function getTableHeight() {
var panelHeight = scope.height || scope.panel.height || scope.row.height; var panelHeight = scope.height || scope.panel.height || scope.row.height;
...@@ -33,7 +34,13 @@ export function tablePanel() { ...@@ -33,7 +34,13 @@ export function tablePanel() {
function appendTableRows(tbodyElem) { function appendTableRows(tbodyElem) {
var renderer = new TableRenderer(panel, data, scope.dashboard.timezone); var renderer = new TableRenderer(panel, data, scope.dashboard.timezone);
tbodyElem.empty(); tbodyElem.empty();
tbodyElem.html(renderer.render(0)); tbodyElem.html(renderer.render(pageIndex));
}
function switchPage(e) {
var el = $(e.currentTarget);
pageIndex = (parseInt(el.text(), 10)-1);
renderPanel();
} }
function appendPaginationControls(footerElem) { function appendPaginationControls(footerElem) {
...@@ -44,9 +51,17 @@ export function tablePanel() { ...@@ -44,9 +51,17 @@ export function tablePanel() {
return; return;
} }
var startPage = Math.max(pageIndex - 3, 0);
var endPage = Math.min(pageCount, startPage + 9);
var paginationList = $('<ul></ul>'); var paginationList = $('<ul></ul>');
for (var i = 0; i < pageCount; i++) {
var pageLinkElem = $('<li><a href="#">' + (i+1) + '</a></li>'); var prevLink = $('<li><a class="table-panel-page-link pointer">«</a></li>');
paginationList.append(prevLink);
for (var i = startPage; i < endPage; i++) {
var activeClass = i === pageIndex ? 'active' : '';
var pageLinkElem = $('<li><a class="table-panel-page-link pointer ' + activeClass + '">' + (i+1) + '</a></li>');
paginationList.append(pageLinkElem); paginationList.append(pageLinkElem);
} }
...@@ -67,12 +82,20 @@ export function tablePanel() { ...@@ -67,12 +82,20 @@ export function tablePanel() {
appendPaginationControls(footerElem); appendPaginationControls(footerElem);
} }
elem.on('click', '.table-panel-page-link', switchPage);
scope.$on('$destroy', function() {
elem.off('click', '.table-panel-page-link');
});
scope.$on('render', function(event, renderData) { scope.$on('render', function(event, renderData) {
data = renderData || data; data = renderData || data;
if (!data) { if (!data) {
scope.get_data(); scope.get_data();
return; return;
} }
pageIndex = 0;
renderPanel(); renderPanel();
}); });
} }
......
public/app/panels/table/renderer.ts
...@@ -111,8 +111,8 @@ export class TableRenderer { ...@@ -111,8 +111,8 @@ export class TableRenderer {
} }
render(page) { render(page) {
let endPos = Math.min(this.panel.pageSize, this.table.rows.length); let startPos = page * this.panel.pageSize;
let startPos = 0; let endPos = Math.min(startPos + this.panel.pageSize, this.table.rows.length);
var html = ""; var html = "";
for (var y = startPos; y < endPos; y++) { for (var y = startPos; y < endPos; y++) {
......
public/less/panel_table.less
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
.table-panel-footer { .table-panel-footer {
text-align: center; text-align: center;
font-size: 80%; font-size: 90%;
line-height: 2px; line-height: 2px;
ul { ul {
...@@ -35,6 +35,15 @@ ...@@ -35,6 +35,15 @@
padding: 4px 12px; padding: 4px 12px;
text-decoration: none; text-decoration: none;
border-left-width: 0; border-left-width: 0;
&:hover {
background-color: @grafanaTargetFuncBackground;
}
&.active {
font-weight: bold;
color: @blue;
}
} }
} }
...@@ -42,10 +51,6 @@ ...@@ -42,10 +51,6 @@
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
tr {
border-bottom: 2px solid @bodyBackground;
}
th { th {
padding: 0; padding: 0;
...@@ -57,11 +62,16 @@ ...@@ -57,11 +62,16 @@
} }
td { td {
padding: 10px 0 10px 15px; padding: 6px 0 6px 15px;
border-bottom: 2px solid @bodyBackground;
border-right: 2px solid @bodyBackground;
&:first-child { &:first-child {
padding-left: 15px; padding-left: 15px;
} }
&:last-child {
border-right: none;
}
} }
} }
...@@ -69,7 +79,7 @@ ...@@ -69,7 +79,7 @@
background: @grafanaListAccent; background: @grafanaListAccent;
border-top: 2px solid @bodyBackground; border-top: 2px solid @bodyBackground;
border-bottom: 2px solid @bodyBackground; border-bottom: 2px solid @bodyBackground;
height: 30px; height: 32px;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
...@@ -77,7 +87,7 @@ ...@@ -77,7 +87,7 @@
} }
.table-panel-table-header-inner { .table-panel-table-header-inner {
padding: 5px 0 5px 15px; padding: 6px 0 6px 15px;
text-align: left; text-align: left;
color: @blue; color: @blue;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment