From 637cf4c63d30b1bd5228300f907755c640b57f87 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Sun, 14 Feb 2016 18:04:30 +0300
Subject: [PATCH] Iss #152 - fixed trigger panel (used new plugin API).

---
 plugins/panel-triggers/editor.html | 162 +++++++-------
 plugins/panel-triggers/editor.js   | 205 ++++++++++++++++++
 plugins/panel-triggers/module.html | 264 +++++++++++------------
 plugins/panel-triggers/module.js   | 335 +++++++----------------------
 4 files changed, 496 insertions(+), 470 deletions(-)
 create mode 100644 plugins/panel-triggers/editor.js

diff --git a/plugins/panel-triggers/editor.html b/plugins/panel-triggers/editor.html
index 1bb0e3b..9a0c00c 100644
--- a/plugins/panel-triggers/editor.html
+++ b/plugins/panel-triggers/editor.html
@@ -8,28 +8,28 @@
         </li>
         <li>
           <input type="text"
-            ng-model="panel.triggers.group.filter"
-            bs-typeahead="getGroupNames"
-            ng-change="onTargetPartChange(panel.triggers.group)"
-            ng-blur="parseTarget()"
+            ng-model="editor.panel.triggers.group.filter"
+            bs-typeahead="editor.getGroupNames"
+            ng-change="editor.onTargetPartChange(editor.panel.triggers.group)"
+            ng-blur="editor.parseTarget()"
             data-min-length=0
             data-items=100
             class="input-large tight-form-input"
-            ng-style="panel.triggers.group.style">
+            ng-style="editor.panel.triggers.group.style">
         </li>
         <li class="tight-form-item" style="width: 50px">
           Host
         </li>
         <li>
           <input type="text"
-            ng-model="panel.triggers.host.filter"
-            bs-typeahead="getHostNames"
-            ng-change="onTargetPartChange(panel.triggers.host)"
-            ng-blur="parseTarget()"
+            ng-model="editor.panel.triggers.host.filter"
+            bs-typeahead="editor.getHostNames"
+            ng-change="editor.onTargetPartChange(editor.panel.triggers.host)"
+            ng-blur="editor.parseTarget()"
             data-min-length=0
             data-items=100
             class="input-large tight-form-input last"
-            ng-style="panel.triggers.host.style">
+            ng-style="editor.panel.triggers.host.style">
         </li>
       </ul>
       <div class="clearfix"></div>
@@ -41,26 +41,26 @@
         </li>
         <li>
           <input type="text"
-            ng-model="panel.triggers.application.filter"
-            bs-typeahead="getApplicationNames"
-            ng-change="onTargetPartChange(panel.triggers.application)"
-            ng-blur="parseTarget()"
+            ng-model="editor.panel.triggers.application.filter"
+            bs-typeahead="editor.getApplicationNames"
+            ng-change="editor.onTargetPartChange(editor.panel.triggers.application)"
+            ng-blur="editor.parseTarget()"
             data-min-length=0
             data-items=100
             class="input-large tight-form-input"
-            ng-style="panel.triggers.application.style">
+            ng-style="editor.panel.triggers.application.style">
         </li>
         <li class="tight-form-item" style="width: 50px">
           Trigger
         </li>
         <li>
           <input  type="text"
-                  ng-model="panel.triggers.trigger.filter"
-                  ng-change="onTargetPartChange(panel.triggers.trigger)"
-                  ng-blur="parseTarget()"
+                  ng-model="editor.panel.triggers.trigger.filter"
+                  ng-change="editor.onTargetPartChange(editor.panel.triggers.trigger)"
+                  ng-blur="editor.parseTarget()"
                   placeholder="trigger name"
                   class="input-large tight-form-input last"
-                  ng-style="panel.triggers.trigger.style"
+                  ng-style="editor.panel.triggers.trigger.style"
                   empty-to-null>
         </li>
       </ul>
@@ -74,9 +74,9 @@
         <ul class="tight-form-list">
           <li>
             <select class="tight-form-input input-large last"
-                    ng-model="panel.datasource"
-                    ng-options="ds for ds in datasources"
-                    ng-change="datasourceChanged()">
+                    ng-model="editor.panel.datasource"
+                    ng-options="ds for ds in editor.datasources"
+                    ng-change="editor.datasourceChanged()">
             </select>
           </li>
         </ul>
@@ -96,9 +96,9 @@
           </li>
           <li>
             <select class="input-medium tight-form-input"
-                    ng-model="panel.showTriggers"
-                    ng-options="f for f in ackFilters"
-                    ng-change="get_data()">
+                    ng-model="editor.panel.showTriggers"
+                    ng-options="f for f in editor.ackFilters"
+                    ng-change="editor.panelCtrl.refreshData()">
             </select>
           </li>
           <li class="tight-form-item" style="width: 13em">
@@ -107,9 +107,9 @@
           <li>
             <input  class="input-small tight-form-input"
                     type="number"
-                    ng-model="panel.limit"
+                    ng-model="editor.panel.limit"
                     ng-model-onblur
-                    ng-change="get_data()">
+                    ng-change="editor.panelCtrl.refreshData()">
           </li>
         </ul>
         <div class="clearfix"></div>
@@ -121,9 +121,9 @@
           </li>
           <li>
             <select class="input-medium tight-form-input"
-                    ng-model="panel.sortTriggersBy"
-                    ng-options="f.text for f in sortByFields track by f.value"
-                    ng-change="get_data()">
+                    ng-model="editor.panel.sortTriggersBy"
+                    ng-options="f.text for f in editor.sortByFields track by f.value"
+                    ng-change="editor.panelCtrl.refreshData()">
             </select>
           </li>
           <li class="tight-form-item" style="width: 13em">
@@ -131,9 +131,9 @@
           </li>
           <li>
             <select class="tight-form-input input-medium"
-                    ng-model="panel.showEvents"
-                    ng-options="f.text for f in showEventsFields track by f.value"
-                    ng-change="get_data()">
+                    ng-model="editor.panel.showEvents"
+                    ng-options="f.text for f in editor.showEventsFields track by f.value"
+                    ng-change="editor.panelCtrl.refreshData()">
             </select>
           </li>
         </ul>
@@ -145,58 +145,58 @@
             <strong>Show fields</strong>
           </li>
           <li class="tight-form-item">
-            <label class="checkbox-label" for="panel.hostField">Host</label>
+            <label class="checkbox-label" for="hostField">Host</label>
             <input  class="cr1"
-                    id="panel.hostField"
+                    id="hostField"
                     type="checkbox"
-                    ng-model="panel.hostField"
-                    ng-checked="panel.hostField">
-            <label for="panel.hostField" class="cr1"></label>
+                    ng-model="editor.panel.hostField"
+                    ng-checked="editor.panel.hostField">
+            <label for="hostField" class="cr1"></label>
           </li>
           <li class="tight-form-item">
-            <label class="checkbox-label" for="panel.severityField">Status</label>
+            <label class="checkbox-label" for="statusField">Status</label>
             <input  class="cr1"
-                    id="panel.statusField"
+                    id="statusField"
                     type="checkbox"
-                    ng-model="panel.statusField"
-                    ng-checked="panel.statusField">
-            <label for="panel.statusField" class="cr1"></label>
+                    ng-model="editor.panel.statusField"
+                    ng-checked="editor.panel.statusField">
+            <label for="statusField" class="cr1"></label>
           </li>
           <li class="tight-form-item">
-            <label class="checkbox-label" for="panel.severityField">Severity</label>
+            <label class="checkbox-label" for="severityField">Severity</label>
             <input  class="cr1"
-                    id="panel.severityField"
+                    id="severityField"
                     type="checkbox"
-                    ng-model="panel.severityField"
-                    ng-checked="panel.severityField">
-            <label for="panel.severityField" class="cr1"></label>
+                    ng-model="editor.panel.severityField"
+                    ng-checked="editor.panel.severityField">
+            <label for="severityField" class="cr1"></label>
           </li>
           <li class="tight-form-item">
-            <label class="checkbox-label" for="panel.lastChangeField">Last change</label>
+            <label class="checkbox-label" for="lastChangeField">Last change</label>
             <input  class="cr1"
-                    id="panel.lastChangeField"
+                    id="lastChangeField"
                     type="checkbox"
-                    ng-model="panel.lastChangeField"
-                    ng-checked="panel.lastChangeField">
-            <label for="panel.lastChangeField" class="cr1"></label>
+                    ng-model="editor.panel.lastChangeField"
+                    ng-checked="editor.panel.lastChangeField">
+            <label for="lastChangeField" class="cr1"></label>
           </li>
           <li class="tight-form-item">
-            <label class="checkbox-label" for="panel.ageField">Age</label>
+            <label class="checkbox-label" for="ageField">Age</label>
             <input  class="cr1"
-                    id="panel.ageField"
+                    id="ageField"
                     type="checkbox"
-                    ng-model="panel.ageField"
-                    ng-checked="panel.ageField">
-            <label for="panel.ageField" class="cr1"></label>
+                    ng-model="editor.panel.ageField"
+                    ng-checked="editor.panel.ageField">
+            <label for="ageField" class="cr1"></label>
           </li>
           <li class="tight-form-item last">
-            <label class="checkbox-label" for="panel.infoField">Info</label>
+            <label class="checkbox-label" for="infoField">Info</label>
             <input  class="cr1"
-                    id="panel.infoField"
+                    id="infoField"
                     type="checkbox"
-                    ng-model="panel.infoField"
-                    ng-checked="panel.infoField">
-            <label for="panel.infoField" class="cr1"></label>
+                    ng-model="editor.panel.infoField"
+                    ng-checked="editor.panel.infoField">
+            <label for="infoField" class="cr1"></label>
           </li>
         </ul>
         <div class="clearfix"></div>
@@ -205,25 +205,25 @@
         <ul class="tight-form-list">
           <li class="tight-form-item">
             <strong>Custom Last change format</strong>
-            <label class="checkbox-label" for="panel.customLastChangeFormat">&nbsp;</label>
+            <label class="checkbox-label" for="customLastChangeFormat">&nbsp;</label>
             <input  class="cr1"
-                    id="panel.customLastChangeFormat"
+                    id="customLastChangeFormat"
                     type="checkbox"
-                    ng-change="get_data()"
-                    ng-model="panel.customLastChangeFormat"
-                    ng-checked="panel.customLastChangeFormat">
-            <label for="panel.customLastChangeFormat" class="cr1"></label>
+                    ng-change="editor.panelCtrl.refreshData()"
+                    ng-model="editor.panel.customLastChangeFormat"
+                    ng-checked="editor.panel.customLastChangeFormat">
+            <label for="customLastChangeFormat" class="cr1"></label>
           </li>
-          <li ng-if="panel.customLastChangeFormat">
+          <li ng-if="editor.panel.customLastChangeFormat">
             <input  type="text"
-                    ng-model="panel.lastChangeFormat"
-                    ng-blur="get_data()"
+                    ng-model="editor.panel.lastChangeFormat"
+                    ng-blur="editor.panelCtrl.refreshData()"
                     placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
                     class="tight-form-input"
                     style="width: 300px"
                     empty-to-null>
           </li>
-          <li class="tight-form-item last" ng-if="panel.customLastChangeFormat">
+          <li class="tight-form-item last" ng-if="editor.panel.customLastChangeFormat">
             <a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
               <i class="fa fa-question-circle"
                  bs-tooltip="'See moment.js dosc for time format.'">
@@ -237,8 +237,7 @@
   </div>
   <div class="section">
     <h5>Customize triggers severity and colors</h5>
-    <div class="tight-form"
-         ng-repeat="trigger in panel.triggerSeverity">
+    <div class="tight-form" ng-repeat="trigger in editor.panel.triggerSeverity">
       <ul class="tight-form-list">
         <li class="tight-form-item" style="width: 10px">
           {{ trigger.priority }}
@@ -251,10 +250,10 @@
                   style="color: white"
                   ng-style="{background: trigger.color}"
                   ng-model-onblur
-                  ng-change="get_data()">
+                  ng-change="editor.panelCtrl.refreshData()">
         </li>
         <li class="tight-form-item">
-          <spectrum-picker ng-model="trigger.color" ng-change="get_data()"></spectrum-picker>
+          <spectrum-picker ng-model="trigger.color" ng-change="editor.panelCtrl.refreshData()"></spectrum-picker>
         </li>
         <li class="tight-form-item last" style="width: 28px">
           <label class="checkbox-label" for="{{ 'trigger-show-' + $index }}"></label>
@@ -263,7 +262,7 @@
                     type="checkbox"
                     ng-model="trigger.show"
                     ng-checked="trigger.show"
-                    ng-change="get_data()">
+                    ng-change="editor.panelCtrl.refreshData()">
             <label for="{{ 'trigger-show-' + $index }}" class="cr1"></label>
         </li>
       </ul>
@@ -272,12 +271,15 @@
     <div class="tight-form last">
       <ul class="tight-form-list">
         <li class="tight-form-item"
-            ng-style="{background:panel.okEventColor}"
+            ng-style="{background:editor.panel.okEventColor}"
             style="width: 160px; color: white">
           <span style="padding-left: 25px"> OK event color </span>
         </li>
         <li class="tight-form-item">
-          <spectrum-picker ng-model="panel.okEventColor" ng-change="get_data()"></spectrum-picker>
+          <spectrum-picker
+            ng-model="editor.panel.okEventColor"
+            ng-change="editor.panelCtrl.refreshData()">
+          </spectrum-picker>
         </li>
       </ul>
       <div class="clearfix"></div>
diff --git a/plugins/panel-triggers/editor.js b/plugins/panel-triggers/editor.js
new file mode 100644
index 0000000..55c77a7
--- /dev/null
+++ b/plugins/panel-triggers/editor.js
@@ -0,0 +1,205 @@
+/**
+ * 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
+ */
+
+define([
+  'angular',
+  'lodash',
+  'jquery'
+],
+function (angular, _, $) {
+  'use strict';
+
+  function TriggerPanelEditorCtrl($scope, $q, 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, 'filteredHosts');
+    this.getApplicationNames = _.partial(getMetricNames, this, 'filteredApplications');
+    this.getItemNames = _.partial(getMetricNames, this, 'filteredItems');
+
+    this.ackFilters = [
+      'all triggers',
+      'unacknowledged',
+      'acknowledged'
+    ];
+
+    this.sortByFields = [
+      { text: 'last change',  value: 'lastchange' },
+      { text: 'severity',     value: 'priority' }
+    ];
+
+    this.showEventsFields = [
+      { text: 'all events',     value: [0,1] },
+      { text: 'Ok events',      value: 0 },
+      { text: 'Problem events', value: 1 }
+    ];
+
+    // Load scope defaults
+    var scopeDefaults = {
+      metric: {},
+      inputStyles: {},
+      oldTarget: _.cloneDeep(this.panel.triggers),
+      defaultTimeFormat: "DD MMM YYYY HH:mm:ss"
+    };
+    _.defaults(this, scopeDefaults);
+
+    var self = this;
+
+    // Get zabbix data sources
+    var datasources = _.filter(this.datasourceSrv.getMetricSources(), function(datasource) {
+      return datasource.meta.id === 'zabbix';
+    });
+    this.datasources = _.map(datasources, 'name');
+
+    // Set default datasource
+    if (!this.panel.datasource) {
+      this.panel.datasource = this.datasources[0];
+    }
+    // Load datasource
+    this.datasourceSrv.get(this.panel.datasource).then(function (datasource) {
+      self.datasource = datasource;
+      self.initFilters();
+      self.panelCtrl.refreshData();
+    });
+  }
+
+  var p = TriggerPanelEditorCtrl.prototype;
+
+  // Get list of metric names for bs-typeahead directive
+  function getMetricNames(scope, metricList) {
+    return _.uniq(_.map(scope.metric[metricList], 'name'));
+  }
+
+  p.initFilters = function () {
+    this.filterGroups();
+    this.filterHosts();
+    this.filterApplications();
+  };
+
+  p.filterGroups = function() {
+    var self = this;
+    this.datasource.queryProcessor.filterGroups().then(function(groups) {
+      self.metric.groupList = groups;
+    });
+  };
+
+  p.filterHosts = function() {
+    var self = this;
+    var groupFilter = this.templateSrv.replace(this.panel.triggers.group.filter);
+    this.datasource.queryProcessor.filterHosts(groupFilter).then(function(hosts) {
+      self.metric.filteredHosts = hosts;
+    });
+  };
+
+  p.filterApplications = function() {
+    var self = this;
+    var groupFilter = this.templateSrv.replace(this.panel.triggers.group.filter);
+    var hostFilter = this.templateSrv.replace(this.panel.triggers.host.filter);
+    this.datasource.queryProcessor.filterApplications(groupFilter, hostFilter)
+      .then(function(apps) {
+        self.metric.filteredApplications = apps;
+      });
+  };
+
+  p.onTargetPartChange = function(targetPart) {
+    var regexStyle = {'color': '#CCA300'};
+    targetPart.isRegex = isRegex(targetPart.filter);
+    targetPart.style = targetPart.isRegex ? regexStyle : {};
+  };
+
+  function isRegex(str) {
+    // Pattern for testing regex
+    var regexPattern = /^\/(.*)\/([gmi]*)$/m;
+    return regexPattern.test(str);
+  }
+
+  p.parseTarget = function() {
+    this.initFilters();
+    var newTarget = _.cloneDeep(this.panel.triggers);
+    if (!_.isEqual(this.oldTarget, this.panel.triggers)) {
+      this.oldTarget = newTarget;
+      this.panelCtrl.refreshData();
+    }
+  };
+
+  p.refreshTriggerSeverity = function() {
+    _.each(this.triggerList, function(trigger) {
+      trigger.color = this.panel.triggerSeverity[trigger.priority].color;
+      trigger.severity = this.panel.triggerSeverity[trigger.priority].severity;
+    });
+    this.panelCtrl.refreshData();
+  };
+
+  p.datasourceChanged = function() {
+    this.panelCtrl.refreshData();
+  };
+
+  p.changeTriggerSeverityColor = function(trigger, color) {
+    this.panel.triggerSeverity[trigger.priority].color = color;
+    this.refreshTriggerSeverity();
+  };
+
+  function getTriggerIndexForElement(el) {
+    return el.parents('[data-trigger-index]').data('trigger-index');
+  }
+
+  p.openTriggerColorSelector = function(event) {
+    var el = $(event.currentTarget);
+    var index = getTriggerIndexForElement(el);
+    var popoverScope = this.$new();
+    popoverScope.trigger = this.panel.triggerSeverity[index];
+    popoverScope.changeTriggerSeverityColor = this.changeTriggerSeverityColor;
+
+    this.popoverSrv.show({
+      element: el,
+      placement: 'top',
+      templateUrl:  'public/plugins/triggers/trigger.colorpicker.html',
+      scope: popoverScope
+    });
+  };
+
+  p.openOkEventColorSelector = function(event) {
+    var el = $(event.currentTarget);
+    var popoverScope = this.$new();
+    popoverScope.trigger = {color: this.panel.okEventColor};
+    popoverScope.changeTriggerSeverityColor = function(trigger, color) {
+      this.panel.okEventColor = color;
+      this.refreshTriggerSeverity();
+    };
+
+    this.popoverSrv.show({
+      element: el,
+      placement: 'top',
+      templateUrl:  'public/plugins/triggers/trigger.colorpicker.html',
+      scope: popoverScope
+    });
+  };
+
+  var triggerPanelEditor = function() {
+    return {
+      restrict: 'E',
+      scope: true,
+      templateUrl: 'public/plugins/triggers/editor.html',
+      controller: TriggerPanelEditorCtrl,
+    };
+  };
+
+  return triggerPanelEditor;
+});
\ No newline at end of file
diff --git a/plugins/panel-triggers/module.html b/plugins/panel-triggers/module.html
index 8c194e5..b8d2eb3 100644
--- a/plugins/panel-triggers/module.html
+++ b/plugins/panel-triggers/module.html
@@ -1,140 +1,136 @@
-<div class="table-panel-wrapper">
-  <grafana-panel>
-    <div class="table-panel-container">
-      <div class="table-panel-header-bg"></div>
-      <div class="table-panel-scroll">
-        <table class="table-panel-table">
-          <thead>
-            <tr>
-              <th ng-if="panel.hostField" style="width: 15%">
-                <div class="table-panel-table-header-inner pointer">
-                  Host
-                </div>
-              </th>
-              <th ng-if="panel.statusField" style="width: 85px">
-                <div class="table-panel-table-header-inner pointer">Status</div>
-              </th>
-              <th ng-if="panel.severityField" style="width: 120px">
-                <div class="table-panel-table-header-inner pointer">Severity</div>
-              </th>
-              <th>
-                <div class="table-panel-table-header-inner pointer">Issue</div>
-              </th>
-              <th ng-if="panel.lastChangeField" style="width: 220px">
-                <div class="table-panel-table-header-inner pointer">Last change</div>
-              </th>
-              <th ng-if="panel.ageField" style="width: 180px">
-                <div class="table-panel-table-header-inner pointer">Age</div>
-              </th>
-              <th ng-if="panel.infoField" style="width: 100px">
-                <div class="table-panel-table-header-inner pointer">Info</div>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr ng-repeat="trigger in triggerList">
-              <td ng-if="panel.hostField">
-                <div>
-                  <span><strong>{{trigger.host}}</strong></span>
-                </div>
-              </td>
-              <td ng-if="panel.statusField" style="background-color: {{trigger.color}}; color: white">
-                <div>
-                  {{triggerStatusMap[trigger.value]}}
-                </div>
-              </td>
-              <td ng-if="panel.severityField" style="background-color: {{trigger.color}}; color: white">
-                <div>
-                  {{trigger.severity}}
-                </div>
-              </td>
-              <td style="background-color: {{trigger.color}}; color: white">
-                <div>
-                  {{trigger.description}}
-                  <a  ng-if="trigger.comments"
-                      class="pointer"
-                      style="float: right; padding-right: 8px"
-                      data-toggle="collapse"
-                      data-target="#comments-{{trigger.triggerid}}"
-                      bs-tooltip="'Show additional trigger description'"
-                      data-placement="top">
-                    <i class="fa fa-file-text-o"></i>
-                  </a>
-                </div>
+<div class="table-panel-container">
+  <div class="table-panel-header-bg"></div>
+  <div class="table-panel-scroll">
+    <table class="table-panel-table">
+      <thead>
+        <tr>
+          <th ng-if="ctrl.panel.hostField" style="width: 15%">
+            <div class="table-panel-table-header-inner pointer">
+              Host
+            </div>
+          </th>
+          <th ng-if="ctrl.panel.statusField" style="width: 85px">
+            <div class="table-panel-table-header-inner pointer">Status</div>
+          </th>
+          <th ng-if="ctrl.panel.severityField" style="width: 120px">
+            <div class="table-panel-table-header-inner pointer">Severity</div>
+          </th>
+          <th>
+            <div class="table-panel-table-header-inner pointer">Issue</div>
+          </th>
+          <th ng-if="ctrl.panel.lastChangeField" style="width: 220px">
+            <div class="table-panel-table-header-inner pointer">Last change</div>
+          </th>
+          <th ng-if="ctrl.panel.ageField" style="width: 180px">
+            <div class="table-panel-table-header-inner pointer">Age</div>
+          </th>
+          <th ng-if="ctrl.panel.infoField" style="width: 100px">
+            <div class="table-panel-table-header-inner pointer">Info</div>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr ng-repeat="trigger in ctrl.triggerList">
+          <td ng-if="ctrl.panel.hostField">
+            <div>
+              <span><strong>{{trigger.host}}</strong></span>
+            </div>
+          </td>
+          <td ng-if="ctrl.panel.statusField" style="background-color: {{trigger.color}}; color: white">
+            <div>
+              {{ctrl.triggerStatusMap[trigger.value]}}
+            </div>
+          </td>
+          <td ng-if="ctrl.panel.severityField" style="background-color: {{trigger.color}}; color: white">
+            <div>
+              {{trigger.severity}}
+            </div>
+          </td>
+          <td style="background-color: {{trigger.color}}; color: white">
+            <div>
+              {{trigger.description}}
+              <a  ng-if="trigger.comments"
+                  class="pointer"
+                  style="float: right; padding-right: 8px"
+                  data-toggle="collapse"
+                  data-target="#comments-{{trigger.triggerid}}"
+                  bs-tooltip="'Show additional trigger description'"
+                  data-placement="top">
+                <i class="fa fa-file-text-o"></i>
+              </a>
+            </div>
 
-                <!-- Trigger comments -->
-                <div  class="collapse"
-                      id="comments-{{trigger.triggerid}}"
-                      ng-if="trigger.comments">
-                  <div>
-                    <small>{{trigger.comments}}</small>
-                  </div>
-                </div>
+            <!-- Trigger comments -->
+            <div  class="collapse"
+                  id="comments-{{trigger.triggerid}}"
+                  ng-if="trigger.comments">
+              <div>
+                <small>{{trigger.comments}}</small>
+              </div>
+            </div>
 
-                <!-- Trigger acknowledges -->
-                <div  class="collapse"
-                      id="acknowledges-{{trigger.triggerid}}"
-                      ng-if="trigger.acknowledges">
-                  <div style="padding-top: 12px;">
-                    <table class="table table-condensed">
-                      <thead>
-                        <tr>
-                          <th><small>Time</small></th>
-                          <th><small>User</small></th>
-                          <th><small>Comments</small></th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr ng-repeat="ack in trigger.acknowledges">
-                          <td>
-                            <small>{{ack.time}}</small>
-                          </td>
-                          <td>
-                            <small>{{ack.user}}</small>
-                          </td>
-                          <td>
-                            <small>{{ack.message}}</small>
-                          </td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              </td>
-              <td ng-if="panel.lastChangeField">
-                {{trigger.lastchange}}
-              </td>
-              <td ng-if="panel.ageField">
-                {{trigger.age}}
-              </td>
-              <td ng-if="panel.infoField">
+            <!-- Trigger acknowledges -->
+            <div  class="collapse"
+                  id="acknowledges-{{trigger.triggerid}}"
+                  ng-if="trigger.acknowledges">
+              <div style="padding-top: 12px;">
+                <table class="table table-condensed">
+                  <thead>
+                    <tr>
+                      <th><small>Time</small></th>
+                      <th><small>User</small></th>
+                      <th><small>Comments</small></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr ng-repeat="ack in trigger.acknowledges">
+                      <td>
+                        <small>{{ack.time}}</small>
+                      </td>
+                      <td>
+                        <small>{{ack.user}}</small>
+                      </td>
+                      <td>
+                        <small>{{ack.message}}</small>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </td>
+          <td ng-if="ctrl.panel.lastChangeField">
+            {{trigger.lastchange}}
+          </td>
+          <td ng-if="ctrl.panel.ageField">
+            {{trigger.age}}
+          </td>
+          <td ng-if="ctrl.panel.infoField">
 
-                <!-- Trigger Url -->
-                <a  ng-if="trigger.url"
-                    href="{{trigger.url}}"
-                    target="_blank">
-                  <i class="fa fa-external-link"></i>
-                </a>
+            <!-- Trigger Url -->
+            <a  ng-if="trigger.url"
+                href="{{trigger.url}}"
+                target="_blank">
+              <i class="fa fa-external-link"></i>
+            </a>
 
-                <!-- Trigger state -->
-                <span ng-if="trigger.state === '1'"
-                      bs-tooltip="'{{trigger.error}}'">
-                  <i class="fa fa-question-circle"></i>
-                </span>
+            <!-- Trigger state -->
+            <span ng-if="trigger.state === '1'"
+                  bs-tooltip="'{{trigger.error}}'">
+              <i class="fa fa-question-circle"></i>
+            </span>
 
-                <!-- Trigger acknowledges -->
-                <a  ng-if="trigger.acknowledges"
-                    bs-tooltip="'Acknowledges ({{trigger.acknowledges.length}})'"
-                    data-toggle="collapse"
-                    data-target="#acknowledges-{{trigger.triggerid}}">
-                  <i class="fa fa-comments"></i>
-                </a>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-    <div class="table-panel-footer"></div>
-  </grafana-panel>
+            <!-- Trigger acknowledges -->
+            <a  ng-if="trigger.acknowledges"
+                bs-tooltip="'Acknowledges ({{trigger.acknowledges.length}})'"
+                data-toggle="collapse"
+                data-target="#acknowledges-{{trigger.triggerid}}">
+              <i class="fa fa-comments"></i>
+            </a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </div>
+<div class="table-panel-footer"></div>
diff --git a/plugins/panel-triggers/module.js b/plugins/panel-triggers/module.js
index 197e865..47d1b04 100644
--- a/plugins/panel-triggers/module.js
+++ b/plugins/panel-triggers/module.js
@@ -12,127 +12,88 @@
  */
 
 define([
+  'app/plugins/sdk',
   'angular',
-  'app/app',
   'lodash',
   'jquery',
   'moment',
-  'app/core/config',
-  'app/features/panel/panel_meta'
+  './editor'
 ],
-function (angular, app, _, $, moment, config, PanelMeta) {
+function (sdk, angular, _, $, moment, triggerPanelEditor) {
   'use strict';
 
-  var module = angular.module('grafana.panels.triggers', []);
-  app.useModule(module);
+  var 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 }
+  ];
 
-  /** @ngInject */
-  function TriggerPanelCtrl($q, $scope, $element, datasourceSrv, panelSrv, templateSrv, popoverSrv) {
+  var panelDefaults = {
+    datasource: null,
+    triggers: {
+      group: {filter: ""},
+      host: {filter: ""},
+      application: {filter: ""},
+      trigger: {filter: ""}
+    },
+    hostField: true,
+    statusField: false,
+    severityField: false,
+    lastChangeField: true,
+    ageField: true,
+    infoField: true,
+    limit: 10,
+    showTriggers: 'all triggers',
+    sortTriggersBy: { text: 'last change', value: 'lastchange' },
+    showEvents: { text: 'Problem events', value: '1' },
+    triggerSeverity: defaultSeverity,
+    okEventColor: '#890F02',
+  };
 
-    $scope.panelMeta = new PanelMeta({
-      panelName: 'Zabbix triggers',
-      editIcon:  "fa fa-lightbulb-o",
-      fullscreen: true,
-    });
+  var triggerStatusMap = {
+    '0': 'OK',
+    '1': 'Problem'
+  };
 
-    $scope.panelMeta.addEditorTab('Options', 'public/plugins/triggers/editor.html');
+  var TriggerPanelCtrl = (function(_super) {
 
-    $scope.ackFilters = [
-      'all triggers',
-      'unacknowledged',
-      'acknowledged'
-    ];
+    /** @ngInject */
+    function TriggerPanelCtrl($scope, $injector, $q, $element, datasourceSrv) {
+      _super.call(this, $scope, $injector);
+      this.datasourceSrv = datasourceSrv;
+      this.triggerStatusMap = triggerStatusMap;
 
-    $scope.sortByFields = [
-      { text: 'last change',  value: 'lastchange' },
-      { text: 'severity',     value: 'priority' }
-    ];
+      // Load panel defaults
+      _.defaults(this.panel, panelDefaults);
 
-    $scope.showEventsFields = [
-      { text: 'all events',     value: [0,1] },
-      { text: 'Ok events',      value: 0 },
-      { text: 'Problem events', value: 1 }
-    ];
+      this.triggerList = [];
+      this.refreshData();
+    }
 
-    $scope.triggerStatusMap = {
-      '0': 'OK',
-      '1': 'Problem'
+    TriggerPanelCtrl.templateUrl = 'module.html';
+
+    TriggerPanelCtrl.prototype = Object.create(_super.prototype);
+    TriggerPanelCtrl.prototype.constructor = TriggerPanelCtrl;
+
+    // Add panel editor
+    TriggerPanelCtrl.prototype.initEditMode = function() {
+      _super.prototype.initEditMode();
+      this.icon = "fa fa-lightbulb-o";
+      this.addEditorTab('Options', triggerPanelEditor, 2);
     };
 
-    var grafanaDefaultSeverity = [
-      { 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 }
-    ];
-
-    var panelDefaults = {
-      datasource: null,
-      triggers: {
-        group: {filter: ""},
-        host: {filter: ""},
-        application: {filter: ""},
-        trigger: {filter: ""}
-      },
-      hostField: true,
-      statusField: false,
-      severityField: false,
-      lastChangeField: true,
-      ageField: true,
-      infoField: true,
-      limit: 10,
-      showTriggers: 'all triggers',
-      sortTriggersBy: { text: 'last change', value: 'lastchange' },
-      showEvents: { text: 'Problem events', value: '1' },
-      triggerSeverity: grafanaDefaultSeverity,
-      okEventColor: '#890F02',
-    };
-
-    _.defaults($scope.panel, panelDefaults);
-    $scope.triggerList = [];
-
-    $scope.init = function() {
-      panelSrv.init($scope);
-      if ($scope.isNewPanel()) {
-        $scope.panel.title = "Zabbix Triggers";
-      }
-
-      // Load scope defaults
-      var scopeDefaults = {
-        metric: {},
-        inputStyles: {},
-        oldTarget: _.cloneDeep($scope.panel.triggers),
-        defaultTimeFormat: "DD MMM YYYY HH:mm:ss"
-      };
-      _.defaults($scope, scopeDefaults);
-
-      // Get zabbix data sources
-      var datasources = _.filter(datasourceSrv.getMetricSources(), function(datasource) {
-        return datasource.meta.id === 'zabbix';
-      });
-      $scope.datasources = _.map(datasources, 'name');
-
-      // Set default datasource
-      if (!$scope.panel.datasource) {
-        $scope.panel.datasource = $scope.datasources[0];
-      }
-      // Load datasource
-      datasourceSrv.get($scope.panel.datasource).then(function (datasource) {
-        $scope.datasource = datasource;
-        $scope.initFilters();
-      });
-    };
-
-    $scope.refreshData = function() {
+    TriggerPanelCtrl.prototype.refreshData = function() {
+      var self = this;
 
       // Load datasource
-      return datasourceSrv.get($scope.panel.datasource).then(function (datasource) {
+      return this.datasourceSrv.get(this.panel.datasource).then(function (datasource) {
         var zabbix = datasource.zabbixAPI;
         var queryProcessor = datasource.queryProcessor;
-        var triggerFilter = $scope.panel.triggers;
-        var showEvents = $scope.panel.showEvents.value;
+        var triggerFilter = self.panel.triggers;
+        var showEvents = self.panel.showEvents.value;
         var buildQuery = queryProcessor.buildTriggerQuery(triggerFilter.group.filter,
                                                           triggerFilter.host.filter,
                                                           triggerFilter.application.filter);
@@ -148,22 +109,22 @@ function (angular, app, _, $, moment, config, PanelMeta) {
                 // Format last change and age
                 trigger.lastchangeUnix = Number(trigger.lastchange);
                 var timestamp = moment.unix(trigger.lastchangeUnix);
-                if ($scope.panel.customLastChangeFormat) {
+                if (self.panel.customLastChangeFormat) {
                   // User defined format
-                  triggerObj.lastchange = timestamp.format($scope.panel.lastChangeFormat);
+                  triggerObj.lastchange = timestamp.format(self.panel.lastChangeFormat);
                 } else {
-                  triggerObj.lastchange = timestamp.format($scope.defaultTimeFormat);
+                  triggerObj.lastchange = timestamp.format(self.defaultTimeFormat);
                 }
                 triggerObj.age = timestamp.fromNow(true);
 
                 // Set color
                 if (trigger.value === '1') {
-                  triggerObj.color = $scope.panel.triggerSeverity[trigger.priority].color;
+                  triggerObj.color = self.panel.triggerSeverity[trigger.priority].color;
                 } else {
-                  triggerObj.color = $scope.panel.okEventColor;
+                  triggerObj.color = self.panel.okEventColor;
                 }
 
-                triggerObj.severity = $scope.panel.triggerSeverity[trigger.priority].severity;
+                triggerObj.severity = self.panel.triggerSeverity[trigger.priority].severity;
                 return triggerObj;
               });
             })
@@ -173,6 +134,7 @@ function (angular, app, _, $, moment, config, PanelMeta) {
               var eventids = _.map(triggerList, function(trigger) {
                 return trigger.lastEvent.eventid;
               });
+
               return zabbix.getAcknowledges(eventids)
                 .then(function (events) {
 
@@ -193,17 +155,17 @@ function (angular, app, _, $, moment, config, PanelMeta) {
                   });
 
                   // Filter triggers by description
-                  var triggerFilter = $scope.panel.triggers.trigger.filter;
+                  var triggerFilter = self.panel.triggers.trigger.filter;
                   if (triggerFilter) {
                     triggerList = filterTriggers(triggerList, triggerFilter);
                   }
 
                   // Filter acknowledged triggers
-                  if ($scope.panel.showTriggers === 'unacknowledged') {
+                  if (self.panel.showTriggers === 'unacknowledged') {
                     triggerList = _.filter(triggerList, function (trigger) {
                       return !trigger.acknowledges;
                     });
-                  } else if ($scope.panel.showTriggers === 'acknowledged') {
+                  } else if (self.panel.showTriggers === 'acknowledged') {
                     triggerList = _.filter(triggerList, 'acknowledges');
                   } else {
                     triggerList = triggerList;
@@ -211,65 +173,26 @@ function (angular, app, _, $, moment, config, PanelMeta) {
 
                   // Filter triggers by severity
                   triggerList = _.filter(triggerList, function (trigger) {
-                    return $scope.panel.triggerSeverity[trigger.priority].show;
+                    return self.panel.triggerSeverity[trigger.priority].show;
                   });
 
                   // Sort triggers
-                  if ($scope.panel.sortTriggersBy.value === 'priority') {
+                  if (self.panel.sortTriggersBy.value === 'priority') {
                     triggerList = _.sortBy(triggerList, 'priority').reverse();
                   } else {
                     triggerList = _.sortBy(triggerList, 'lastchangeUnix').reverse();
                   }
 
                   // Limit triggers number
-                  $scope.triggerList  = _.first(triggerList, $scope.panel.limit);
+                  self.triggerList  = _.first(triggerList, self.panel.limit);
 
-                  $scope.panelRenderingComplete();
+                  self.renderingCompleted();
                 });
             });
         });
       });
     };
 
-    $scope.initFilters = function () {
-      $scope.filterGroups();
-      $scope.filterHosts();
-      $scope.filterApplications();
-    };
-
-    // Get list of metric names for bs-typeahead directive
-    function getMetricNames(scope, metricList) {
-      return _.uniq(_.map(scope.metric[metricList], 'name'));
-    }
-
-    // Map functions for bs-typeahead
-    $scope.getGroupNames = _.partial(getMetricNames, $scope, 'groupList');
-    $scope.getHostNames = _.partial(getMetricNames, $scope, 'filteredHosts');
-    $scope.getApplicationNames = _.partial(getMetricNames, $scope, 'filteredApplications');
-    $scope.getItemNames = _.partial(getMetricNames, $scope, 'filteredItems');
-
-    $scope.filterGroups = function() {
-      $scope.datasource.queryProcessor.filterGroups().then(function(groups) {
-        $scope.metric.groupList = groups;
-      });
-    };
-
-    $scope.filterHosts = function() {
-      var groupFilter = templateSrv.replace($scope.panel.triggers.group.filter);
-      $scope.datasource.queryProcessor.filterHosts(groupFilter).then(function(hosts) {
-        $scope.metric.filteredHosts = hosts;
-      });
-    };
-
-    $scope.filterApplications = function() {
-      var groupFilter = templateSrv.replace($scope.panel.triggers.group.filter);
-      var hostFilter = templateSrv.replace($scope.panel.triggers.host.filter);
-      $scope.datasource.queryProcessor.filterApplications(groupFilter, hostFilter)
-        .then(function(apps) {
-          $scope.metric.filteredApplications = apps;
-        });
-    };
-
     function filterTriggers(triggers, triggerFilter) {
       if (isRegex(triggerFilter)) {
         return _.filter(triggers, function(trigger) {
@@ -282,12 +205,6 @@ function (angular, app, _, $, moment, config, PanelMeta) {
       }
     }
 
-    $scope.onTargetPartChange = function(targetPart) {
-      var regexStyle = {'color': '#CCA300'};
-      targetPart.isRegex = isRegex(targetPart.filter);
-      targetPart.style = targetPart.isRegex ? regexStyle : {};
-    };
-
     function isRegex(str) {
       // Pattern for testing regex
       var regexPattern = /^\/(.*)\/([gmi]*)$/m;
@@ -302,106 +219,12 @@ function (angular, app, _, $, moment, config, PanelMeta) {
       return new RegExp(pattern, flags);
     }
 
-    $scope.parseTarget = function() {
-      $scope.initFilters();
-      var newTarget = _.cloneDeep($scope.panel.triggers);
-      if (!_.isEqual($scope.oldTarget, $scope.panel.triggers)) {
-        $scope.oldTarget = newTarget;
-        $scope.get_data();
-      }
-    };
+    return TriggerPanelCtrl;
 
-    $scope.refreshTriggerSeverity = function() {
-      _.each($scope.triggerList, function(trigger) {
-        trigger.color = $scope.panel.triggerSeverity[trigger.priority].color;
-        trigger.severity = $scope.panel.triggerSeverity[trigger.priority].severity;
-      });
-    };
-
-    $scope.datasourceChanged = function() {
-      $scope.refreshData();
-    };
-
-    $scope.changeTriggerSeverityColor = function(trigger, color) {
-      $scope.panel.triggerSeverity[trigger.priority].color = color;
-      $scope.refreshTriggerSeverity();
-    };
-
-    function getTriggerIndexForElement(el) {
-      return el.parents('[data-trigger-index]').data('trigger-index');
-    }
-
-    $scope.openTriggerColorSelector = function(event) {
-      var el = $(event.currentTarget);
-      var index = getTriggerIndexForElement(el);
-      var popoverScope = $scope.$new();
-      popoverScope.trigger = $scope.panel.triggerSeverity[index];
-      popoverScope.changeTriggerSeverityColor = $scope.changeTriggerSeverityColor;
-
-      popoverSrv.show({
-        element: el,
-        placement: 'top',
-        templateUrl:  'public/plugins/triggers/trigger.colorpicker.html',
-        scope: popoverScope
-      });
-    };
-
-    $scope.openOkEventColorSelector = function(event) {
-      var el = $(event.currentTarget);
-      var popoverScope = $scope.$new();
-      popoverScope.trigger = {color: $scope.panel.okEventColor};
-      popoverScope.changeTriggerSeverityColor = function(trigger, color) {
-        $scope.panel.okEventColor = color;
-        $scope.refreshTriggerSeverity();
-      };
-
-      popoverSrv.show({
-        element: el,
-        placement: 'top',
-        templateUrl:  'public/plugins/triggers/trigger.colorpicker.html',
-        scope: popoverScope
-      });
-    };
-
-    /**
-     * Convert event age from Unix format (milliseconds sins 1970)
-     * to Zabbix format (like at Last 20 issues panel).
-     * @param  {Date}           AgeUnix time in Unix format
-     * @return {string}         Formatted time
-     */
-    function toZabbixAgeFormat(ageUnix) {
-      var age = new Date(+ageUnix);
-      var ageZabbix = age.getSeconds() + 's';
-      if (age.getMinutes()) {
-        ageZabbix = age.getMinutes() + 'm ' + ageZabbix;
-      }
-      if (age.getHours()) {
-        ageZabbix = age.getHours() + 'h ' + ageZabbix;
-      }
-      if (age.getDate() - 1) {
-        ageZabbix = age.getDate() - 1 + 'd ' + ageZabbix;
-      }
-      if (age.getMonth()) {
-        ageZabbix = age.getMonth() + 'M ' + ageZabbix;
-      }
-      if (age.getYear() - 70) {
-        ageZabbix = age.getYear() -70 + 'y ' + ageZabbix;
-      }
-      return ageZabbix;
-    }
-
-    $scope.init();
-  }
-
-  function triggerPanelDirective() {
-    return {
-      controller: TriggerPanelCtrl,
-      templateUrl: 'public/plugins/triggers/module.html',
-    };
-  }
+  })(sdk.PanelCtrl);
 
   return {
-    panel: triggerPanelDirective
+    PanelCtrl: TriggerPanelCtrl
   };
 
 });