triggers panel: fix rendering issues

dist/panel-triggers/partials/options_tab.html

@@ -41,7 +41,7 @@
         <select class="gf-form-input"
           ng-model="editor.panel.showTriggers"
           ng-options="f for f in editor.ackFilters"
-          ng-change="editor.panelCtrl.refresh()">
+          ng-change="ctrl.refresh()">
         </select>
       </div>
     </div>
@@ -61,7 +61,7 @@
         <select class="gf-form-input"
           ng-model="editor.panel.showEvents"
           ng-options="f.text for f in editor.showEventsFields track by f.value"
-          ng-change="editor.panelCtrl.refresh()">
+          ng-change="ctrl.refresh()">
         </select>
       </div>
     </div>
@@ -71,7 +71,7 @@
         type="number"
         ng-model="editor.panel.limit"
         ng-model-onblur
-        ng-change="editor.panelCtrl.refresh()">
+        ng-change="ctrl.refresh()">
     </div>
   </div>
 
@@ -83,7 +83,7 @@
         <select class="gf-form-input"
             ng-model="editor.panel.fontSize"
             ng-options="f for f in editor.fontSizes"
-            ng-change="editor.panelCtrl.render()"></select>
+            ng-change="ctrl.render()"></select>
       </div>
     </div>
     <div class="gf-form">
@@ -139,7 +139,7 @@
         label-class="width-0"
         label="Show"
         checked="trigger.show"
-        on-change="editor.panelCtrl.refresh()">
+        on-change="ctrl.refresh()">
       </gf-form-switch>
     </div>
 
@@ -161,7 +161,7 @@
         label-class="width-0"
         label="Show"
         checked="editor.panel.markAckEvents"
-        on-change="editor.panelCtrl.refresh()">
+        on-change="ctrl.refresh()">
       </gf-form-switch>
     </div>
     <div class="gf-form-inline">

dist/panel-triggers/triggers_panel_ctrl.js

@@ -3,7 +3,7 @@
 System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'app/plugins/sdk', './options_tab', './triggers_tab', './migrations'], function (_export, _context) {
   "use strict";
 
-  var _, $, moment, utils, PanelCtrl, triggerPanelOptionsTab, triggerPanelTriggersTab, migratePanelSchema, _createClass, ZABBIX_DS_ID, DEFAULT_TARGET, DEFAULT_SEVERITY, DEFAULT_TIME_FORMAT, PANEL_DEFAULTS, triggerStatusMap, TriggerPanelCtrl;
+  var _, $, moment, utils, PanelCtrl, triggerPanelOptionsTab, triggerPanelTriggersTab, migratePanelSchema, _createClass, _get, ZABBIX_DS_ID, DEFAULT_TARGET, DEFAULT_SEVERITY, DEFAULT_TIME_FORMAT, PANEL_DEFAULTS, triggerStatusMap, TriggerPanelCtrl;
 
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -83,6 +83,31 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
         };
       }();
 
+      _get = function get(object, property, receiver) {
+        if (object === null) object = Function.prototype;
+        var desc = Object.getOwnPropertyDescriptor(object, property);
+
+        if (desc === undefined) {
+          var parent = Object.getPrototypeOf(object);
+
+          if (parent === null) {
+            return undefined;
+          } else {
+            return get(parent, property, receiver);
+          }
+        } else if ("value" in desc) {
+          return desc.value;
+        } else {
+          var getter = desc.get;
+
+          if (getter === undefined) {
+            return undefined;
+          }
+
+          return getter.call(receiver);
+        }
+      };
+
       ZABBIX_DS_ID = 'alexanderzobnin-zabbix-datasource';
 
       _export('DEFAULT_TARGET', DEFAULT_TARGET = {
@@ -137,7 +162,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
         _inherits(TriggerPanelCtrl, _PanelCtrl);
 
         /** @ngInject */
-        function TriggerPanelCtrl($scope, $injector, $element, datasourceSrv, templateSrv, contextSrv, dashboardSrv) {
+        function TriggerPanelCtrl($scope, $injector, $element, $timeout, datasourceSrv, templateSrv, contextSrv, dashboardSrv) {
           _classCallCheck(this, TriggerPanelCtrl);
 
           var _this = _possibleConstructorReturn(this, (TriggerPanelCtrl.__proto__ || Object.getPrototypeOf(TriggerPanelCtrl)).call(this, $scope, $injector));
@@ -146,6 +171,8 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
           _this.templateSrv = templateSrv;
           _this.contextSrv = contextSrv;
           _this.dashboardSrv = dashboardSrv;
+          _this.scope = $scope;
+          _this.$timeout = $timeout;
 
           _this.editorTabIndex = 1;
           _this.triggerStatusMap = triggerStatusMap;
@@ -225,15 +252,12 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
             this.setTimeQueryStart();
             this.pageIndex = 0;
 
-            return this.getTriggers().then(function (triggerList) {
+            return this.getTriggers().then(function (zabbixTriggers) {
               // Notify panel that request is finished
               _this3.loading = false;
               _this3.setTimeQueryEnd();
 
-              // Limit triggers number
+              _this3.render(zabbixTriggers);
-              _this3.triggerList = triggerList.slice(0, _this3.panel.limit);
-              _this3.getCurrentTriggersPage();
-              _this3.render(_this3.triggerList);
             }).catch(function (err) {
               // if cancelled  keep loading set to true
               if (err.cancelled) {
@@ -258,16 +282,38 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
             });
           }
         }, {
-          key: 'getTriggers',
+          key: 'render',
-          value: function getTriggers() {
+          value: function render(zabbixTriggers) {
             var _this4 = this;
 
+            var triggers = zabbixTriggers || this.triggerList;
+
+            if (zabbixTriggers) {
+              triggers = _.map(triggers, this.formatTrigger.bind(this));
+            } else {
+              triggers = _.map(triggers, this.updateTriggerFormat.bind(this));
+            }
+            triggers = this.sortTriggers(triggers);
+            // Limit triggers number
+            triggers = triggers.slice(0, this.panel.limit);
+            this.triggerList = triggers;
+            this.getCurrentTriggersPage();
+
+            this.$timeout(function () {
+              _get(TriggerPanelCtrl.prototype.__proto__ || Object.getPrototypeOf(TriggerPanelCtrl.prototype), 'render', _this4).call(_this4, _this4.triggerList);
+            });
+          }
+        }, {
+          key: 'getTriggers',
+          value: function getTriggers() {
+            var _this5 = this;
+
             var promises = _.map(this.panel.datasources, function (ds) {
-              return _this4.datasourceSrv.get(ds).then(function (datasource) {
+              return _this5.datasourceSrv.get(ds).then(function (datasource) {
                 var zabbix = datasource.zabbix;
-                var showEvents = _this4.panel.showEvents.value;
+                var showEvents = _this5.panel.showEvents.value;
-                var triggerFilter = _this4.panel.targets[ds];
+                var triggerFilter = _this5.panel.targets[ds];
-                var hideHostsInMaintenance = _this4.panel.hideHostsInMaintenance;
+                var hideHostsInMaintenance = _this5.panel.hideHostsInMaintenance;
 
                 // Replace template variables
                 var groupFilter = datasource.replaceTemplateVars(triggerFilter.group.filter);
@@ -281,9 +327,9 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
 
                 return zabbix.getTriggers(groupFilter, hostFilter, appFilter, triggersOptions);
               }).then(function (triggers) {
-                return _this4.getAcknowledges(triggers, ds);
+                return _this5.getAcknowledges(triggers, ds);
               }).then(function (triggers) {
-                return _this4.filterTriggers(triggers, ds);
+                return _this5.filterTriggers(triggers, ds);
               });
             });
 
@@ -294,7 +340,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
         }, {
           key: 'getAcknowledges',
           value: function getAcknowledges(triggerList, ds) {
-            var _this5 = this;
+            var _this6 = this;
 
             // Request acknowledges for trigger
             var eventids = _.map(triggerList, function (trigger) {
@@ -312,10 +358,10 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
                 if (event) {
                   trigger.acknowledges = _.map(event.acknowledges, function (ack) {
                     var timestamp = moment.unix(ack.clock);
-                    if (_this5.panel.customLastChangeFormat) {
+                    if (_this6.panel.customLastChangeFormat) {
-                      ack.time = timestamp.format(_this5.panel.lastChangeFormat);
+                      ack.time = timestamp.format(_this6.panel.lastChangeFormat);
                     } else {
-                      ack.time = timestamp.format(_this5.defaultTimeFormat);
+                      ack.time = timestamp.format(_this6.defaultTimeFormat);
                     }
                     ack.user = ack.alias + ' (' + ack.name + ' ' + ack.surname + ')';
                     return ack;
@@ -329,7 +375,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
         }, {
           key: 'filterTriggers',
           value: function filterTriggers(triggerList, ds) {
-            var _this6 = this;
+            var _this7 = this;
 
             // Filter triggers by description
             var triggerFilter = this.panel.targets[ds].trigger.filter;
@@ -351,7 +397,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
 
             // Filter triggers by severity
             triggerList = _.filter(triggerList, function (trigger) {
-              return _this6.panel.triggerSeverity[trigger.priority].show;
+              return _this7.panel.triggerSeverity[trigger.priority].show;
             });
 
             return triggerList;
@@ -464,15 +510,20 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
           value: function link(scope, elem, attrs, ctrl) {
             var panel = ctrl.panel;
             var pageCount = 0;
-            var data = ctrl.triggerList;
+            var triggerList = ctrl.triggerList;
+
+            scope.$watchGroup(['ctrl.currentTriggersPage', 'ctrl.triggerList'], renderPanel);
+            elem.on('click', '.triggers-panel-page-link', switchPage);
+            ctrl.events.on('render', function (renderData) {
+              triggerList = renderData || triggerList;
+              renderPanel();
+            });
 
             function getContentHeight() {
               var panelHeight = ctrl.height;
-
               if (pageCount > 1) {
                 panelHeight -= 36;
               }
-
               return panelHeight + 'px';
             }
 
@@ -480,10 +531,10 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
               var el = $(e.currentTarget);
               ctrl.pageIndex = parseInt(el.text(), 10) - 1;
 
-              var pageSize = ctrl.panel.pageSize || 10;
+              var pageSize = panel.pageSize || 10;
               var startPos = ctrl.pageIndex * pageSize;
-              var endPos = Math.min(startPos + pageSize, ctrl.triggerList.length);
+              var endPos = Math.min(startPos + pageSize, triggerList.length);
-              ctrl.currentTriggersPage = ctrl.triggerList.slice(startPos, endPos);
+              ctrl.currentTriggersPage = triggerList.slice(startPos, endPos);
 
               scope.$apply(function () {
                 renderPanel();
@@ -493,8 +544,8 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
             function appendPaginationControls(footerElem) {
               footerElem.empty();
 
-              var pageSize = ctrl.panel.pageSize || 5;
+              var pageSize = panel.pageSize || 5;
-              pageCount = Math.ceil(data.length / pageSize);
+              pageCount = Math.ceil(triggerList.length / pageSize);
               if (pageCount === 1) {
                 return;
               }
@@ -519,10 +570,12 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
               if (fontSize && fontSize !== 100) {
                 triggerCardElem.find('.alert-list-icon').css({ 'font-size': fontSize + '%' });
                 triggerCardElem.find('.alert-list-title').css({ 'font-size': fontSize + '%' });
-                triggerCardElem.find('.alert-list-text').css({ 'font-size': fontSize * 0.8 + '%' });
+                triggerCardElem.find('.alert-list-text').css({ 'font-size': fontSize * 0.7 + '%' });
               } else {
                 // remove css
-                triggerCardElem.find('.alert-list-icon').css({ 'font-size': fontSize + '%' });
+                triggerCardElem.find('.alert-list-icon').css({ 'font-size': '' });
+                triggerCardElem.find('.alert-list-title').css({ 'font-size': '' });
+                triggerCardElem.find('.alert-list-text').css({ 'font-size': '' });
               }
             }
 
@@ -530,33 +583,16 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
               var rootElem = elem.find('.triggers-panel-scroll');
               var footerElem = elem.find('.triggers-panel-footer');
               appendPaginationControls(footerElem);
-              setFontSize();
               rootElem.css({ 'max-height': getContentHeight() });
               rootElem.css({ 'height': getContentHeight() });
+              setFontSize();
               ctrl.renderingCompleted();
             }
 
-            elem.on('click', '.triggers-panel-page-link', switchPage);
-
             var unbindDestroy = scope.$on('$destroy', function () {
               elem.off('click', '.triggers-panel-page-link');
               unbindDestroy();
             });
-
-            ctrl.events.on('render', function (renderData) {
-              if (renderData) {
-                renderData = _.map(renderData, ctrl.formatTrigger.bind(ctrl));
-                data = renderData;
-              } else {
-                data = _.map(data, ctrl.updateTriggerFormat.bind(ctrl));
-              }
-              data = ctrl.sortTriggers(data);
-              if (data) {
-                ctrl.triggerList = data;
-                ctrl.getCurrentTriggersPage();
-                renderPanel();
-              }
-            });
           }
         }]);
 

src/panel-triggers/partials/options_tab.html

@@ -41,7 +41,7 @@
         <select class="gf-form-input"
           ng-model="editor.panel.showTriggers"
           ng-options="f for f in editor.ackFilters"
-          ng-change="editor.panelCtrl.refresh()">
+          ng-change="ctrl.refresh()">
         </select>
       </div>
     </div>
@@ -61,7 +61,7 @@
         <select class="gf-form-input"
           ng-model="editor.panel.showEvents"
           ng-options="f.text for f in editor.showEventsFields track by f.value"
-          ng-change="editor.panelCtrl.refresh()">
+          ng-change="ctrl.refresh()">
         </select>
       </div>
     </div>
@@ -71,7 +71,7 @@
         type="number"
         ng-model="editor.panel.limit"
         ng-model-onblur
-        ng-change="editor.panelCtrl.refresh()">
+        ng-change="ctrl.refresh()">
     </div>
   </div>
 
@@ -83,7 +83,7 @@
         <select class="gf-form-input"
             ng-model="editor.panel.fontSize"
             ng-options="f for f in editor.fontSizes"
-            ng-change="editor.panelCtrl.render()"></select>
+            ng-change="ctrl.render()"></select>
       </div>
     </div>
     <div class="gf-form">
@@ -139,7 +139,7 @@
         label-class="width-0"
         label="Show"
         checked="trigger.show"
-        on-change="editor.panelCtrl.refresh()">
+        on-change="ctrl.refresh()">
       </gf-form-switch>
     </div>
 
@@ -161,7 +161,7 @@
         label-class="width-0"
         label="Show"
         checked="editor.panel.markAckEvents"
-        on-change="editor.panelCtrl.refresh()">
+        on-change="ctrl.refresh()">
       </gf-form-switch>
     </div>
     <div class="gf-form-inline">

src/panel-triggers/triggers_panel_ctrl.js

@@ -61,12 +61,14 @@ const triggerStatusMap = {
 export class TriggerPanelCtrl extends PanelCtrl {
 
   /** @ngInject */
-  constructor($scope, $injector, $element, datasourceSrv, templateSrv, contextSrv, dashboardSrv) {
+  constructor($scope, $injector, $element, $timeout, datasourceSrv, templateSrv, contextSrv, dashboardSrv) {
     super($scope, $injector);
     this.datasourceSrv = datasourceSrv;
     this.templateSrv = templateSrv;
     this.contextSrv = contextSrv;
     this.dashboardSrv = dashboardSrv;
+    this.scope = $scope;
+    this.$timeout = $timeout;
 
     this.editorTabIndex = 1;
     this.triggerStatusMap = triggerStatusMap;
@@ -134,15 +136,12 @@ export class TriggerPanelCtrl extends PanelCtrl {
     this.pageIndex = 0;
 
     return this.getTriggers()
-    .then(triggerList => {
+    .then(zabbixTriggers => {
       // Notify panel that request is finished
       this.loading = false;
       this.setTimeQueryEnd();
 
-      // Limit triggers number
+      this.render(zabbixTriggers);
-      this.triggerList = triggerList.slice(0, this.panel.limit);
-      this.getCurrentTriggersPage();
-      this.render(this.triggerList);
     })
     .catch(err => {
       // if cancelled  keep loading set to true
@@ -168,6 +167,25 @@ export class TriggerPanelCtrl extends PanelCtrl {
     });
   }
 
+  render(zabbixTriggers) {
+    let triggers = zabbixTriggers || this.triggerList;
+
+    if (zabbixTriggers) {
+      triggers = _.map(triggers, this.formatTrigger.bind(this));
+    } else {
+      triggers = _.map(triggers, this.updateTriggerFormat.bind(this));
+    }
+    triggers = this.sortTriggers(triggers);
+    // Limit triggers number
+    triggers = triggers.slice(0, this.panel.limit);
+    this.triggerList = triggers;
+    this.getCurrentTriggersPage();
+
+    this.$timeout(() => {
+      super.render(this.triggerList);
+    });
+  }
+
   getTriggers() {
     let promises = _.map(this.panel.datasources, (ds) => {
       return this.datasourceSrv.get(ds)
@@ -358,15 +376,20 @@ export class TriggerPanelCtrl extends PanelCtrl {
   link(scope, elem, attrs, ctrl) {
     let panel = ctrl.panel;
     let pageCount = 0;
-    let data = ctrl.triggerList;
+    let triggerList = ctrl.triggerList;
+
+    scope.$watchGroup(['ctrl.currentTriggersPage', 'ctrl.triggerList'], renderPanel);
+    elem.on('click', '.triggers-panel-page-link', switchPage);
+    ctrl.events.on('render', (renderData) => {
+      triggerList = renderData || triggerList;
+      renderPanel();
+    });
 
     function getContentHeight() {
       let panelHeight = ctrl.height;
-
       if (pageCount > 1) {
         panelHeight -= 36;
       }
-
       return panelHeight + 'px';
     }
 
@@ -374,10 +397,10 @@ export class TriggerPanelCtrl extends PanelCtrl {
       let el = $(e.currentTarget);
       ctrl.pageIndex = (parseInt(el.text(), 10)-1);
 
-      let pageSize = ctrl.panel.pageSize || 10;
+      let pageSize = panel.pageSize || 10;
       let startPos = ctrl.pageIndex * pageSize;
-      let endPos = Math.min(startPos + pageSize, ctrl.triggerList.length);
+      let endPos = Math.min(startPos + pageSize, triggerList.length);
-      ctrl.currentTriggersPage = ctrl.triggerList.slice(startPos, endPos);
+      ctrl.currentTriggersPage = triggerList.slice(startPos, endPos);
 
       scope.$apply(() => {
         renderPanel();
@@ -387,8 +410,8 @@ export class TriggerPanelCtrl extends PanelCtrl {
     function appendPaginationControls(footerElem) {
       footerElem.empty();
 
-      let pageSize = ctrl.panel.pageSize || 5;
+      let pageSize = panel.pageSize || 5;
-      pageCount = Math.ceil(data.length / pageSize);
+      pageCount = Math.ceil(triggerList.length / pageSize);
       if (pageCount === 1) {
         return;
       }
@@ -413,10 +436,12 @@ export class TriggerPanelCtrl extends PanelCtrl {
       if (fontSize && fontSize !== 100) {
         triggerCardElem.find('.alert-list-icon').css({'font-size': fontSize + '%'});
         triggerCardElem.find('.alert-list-title').css({'font-size': fontSize + '%'});
-        triggerCardElem.find('.alert-list-text').css({'font-size': fontSize * 0.8 + '%'});
+        triggerCardElem.find('.alert-list-text').css({'font-size': fontSize * 0.7 + '%'});
       } else {
         // remove css
-        triggerCardElem.find('.alert-list-icon').css({'font-size': fontSize + '%'});
+        triggerCardElem.find('.alert-list-icon').css({'font-size': ''});
+        triggerCardElem.find('.alert-list-title').css({'font-size': ''});
+        triggerCardElem.find('.alert-list-text').css({'font-size': ''});
       }
     }
 
@@ -424,33 +449,16 @@ export class TriggerPanelCtrl extends PanelCtrl {
       let rootElem = elem.find('.triggers-panel-scroll');
       let footerElem = elem.find('.triggers-panel-footer');
       appendPaginationControls(footerElem);
-      setFontSize();
       rootElem.css({'max-height': getContentHeight()});
       rootElem.css({'height': getContentHeight()});
+      setFontSize();
       ctrl.renderingCompleted();
     }
 
-    elem.on('click', '.triggers-panel-page-link', switchPage);
-
     let unbindDestroy = scope.$on('$destroy', function() {
       elem.off('click', '.triggers-panel-page-link');
       unbindDestroy();
     });
-
-    ctrl.events.on('render', (renderData) => {
-      if (renderData) {
-        renderData = _.map(renderData, ctrl.formatTrigger.bind(ctrl));
-        data = renderData;
-      } else {
-        data = _.map(data, ctrl.updateTriggerFormat.bind(ctrl));
-      }
-      data = ctrl.sortTriggers(data);
-      if (data) {
-        ctrl.triggerList = data;
-        ctrl.getCurrentTriggersPage();
-        renderPanel();
-      }
-    });
   }
 }