feat(tablepanel): minor progress on table panel

public/app/panels/table/module.html

@@ -2,5 +2,7 @@
 	<grafana-panel>
 		<div class="table-panel-container">
 		</div>
+		<div class="table-panel-footer">
+		</div>
 	</grafana-panel>
 </div>

public/app/panels/table/module.ts

@@ -15,6 +15,7 @@ export class TablePanelCtrl {
   constructor($scope, $rootScope, $q, panelSrv, panelHelper) {
     $scope.ctrl = this;
     $scope.transformers = transformers;
+    $scope.pageIndex = 0;
 
     $scope.panelMeta = new PanelMeta({
       panelName: 'Table',
@@ -68,6 +69,7 @@ export function tablePanelDirective() {
     controller: TablePanelCtrl,
     link: function(scope, elem) {
       var data;
+      var panel = scope.panel;
 
       function getTableHeight() {
         var panelHeight = scope.height || scope.panel.height || scope.row.height;
@@ -78,39 +80,67 @@ export function tablePanelDirective() {
         return (panelHeight - 40) + 'px';
       }
 
-      function renderPanel() {
+      function appendTableHeader(tableElem) {
-        var rootDiv = elem.find('.table-panel-container');
+        var rowElem = $('<tr></tr>');
-        var tableDiv = $('<table class="gf-table-panel"></table>');
+        for (var i = 0; i < data.columns.length; i++) {
-        var i, y, rowElem, colElem, column, row;
+          var column = data.columns[i];
-
+          var colElem = $('<th>' + column.text + '</th>');
-        rowElem = $('<tr></tr>');
-        for (i = 0; i < data.columns.length; i++) {
-          column = data.columns[i];
-          colElem = $('<th>' + column.text + '</th>');
           rowElem.append(colElem);
         }
 
         var headElem = $('<thead></thead>');
         headElem.append(rowElem);
+        headElem.appendTo(tableElem);
+      }
 
+      function appendTableRows(tableElem) {
         var tbodyElem = $('<tbody></tbody>');
-        for (y = 0; y < data.rows.length; y++) {
+        var rowEnd = Math.min(panel.pageSize, data.rows.length);
-          row = data.rows[y];
+        var rowStart = 0;
-          rowElem = $('<tr></tr>');
+
-          for (i = 0; i < data.columns.length; i++) {
+        for (var y = rowStart; y < rowEnd; y++) {
-            colElem = $('<td>' + row[i] + '</td>');
+          var row = data.rows[y];
+          var rowElem = $('<tr></tr>');
+          for (var i = 0; i < data.columns.length; i++) {
+            var colElem = $('<td>' + row[i] + '</td>');
             rowElem.append(colElem);
           }
           tbodyElem.append(rowElem);
         }
 
-        tableDiv.append(headElem);
+        tableElem.append(tbodyElem);
-        tableDiv.append(tbodyElem);
+      }
 
-        rootDiv.css({'max-height': getTableHeight()});
+      function appendPaginationControls(footerElem) {
+        var paginationElem = $('<div class="pagination">');
+        var paginationList = $('<ul></ul>');
 
-        rootDiv.empty();
+        var pageCount = data.rows.length / panel.pageSize;
-        rootDiv.append(tableDiv);
+        for (var i = 0; i < pageCount; i++) {
+          var pageLinkElem = $('<li><a href="#">' + (i+1) + '</a></li>');
+          paginationList.append(pageLinkElem);
+        }
+
+        var nextLink = $('<li><a href="#">»</a></li>');
+        paginationList.append(nextLink);
+        paginationElem.append(paginationList);
+
+        footerElem.empty();
+        footerElem.append(paginationElem);
+      }
+
+      function renderPanel() {
+        var rootElem = elem.find('.table-panel-container');
+        var footerElem = elem.find('.table-panel-footer');
+        var tableElem = $('<table class="gf-table-panel"></table>');
+
+        appendTableHeader(tableElem);
+        appendTableRows(tableElem);
+
+        rootElem.css({'max-height': getTableHeight()});
+        rootElem.empty();
+        rootElem.append(tableElem);
+        appendPaginationControls(footerElem);
       }
 
       scope.$on('render', function(event, renderData) {
@@ -126,4 +156,3 @@ export function tablePanelDirective() {
 }
 
 angular.module('grafana.directives').directive('grafanaPanelTable', tablePanelDirective);
-

public/app/panels/table/options.html

@@ -21,14 +21,19 @@
 <div class="editor-row">
 	<div class="tight-form-section">
 		<h5>Table Display</h5>
-	</div>
+		<div class="tight-form">
-	<li class="tight-form-item" style="width: 80px">
+			<ul class="tight-form-list">
+				<li class="tight-form-item">
 					Pagination (Page size)
 				</li>
 				<li>
-		<input type="pageSize" class="input-small tight-form-input" placeholder="50"
+					<input type="text" class="input-small tight-form-input" placeholder="50"
 					empty-to-null ng-model="panel.pageSize" ng-change="render()" ng-model-onblur>
 				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+	</div>
 </div>
 
 <div class="editor-row">

public/less/grafana.less

@@ -15,6 +15,7 @@
 @import "navbar.less";
 @import "gfbox.less";
 @import "admin.less";
+@import "pagination.less";
 @import "validation.less";
 @import "fonts.less";
 @import "tabs.less";

public/less/pagination.less

@@ -0,0 +1,113 @@
+.pagination {
+}
+
+.pagination ul {
+  display: inline-block;
+  margin-left: 0;
+  margin-bottom: 0;
+  .border-radius(@baseBorderRadius);
+  .box-shadow(0 1px 2px rgba(0,0,0,.05));
+}
+.pagination ul > li {
+  display: inline; // Remove list-style and block-level defaults
+}
+.pagination ul > li > a,
+.pagination ul > li > span {
+  float: left; // Collapse white-space
+  padding: 4px 12px;
+  line-height: @baseLineHeight;
+  text-decoration: none;
+  background-color: @paginationBackground;
+  border: 1px solid @paginationBorder;
+  border-left-width: 0;
+}
+.pagination ul > li > a:hover,
+.pagination ul > li > a:focus,
+.pagination ul > .active > a,
+.pagination ul > .active > span {
+  background-color: @paginationActiveBackground;
+}
+.pagination ul > .active > a,
+.pagination ul > .active > span {
+  color: @grayLight;
+  cursor: default;
+}
+.pagination ul > .disabled > span,
+.pagination ul > .disabled > a,
+.pagination ul > .disabled > a:hover,
+.pagination ul > .disabled > a:focus {
+  color: @grayLight;
+  background-color: transparent;
+  cursor: default;
+}
+.pagination ul > li:first-child > a,
+.pagination ul > li:first-child > span {
+  border-left-width: 1px;
+  .border-left-radius(@baseBorderRadius);
+}
+.pagination ul > li:last-child > a,
+.pagination ul > li:last-child > span {
+  .border-right-radius(@baseBorderRadius);
+}
+
+
+// Alignment
+// --------------------------------------------------
+
+.pagination-centered {
+  text-align: center;
+}
+.pagination-right {
+  text-align: right;
+}
+
+
+// Sizing
+// --------------------------------------------------
+
+// Large
+.pagination-large {
+  ul > li > a,
+  ul > li > span {
+    padding: @paddingLarge;
+    font-size: @fontSizeLarge;
+  }
+  ul > li:first-child > a,
+  ul > li:first-child > span {
+    .border-left-radius(@borderRadiusLarge);
+  }
+  ul > li:last-child > a,
+  ul > li:last-child > span {
+    .border-right-radius(@borderRadiusLarge);
+  }
+}
+
+// Small and mini
+.pagination-mini,
+.pagination-small {
+  ul > li:first-child > a,
+  ul > li:first-child > span {
+    .border-left-radius(@borderRadiusSmall);
+  }
+  ul > li:last-child > a,
+  ul > li:last-child > span {
+    .border-right-radius(@borderRadiusSmall);
+  }
+}
+
+// Small
+.pagination-small {
+  ul > li > a,
+  ul > li > span {
+    padding: @paddingSmall;
+    font-size: @fontSizeSmall;
+  }
+}
+// Mini
+.pagination-mini {
+  ul > li > a,
+  ul > li > span {
+    padding: @paddingMini;
+    font-size: @fontSizeMini;
+  }
+}

public/less/panel_table.less

@@ -11,6 +11,13 @@
   overflow: auto;
 }
 
+.table-panel-footer {
+  text-align: center;
+  .pagination {
+    display: inline-block;
+  }
+}
+
 .gf-table-panel* {
   box-sizing: border-box;
 }
@@ -25,10 +32,11 @@
 }
 
 .gf-table-panel th {
-  background: @grafanaTargetFuncBackground;
+  background: @grafanaListAccent;
   padding: 5px 0 5px 15px;
   text-align: left;
   border-top: 2px solid @bodyBackground;
+  color: @blue;
 
   &:first-child {
     padding-left: 15px;
@@ -36,7 +44,7 @@
 }
 
 .gf-table-panel td {
-  padding: 15px 0 15px 15px;
+  padding: 12px 0 12px 15px;
 
   &:first-child {
     padding-left: 15px;