Fix table pagination, closes #229

dist/panel-triggers/module.html

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

dist/panel-triggers/module.js

@@ -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.onRefresh.bind(_this));
-          _this.events.on('refresh', _this.onRender.bind(_this));
-
-          _this.refreshData();
           return _this;
         }
 
@@ -166,8 +163,8 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
             this.refreshData();
           }
         }, {
-          key: 'onRender',
+          key: 'onRefresh',
-          value: function onRender() {
+          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 () {
+              return zabbixAPI.acknowledgeEvent(eventid, ack_message);
-                _this6.refresh();
+            }).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.triggerList;
-            data = ctrl.panel.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.currentTriggersPage = ctrl.triggerList.slice(startPos, endPos);
-              ctrl.render();
+
-              // renderPanel();
+              scope.$apply();
+              renderPanel();
             }
 
             function appendPaginationControls(footerElem) {
               footerElem.empty();
 
-              var pageSize = panel.pageSize || 5;
+              var pageSize = ctrl.panel.pageSize || 5;
-              pageCount = Math.ceil(ctrl.panel.triggerList.length / pageSize);
+              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);

src/panel-triggers/module.html

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

src/panel-triggers/module.js

@@ -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.onRefresh.bind(this));
-    this.events.on('refresh', this.onRender.bind(this));
-
-    this.refreshData();
   }
 
   /**
@@ -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)
+      return zabbixAPI.acknowledgeEvent(eventid, ack_message);
-      .then(() => {
+    })
-        this.refresh();
+    .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.triggerList;
-    data = ctrl.panel.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.currentTriggersPage = ctrl.triggerList.slice(startPos, endPos);
-      ctrl.render();
+
-      // renderPanel();
+      scope.$apply();
+      renderPanel();
     }
 
     function appendPaginationControls(footerElem) {
       footerElem.empty();
 
-      var pageSize = panel.pageSize || 5;
+      var pageSize = ctrl.panel.pageSize || 5;
-      pageCount = Math.ceil(ctrl.panel.triggerList.length / pageSize);
+      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);