Multiple data sources support for triggers panel, #431

src/panel-triggers/datasource-selector.directive.js

@@ -32,7 +32,7 @@ class DatasourceSelectorCtrl {
       multi: true,
       current: {value: datasources, text: datasources.join(" + ")},
       options: _.map(options, (ds) => {
-        return {text: ds, value: ds};
+        return {text: ds, value: ds, selected: _.includes(datasources, ds)};
       })
     };
   }

src/panel-triggers/editor.js

@@ -1,188 +0,0 @@
-/**
- * Grafana-Zabbix
- * Zabbix plugin for Grafana.
- * http://github.com/alexanderzobnin/grafana-zabbix
- *
- * Trigger panel.
- * This feature sponsored by CORE IT
- * http://www.coreit.fr
- *
- * Copyright 2015 Alexander Zobnin alexanderzobnin@gmail.com
- * Licensed under the Apache License, Version 2.0
- */
-
-import _ from 'lodash';
-import * as utils from '../datasource-zabbix/utils';
-
-import '../datasource-zabbix/css/query-editor.css!';
-
-class TriggerPanelEditorCtrl {
-
-  /** @ngInject */
-  constructor($scope, $rootScope, uiSegmentSrv, datasourceSrv, templateSrv, popoverSrv) {
-    $scope.editor = this;
-    this.panelCtrl = $scope.ctrl;
-    this.panel = this.panelCtrl.panel;
-
-    this.datasourceSrv = datasourceSrv;
-    this.templateSrv = templateSrv;
-    this.popoverSrv = popoverSrv;
-
-    // Map functions for bs-typeahead
-    this.getGroupNames = _.partial(getMetricNames, this, 'groupList');
-    this.getHostNames = _.partial(getMetricNames, this, 'hostList');
-    this.getApplicationNames = _.partial(getMetricNames, this, 'appList');
-
-    // Update metric suggestion when template variable was changed
-    $rootScope.$on('template-variable-value-updated', () => this.onVariableChange());
-
-    this.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%'];
-    this.ackFilters = [
-      'all triggers',
-      'unacknowledged',
-      'acknowledged'
-    ];
-    this.sortByFields = [
-      { text: 'last change',  value: 'lastchange' },
-      { text: 'severity',     value: 'priority' }
-    ];
-    this.showEventsFields = [
-      { text: 'All',     value: [0,1] },
-      { text: 'OK',      value: [0] },
-      { text: 'Problems', value: 1 }
-    ];
-
-    // Load scope defaults
-    var scopeDefaults = {
-      metric: {},
-      inputStyles: {},
-      oldTarget: _.cloneDeep(this.panel.triggers)
-    };
-    _.defaults(this, scopeDefaults);
-
-    // Set default datasource
-    this.datasources = _.map(this.getZabbixDataSources(), 'name');
-    if (!this.panel.datasource) {
-      this.panel.datasource = this.datasources[0];
-    }
-    // Load datasource
-    this.datasourceSrv.get(this.panel.datasource)
-    .then(datasource => {
-      this.datasource = datasource;
-      this.zabbix = datasource.zabbix;
-      this.queryBuilder = datasource.queryBuilder;
-      this.initFilters();
-      this.panelCtrl.refresh();
-    });
-  }
-
-  initFilters() {
-    return Promise.all([
-      this.suggestGroups(),
-      this.suggestHosts(),
-      this.suggestApps()
-    ]);
-  }
-
-  suggestGroups() {
-    return this.zabbix.getAllGroups()
-    .then(groups => {
-      this.metric.groupList = groups;
-      return groups;
-    });
-  }
-
-  suggestHosts() {
-    let groupFilter = this.datasource.replaceTemplateVars(this.panel.triggers.group.filter);
-    return this.zabbix.getAllHosts(groupFilter)
-    .then(hosts => {
-      this.metric.hostList = hosts;
-      return hosts;
-    });
-  }
-
-  suggestApps() {
-    let groupFilter = this.datasource.replaceTemplateVars(this.panel.triggers.group.filter);
-    let hostFilter = this.datasource.replaceTemplateVars(this.panel.triggers.host.filter);
-    return this.zabbix.getAllApps(groupFilter, hostFilter)
-    .then(apps => {
-      this.metric.appList = apps;
-      return apps;
-    });
-  }
-
-  onVariableChange() {
-    if (this.isContainsVariables()) {
-      this.targetChanged();
-    }
-  }
-
-  /**
-   * Check query for template variables
-   */
-  isContainsVariables() {
-    return _.some(['group', 'host', 'application'], field => {
-      return utils.isTemplateVariable(this.panel.triggers[field].filter, this.templateSrv.variables);
-    });
-  }
-
-  targetChanged() {
-    this.initFilters();
-    this.panelCtrl.refresh();
-  }
-
-  parseTarget() {
-    this.initFilters();
-    var newTarget = _.cloneDeep(this.panel.triggers);
-    if (!_.isEqual(this.oldTarget, this.panel.triggers)) {
-      this.oldTarget = newTarget;
-      this.panelCtrl.refresh();
-    }
-  }
-
-  refreshTriggerSeverity() {
-    _.each(this.triggerList, function(trigger) {
-      trigger.color = this.panel.triggerSeverity[trigger.priority].color;
-      trigger.severity = this.panel.triggerSeverity[trigger.priority].severity;
-    });
-    this.panelCtrl.refresh();
-  }
-
-  datasourceChanged() {
-    this.panelCtrl.refresh();
-  }
-
-  changeTriggerSeverityColor(trigger, color) {
-    this.panel.triggerSeverity[trigger.priority].color = color;
-    this.refreshTriggerSeverity();
-  }
-
-  isRegex(str) {
-    return utils.isRegex(str);
-  }
-
-  isVariable(str) {
-    return utils.isTemplateVariable(str, this.templateSrv.variables);
-  }
-
-  getZabbixDataSources() {
-    let ZABBIX_DS_ID = 'alexanderzobnin-zabbix-datasource';
-    return _.filter(this.datasourceSrv.getMetricSources(), datasource => {
-      return datasource.meta.id === ZABBIX_DS_ID && datasource.value;
-    });
-  }
-}
-
-// Get list of metric names for bs-typeahead directive
-function getMetricNames(scope, metricList) {
-  return _.uniq(_.map(scope.metric[metricList], 'name'));
-}
-
-export function triggerPanelEditor() {
-  return {
-    restrict: 'E',
-    scope: true,
-    templateUrl: 'public/plugins/alexanderzobnin-zabbix-app/panel-triggers/editor.html',
-    controller: TriggerPanelEditorCtrl,
-  };
-}

src/panel-triggers/module.js

@@ -17,7 +17,8 @@ import moment from 'moment';
 import {loadPluginCss} from 'app/plugins/sdk';
 import * as utils from '../datasource-zabbix/utils';
 import {PanelCtrl} from 'app/plugins/sdk';
-import {triggerPanelEditor} from './editor';
+import {triggerPanelOptionsTab} from './options_tab';
+import {triggerPanelTriggersTab} from './triggers_tab';
 import './ack-tooltip.directive';
 
 loadPluginCss({
@@ -35,13 +36,14 @@ var defaultSeverity = [
 ];
 
 var panelDefaults = {
-  datasource: null,
+  datasources: [],
   triggers: {
     group: {filter: ""},
     host: {filter: ""},
     application: {filter: ""},
     trigger: {filter: ""}
   },
+  targets: {},
   hostField: true,
   statusField: false,
   severityField: false,
@@ -59,6 +61,7 @@ var panelDefaults = {
   scroll: true,
   pageSize: 10,
   fontSize: '100%',
+  schemaVersion: 2
 };
 
 var triggerStatusMap = {
@@ -83,18 +86,34 @@ class TriggerPanelCtrl extends PanelCtrl {
     this.pageIndex = 0;
     this.triggerList = [];
     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.initDatasources();
     this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
     this.events.on('refresh', this.onRefresh.bind(this));
   }
 
+  initDatasources() {
+    _.each(this.panel.datasources, (ds) => {
+      // Load datasource
+      this.datasourceSrv.get(ds)
+      .then(datasource => {
+        this.datasources[ds] = datasource;
+        this.datasources[ds].queryBuilder = datasource.queryBuilder;
+      });
+    });
+  }
+
   onInitEditMode() {
-    this.addEditorTab('Options', triggerPanelEditor, 2);
+    this.addEditorTab('Triggers', triggerPanelTriggersTab, 2);
+    this.addEditorTab('Options', triggerPanelOptionsTab, 3);
   }
 
   onRefresh() {
@@ -120,45 +139,61 @@ class TriggerPanelCtrl extends PanelCtrl {
   }
 
   refreshData() {
-    return this.getTriggers()
-    .then(this.getAcknowledges.bind(this))
-    .then(this.filterTriggers.bind(this));
+    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() {
-    return this.datasourceSrv.get(this.panel.datasource)
-    .then(datasource => {
-      var zabbix = datasource.zabbix;
-      this.zabbix = zabbix;
-      this.datasource = datasource;
-      var showEvents = this.panel.showEvents.value;
-      var triggerFilter = this.panel.triggers;
-      var hideHostsInMaintenance = this.panel.hideHostsInMaintenance;
+    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;
 
-      // Replace template variables
-      var groupFilter = datasource.replaceTemplateVars(triggerFilter.group.filter);
-      var hostFilter = datasource.replaceTemplateVars(triggerFilter.host.filter);
-      var appFilter = datasource.replaceTemplateVars(triggerFilter.application.filter);
+        // Replace template variables
+        var groupFilter = datasource.replaceTemplateVars(triggerFilter.group.filter);
+        var hostFilter = datasource.replaceTemplateVars(triggerFilter.host.filter);
+        var appFilter = datasource.replaceTemplateVars(triggerFilter.application.filter);
 
-      let triggersOptions = {
-        showTriggers: showEvents,
-        hideHostsInMaintenance: hideHostsInMaintenance
-      };
+        let triggersOptions = {
+          showTriggers: showEvents,
+          hideHostsInMaintenance: hideHostsInMaintenance
+        };
 
-      return zabbix.getTriggers(groupFilter, hostFilter, appFilter, triggersOptions);
-    })
+        return zabbix.getTriggers(groupFilter, hostFilter, appFilter, triggersOptions);
+      }).then((triggers) => {
+        return this.getAcknowledges(triggers, ds);
+      }).then((triggers) => {
+        return this.filterTriggers(triggers, ds);
+      });
+    });
+
+    return Promise.all(promises)
+    .then(results => _.flatten(results))
     .then(triggers => {
       return _.map(triggers, this.formatTrigger.bind(this));
     });
   }
 
-  getAcknowledges(triggerList) {
+  getAcknowledges(triggerList, ds) {
     // Request acknowledges for trigger
     var eventids = _.map(triggerList, trigger => {
       return trigger.lastEvent.eventid;
     });
 
-    return this.zabbix.getAcknowledges(eventids)
+    return this.datasources[ds].zabbix.getAcknowledges(eventids)
     .then(events => {
 
       // Map events to triggers
@@ -190,10 +225,10 @@ class TriggerPanelCtrl extends PanelCtrl {
     });
   }
 
-  filterTriggers(triggerList) {
+  filterTriggers(triggerList, ds) {
     // Filter triggers by description
-    var triggerFilter = this.panel.triggers.trigger.filter;
-    triggerFilter = this.datasource.replaceTemplateVars(triggerFilter);
+    var triggerFilter = this.panel.targets[ds].trigger.filter;
+    triggerFilter = this.datasources[ds].replaceTemplateVars(triggerFilter);
     if (triggerFilter) {
       triggerList = filterTriggers(triggerList, triggerFilter);
     }

src/panel-triggers/options_tab.js

@@ -0,0 +1,65 @@
+/**
+ * Grafana-Zabbix
+ * Zabbix plugin for Grafana.
+ * http://github.com/alexanderzobnin/grafana-zabbix
+ *
+ * Trigger panel.
+ * This feature sponsored by CORE IT
+ * http://www.coreit.fr
+ *
+ * Copyright 2015 Alexander Zobnin alexanderzobnin@gmail.com
+ * Licensed under the Apache License, Version 2.0
+ */
+
+import _ from 'lodash';
+import './datasource-selector.directive';
+
+import '../datasource-zabbix/css/query-editor.css!';
+
+class TriggerPanelOptionsCtrl {
+
+  /** @ngInject */
+  constructor($scope) {
+    $scope.editor = this;
+    this.panelCtrl = $scope.ctrl;
+    this.panel = this.panelCtrl.panel;
+
+    this.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%'];
+    this.ackFilters = [
+      'all triggers',
+      'unacknowledged',
+      'acknowledged'
+    ];
+    this.sortByFields = [
+      { text: 'last change',  value: 'lastchange' },
+      { text: 'severity',     value: 'priority' }
+    ];
+    this.showEventsFields = [
+      { text: 'All',     value: [0,1] },
+      { text: 'OK',      value: [0] },
+      { text: 'Problems', value: 1 }
+    ];
+  }
+
+  refreshTriggerSeverity() {
+    _.each(this.triggerList, function(trigger) {
+      trigger.color = this.panel.triggerSeverity[trigger.priority].color;
+      trigger.severity = this.panel.triggerSeverity[trigger.priority].severity;
+    });
+    this.panelCtrl.refresh();
+  }
+
+  changeTriggerSeverityColor(trigger, color) {
+    this.panel.triggerSeverity[trigger.priority].color = color;
+    this.refreshTriggerSeverity();
+  }
+}
+
+export function triggerPanelOptionsTab() {
+  return {
+    restrict: 'E',
+    scope: true,
+    templateUrl: 'public/plugins/alexanderzobnin-zabbix-app/panel-triggers/partials/options_tab.html',
+    controller: TriggerPanelOptionsCtrl,
+  };
+}

src/panel-triggers/partials/options_tab.html

@@ -1,85 +1,3 @@
-<div class="editor-row">
-  <div class="section gf-form-group">
-    <h5 class="section-heading">Select triggers</h5>
-    <div class="gf-form-inline">
-      <div class="gf-form max-width-20">
-        <label class="gf-form-label query-keyword width-7">Group</label>
-        <input type="text"
-          ng-model="editor.panel.triggers.group.filter"
-          bs-typeahead="editor.getGroupNames"
-          ng-blur="editor.parseTarget()"
-          data-min-length=0
-          data-items=100
-          class="gf-form-input"
-          ng-class="{
-            'zbx-variable': editor.isVariable(editor.panel.triggers.group.filter),
-            'zbx-regex': editor.isRegex(editor.panel.triggers.group.filter)
-          }">
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label query-keyword width-7">Host</label>
-        <input type="text"
-          ng-model="editor.panel.triggers.host.filter"
-          bs-typeahead="editor.getHostNames"
-          ng-blur="editor.parseTarget()"
-          data-min-length=0
-          data-items=100
-          class="gf-form-input"
-          ng-class="{
-            'zbx-variable': editor.isVariable(editor.panel.triggers.host.filter),
-            'zbx-regex': editor.isRegex(editor.panel.triggers.host.filter)
-          }">
-      </div>
-    </div>
-
-    <div class="gf-form-inline">
-      <div class="gf-form max-width-20">
-        <label class="gf-form-label query-keyword width-7">Application</label>
-        <input type="text"
-          ng-model="editor.panel.triggers.application.filter"
-          bs-typeahead="editor.getApplicationNames"
-          ng-blur="editor.parseTarget()"
-          data-min-length=0
-          data-items=100
-          class="gf-form-input"
-          ng-class="{
-            'zbx-variable': editor.isVariable(editor.panel.triggers.application.filter),
-            'zbx-regex': editor.isRegex(editor.panel.triggers.application.filter)
-          }">
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label query-keyword width-7">Trigger</label>
-        <input type="text"
-          ng-model="editor.panel.triggers.trigger.filter"
-          ng-blur="editor.parseTarget()"
-          placeholder="trigger name"
-          class="gf-form-input"
-          ng-style="editor.panel.triggers.trigger.style"
-          ng-class="{
-            'zbx-variable': editor.isVariable(editor.panel.triggers.trigger.filter),
-            'zbx-regex': editor.isRegex(editor.panel.triggers.trigger.filter)
-          }"
-          empty-to-null>
-      </div>
-    </div>
-  </div>
-
-  <div class="section gf-form-group">
-    <h5 class="section-heading">Data source</h5>
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <div class="gf-form-select-wrapper">
-          <select class="gf-form-input"
-            ng-model="editor.panel.datasource"
-            ng-options="ds for ds in editor.datasources"
-            ng-change="editor.datasourceChanged()">
-          </select>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
 <div class="editor-row">
   <div class="section gf-form-group">
     <h5 class="section-heading">Options</h5>

src/panel-triggers/partials/triggers_tab.html

@@ -0,0 +1,83 @@
+<div class="editor-row">
+  <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>
+      </div>
+      <div class="gf-form">
+        <datasource-selector
+          datasources="editor.panel.datasources"
+          options="editor.available_datasources"
+          on-change="editor.datasourcesChanged()">
+        </datasource-selector>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="editor-row" ng-repeat="ds in editor.panel.datasources">
+  <div class="section gf-form-group">
+    <h5 class="section-heading">{{ ds }}</h5>
+    <div class="gf-form-inline">
+      <div class="gf-form max-width-20">
+        <label class="gf-form-label query-keyword width-7">Group</label>
+        <input type="text"
+          ng-model="editor.panel.targets[ds].group.filter"
+          bs-typeahead="editor.getGroupNames[ds]"
+          ng-blur="editor.parseTarget()"
+          data-min-length=0
+          data-items=100
+          class="gf-form-input"
+          ng-class="{
+            'zbx-variable': editor.isVariable(editor.panel.targets[ds].group.filter),
+            'zbx-regex': editor.isRegex(editor.panel.targets[ds].group.filter)
+          }">
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-7">Host</label>
+        <input type="text"
+          ng-model="editor.panel.targets[ds].host.filter"
+          bs-typeahead="editor.getHostNames[ds]"
+          ng-blur="editor.parseTarget()"
+          data-min-length=0
+          data-items=100
+          class="gf-form-input"
+          ng-class="{
+            'zbx-variable': editor.isVariable(editor.panel.targets[ds].host.filter),
+            'zbx-regex': editor.isRegex(editor.panel.targets[ds].host.filter)
+          }">
+      </div>
+    </div>
+
+    <div class="gf-form-inline">
+      <div class="gf-form max-width-20">
+        <label class="gf-form-label query-keyword width-7">Application</label>
+        <input type="text"
+          ng-model="editor.panel.targets[ds].application.filter"
+          bs-typeahead="editor.getApplicationNames[ds]"
+          ng-blur="editor.parseTarget()"
+          data-min-length=0
+          data-items=100
+          class="gf-form-input"
+          ng-class="{
+            'zbx-variable': editor.isVariable(editor.panel.targets[ds].application.filter),
+            'zbx-regex': editor.isRegex(editor.panel.targets[ds].application.filter)
+          }">
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-7">Trigger</label>
+        <input type="text"
+          ng-model="editor.panel.targets[ds].trigger.filter"
+          ng-blur="editor.parseTarget()"
+          placeholder="trigger name"
+          class="gf-form-input"
+          ng-style="editor.panel.targets[ds].trigger.style"
+          ng-class="{
+            'zbx-variable': editor.isVariable(editor.panel.targets[ds].trigger.filter),
+            'zbx-regex': editor.isRegex(editor.panel.targets[ds].trigger.filter)
+          }"
+          empty-to-null>
+      </div>
+    </div>
+  </div>
+</div>

src/panel-triggers/triggers_tab.js

@@ -0,0 +1,126 @@
+import _ from 'lodash';
+import * as utils from '../datasource-zabbix/utils';
+import './datasource-selector.directive';
+import '../datasource-zabbix/css/query-editor.css!';
+
+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) {
+    $scope.editor = this;
+    this.panelCtrl = $scope.ctrl;
+    this.panel = this.panelCtrl.panel;
+    this.datasourceSrv = datasourceSrv;
+    this.templateSrv = templateSrv;
+
+    // Load scope defaults
+    var scopeDefaults = {
+      datasources: {},
+      getGroupNames: {},
+      getHostNames: {},
+      getApplicationNames: {},
+      oldTarget: _.cloneDeep(this.panel.targets)
+    };
+    _.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) => {
+      // Load datasource
+      this.datasourceSrv.get(ds)
+      .then(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() {
+    return _.filter(this.datasourceSrv.getMetricSources(), datasource => {
+      return datasource.meta.id === ZABBIX_DS_ID && datasource.value;
+    });
+  }
+
+  suggestGroups(ds, query, callback) {
+    return ds.zabbix.getAllGroups()
+    .then(groups => {
+      return _.map(groups, 'name');
+    })
+    .then(callback);
+  }
+
+  suggestHosts(ds, query, callback) {
+    let groupFilter = ds.replaceTemplateVars(this.panel.targets[ds.name].group.filter);
+    return ds.zabbix.getAllHosts(groupFilter)
+    .then(hosts => {
+      return _.map(hosts, 'name');
+    })
+    .then(callback);
+  }
+
+  suggestApps(ds, query, callback) {
+    let groupFilter = ds.replaceTemplateVars(this.panel.targets[ds.name].group.filter);
+    let hostFilter = ds.replaceTemplateVars(this.panel.targets[ds.name].host.filter);
+    return ds.zabbix.getAllApps(groupFilter, hostFilter)
+    .then(apps => {
+      return _.map(apps, 'name');
+    })
+    .then(callback);
+  }
+
+  datasourcesChanged() {
+    _.each(this.panel.datasources, (ds) => {
+      if (!this.panel.targets[ds]) {
+        this.panel.targets[ds] = DEFAULT_TARGET;
+      }
+    });
+    this.parseTarget();
+  }
+
+  parseTarget() {
+    this.initDatasources();
+    var newTarget = _.cloneDeep(this.panel.targets);
+    if (!_.isEqual(this.oldTarget, newTarget)) {
+      this.oldTarget = newTarget;
+    }
+    this.panelCtrl.refresh();
+  }
+
+  isRegex(str) {
+    return utils.isRegex(str);
+  }
+
+  isVariable(str) {
+    return utils.isTemplateVariable(str, this.templateSrv.variables);
+  }
+}
+
+export function triggerPanelTriggersTab() {
+  return {
+    restrict: 'E',
+    scope: true,
+    templateUrl: 'public/plugins/alexanderzobnin-zabbix-app/panel-triggers/partials/triggers_tab.html',
+    controller: TriggersTabCtrl,
+  };
+}