Add initial pagination control.

This commit is contained in:
Alexander Zobnin
2017-02-10 12:41:12 +03:00
parent 17306c5f73
commit ce5e4abc15
5 changed files with 36 additions and 24 deletions

View File

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

View File

@@ -159,6 +159,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
_.defaults(_this.panel, _.cloneDeep(panelDefaults)); _.defaults(_this.panel, _.cloneDeep(panelDefaults));
_this.triggerList = []; _this.triggerList = [];
_this.currentPage = [];
_this.refreshData(); _this.refreshData();
return _this; return _this;
} }
@@ -345,7 +346,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
}, { }, {
key: 'render', key: 'render',
value: function render() { value: function render() {
return _get(TriggerPanelCtrl.prototype.__proto__ || Object.getPrototypeOf(TriggerPanelCtrl.prototype), 'render', this).call(this, this.table); return _get(TriggerPanelCtrl.prototype.__proto__ || Object.getPrototypeOf(TriggerPanelCtrl.prototype), 'render', this).call(this, this.triggerList);
} }
}, { }, {
key: 'link', key: 'link',
@@ -366,16 +367,16 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
return panelHeight - 31 + 'px'; return panelHeight - 31 + 'px';
} }
// function appendTableRows(tbodyElem) {
// var renderer = new TableRenderer(panel, data, ctrl.dashboard.isTimezoneUtc(), ctrl.$sanitize);
// tbodyElem.empty();
// tbodyElem.html(renderer.render(ctrl.pageIndex));
// }
function switchPage(e) { function switchPage(e) {
var el = $(e.currentTarget); var el = $(e.currentTarget);
ctrl.pageIndex = parseInt(el.text(), 10) - 1; ctrl.pageIndex = parseInt(el.text(), 10) - 1;
renderPanel();
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();
} }
function appendPaginationControls(footerElem) { function appendPaginationControls(footerElem) {
@@ -414,6 +415,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
appendPaginationControls(footerElem); appendPaginationControls(footerElem);
rootElem.css({ 'max-height': panel.scroll ? getTableHeight() : '' }); rootElem.css({ 'max-height': panel.scroll ? getTableHeight() : '' });
// ctrl.render();
} }
elem.on('click', '.triggers-panel-page-link', switchPage); elem.on('click', '.triggers-panel-page-link', switchPage);
@@ -423,8 +425,12 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
unbindDestroy(); unbindDestroy();
}); });
ctrl.events.on('render', function () { ctrl.events.on('render', function (renderData) {
renderPanel(); data = renderData || data;
if (data) {
renderPanel();
}
ctrl.renderingCompleted();
}); });
} }
}]); }]);

File diff suppressed because one or more lines are too long

View File

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

View File

@@ -80,6 +80,7 @@ class TriggerPanelCtrl extends MetricsPanelCtrl {
_.defaults(this.panel, _.cloneDeep(panelDefaults)); _.defaults(this.panel, _.cloneDeep(panelDefaults));
this.triggerList = []; this.triggerList = [];
this.currentPage = [];
this.refreshData(); this.refreshData();
} }
@@ -254,7 +255,7 @@ class TriggerPanelCtrl extends MetricsPanelCtrl {
} }
render() { render() {
return super.render(this.table); return super.render(this.triggerList);
} }
link(scope, elem, attrs, ctrl) { link(scope, elem, attrs, ctrl) {
@@ -274,16 +275,16 @@ class TriggerPanelCtrl extends MetricsPanelCtrl {
return (panelHeight - 31) + 'px'; return (panelHeight - 31) + 'px';
} }
// function appendTableRows(tbodyElem) {
// var renderer = new TableRenderer(panel, data, ctrl.dashboard.isTimezoneUtc(), ctrl.$sanitize);
// tbodyElem.empty();
// tbodyElem.html(renderer.render(ctrl.pageIndex));
// }
function switchPage(e) { function switchPage(e) {
var el = $(e.currentTarget); let el = $(e.currentTarget);
ctrl.pageIndex = (parseInt(el.text(), 10)-1); ctrl.pageIndex = (parseInt(el.text(), 10)-1);
renderPanel();
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();
} }
function appendPaginationControls(footerElem) { function appendPaginationControls(footerElem) {
@@ -322,6 +323,7 @@ class TriggerPanelCtrl extends MetricsPanelCtrl {
appendPaginationControls(footerElem); appendPaginationControls(footerElem);
rootElem.css({'max-height': panel.scroll ? getTableHeight() : '' }); rootElem.css({'max-height': panel.scroll ? getTableHeight() : '' });
// ctrl.render();
} }
elem.on('click', '.triggers-panel-page-link', switchPage); elem.on('click', '.triggers-panel-page-link', switchPage);
@@ -331,8 +333,12 @@ class TriggerPanelCtrl extends MetricsPanelCtrl {
unbindDestroy(); unbindDestroy();
}); });
ctrl.events.on('render', () => { ctrl.events.on('render', (renderData) => {
renderPanel(); data = renderData || data;
if (data) {
renderPanel();
}
ctrl.renderingCompleted();
}); });
} }
} }