feat(tablepanel): worked on more display options for table panel

public/app/core/directives/metric_segment.js

@@ -192,6 +192,8 @@ function (_, $, coreModule) {
               var option = _.findWhere($scope.options, {text: $scope.segment.value});
               if (option && option.value !== $scope.property) {
                 $scope.property = option.value;
+              } else if (attrs.custom !== 'false') {
+                $scope.property = $scope.segment.value;
               }
             } else {
               $scope.property = $scope.segment.value;

public/app/panels/table/controller.ts

@@ -30,6 +30,8 @@ export class TablePanelCtrl {
       showHeader: true,
       columns: [],
       fields: [],
+      scroll: true,
+      fontSize: '100%',
       sort: {col: null, desc: true},
     };
 
@@ -75,18 +77,13 @@ export class TablePanelCtrl {
 
     $scope.dataHandler = function(results) {
       $scope.dataRaw = results.data;
+      $scope.pageIndex = 0;
       $scope.render();
     };
 
     $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);
     };
 

public/app/panels/table/editor.html

@@ -47,6 +47,15 @@
 						<input type="number" class="input-small tight-form-input" placeholder="50"
 						empty-to-null ng-model="panel.pageSize" ng-change="render()" ng-model-onblur>
 					</li>
+					<li class="tight-form-item">
+						<editor-checkbox text="Scroll" model="panel.scroll" change="render()"></editor-checkbox>
+					</li>
+					<li class="tight-form-item">
+						Font size
+					</li>
+					<li>
+						<select class="input-small tight-form-input" ng-model="panel.fontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
+					</li>
 				</ul>
 				<div class="clearfix"></div>
 			</div>
@@ -90,7 +99,7 @@
 						Format
 					</li>
 					<li>
-						<input type="text" class="input-large tight-form-input" ng-model="column.dateFormat" ng-change="render()" ng-model-onblur>
+						<metric-segment-model property="column.dateFormat" options="dateFormats" on-change="render()" custom="true"></metric-segment-model>
 					</li>
 				</ul>
 				<div class="clearfix"></div>

public/app/panels/table/editor.ts

@@ -29,6 +29,12 @@ export function tablePanelEditor() {
         {text: 'String', value: 'string'},
         {text: 'Date', value: 'date'},
       ];
+      scope.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%'];
+      scope.dateFormats = [
+         {text: 'YYYY-MM-DD HH:mm:ss', value: 'YYYY-MM-DD HH:mm:ss'},
+         {text: 'MM/DD/YY h:mm:ss a', value: 'MM/DD/YY h:mm:ss a'},
+         {text: 'MMMM D, YYYY LT',  value: 'MMMM D, YYYY LT'},
+      ];
 
       scope.updateJsonFieldsMenu = function(data) {
         scope.jsonFieldsMenu = [];
@@ -103,7 +109,6 @@ export function tablePanelEditor() {
           return col.text;
         });
       };
-
     }
   };
 }

public/app/panels/table/module.ts

@@ -20,7 +20,6 @@ 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;
@@ -34,12 +33,12 @@ export function tablePanel() {
       function appendTableRows(tbodyElem) {
         var renderer = new TableRenderer(panel, data, scope.dashboard.timezone);
         tbodyElem.empty();
-        tbodyElem.html(renderer.render(pageIndex));
+        tbodyElem.html(renderer.render(scope.pageIndex));
       }
 
       function switchPage(e) {
         var el = $(e.currentTarget);
-        pageIndex = (parseInt(el.text(), 10)-1);
+        scope.pageIndex = (parseInt(el.text(), 10)-1);
         renderPanel();
       }
 
@@ -51,7 +50,7 @@ export function tablePanel() {
           return;
         }
 
-        var startPage = Math.max(pageIndex - 3, 0);
+        var startPage = Math.max(scope.pageIndex - 3, 0);
         var endPage = Math.min(pageCount, startPage + 9);
 
         var paginationList = $('<ul></ul>');
@@ -60,7 +59,7 @@ export function tablePanel() {
         paginationList.append(prevLink);
 
         for (var i = startPage; i < endPage; i++) {
-          var activeClass = i === pageIndex ? 'active' : '';
+          var activeClass = i === scope.pageIndex ? 'active' : '';
           var pageLinkElem = $('<li><a class="table-panel-page-link pointer ' + activeClass + '">' + (i+1) + '</a></li>');
           paginationList.append(pageLinkElem);
         }
@@ -72,13 +71,18 @@ export function tablePanel() {
       }
 
       function renderPanel() {
+        var container = elem.find('.table-panel-container');
         var rootElem = elem.find('.table-panel-scroll');
         var tbodyElem = elem.find('tbody');
         var footerElem = elem.find('.table-panel-footer');
 
         appendTableRows(tbodyElem);
 
-        rootElem.css({'max-height': getTableHeight()});
+        rootElem.css({
+          'max-height': panel.scroll ? getTableHeight() : ''
+        });
+
+        container.css({'font-size': panel.fontSize});
         appendPaginationControls(footerElem);
       }
 
@@ -95,7 +99,6 @@ export function tablePanel() {
           return;
         }
 
-        pageIndex = 0;
         renderPanel();
       });
     }

public/less/panel_table.less

@@ -12,7 +12,7 @@
 }
 
 .table-panel-container {
-  padding-top: 32px;
+  padding-top: 2em;
   position: relative;
 }
 
@@ -62,7 +62,7 @@
   }
 
   td {
-    padding: 6px 0 6px 15px;
+    padding: 0.45em 0 0.45em 1.1em;
     border-bottom: 2px solid @bodyBackground;
     border-right: 2px solid @bodyBackground;
 
@@ -79,7 +79,7 @@
   background: @grafanaListAccent;
   border-top: 2px solid @bodyBackground;
   border-bottom: 2px solid @bodyBackground;
-  height: 32px;
+  height: 2.0em;
   position: absolute;
   top: 0;
   right: 0;
@@ -87,12 +87,10 @@
 }
 
 .table-panel-table-header-inner {
-  padding: 6px 0 6px 15px;
+  padding: 0.45em 0 0.45em 1.1em;
   text-align: left;
   color: @blue;
-
   position: absolute;
   top: 0;
-  line-height: 23px;
 }