From 8a61ec4b4e2d9d61ee81efeb5a57dbdcb8385c36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 11 Nov 2015 16:40:36 +0100 Subject: [PATCH] feat(tablepanel): paging is starting to work --- public/app/panels/table/controller.ts | 8 ++++++++ public/app/panels/table/editor.html | 2 +- public/app/panels/table/module.ts | 29 ++++++++++++++++++++++++--- public/app/panels/table/renderer.ts | 4 ++-- public/less/panel_table.less | 26 ++++++++++++++++-------- 5 files changed, 55 insertions(+), 14 deletions(-) diff --git a/public/app/panels/table/controller.ts b/public/app/panels/table/controller.ts index cfd2fdf7786..99570d4b6c6 100644 --- a/public/app/panels/table/controller.ts +++ b/public/app/panels/table/controller.ts @@ -42,6 +42,8 @@ export class TablePanelCtrl { $scope.refreshData = function(datasource) { panelHelper.updateTimeRange($scope); + $scope.pageIndex = 0; + if ($scope.panel.transform === 'annotations') { return annotationsSrv.getAnnotations($scope.dashboard).then(annotations => { $scope.dataRaw = annotations; @@ -79,6 +81,12 @@ export class TablePanelCtrl { $scope.render = function() { $scope.table = TableModel.transform($scope.dataRaw, $scope.panel); $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); }; diff --git a/public/app/panels/table/editor.html b/public/app/panels/table/editor.html index 72bc1cf8a1e..aced71a8a98 100644 --- a/public/app/panels/table/editor.html +++ b/public/app/panels/table/editor.html @@ -44,7 +44,7 @@ Pagination (Page size)
  • -
    • diff --git a/public/app/panels/table/module.ts b/public/app/panels/table/module.ts index 9ed800f827c..745045c8139 100644 --- a/public/app/panels/table/module.ts +++ b/public/app/panels/table/module.ts @@ -20,6 +20,7 @@ export function tablePanel() { var data; var panel = scope.panel; var formaters = []; + var pageIndex = 0; function getTableHeight() { var panelHeight = scope.height || scope.panel.height || scope.row.height; @@ -33,7 +34,13 @@ export function tablePanel() { function appendTableRows(tbodyElem) { var renderer = new TableRenderer(panel, data, scope.dashboard.timezone); 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) { @@ -44,9 +51,17 @@ export function tablePanel() { return; } + var startPage = Math.max(pageIndex - 3, 0); + var endPage = Math.min(pageCount, startPage + 9); + var paginationList = $(''); - for (var i = 0; i < pageCount; i++) { - var pageLinkElem = $('
  • ' + (i+1) + '
    • '); + + var prevLink = $('
  • «
    • '); + paginationList.append(prevLink); + + for (var i = startPage; i < endPage; i++) { + var activeClass = i === pageIndex ? 'active' : ''; + var pageLinkElem = $('
  • ' + (i+1) + '
    • '); paginationList.append(pageLinkElem); } @@ -67,12 +82,20 @@ export function tablePanel() { 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) { data = renderData || data; if (!data) { scope.get_data(); return; } + + pageIndex = 0; renderPanel(); }); } diff --git a/public/app/panels/table/renderer.ts b/public/app/panels/table/renderer.ts index fae851e54b5..dd5eb9ed0e1 100644 --- a/public/app/panels/table/renderer.ts +++ b/public/app/panels/table/renderer.ts @@ -111,8 +111,8 @@ export class TableRenderer { } render(page) { - let endPos = Math.min(this.panel.pageSize, this.table.rows.length); - let startPos = 0; + let startPos = page * this.panel.pageSize; + let endPos = Math.min(startPos + this.panel.pageSize, this.table.rows.length); var html = ""; for (var y = startPos; y < endPos; y++) { diff --git a/public/less/panel_table.less b/public/less/panel_table.less index 58fb6376f5c..7f7512c691a 100644 --- a/public/less/panel_table.less +++ b/public/less/panel_table.less @@ -18,7 +18,7 @@ .table-panel-footer { text-align: center; - font-size: 80%; + font-size: 90%; line-height: 2px; ul { @@ -35,6 +35,15 @@ padding: 4px 12px; text-decoration: none; border-left-width: 0; + + &:hover { + background-color: @grafanaTargetFuncBackground; + } + + &.active { + font-weight: bold; + color: @blue; + } } } @@ -42,10 +51,6 @@ width: 100%; border-collapse: collapse; - tr { - border-bottom: 2px solid @bodyBackground; - } - th { padding: 0; @@ -57,11 +62,16 @@ } td { - padding: 10px 0 10px 15px; + padding: 6px 0 6px 15px; + border-bottom: 2px solid @bodyBackground; + border-right: 2px solid @bodyBackground; &:first-child { padding-left: 15px; } + &:last-child { + border-right: none; + } } } @@ -69,7 +79,7 @@ background: @grafanaListAccent; border-top: 2px solid @bodyBackground; border-bottom: 2px solid @bodyBackground; - height: 30px; + height: 32px; position: absolute; top: 0; right: 0; @@ -77,7 +87,7 @@ } .table-panel-table-header-inner { - padding: 5px 0 5px 15px; + padding: 6px 0 6px 15px; text-align: left; color: @blue;