diff --git a/public/app/core/directives/metric_segment.js b/public/app/core/directives/metric_segment.js index 6fdc171c1f8..9babb74dc2d 100644 --- a/public/app/core/directives/metric_segment.js +++ b/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; diff --git a/public/app/panels/table/controller.ts b/public/app/panels/table/controller.ts index 99570d4b6c6..4cca50ff337 100644 --- a/public/app/panels/table/controller.ts +++ b/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); }; diff --git a/public/app/panels/table/editor.html b/public/app/panels/table/editor.html index aced71a8a98..64bc0c997e5 100644 --- a/public/app/panels/table/editor.html +++ b/public/app/panels/table/editor.html @@ -47,6 +47,15 @@ +
  • + +
    • +
  • + Font size +
    • +
  • + +
    • @@ -90,7 +99,7 @@ Format
  • - +
    • diff --git a/public/app/panels/table/editor.ts b/public/app/panels/table/editor.ts index 8aae1840629..06fbea3167f 100644 --- a/public/app/panels/table/editor.ts +++ b/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; }); }; - } }; } diff --git a/public/app/panels/table/module.ts b/public/app/panels/table/module.ts index 745045c8139..beb62127c2d 100644 --- a/public/app/panels/table/module.ts +++ b/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 = $(''); @@ -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 = $('
  • ' + (i+1) + '
    • '); 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(); }); } diff --git a/public/less/panel_table.less b/public/less/panel_table.less index 7f7512c691a..23a17cd0976 100644 --- a/public/less/panel_table.less +++ b/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; }