Fix table pagination, closes #229

This commit is contained in:
Alexander Zobnin
2017-02-10 15:04:27 +03:00
parent 4d9b2f36d1
commit 1eef998923
5 changed files with 54 additions and 49 deletions

View File

@@ -35,7 +35,7 @@
</tr>
</thead>
<tbody>
<tr ng-repeat="trigger in ctrl.triggerList">
<tr ng-repeat="trigger in ctrl.currentTriggersPage">
<td ng-if="ctrl.panel.hostField">
<div>

View File

@@ -134,13 +134,10 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
_.defaults(_this.panel, _.cloneDeep(panelDefaults));
_this.triggerList = [];
_this.currentPage = [];
_this.currentTriggersPage = [];
_this.events.on('init-edit-mode', _this.onInitEditMode.bind(_this));
_this.events.on('render', _this.onRender.bind(_this));
_this.events.on('refresh', _this.onRender.bind(_this));
_this.refreshData();
_this.events.on('refresh', _this.onRefresh.bind(_this));
return _this;
}
@@ -166,8 +163,8 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
this.refreshData();
}
}, {
key: 'onRender',
value: function onRender() {
key: 'onRefresh',
value: function onRefresh() {
var _this2 = this;
// clear loading/error state
@@ -178,8 +175,12 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
// Limit triggers number
_this2.triggerList = triggerList.slice(0, _this2.panel.limit);
_this2.getCurrentTriggersPage();
// Notify panel that request is finished
_this2.loading = false;
_this2.render(_this2.triggerList);
});
}
}, {
@@ -327,17 +328,22 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
}, {
key: 'acknowledgeTrigger',
value: function acknowledgeTrigger(trigger, message) {
var _this6 = this;
var eventid = trigger.lastEvent.eventid;
var grafana_user = this.contextSrv.user.name;
var ack_message = grafana_user + ' (Grafana): ' + message;
return this.datasourceSrv.get(this.panel.datasource).then(function (datasource) {
var zabbixAPI = datasource.zabbix.zabbixAPI;
return zabbixAPI.acknowledgeEvent(eventid, ack_message).then(function () {
_this6.refresh();
});
});
return zabbixAPI.acknowledgeEvent(eventid, ack_message);
}).then(this.onRefresh.bind(this));
}
}, {
key: 'getCurrentTriggersPage',
value: function getCurrentTriggersPage() {
var pageSize = this.panel.pageSize || 10;
var startPos = this.pageIndex * pageSize;
var endPos = Math.min(startPos + pageSize, this.triggerList.length);
this.currentTriggersPage = this.triggerList.slice(startPos, endPos);
return this.currentTriggersPage;
}
}, {
key: 'link',
@@ -345,8 +351,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
var data;
var panel = ctrl.panel;
var pageCount = 0;
// var formaters = [];
data = ctrl.panel.triggerList;
data = ctrl.triggerList;
function getTableHeight() {
var panelHeight = ctrl.height;
@@ -365,16 +370,17 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
var pageSize = ctrl.panel.pageSize || 10;
var startPos = ctrl.pageIndex * pageSize;
var endPos = Math.min(startPos + pageSize, ctrl.triggerList.length);
ctrl.currentPage = ctrl.triggerList.slice(startPos, endPos);
ctrl.render();
// renderPanel();
ctrl.currentTriggersPage = ctrl.triggerList.slice(startPos, endPos);
scope.$apply();
renderPanel();
}
function appendPaginationControls(footerElem) {
footerElem.empty();
var pageSize = panel.pageSize || 5;
pageCount = Math.ceil(ctrl.panel.triggerList.length / pageSize);
var pageSize = ctrl.panel.pageSize || 5;
pageCount = Math.ceil(data.length / pageSize);
if (pageCount === 1) {
return;
}
@@ -396,17 +402,13 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
function renderPanel() {
var panelElem = elem.parents('.panel');
var rootElem = elem.find('.triggers-panel-scroll');
// var tbodyElem = elem.find('tbody');
var footerElem = elem.find('.triggers-panel-footer');
elem.css({ 'font-size': panel.fontSize });
panelElem.addClass('triggers-panel-wrapper');
// appendTableRows(tbodyElem);
appendPaginationControls(footerElem);
rootElem.css({ 'max-height': panel.scroll ? getTableHeight() : '' });
// ctrl.render();
}
elem.on('click', '.triggers-panel-page-link', switchPage);

File diff suppressed because one or more lines are too long

View File

@@ -35,7 +35,7 @@
</tr>
</thead>
<tbody>
<tr ng-repeat="trigger in ctrl.triggerList">
<tr ng-repeat="trigger in ctrl.currentTriggersPage">
<td ng-if="ctrl.panel.hostField">
<div>

View File

@@ -80,13 +80,10 @@ class TriggerPanelCtrl extends PanelCtrl {
_.defaults(this.panel, _.cloneDeep(panelDefaults));
this.triggerList = [];
this.currentPage = [];
this.currentTriggersPage = [];
this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
this.events.on('render', this.onRender.bind(this));
this.events.on('refresh', this.onRender.bind(this));
this.refreshData();
this.events.on('refresh', this.onRefresh.bind(this));
}
/**
@@ -104,7 +101,7 @@ class TriggerPanelCtrl extends PanelCtrl {
this.refreshData();
}
onRender() {
onRefresh() {
// clear loading/error state
delete this.error;
this.loading = true;
@@ -114,8 +111,12 @@ class TriggerPanelCtrl extends PanelCtrl {
// Limit triggers number
this.triggerList = triggerList.slice(0, this.panel.limit);
this.getCurrentTriggersPage();
// Notify panel that request is finished
this.loading = false;
this.render(this.triggerList);
});
}
@@ -260,19 +261,24 @@ class TriggerPanelCtrl extends PanelCtrl {
return this.datasourceSrv.get(this.panel.datasource)
.then(datasource => {
let zabbixAPI = datasource.zabbix.zabbixAPI;
return zabbixAPI.acknowledgeEvent(eventid, ack_message)
.then(() => {
this.refresh();
});
});
return zabbixAPI.acknowledgeEvent(eventid, ack_message);
})
.then(this.onRefresh.bind(this));
}
getCurrentTriggersPage() {
let pageSize = this.panel.pageSize || 10;
let startPos = this.pageIndex * pageSize;
let endPos = Math.min(startPos + pageSize, this.triggerList.length);
this.currentTriggersPage = this.triggerList.slice(startPos, endPos);
return this.currentTriggersPage;
}
link(scope, elem, attrs, ctrl) {
var data;
var panel = ctrl.panel;
var pageCount = 0;
// var formaters = [];
data = ctrl.panel.triggerList;
data = ctrl.triggerList;
function getTableHeight() {
var panelHeight = ctrl.height;
@@ -291,16 +297,17 @@ class TriggerPanelCtrl extends PanelCtrl {
let pageSize = ctrl.panel.pageSize || 10;
let startPos = ctrl.pageIndex * pageSize;
let endPos = Math.min(startPos + pageSize, ctrl.triggerList.length);
ctrl.currentPage = ctrl.triggerList.slice(startPos, endPos);
ctrl.render();
// renderPanel();
ctrl.currentTriggersPage = ctrl.triggerList.slice(startPos, endPos);
scope.$apply();
renderPanel();
}
function appendPaginationControls(footerElem) {
footerElem.empty();
var pageSize = panel.pageSize || 5;
pageCount = Math.ceil(ctrl.panel.triggerList.length / pageSize);
var pageSize = ctrl.panel.pageSize || 5;
pageCount = Math.ceil(data.length / pageSize);
if (pageCount === 1) {
return;
}
@@ -322,17 +329,13 @@ class TriggerPanelCtrl extends PanelCtrl {
function renderPanel() {
var panelElem = elem.parents('.panel');
var rootElem = elem.find('.triggers-panel-scroll');
// var tbodyElem = elem.find('tbody');
var footerElem = elem.find('.triggers-panel-footer');
elem.css({'font-size': panel.fontSize});
panelElem.addClass('triggers-panel-wrapper');
// appendTableRows(tbodyElem);
appendPaginationControls(footerElem);
rootElem.css({'max-height': panel.scroll ? getTableHeight() : '' });
// ctrl.render();
}
elem.on('click', '.triggers-panel-page-link', switchPage);