IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-11-12 11:36:16 +01:00
parent 8a61ec4b4e
commit 5c0cf9f5d7
6 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/directives/metric_segment.js
View File

@ -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;

9
public/app/panels/table/controller.ts
View File

@ -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);
};

11
public/app/panels/table/editor.html
View File

@ -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>

7
public/app/panels/table/editor.ts
View File

@ -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;
});
};
}
};
}

17
public/app/panels/table/module.ts
View File

@ -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();
});
}

10
public/less/panel_table.less
View File

@ -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;
}