triggers panel multi-ds supoort: refactor

dist/panel-triggers/migrations.js

@@ -3,6 +3,23 @@
 System.register([], function (_export, _context) {
   "use strict";
 
+  function migratePanelSchema(panel) {
+    var schemaVersion = getSchemaVersion(panel);
+    switch (schemaVersion) {
+      case 1:
+        panel.datasources = [panel.datasource];
+        panel.targets[panel.datasources[0]] = panel.triggers;
+        break;
+    }
+
+    return panel;
+  }
+
+  _export("migratePanelSchema", migratePanelSchema);
+
+  function getSchemaVersion(panel) {
+    return panel.schemaVersion || 1;
+  }
   return {
     setters: [],
     execute: function () {}

dist/panel-triggers/migrations.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"migrations.js","sourcesContent":[]}
+{"version":3,"sources":["../../src/panel-triggers/migrations.js"],"names":["migratePanelSchema","panel","schemaVersion","getSchemaVersion","datasources","datasource","targets","triggers"],"mappings":";;;;;AAAO,WAASA,kBAAT,CAA4BC,KAA5B,EAAmC;AACxC,QAAMC,gBAAgBC,iBAAiBF,KAAjB,CAAtB;AACA,YAAQC,aAAR;AACE,WAAK,CAAL;AACED,cAAMG,WAAN,GAAoB,CAACH,MAAMI,UAAP,CAApB;AACAJ,cAAMK,OAAN,CAAcL,MAAMG,WAAN,CAAkB,CAAlB,CAAd,IAAsCH,MAAMM,QAA5C;AACA;AAJJ;;AAOA,WAAON,KAAP;AACD;;gCAVeD,kB;;AAYhB,WAASG,gBAAT,CAA0BF,KAA1B,EAAiC;AAC/B,WAAOA,MAAMC,aAAN,IAAuB,CAA9B;AACD","file":"migrations.js","sourcesContent":["export function migratePanelSchema(panel) {\n  const schemaVersion = getSchemaVersion(panel);\n  switch (schemaVersion) {\n    case 1:\n      panel.datasources = [panel.datasource];\n      panel.targets[panel.datasources[0]] = panel.triggers;\n      break;\n  }\n\n  return panel;\n}\n\nfunction getSchemaVersion(panel) {\n  return panel.schemaVersion || 1;\n}\n"]}

dist/panel-triggers/module.js

@@ -1,9 +1,9 @@
 'use strict';
 
-System.register(['lodash', 'jquery', 'moment', 'app/plugins/sdk', '../datasource-zabbix/utils', './options_tab', './triggers_tab', './ack-tooltip.directive'], function (_export, _context) {
+System.register(['lodash', 'jquery', 'moment', 'app/plugins/sdk', '../datasource-zabbix/utils', './options_tab', './triggers_tab', './migrations', './ack-tooltip.directive'], function (_export, _context) {
   "use strict";
 
-  var _, $, moment, loadPluginCss, utils, PanelCtrl, triggerPanelOptionsTab, triggerPanelTriggersTab, _createClass, defaultSeverity, panelDefaults, triggerStatusMap, defaultTimeFormat, TriggerPanelCtrl;
+  var _, $, moment, loadPluginCss, utils, PanelCtrl, triggerPanelOptionsTab, triggerPanelTriggersTab, migratePanelSchema, _createClass, ZABBIX_DS_ID, DEFAULT_TARGET, defaultSeverity, panelDefaults, triggerStatusMap, defaultTimeFormat, TriggerPanelCtrl;
 
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -63,6 +63,8 @@ System.register(['lodash', 'jquery', 'moment', 'app/plugins/sdk', '../datasource
       triggerPanelOptionsTab = _options_tab.triggerPanelOptionsTab;
     }, function (_triggers_tab) {
       triggerPanelTriggersTab = _triggers_tab.triggerPanelTriggersTab;
+    }, function (_migrations) {
+      migratePanelSchema = _migrations.migratePanelSchema;
     }, function (_ackTooltipDirective) {}],
     execute: function () {
       _createClass = function () {
@@ -101,6 +103,17 @@ System.register(['lodash', 'jquery', 'moment', 'app/plugins/sdk', '../datasource
         light: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.light.css'
       });
 
+      ZABBIX_DS_ID = 'alexanderzobnin-zabbix-datasource';
+
+      _export('DEFAULT_TARGET', DEFAULT_TARGET = {
+        group: { filter: "" },
+        host: { filter: "" },
+        application: { filter: "" },
+        trigger: { filter: "" }
+      });
+
+      _export('DEFAULT_TARGET', DEFAULT_TARGET);
+
       defaultSeverity = [{ priority: 0, severity: 'Not classified', color: '#B7DBAB', show: true }, { priority: 1, severity: 'Information', color: '#82B5D8', show: true }, { priority: 2, severity: 'Warning', color: '#E5AC0E', show: true }, { priority: 3, severity: 'Average', color: '#C15C17', show: true }, { priority: 4, severity: 'High', color: '#BF1B00', show: true }, { priority: 5, severity: 'Disaster', color: '#890F02', show: true }];
       panelDefaults = {
         datasources: [],
@@ -150,6 +163,7 @@ System.register(['lodash', 'jquery', 'moment', 'app/plugins/sdk', '../datasource
           _this.contextSrv = contextSrv;
           _this.dashboardSrv = dashboardSrv;
 
+          _this.editorTabIndex = 1;
           _this.triggerStatusMap = triggerStatusMap;
           _this.defaultTimeFormat = defaultTimeFormat;
           _this.pageIndex = 0;
@@ -157,12 +171,16 @@ System.register(['lodash', 'jquery', 'moment', 'app/plugins/sdk', '../datasource
           _this.currentTriggersPage = [];
           _this.datasources = {};
 
-          _this.migratePanelConfig();
-
-          // Load panel defaults
-          // _.cloneDeep() need for prevent changing shared defaultSeverity.
-          // Load object "by value" istead "by reference".
           _.defaults(_this.panel, _.cloneDeep(panelDefaults));
+          _this.panel = migratePanelSchema(_this.panel);
+
+          _this.available_datasources = _.map(_this.getZabbixDataSources(), 'name');
+          if (_this.panel.datasources.length === 0) {
+            _this.panel.datasources.push(_this.available_datasources[0]);
+          }
+          if (_.isEmpty(_this.panel.targets)) {
+            _this.panel.targets[_this.panel.datasources[0]] = DEFAULT_TARGET;
+          }
 
           _this.initDatasources();
           _this.events.on('init-edit-mode', _this.onInitEditMode.bind(_this));
@@ -175,19 +193,37 @@ System.register(['lodash', 'jquery', 'moment', 'app/plugins/sdk', '../datasource
           value: function initDatasources() {
             var _this2 = this;
 
-            _.each(this.panel.datasources, function (ds) {
+            var promises = _.map(this.panel.datasources, function (ds) {
               // Load datasource
-              _this2.datasourceSrv.get(ds).then(function (datasource) {
+              return _this2.datasourceSrv.get(ds).then(function (datasource) {
                 _this2.datasources[ds] = datasource;
-                _this2.datasources[ds].queryBuilder = datasource.queryBuilder;
+                return datasource;
               });
             });
+            return Promise.all(promises);
+          }
+        }, {
+          key: 'getZabbixDataSources',
+          value: function getZabbixDataSources() {
+            return _.filter(this.datasourceSrv.getMetricSources(), function (datasource) {
+              return datasource.meta.id === ZABBIX_DS_ID && datasource.value;
+            });
           }
         }, {
           key: 'onInitEditMode',
           value: function onInitEditMode() {
-            this.addEditorTab('Triggers', triggerPanelTriggersTab, 2);
+            this.addEditorTab('Triggers', triggerPanelTriggersTab, 1);
-            this.addEditorTab('Options', triggerPanelOptionsTab, 3);
+            this.addEditorTab('Options', triggerPanelOptionsTab, 2);
+          }
+        }, {
+          key: 'setTimeQueryStart',
+          value: function setTimeQueryStart() {
+            this.timing.queryStart = new Date().getTime();
+          }
+        }, {
+          key: 'setTimeQueryEnd',
+          value: function setTimeQueryEnd() {
+            this.timing.queryEnd = new Date().getTime();
           }
         }, {
           key: 'onRefresh',
@@ -202,34 +238,40 @@ System.register(['lodash', 'jquery', 'moment', 'app/plugins/sdk', '../datasource
             // clear loading/error state
             delete this.error;
             this.loading = true;
+            this.setTimeQueryStart();
 
-            return this.refreshData().then(function (triggerList) {
+            return this.getTriggers().then(function (triggerList) {
-              // Limit triggers number
-              _this3.triggerList = triggerList.slice(0, _this3.panel.limit);
-
-              _this3.getCurrentTriggersPage();
-
               // Notify panel that request is finished
               _this3.loading = false;
+              _this3.setTimeQueryEnd();
 
+              // Limit triggers number
+              _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) {
+                console.log('Panel request cancelled', err);
+                return;
+              }
+
+              _this3.loading = false;
+              _this3.error = err.message || "Request Error";
+
+              if (err.data) {
+                if (err.data.message) {
+                  _this3.error = err.data.message;
+                }
+                if (err.data.error) {
+                  _this3.error = err.data.error;
+                }
+              }
+
+              _this3.events.emit('data-error', err);
+              console.log('Panel data error:', err);
             });
           }
-        }, {
-          key: 'refreshData',
-          value: function refreshData() {
-            return this.getTriggers();
-          }
-        }, {
-          key: 'migratePanelConfig',
-          value: function migratePanelConfig() {
-            if (!this.panel.datasources || this.panel.datasource && !this.panel.datasources.length) {
-              this.panel.datasources = [this.panel.datasource];
-              this.panel.targets[this.panel.datasource] = this.panel.triggers;
-            } else if (_.isEmpty(this.panel.targets)) {
-              this.panel.targets[this.panel.datasources[0]] = this.panel.triggers;
-            }
-          }
         }, {
           key: 'getTriggers',
           value: function getTriggers() {
@@ -238,8 +280,6 @@ System.register(['lodash', 'jquery', 'moment', 'app/plugins/sdk', '../datasource
             var promises = _.map(this.panel.datasources, function (ds) {
               return _this4.datasourceSrv.get(ds).then(function (datasource) {
                 var zabbix = datasource.zabbix;
-                _this4.zabbix = zabbix;
-                _this4.datasource = datasource;
                 var showEvents = _this4.panel.showEvents.value;
                 var triggerFilter = _this4.panel.targets[ds];
                 var hideHostsInMaintenance = _this4.panel.hideHostsInMaintenance;
@@ -264,6 +304,8 @@ System.register(['lodash', 'jquery', 'moment', 'app/plugins/sdk', '../datasource
 
             return Promise.all(promises).then(function (results) {
               return _.flatten(results);
+            }).then(function (triggers) {
+              return _this4.sortTriggers(triggers);
             }).then(function (triggers) {
               return _.map(triggers, _this4.formatTrigger.bind(_this4));
             });
@@ -336,13 +378,16 @@ System.register(['lodash', 'jquery', 'moment', 'app/plugins/sdk', '../datasource
               return _this6.panel.triggerSeverity[trigger.priority].show;
             });
 
-            // Sort triggers
+            return triggerList;
+          }
+        }, {
+          key: 'sortTriggers',
+          value: function sortTriggers(triggerList) {
             if (this.panel.sortTriggersBy.value === 'priority') {
               triggerList = _.sortBy(triggerList, 'priority').reverse();
             } else {
               triggerList = _.sortBy(triggerList, 'lastchangeUnix').reverse();
             }
-
             return triggerList;
           }
         }, {
@@ -431,8 +476,9 @@ System.register(['lodash', 'jquery', 'moment', 'app/plugins/sdk', '../datasource
               var endPos = Math.min(startPos + pageSize, ctrl.triggerList.length);
               ctrl.currentTriggersPage = ctrl.triggerList.slice(startPos, endPos);
 
-              scope.$apply();
+              scope.$apply(function () {
-              renderPanel();
+                renderPanel();
+              });
             }
 
             function appendPaginationControls(footerElem) {
@@ -468,6 +514,7 @@ System.register(['lodash', 'jquery', 'moment', 'app/plugins/sdk', '../datasource
               appendPaginationControls(footerElem);
 
               rootElem.css({ 'max-height': panel.scroll ? getTableHeight() : '' });
+              ctrl.renderingCompleted();
             }
 
             elem.on('click', '.triggers-panel-page-link', switchPage);
@@ -480,9 +527,10 @@ System.register(['lodash', 'jquery', 'moment', 'app/plugins/sdk', '../datasource
             ctrl.events.on('render', function (renderData) {
               data = renderData || data;
               if (data) {
-                renderPanel();
+                scope.$apply(function () {
+                  renderPanel();
+                });
               }
-              ctrl.renderingCompleted();
             });
           }
         }]);

dist/panel-triggers/partials/triggers_tab.html

@@ -2,12 +2,12 @@
   <div class="section gf-form-group">
     <div class="gf-form-inline">
       <div class="gf-form">
-        <label class="gf-form-label width-9">Data sources</label>
+        <label class="gf-form-label width-7">Data sources</label>
       </div>
       <div class="gf-form">
         <datasource-selector
           datasources="editor.panel.datasources"
-          options="editor.available_datasources"
+          options="editor.panelCtrl.available_datasources"
           on-change="editor.datasourcesChanged()">
         </datasource-selector>
       </div>

dist/panel-triggers/triggers_tab.js

@@ -1,9 +1,9 @@
 'use strict';
 
-System.register(['lodash', '../datasource-zabbix/utils', './datasource-selector.directive', '../datasource-zabbix/css/query-editor.css!'], function (_export, _context) {
+System.register(['lodash', '../datasource-zabbix/utils', './datasource-selector.directive', '../datasource-zabbix/css/query-editor.css!', './module'], function (_export, _context) {
   "use strict";
 
-  var _, utils, _createClass, ZABBIX_DS_ID, DEFAULT_TARGET, TriggersTabCtrl;
+  var _, utils, DEFAULT_TARGET, _createClass, TriggersTabCtrl;
 
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -27,7 +27,9 @@ System.register(['lodash', '../datasource-zabbix/utils', './datasource-selector.
       _ = _lodash.default;
     }, function (_datasourceZabbixUtils) {
       utils = _datasourceZabbixUtils;
-    }, function (_datasourceSelectorDirective) {}, function (_datasourceZabbixCssQueryEditorCss) {}],
+    }, function (_datasourceSelectorDirective) {}, function (_datasourceZabbixCssQueryEditorCss) {}, function (_module) {
+      DEFAULT_TARGET = _module.DEFAULT_TARGET;
+    }],
     execute: function () {
       _createClass = function () {
         function defineProperties(target, props) {
@@ -47,29 +49,20 @@ System.register(['lodash', '../datasource-zabbix/utils', './datasource-selector.
         };
       }();
 
-      ZABBIX_DS_ID = 'alexanderzobnin-zabbix-datasource';
-      DEFAULT_TARGET = {
-        group: { filter: "" },
-        host: { filter: "" },
-        application: { filter: "" },
-        trigger: { filter: "" }
-      };
-
       TriggersTabCtrl = function () {
 
         /** @ngInject */
-        function TriggersTabCtrl($scope, $rootScope, uiSegmentSrv, datasourceSrv, templateSrv) {
+        function TriggersTabCtrl($scope, $rootScope, uiSegmentSrv, templateSrv) {
           _classCallCheck(this, TriggersTabCtrl);
 
           $scope.editor = this;
           this.panelCtrl = $scope.ctrl;
           this.panel = this.panelCtrl.panel;
-          this.datasourceSrv = datasourceSrv;
           this.templateSrv = templateSrv;
+          this.datasources = this.panelCtrl.datasources;
 
           // Load scope defaults
           var scopeDefaults = {
-            datasources: {},
             getGroupNames: {},
             getHostNames: {},
             getApplicationNames: {},
@@ -77,11 +70,6 @@ System.register(['lodash', '../datasource-zabbix/utils', './datasource-selector.
           };
           _.defaultsDeep(this, scopeDefaults);
 
-          this.available_datasources = _.map(this.getZabbixDataSources(), 'name');
-          if (!this.panel.datasource) {
-            this.panel.datasource = this.available_datasources[0];
-          }
-
           this.initDatasources();
           this.panelCtrl.refresh();
         }
@@ -91,47 +79,42 @@ System.register(['lodash', '../datasource-zabbix/utils', './datasource-selector.
           value: function initDatasources() {
             var _this = this;
 
-            _.each(this.panel.datasources, function (ds) {
+            return this.panelCtrl.initDatasources().then(function (datasources) {
-              // Load datasource
+              _.each(datasources, function (datasource) {
-              _this.datasourceSrv.get(ds).then(function (datasource) {
+                _this.bindSuggestionFunctions(datasource);
-                _this.panelCtrl.datasources[ds] = datasource;
-                _this.datasources[ds] = datasource;
-
-                // Map functions for bs-typeahead
-                _this.getGroupNames[ds] = _.bind(_this.suggestGroups, _this, datasource);
-                _this.getHostNames[ds] = _.bind(_this.suggestHosts, _this, datasource);
-                _this.getApplicationNames[ds] = _.bind(_this.suggestApps, _this, datasource);
               });
             });
           }
         }, {
-          key: 'getZabbixDataSources',
+          key: 'bindSuggestionFunctions',
-          value: function getZabbixDataSources() {
+          value: function bindSuggestionFunctions(datasource) {
-            return _.filter(this.datasourceSrv.getMetricSources(), function (datasource) {
+            // Map functions for bs-typeahead
-              return datasource.meta.id === ZABBIX_DS_ID && datasource.value;
+            var ds = datasource.name;
-            });
+            this.getGroupNames[ds] = _.bind(this.suggestGroups, this, datasource);
+            this.getHostNames[ds] = _.bind(this.suggestHosts, this, datasource);
+            this.getApplicationNames[ds] = _.bind(this.suggestApps, this, datasource);
           }
         }, {
           key: 'suggestGroups',
-          value: function suggestGroups(ds, query, callback) {
+          value: function suggestGroups(datasource, query, callback) {
-            return ds.zabbix.getAllGroups().then(function (groups) {
+            return datasource.zabbix.getAllGroups().then(function (groups) {
               return _.map(groups, 'name');
             }).then(callback);
           }
         }, {
           key: 'suggestHosts',
-          value: function suggestHosts(ds, query, callback) {
+          value: function suggestHosts(datasource, query, callback) {
-            var groupFilter = ds.replaceTemplateVars(this.panel.targets[ds.name].group.filter);
+            var groupFilter = datasource.replaceTemplateVars(this.panel.targets[datasource.name].group.filter);
-            return ds.zabbix.getAllHosts(groupFilter).then(function (hosts) {
+            return datasource.zabbix.getAllHosts(groupFilter).then(function (hosts) {
               return _.map(hosts, 'name');
             }).then(callback);
           }
         }, {
           key: 'suggestApps',
-          value: function suggestApps(ds, query, callback) {
+          value: function suggestApps(datasource, query, callback) {
-            var groupFilter = ds.replaceTemplateVars(this.panel.targets[ds.name].group.filter);
+            var groupFilter = datasource.replaceTemplateVars(this.panel.targets[datasource.name].group.filter);
-            var hostFilter = ds.replaceTemplateVars(this.panel.targets[ds.name].host.filter);
+            var hostFilter = datasource.replaceTemplateVars(this.panel.targets[datasource.name].host.filter);
-            return ds.zabbix.getAllApps(groupFilter, hostFilter).then(function (apps) {
+            return datasource.zabbix.getAllApps(groupFilter, hostFilter).then(function (apps) {
               return _.map(apps, 'name');
             }).then(callback);
           }
@@ -150,12 +133,15 @@ System.register(['lodash', '../datasource-zabbix/utils', './datasource-selector.
         }, {
           key: 'parseTarget',
           value: function parseTarget() {
-            this.initDatasources();
+            var _this3 = this;
-            var newTarget = _.cloneDeep(this.panel.targets);
+
-            if (!_.isEqual(this.oldTarget, newTarget)) {
+            this.initDatasources().then(function () {
-              this.oldTarget = newTarget;
+              var newTarget = _.cloneDeep(_this3.panel.targets);
-            }
+              if (!_.isEqual(_this3.oldTarget, newTarget)) {
-            this.panelCtrl.refresh();
+                _this3.oldTarget = newTarget;
+              }
+              _this3.panelCtrl.refresh();
+            });
           }
         }, {
           key: 'isRegex',

src/panel-triggers/migrations.js

@@ -0,0 +1,15 @@
+export function migratePanelSchema(panel) {
+  const schemaVersion = getSchemaVersion(panel);
+  switch (schemaVersion) {
+    case 1:
+      panel.datasources = [panel.datasource];
+      panel.targets[panel.datasources[0]] = panel.triggers;
+      break;
+  }
+
+  return panel;
+}
+
+function getSchemaVersion(panel) {
+  return panel.schemaVersion || 1;
+}

src/panel-triggers/module.js

@@ -19,6 +19,7 @@ import * as utils from '../datasource-zabbix/utils';
 import {PanelCtrl} from 'app/plugins/sdk';
 import {triggerPanelOptionsTab} from './options_tab';
 import {triggerPanelTriggersTab} from './triggers_tab';
+import {migratePanelSchema} from './migrations';
 import './ack-tooltip.directive';
 
 loadPluginCss({
@@ -26,7 +27,16 @@ loadPluginCss({
   light: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.light.css'
 });
 
-var defaultSeverity = [
+const ZABBIX_DS_ID = 'alexanderzobnin-zabbix-datasource';
+
+export const DEFAULT_TARGET = {
+  group: {filter: ""},
+  host: {filter: ""},
+  application: {filter: ""},
+  trigger: {filter: ""}
+};
+
+const defaultSeverity = [
   { priority: 0, severity: 'Not classified',  color: '#B7DBAB', show: true },
   { priority: 1, severity: 'Information',     color: '#82B5D8', show: true },
   { priority: 2, severity: 'Warning',         color: '#E5AC0E', show: true },
@@ -35,7 +45,7 @@ var defaultSeverity = [
   { priority: 5, severity: 'Disaster',        color: '#890F02', show: true }
 ];
 
-var panelDefaults = {
+const panelDefaults = {
   datasources: [],
   triggers: {
     group: {filter: ""},
@@ -64,12 +74,12 @@ var panelDefaults = {
   schemaVersion: 2
 };
 
-var triggerStatusMap = {
+const triggerStatusMap = {
   '0': 'OK',
   '1': 'Problem'
 };
 
-var defaultTimeFormat = "DD MMM YYYY HH:mm:ss";
+const defaultTimeFormat = "DD MMM YYYY HH:mm:ss";
 
 class TriggerPanelCtrl extends PanelCtrl {
 
@@ -81,6 +91,7 @@ class TriggerPanelCtrl extends PanelCtrl {
     this.contextSrv = contextSrv;
     this.dashboardSrv = dashboardSrv;
 
+    this.editorTabIndex = 1;
     this.triggerStatusMap = triggerStatusMap;
     this.defaultTimeFormat = defaultTimeFormat;
     this.pageIndex = 0;
@@ -88,12 +99,16 @@ class TriggerPanelCtrl extends PanelCtrl {
     this.currentTriggersPage = [];
     this.datasources = {};
 
-    this.migratePanelConfig();
-
-    // Load panel defaults
-    // _.cloneDeep() need for prevent changing shared defaultSeverity.
-    // Load object "by value" istead "by reference".
     _.defaults(this.panel, _.cloneDeep(panelDefaults));
+    this.panel = migratePanelSchema(this.panel);
+
+    this.available_datasources = _.map(this.getZabbixDataSources(), 'name');
+    if (this.panel.datasources.length === 0) {
+      this.panel.datasources.push(this.available_datasources[0]);
+    }
+    if (_.isEmpty(this.panel.targets)) {
+      this.panel.targets[this.panel.datasources[0]] = DEFAULT_TARGET;
+    }
 
     this.initDatasources();
     this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
@@ -101,19 +116,34 @@ class TriggerPanelCtrl extends PanelCtrl {
   }
 
   initDatasources() {
-    _.each(this.panel.datasources, (ds) => {
+    let promises = _.map(this.panel.datasources, (ds) => {
       // Load datasource
-      this.datasourceSrv.get(ds)
+      return this.datasourceSrv.get(ds)
       .then(datasource => {
         this.datasources[ds] = datasource;
-        this.datasources[ds].queryBuilder = datasource.queryBuilder;
+        return datasource;
       });
     });
+    return Promise.all(promises);
+  }
+
+  getZabbixDataSources() {
+    return _.filter(this.datasourceSrv.getMetricSources(), datasource => {
+      return datasource.meta.id === ZABBIX_DS_ID && datasource.value;
+    });
   }
 
   onInitEditMode() {
-    this.addEditorTab('Triggers', triggerPanelTriggersTab, 2);
+    this.addEditorTab('Triggers', triggerPanelTriggersTab, 1);
-    this.addEditorTab('Options', triggerPanelOptionsTab, 3);
+    this.addEditorTab('Options', triggerPanelOptionsTab, 2);
+  }
+
+  setTimeQueryStart() {
+    this.timing.queryStart = new Date().getTime();
+  }
+
+  setTimeQueryEnd() {
+    this.timing.queryEnd = new Date().getTime();
   }
 
   onRefresh() {
@@ -123,41 +153,48 @@ class TriggerPanelCtrl extends PanelCtrl {
     // clear loading/error state
     delete this.error;
     this.loading = true;
+    this.setTimeQueryStart();
 
-    return this.refreshData()
+    return this.getTriggers()
     .then(triggerList => {
-      // Limit triggers number
-      this.triggerList  = triggerList.slice(0, this.panel.limit);
-
-      this.getCurrentTriggersPage();
-
       // Notify panel that request is finished
       this.loading = false;
+      this.setTimeQueryEnd();
 
+      // Limit triggers number
+      this.triggerList = triggerList.slice(0, this.panel.limit);
+      this.getCurrentTriggersPage();
       this.render(this.triggerList);
+    })
+    .catch(err => {
+      // if cancelled  keep loading set to true
+      if (err.cancelled) {
+        console.log('Panel request cancelled', err);
+        return;
+      }
+
+      this.loading = false;
+      this.error = err.message || "Request Error";
+
+      if (err.data) {
+        if (err.data.message) {
+          this.error = err.data.message;
+        }
+        if (err.data.error) {
+          this.error = err.data.error;
+        }
+      }
+
+      this.events.emit('data-error', err);
+      console.log('Panel data error:', err);
     });
   }
 
-  refreshData() {
-    return this.getTriggers();
-  }
-
-  migratePanelConfig() {
-    if (!this.panel.datasources || (this.panel.datasource && !this.panel.datasources.length)) {
-      this.panel.datasources = [this.panel.datasource];
-      this.panel.targets[this.panel.datasource] = this.panel.triggers;
-    } else if (_.isEmpty(this.panel.targets)) {
-      this.panel.targets[this.panel.datasources[0]] = this.panel.triggers;
-    }
-  }
-
   getTriggers() {
     let promises = _.map(this.panel.datasources, (ds) => {
       return this.datasourceSrv.get(ds)
       .then(datasource => {
         var zabbix = datasource.zabbix;
-        this.zabbix = zabbix;
-        this.datasource = datasource;
         var showEvents = this.panel.showEvents.value;
         var triggerFilter = this.panel.targets[ds];
         var hideHostsInMaintenance = this.panel.hideHostsInMaintenance;
@@ -182,6 +219,9 @@ class TriggerPanelCtrl extends PanelCtrl {
 
     return Promise.all(promises)
     .then(results => _.flatten(results))
+    .then((triggers) => {
+      return this.sortTriggers(triggers);
+    })
     .then(triggers => {
       return _.map(triggers, this.formatTrigger.bind(this));
     });
@@ -249,13 +289,15 @@ class TriggerPanelCtrl extends PanelCtrl {
       return this.panel.triggerSeverity[trigger.priority].show;
     });
 
-    // Sort triggers
+    return triggerList;
+  }
+
+  sortTriggers(triggerList) {
     if (this.panel.sortTriggersBy.value === 'priority') {
       triggerList = _.sortBy(triggerList, 'priority').reverse();
     } else {
       triggerList = _.sortBy(triggerList, 'lastchangeUnix').reverse();
     }
-
     return triggerList;
   }
 
@@ -341,8 +383,9 @@ class TriggerPanelCtrl extends PanelCtrl {
       let endPos = Math.min(startPos + pageSize, ctrl.triggerList.length);
       ctrl.currentTriggersPage = ctrl.triggerList.slice(startPos, endPos);
 
-      scope.$apply();
+      scope.$apply(() => {
-      renderPanel();
+        renderPanel();
+      });
     }
 
     function appendPaginationControls(footerElem) {
@@ -378,6 +421,7 @@ class TriggerPanelCtrl extends PanelCtrl {
       appendPaginationControls(footerElem);
 
       rootElem.css({'max-height': panel.scroll ? getTableHeight() : '' });
+      ctrl.renderingCompleted();
     }
 
     elem.on('click', '.triggers-panel-page-link', switchPage);
@@ -390,9 +434,10 @@ class TriggerPanelCtrl extends PanelCtrl {
     ctrl.events.on('render', (renderData) => {
       data = renderData || data;
       if (data) {
-        renderPanel();
+        scope.$apply(() => {
+          renderPanel();
+        });
       }
-      ctrl.renderingCompleted();
     });
   }
 }

src/panel-triggers/partials/triggers_tab.html

@@ -2,12 +2,12 @@
   <div class="section gf-form-group">
     <div class="gf-form-inline">
       <div class="gf-form">
-        <label class="gf-form-label width-9">Data sources</label>
+        <label class="gf-form-label width-7">Data sources</label>
       </div>
       <div class="gf-form">
         <datasource-selector
           datasources="editor.panel.datasources"
-          options="editor.available_datasources"
+          options="editor.panelCtrl.available_datasources"
           on-change="editor.datasourcesChanged()">
         </datasource-selector>
       </div>

src/panel-triggers/triggers_tab.js

@@ -2,28 +2,20 @@ import _ from 'lodash';
 import * as utils from '../datasource-zabbix/utils';
 import './datasource-selector.directive';
 import '../datasource-zabbix/css/query-editor.css!';
-
+import {DEFAULT_TARGET} from './module';
-const ZABBIX_DS_ID = 'alexanderzobnin-zabbix-datasource';
-const DEFAULT_TARGET = {
-  group: {filter: ""},
-  host: {filter: ""},
-  application: {filter: ""},
-  trigger: {filter: ""}
-};
 
 class TriggersTabCtrl {
 
   /** @ngInject */
-  constructor($scope, $rootScope, uiSegmentSrv, datasourceSrv, templateSrv) {
+  constructor($scope, $rootScope, uiSegmentSrv, templateSrv) {
     $scope.editor = this;
     this.panelCtrl = $scope.ctrl;
     this.panel = this.panelCtrl.panel;
-    this.datasourceSrv = datasourceSrv;
     this.templateSrv = templateSrv;
+    this.datasources = this.panelCtrl.datasources;
 
     // Load scope defaults
     var scopeDefaults = {
-      datasources: {},
       getGroupNames: {},
       getHostNames: {},
       getApplicationNames: {},
@@ -31,58 +23,48 @@ class TriggersTabCtrl {
     };
     _.defaultsDeep(this, scopeDefaults);
 
-    this.available_datasources = _.map(this.getZabbixDataSources(), 'name');
-    if (!this.panel.datasource) {
-      this.panel.datasource = this.available_datasources[0];
-    }
-
     this.initDatasources();
     this.panelCtrl.refresh();
   }
 
   initDatasources() {
-    _.each(this.panel.datasources, (ds) => {
+    return this.panelCtrl.initDatasources()
-      // Load datasource
+    .then((datasources) => {
-      this.datasourceSrv.get(ds)
+      _.each(datasources, (datasource) => {
-      .then(datasource => {
+        this.bindSuggestionFunctions(datasource);
-        this.panelCtrl.datasources[ds] = datasource;
-        this.datasources[ds] = datasource;
-
-        // Map functions for bs-typeahead
-        this.getGroupNames[ds] = _.bind(this.suggestGroups, this, datasource);
-        this.getHostNames[ds] = _.bind(this.suggestHosts, this, datasource);
-        this.getApplicationNames[ds] = _.bind(this.suggestApps, this, datasource);
       });
     });
   }
 
-  getZabbixDataSources() {
+  bindSuggestionFunctions(datasource) {
-    return _.filter(this.datasourceSrv.getMetricSources(), datasource => {
+    // Map functions for bs-typeahead
-      return datasource.meta.id === ZABBIX_DS_ID && datasource.value;
+    let ds = datasource.name;
-    });
+    this.getGroupNames[ds] = _.bind(this.suggestGroups, this, datasource);
+    this.getHostNames[ds] = _.bind(this.suggestHosts, this, datasource);
+    this.getApplicationNames[ds] = _.bind(this.suggestApps, this, datasource);
   }
 
-  suggestGroups(ds, query, callback) {
+  suggestGroups(datasource, query, callback) {
-    return ds.zabbix.getAllGroups()
+    return datasource.zabbix.getAllGroups()
     .then(groups => {
       return _.map(groups, 'name');
     })
     .then(callback);
   }
 
-  suggestHosts(ds, query, callback) {
+  suggestHosts(datasource, query, callback) {
-    let groupFilter = ds.replaceTemplateVars(this.panel.targets[ds.name].group.filter);
+    let groupFilter = datasource.replaceTemplateVars(this.panel.targets[datasource.name].group.filter);
-    return ds.zabbix.getAllHosts(groupFilter)
+    return datasource.zabbix.getAllHosts(groupFilter)
     .then(hosts => {
       return _.map(hosts, 'name');
     })
     .then(callback);
   }
 
-  suggestApps(ds, query, callback) {
+  suggestApps(datasource, query, callback) {
-    let groupFilter = ds.replaceTemplateVars(this.panel.targets[ds.name].group.filter);
+    let groupFilter = datasource.replaceTemplateVars(this.panel.targets[datasource.name].group.filter);
-    let hostFilter = ds.replaceTemplateVars(this.panel.targets[ds.name].host.filter);
+    let hostFilter = datasource.replaceTemplateVars(this.panel.targets[datasource.name].host.filter);
-    return ds.zabbix.getAllApps(groupFilter, hostFilter)
+    return datasource.zabbix.getAllApps(groupFilter, hostFilter)
     .then(apps => {
       return _.map(apps, 'name');
     })
@@ -99,12 +81,14 @@ class TriggersTabCtrl {
   }
 
   parseTarget() {
-    this.initDatasources();
+    this.initDatasources()
-    var newTarget = _.cloneDeep(this.panel.targets);
+    .then(() => {
-    if (!_.isEqual(this.oldTarget, newTarget)) {
+      var newTarget = _.cloneDeep(this.panel.targets);
-      this.oldTarget = newTarget;
+      if (!_.isEqual(this.oldTarget, newTarget)) {
-    }
+        this.oldTarget = newTarget;
-    this.panelCtrl.refresh();
+      }
+      this.panelCtrl.refresh();
+    });
   }
 
   isRegex(str) {