Add dist/ directory to repo to correspond development guide.

http://docs.grafana.org/plugins/development/

dist/panel-triggers/ack-tooltip.directive.js

@@ -0,0 +1,126 @@
+'use strict';
+
+System.register(['angular', 'jquery', 'tether-drop'], function (_export, _context) {
+  "use strict";
+
+  var angular, $, Drop;
+  return {
+    setters: [function (_angular) {
+      angular = _angular.default;
+    }, function (_jquery) {
+      $ = _jquery.default;
+    }, function (_tetherDrop) {
+      Drop = _tetherDrop.default;
+    }],
+    execute: function () {
+
+      /** @ngInject */
+      angular.module('grafana.directives').directive('ackTooltip', function ($sanitize, $compile) {
+        var buttonTemplate = '<a bs-tooltip="\'Acknowledges ({{trigger.acknowledges.length}})\'"' + '<i ng-class="' + "{'fa fa-comments': trigger.acknowledges.length, " + "'fa fa-comments-o': !trigger.acknowledges.length, " + '}"></i></a>';
+
+        return {
+          scope: {
+            ack: "=",
+            trigger: "=",
+            onAck: "=",
+            context: "="
+          },
+          link: function link(scope, element) {
+            var acknowledges = scope.ack;
+            var $button = $(buttonTemplate);
+            $button.appendTo(element);
+
+            $button.click(function () {
+              var tooltip = '<div>';
+
+              if (acknowledges && acknowledges.length) {
+                tooltip += '<table class="table"><thead><tr>' + '<th class="ack-time">Time</th>' + '<th class="ack-user">User</th>' + '<th class="ack-comments">Comments</th>' + '</tr></thead><tbody>';
+                var _iteratorNormalCompletion = true;
+                var _didIteratorError = false;
+                var _iteratorError = undefined;
+
+                try {
+                  for (var _iterator = acknowledges[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+                    var ack = _step.value;
+
+                    tooltip += '<tr><td>' + ack.time + '</td>' + '<td>' + ack.user + '</td>' + '<td>' + ack.message + '</td></tr>';
+                  }
+                } catch (err) {
+                  _didIteratorError = true;
+                  _iteratorError = err;
+                } finally {
+                  try {
+                    if (!_iteratorNormalCompletion && _iterator.return) {
+                      _iterator.return();
+                    }
+                  } finally {
+                    if (_didIteratorError) {
+                      throw _iteratorError;
+                    }
+                  }
+                }
+
+                tooltip += '</tbody></table>';
+              } else {
+                tooltip += 'Add acknowledge';
+              }
+
+              var addAckButtonTemplate = '<div class="ack-add-button">' + '<button id="add-acknowledge-btn"' + 'class="btn btn-mini btn-inverse gf-form-button">' + '<i class="fa fa-plus"></i>' + '</button></div>';
+              tooltip += addAckButtonTemplate;
+              tooltip += '</div>';
+
+              var drop = new Drop({
+                target: element[0],
+                content: tooltip,
+                position: "bottom left",
+                classes: 'drop-popover ack-tooltip',
+                openOn: 'hover',
+                hoverCloseDelay: 500,
+                tetherOptions: {
+                  constraints: [{ to: 'window', pin: true, attachment: "both" }]
+                }
+              });
+
+              drop.open();
+              drop.on('close', closeDrop);
+
+              $('#add-acknowledge-btn').on('click', onAddAckButtonClick);
+
+              function onAddAckButtonClick() {
+                var inputTemplate = '<div class="ack-input-group">' + '<input type="text" id="ack-message">' + '<button id="send-ack-button"' + 'class="btn btn-mini btn-inverse gf-form-button">' + 'Acknowledge </button>' + '<button id="cancel-ack-button"' + 'class="btn btn-mini btn-inverse gf-form-button">' + 'Cancel' + '</button></input></div>';
+
+                var $input = $(inputTemplate);
+                var $addAckButton = $('.ack-tooltip .ack-add-button');
+                $addAckButton.replaceWith($input);
+                $('.ack-tooltip #cancel-ack-button').on('click', onAckCancelButtonClick);
+                $('.ack-tooltip #send-ack-button').on('click', onAckSendlButtonClick);
+              }
+
+              function onAckCancelButtonClick() {
+                $('.ack-tooltip .ack-input-group').replaceWith(addAckButtonTemplate);
+                $('#add-acknowledge-btn').on('click', onAddAckButtonClick);
+              }
+
+              function onAckSendlButtonClick() {
+                var message = $('.ack-tooltip #ack-message')[0].value;
+                var onAck = scope.onAck.bind(scope.context);
+                onAck(scope.trigger, message).then(function () {
+                  closeDrop();
+                });
+              }
+
+              function closeDrop() {
+                setTimeout(function () {
+                  drop.destroy();
+                });
+              }
+            });
+
+            $compile(element.contents())(scope);
+          }
+        };
+      });
+    }
+  };
+});
+//# sourceMappingURL=ack-tooltip.directive.js.map

dist/panel-triggers/css/panel_triggers.css

@@ -0,0 +1,96 @@
+.triggers-panel-wrapper .panel-content {
+  padding: 0; }
+
+.triggers-panel-wrapper .panel-title-container {
+  padding-bottom: 4px; }
+
+.triggers-panel-scroll {
+  overflow: auto; }
+
+.triggers-panel-container {
+  padding-top: 2.2em;
+  position: relative; }
+
+.triggers-panel-footer {
+  text-align: center;
+  font-size: 90%;
+  line-height: 2px; }
+  .triggers-panel-footer ul {
+    position: relative;
+    display: inline-block;
+    margin-left: 0;
+    margin-bottom: 0; }
+  .triggers-panel-footer ul > li {
+    display: inline; }
+  .triggers-panel-footer ul > li > a {
+    float: left;
+    padding: 4px 12px;
+    text-decoration: none;
+    border-left-width: 0; }
+    .triggers-panel-footer ul > li > a:hover {
+      background-color: #333; }
+    .triggers-panel-footer ul > li > a.active {
+      font-weight: bold;
+      color: #33B5E5; }
+
+.triggers-panel-table {
+  width: 100%;
+  border-collapse: collapse; }
+  .triggers-panel-table th {
+    padding: 0; }
+    .triggers-panel-table th:first-child .triggers-panel-table-header-inner {
+      padding-left: 15px; }
+  .triggers-panel-table td {
+    padding: 0.45em 0 0.45em 1.1em;
+    border-bottom: 2px solid #141414;
+    border-right: 2px solid #141414; }
+    .triggers-panel-table td:first-child {
+      padding-left: 15px; }
+    .triggers-panel-table td:last-child {
+      border-right: none; }
+
+.triggers-panel-header-bg {
+  background: #242222;
+  border-top: 2px solid #141414;
+  border-bottom: 2px solid #141414;
+  height: 2.0em;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0; }
+
+.triggers-panel-table-header-inner {
+  padding: 0.45em 0 0.45em 1.1em;
+  text-align: left;
+  color: #33B5E5;
+  position: absolute;
+  top: 0; }
+
+.triggers-panel-width-hack {
+  visibility: hidden;
+  height: 0px;
+  line-height: 0px; }
+
+.ack-tooltip .drop-content {
+  max-width: 70rem !important;
+  min-width: 30rem !important; }
+
+.ack-tooltip .ack-comments {
+  width: 60%; }
+
+.ack-tooltip .ack-add-button {
+  padding-top: 1rem; }
+
+.ack-tooltip table td, .ack-tooltip th {
+  padding-right: 1rem; }
+
+.ack-tooltip .ack-input-group {
+  padding-top: 1rem; }
+  .ack-tooltip .ack-input-group input {
+    border: 1px solid;
+    border-radius: 2px;
+    width: 50%; }
+  .ack-tooltip .ack-input-group button {
+    margin-left: 1rem; }
+
+/*# sourceMappingURL=panel_triggers.css.map */

dist/panel-triggers/css/panel_triggers.css.map

@@ -0,0 +1,9 @@
+{
+	"version": 3,
+	"file": "panel_triggers.css",
+	"sources": [
+		"../../../src/panel-triggers/sass/panel_triggers.scss"
+	],
+	"mappings": "AAOA,AACE,uBADqB,CACrB,cAAc,CAAC;EACb,OAAO,EAAE,CAAE,GACZ;;AAHH,AAIE,uBAJqB,CAIrB,sBAAsB,CAAC;EACrB,cAAc,EAAE,GAAI,GACrB;;AAGH,AAAA,sBAAsB,CAAC;EACrB,QAAQ,EAAE,IAAK,GAChB;;AAED,AAAA,yBAAyB,CAAC;EACxB,WAAW,EAAE,KAAM;EACnB,QAAQ,EAAE,QAAS,GACpB;;AAED,AAAA,sBAAsB,CAAC;EACrB,UAAU,EAAE,MAAO;EACnB,SAAS,EAAE,GAAI;EACf,WAAW,EAAE,GAAI,GA0BlB;EA7BD,AAKE,sBALoB,CAKpB,EAAE,CAAC;IACD,QAAQ,EAAE,QAAS;IACnB,OAAO,EAAE,YAAa;IACtB,WAAW,EAAE,CAAE;IACf,aAAa,EAAE,CAAE,GAClB;EAVH,AAWO,sBAXe,CAWpB,EAAE,GAAG,EAAE,CAAC;IACN,OAAO,EAAE,MAAO,GACjB;EAbH,AAcY,sBAdU,CAcpB,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IACV,KAAK,EAAE,IAAK;IACZ,OAAO,EAAE,QAAS;IAClB,eAAe,EAAE,IAAK;IACtB,iBAAiB,EAAE,CAAE,GAUtB;IA5BH,AAcY,sBAdU,CAcpB,EAAE,GAAG,EAAE,GAAG,CAAC,AAMR,MAAM,CAAC;MACN,gBAAgB,EA9CM,IAAI,GA+C3B;IAtBL,AAcY,sBAdU,CAcpB,EAAE,GAAG,EAAE,GAAG,CAAC,AAUR,OAAO,CAAC;MACP,WAAW,EAAE,IAAK;MAClB,KAAK,EAlDc,OAAO,GAmD3B;;AAIL,AAAA,qBAAqB,CAAC;EACpB,KAAK,EAAE,IAAK;EACZ,eAAe,EAAE,QAAS,GAwB3B;EA1BD,AAIE,qBAJmB,CAInB,EAAE,CAAC;IACD,OAAO,EAAE,CAAE,GAOZ;IAZH,AAQM,qBARe,CAInB,EAAE,AAGC,YAAY,CACX,kCAAkC,CAAC;MACjC,YAAY,EAAE,IAAK,GACpB;EAVP,AAcE,qBAdmB,CAcnB,EAAE,CAAC;IACD,OAAO,EAAE,qBAAsB;IAC/B,aAAa,EAAE,GAAG,CAAC,KAAK,CArET,OAAG;IAsElB,YAAY,EAAE,GAAG,CAAC,KAAK,CAtER,OAAG,GA8EnB;IAzBH,AAcE,qBAdmB,CAcnB,EAAE,AAKC,YAAY,CAAC;MACZ,YAAY,EAAE,IAAK,GACpB;IArBL,AAcE,qBAdmB,CAcnB,EAAE,AAQC,WAAW,CAAC;MACX,YAAY,EAAE,IAAK,GACpB;;AAIL,AAAA,yBAAyB,CAAC;EACxB,UAAU,EAhFgB,OAAO;EAiFjC,UAAU,EAAE,GAAG,CAAC,KAAK,CAnFJ,OAAG;EAoFpB,aAAa,EAAE,GAAG,CAAC,KAAK,CApFP,OAAG;EAqFpB,MAAM,EAAE,KAAM;EACd,QAAQ,EAAE,QAAS;EACnB,GAAG,EAAE,CAAE;EACP,KAAK,EAAE,CAAE;EACT,IAAI,EAAE,CAAE,GACT;;AAED,AAAA,kCAAkC,CAAC;EACjC,OAAO,EAAE,qBAAsB;EAC/B,UAAU,EAAE,IAAK;EACjB,KAAK,EAjGkB,OAAO;EAkG9B,QAAQ,EAAE,QAAS;EACnB,GAAG,EAAE,CAAE,GACR;;AAED,AAAA,0BAA0B,CAAC;EACzB,UAAU,EAAE,MAAO;EACnB,MAAM,EAAE,GAAI;EACZ,WAAW,EAAE,GAAI,GAClB;;AAED,AACE,YADU,CACV,aAAa,CAAC;EAEZ,SAAS,EAAE,gBAAiB;EAC5B,SAAS,EAAE,gBAAiB,GAC7B;;AALH,AAOE,YAPU,CAOV,aAAa,CAAC;EACZ,KAAK,EAAE,GAAI,GACZ;;AATH,AAWE,YAXU,CAWV,eAAe,CAAC;EACd,WAAW,EAAE,IAAK,GACnB;;AAbH,AAeQ,YAfI,CAeV,KAAK,CAAC,EAAE,EAfV,AAeY,YAfA,CAeA,EAAE,CAAC;EACX,aAAa,EAAE,IAAK,GACrB;;AAjBH,AAmBE,YAnBU,CAmBV,gBAAgB,CAAC;EACf,WAAW,EAAE,IAAK,GAWnB;EA/BH,AAsBI,YAtBQ,CAmBV,gBAAgB,CAGd,KAAK,CAAC;IACJ,MAAM,EAAE,SAAU;IAClB,aAAa,EAAE,GAAI;IACnB,KAAK,EAAE,GAAI,GACZ;EA1BL,AA4BI,YA5BQ,CAmBV,gBAAgB,CASd,MAAM,CAAC;IACL,WAAW,EAAE,IAAK,GACnB",
+	"names": []
+}

dist/panel-triggers/editor.html

@@ -0,0 +1,256 @@
+<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"
+          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>
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label width-8">Acknowledged</label>
+        <div class="gf-form-select-wrapper">
+          <select class="gf-form-input"
+            ng-model="editor.panel.showTriggers"
+            ng-options="f for f in editor.ackFilters"
+            ng-change="editor.panelCtrl.refresh()">
+          </select>
+        </div>
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label width-12">Limit triggers number to</label>
+        <input class="gf-form-input width-5"
+          type="number"
+          ng-model="editor.panel.limit"
+          ng-model-onblur
+          ng-change="editor.panelCtrl.refresh()">
+      </div>
+    </div>
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label width-8">Sort by</label>
+        <div class="gf-form-select-wrapper">
+          <select class="gf-form-input"
+            ng-model="editor.panel.sortTriggersBy"
+            ng-options="f.text for f in editor.sortByFields track by f.value"
+            ng-change="editor.panelCtrl.refresh()">
+          </select>
+        </div>
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label width-8">Show events</label>
+        <div class="gf-form-select-wrapper">
+          <select class="gf-form-input"
+            ng-model="editor.panel.showEvents"
+            ng-options="f.text for f in editor.showEventsFields track by f.value"
+            ng-change="editor.panelCtrl.refresh()">
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Show fields</h5>
+    <div class="gf-form-inline">
+      <gf-form-switch class="gf-form"
+        label-class="width-8"
+        label="Host name"
+        checked="editor.panel.hostField"
+        on-change="ctrl.render()">
+      </gf-form-switch>
+      <gf-form-switch class="gf-form"
+        label-class="width-12"
+        label="Host technical name"
+        checked="editor.panel.hostTechNameField"
+        on-change="ctrl.render()">
+      </gf-form-switch>
+      <gf-form-switch class="gf-form"
+        label-class="width-5"
+        label="Status"
+        checked="editor.panel.statusField"
+        on-change="ctrl.render()">
+      </gf-form-switch>
+    </div>
+    <div class="gf-form-inline">
+      <gf-form-switch class="gf-form"
+        label-class="width-5"
+        label="Severity"
+        checked="editor.panel.severityField"
+        on-change="ctrl.render()">
+      </gf-form-switch>
+      <gf-form-switch class="gf-form"
+        label-class="width-7"
+        label="Last change"
+        checked="editor.panel.lastChangeField"
+        on-change="ctrl.render()">
+      </gf-form-switch>
+      <gf-form-switch class="gf-form"
+        label-class="width-4"
+        label="Age"
+        checked="editor.panel.ageField"
+        on-change="ctrl.render()">
+      </gf-form-switch>
+      <gf-form-switch class="gf-form"
+        label-class="width-4"
+        label="Info"
+        checked="editor.panel.infoField"
+        on-change="ctrl.render()">
+      </gf-form-switch>
+    </div>
+    <div class="gf-form-inline">
+      <gf-form-switch class="gf-form"
+        label-class="width-14"
+        label="Custom Last change format"
+        checked="editor.panel.customLastChangeFormat"
+        on-change="ctrl.render()">
+      </gf-form-switch>
+      <div class="gf-form" ng-if="editor.panel.customLastChangeFormat">
+        <label class="gf-form-label width-3">
+          <a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
+            <tip>See moment.js dosc for time format.</tip>
+          </a>
+        </label>
+        <input class="gf-form-input width-18"
+          type="text"
+          placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
+          empty-to-null
+          ng-model-onblur
+          ng-model="editor.panel.lastChangeFormat"
+          ng-change="editor.panelCtrl.refresh()">
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="editor-row">
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Customize triggers severity and colors</h5>
+    <div class="gf-form-inline" ng-repeat="trigger in editor.panel.triggerSeverity">
+      <div class="gf-form">
+        <label class="gf-form-label width-3">{{ trigger.priority }}</label>
+        <input type="text"
+          class="gf-form-input width-12"
+          empty-to-null
+          ng-model="trigger.severity"
+          style="color: white"
+          ng-style="{background: trigger.color}"
+          ng-model-onblur
+          ng-change="editor.panelCtrl.refresh()">
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="trigger.color" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
+        </span>
+      </div>
+      <gf-form-switch class="gf-form"
+        label-class="width-0"
+        label="Show"
+        checked="trigger.show"
+        on-change="editor.panelCtrl.refresh()">
+      </gf-form-switch>
+    </div>
+
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label width-3">&nbsp;</label>
+        <label class="gf-form-label width-12"
+          ng-style="{background:editor.panel.okEventColor}">
+          OK event color
+        </label>
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
+        </span>
+      </div>
+    </div>
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label width-3">&nbsp;</label>
+        <label class="gf-form-label width-12"
+          ng-style="{background:editor.panel.ackEventColor}">
+          Acknowledged color
+        </label>
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="editor.panel.ackEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
+        </span>
+      </div>
+      <gf-form-switch class="gf-form"
+        label-class="width-0"
+        label="Show"
+        checked="editor.panel.markAckEvents"
+        on-change="editor.panelCtrl.refresh()">
+      </gf-form-switch>
+    </div>
+  </div>
+</div>

dist/panel-triggers/editor.js

@@ -0,0 +1,225 @@
+'use strict';
+
+System.register(['lodash', '../datasource-zabbix/utils', '../datasource-zabbix/css/query-editor.css!'], function (_export, _context) {
+  "use strict";
+
+  var _, utils, _createClass, TriggerPanelEditorCtrl;
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  // Get list of metric names for bs-typeahead directive
+  function getMetricNames(scope, metricList) {
+    return _.uniq(_.map(scope.metric[metricList], 'name'));
+  }
+
+  function triggerPanelEditor() {
+    return {
+      restrict: 'E',
+      scope: true,
+      templateUrl: 'public/plugins/alexanderzobnin-zabbix-app/panel-triggers/editor.html',
+      controller: TriggerPanelEditorCtrl
+    };
+  }
+
+  _export('triggerPanelEditor', triggerPanelEditor);
+
+  return {
+    setters: [function (_lodash) {
+      _ = _lodash.default;
+    }, function (_datasourceZabbixUtils) {
+      utils = _datasourceZabbixUtils;
+    }, function (_datasourceZabbixCssQueryEditorCss) {}],
+    execute: function () {
+      _createClass = function () {
+        function defineProperties(target, props) {
+          for (var i = 0; i < props.length; i++) {
+            var descriptor = props[i];
+            descriptor.enumerable = descriptor.enumerable || false;
+            descriptor.configurable = true;
+            if ("value" in descriptor) descriptor.writable = true;
+            Object.defineProperty(target, descriptor.key, descriptor);
+          }
+        }
+
+        return function (Constructor, protoProps, staticProps) {
+          if (protoProps) defineProperties(Constructor.prototype, protoProps);
+          if (staticProps) defineProperties(Constructor, staticProps);
+          return Constructor;
+        };
+      }();
+
+      TriggerPanelEditorCtrl = function () {
+
+        /** @ngInject */
+        function TriggerPanelEditorCtrl($scope, $rootScope, uiSegmentSrv, datasourceSrv, templateSrv, popoverSrv) {
+          var _this = this;
+
+          _classCallCheck(this, TriggerPanelEditorCtrl);
+
+          $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', function () {
+            return _this.onVariableChange();
+          });
+
+          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(function (datasource) {
+            _this.datasource = datasource;
+            _this.zabbix = datasource.zabbix;
+            _this.queryBuilder = datasource.queryBuilder;
+            _this.initFilters();
+            _this.panelCtrl.refresh();
+          });
+        }
+
+        _createClass(TriggerPanelEditorCtrl, [{
+          key: 'initFilters',
+          value: function initFilters() {
+            return Promise.all([this.suggestGroups(), this.suggestHosts(), this.suggestApps()]);
+          }
+        }, {
+          key: 'suggestGroups',
+          value: function suggestGroups() {
+            var _this2 = this;
+
+            return this.zabbix.getAllGroups().then(function (groups) {
+              _this2.metric.groupList = groups;
+              return groups;
+            });
+          }
+        }, {
+          key: 'suggestHosts',
+          value: function suggestHosts() {
+            var _this3 = this;
+
+            var groupFilter = this.datasource.replaceTemplateVars(this.panel.triggers.group.filter);
+            return this.zabbix.getAllHosts(groupFilter).then(function (hosts) {
+              _this3.metric.hostList = hosts;
+              return hosts;
+            });
+          }
+        }, {
+          key: 'suggestApps',
+          value: function suggestApps() {
+            var _this4 = this;
+
+            var groupFilter = this.datasource.replaceTemplateVars(this.panel.triggers.group.filter);
+            var hostFilter = this.datasource.replaceTemplateVars(this.panel.triggers.host.filter);
+            return this.zabbix.getAllApps(groupFilter, hostFilter).then(function (apps) {
+              _this4.metric.appList = apps;
+              return apps;
+            });
+          }
+        }, {
+          key: 'onVariableChange',
+          value: function onVariableChange() {
+            if (this.isContainsVariables()) {
+              this.targetChanged();
+            }
+          }
+        }, {
+          key: 'isContainsVariables',
+          value: function isContainsVariables() {
+            var _this5 = this;
+
+            return _.some(['group', 'host', 'application'], function (field) {
+              return utils.isTemplateVariable(_this5.panel.triggers[field].filter, _this5.templateSrv.variables);
+            });
+          }
+        }, {
+          key: 'targetChanged',
+          value: function targetChanged() {
+            this.initFilters();
+            this.panelCtrl.refresh();
+          }
+        }, {
+          key: 'parseTarget',
+          value: function parseTarget() {
+            this.initFilters();
+            var newTarget = _.cloneDeep(this.panel.triggers);
+            if (!_.isEqual(this.oldTarget, this.panel.triggers)) {
+              this.oldTarget = newTarget;
+              this.panelCtrl.refresh();
+            }
+          }
+        }, {
+          key: 'refreshTriggerSeverity',
+          value: function 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();
+          }
+        }, {
+          key: 'datasourceChanged',
+          value: function datasourceChanged() {
+            this.panelCtrl.refresh();
+          }
+        }, {
+          key: 'changeTriggerSeverityColor',
+          value: function changeTriggerSeverityColor(trigger, color) {
+            this.panel.triggerSeverity[trigger.priority].color = color;
+            this.refreshTriggerSeverity();
+          }
+        }, {
+          key: 'isRegex',
+          value: function isRegex(str) {
+            return utils.isRegex(str);
+          }
+        }, {
+          key: 'isVariable',
+          value: function isVariable(str) {
+            return utils.isTemplateVariable(str, this.templateSrv.variables);
+          }
+        }, {
+          key: 'getZabbixDataSources',
+          value: function getZabbixDataSources() {
+            var ZABBIX_DS_ID = 'alexanderzobnin-zabbix-datasource';
+            return _.filter(this.datasourceSrv.getMetricSources(), function (datasource) {
+              return datasource.meta.id === ZABBIX_DS_ID && datasource.value;
+            });
+          }
+        }]);
+
+        return TriggerPanelEditorCtrl;
+      }();
+    }
+  };
+});
+//# sourceMappingURL=editor.js.map

dist/panel-triggers/module.html

@@ -0,0 +1,124 @@
+<div class="triggers-panel-container">
+  <div class="triggers-panel-header-bg"></div>
+  <div class="triggers-panel-scroll">
+    <table class="triggers-panel-table">
+      <thead>
+        <tr>
+          <th ng-if="ctrl.panel.hostField" style="width: 15%">
+            <div class="triggers-panel-table-header-inner pointer">
+              Host
+            </div>
+          </th>
+          <th ng-if="ctrl.panel.hostTechNameField" style="width: 15%">
+            <div class="triggers-panel-table-header-inner pointer">
+              Technical Name
+            </div>
+          </th>
+          <th ng-if="ctrl.panel.statusField" style="width: 85px">
+            <div class="triggers-panel-table-header-inner pointer">Status</div>
+          </th>
+          <th ng-if="ctrl.panel.severityField" style="width: 120px">
+            <div class="triggers-panel-table-header-inner pointer">Severity</div>
+          </th>
+          <th>
+            <div class="triggers-panel-table-header-inner pointer">Issue</div>
+          </th>
+          <th ng-if="ctrl.panel.lastChangeField" style="width: 220px">
+            <div class="triggers-panel-table-header-inner pointer">Last change</div>
+          </th>
+          <th ng-if="ctrl.panel.ageField" style="width: 180px">
+            <div class="triggers-panel-table-header-inner pointer">Age</div>
+          </th>
+          <th ng-if="ctrl.panel.infoField" style="width: 100px">
+            <div class="triggers-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.hostTechNameField">
+            <div>
+              <span><strong>{{trigger.hostTechName}}</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"
+                  role="button"
+                  ng-click="ctrl.switchComment(trigger)"
+                  class="pointer"
+                  style="float: right; padding-right: 8px"
+                  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.showComment">
+              <div>
+                <small>{{trigger.comments}}</small>
+              </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 state -->
+            <span ng-if="trigger.state === '1'"
+                  bs-tooltip="'{{trigger.error}}'">
+              <i class="fa fa-question-circle"></i>
+            </span>
+
+            <!-- Trigger acknowledges -->
+            <ack-tooltip
+              ack="trigger.acknowledges"
+              trigger="trigger"
+              on-ack="ctrl.acknowledgeTrigger"
+              context="ctrl">
+            </ack-tooltip>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+<div class="triggers-panel-footer"></div>

dist/panel-triggers/module.js

@@ -0,0 +1,321 @@
+'use strict';
+
+System.register(['lodash', 'moment', '../datasource-zabbix/utils', 'app/plugins/sdk', './editor', './ack-tooltip.directive', './css/panel_triggers.css!'], function (_export, _context) {
+  "use strict";
+
+  var _, moment, utils, MetricsPanelCtrl, triggerPanelEditor, _createClass, defaultSeverity, panelDefaults, triggerStatusMap, defaultTimeFormat, TriggerPanelCtrl;
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  function _possibleConstructorReturn(self, call) {
+    if (!self) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return call && (typeof call === "object" || typeof call === "function") ? call : self;
+  }
+
+  function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+    }
+
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+  }
+
+  function filterTriggers(triggers, triggerFilter) {
+    if (utils.isRegex(triggerFilter)) {
+      return _.filter(triggers, function (trigger) {
+        return utils.buildRegex(triggerFilter).test(trigger.description);
+      });
+    } else {
+      return _.filter(triggers, function (trigger) {
+        return trigger.description === triggerFilter;
+      });
+    }
+  }
+
+  return {
+    setters: [function (_lodash) {
+      _ = _lodash.default;
+    }, function (_moment) {
+      moment = _moment.default;
+    }, function (_datasourceZabbixUtils) {
+      utils = _datasourceZabbixUtils;
+    }, function (_appPluginsSdk) {
+      MetricsPanelCtrl = _appPluginsSdk.MetricsPanelCtrl;
+    }, function (_editor) {
+      triggerPanelEditor = _editor.triggerPanelEditor;
+    }, function (_ackTooltipDirective) {}, function (_cssPanel_triggersCss) {}],
+    execute: function () {
+      _createClass = function () {
+        function defineProperties(target, props) {
+          for (var i = 0; i < props.length; i++) {
+            var descriptor = props[i];
+            descriptor.enumerable = descriptor.enumerable || false;
+            descriptor.configurable = true;
+            if ("value" in descriptor) descriptor.writable = true;
+            Object.defineProperty(target, descriptor.key, descriptor);
+          }
+        }
+
+        return function (Constructor, protoProps, staticProps) {
+          if (protoProps) defineProperties(Constructor.prototype, protoProps);
+          if (staticProps) defineProperties(Constructor, staticProps);
+          return Constructor;
+        };
+      }();
+
+      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 = {
+        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: 'Problems', value: '1' },
+        triggerSeverity: defaultSeverity,
+        okEventColor: 'rgba(0, 245, 153, 0.45)',
+        ackEventColor: 'rgba(0, 0, 0, 0)'
+      };
+      triggerStatusMap = {
+        '0': 'OK',
+        '1': 'Problem'
+      };
+      defaultTimeFormat = "DD MMM YYYY HH:mm:ss";
+
+      _export('PanelCtrl', _export('TriggerPanelCtrl', TriggerPanelCtrl = function (_MetricsPanelCtrl) {
+        _inherits(TriggerPanelCtrl, _MetricsPanelCtrl);
+
+        /** @ngInject */
+        function TriggerPanelCtrl($scope, $injector, $element, datasourceSrv, templateSrv, contextSrv) {
+          _classCallCheck(this, TriggerPanelCtrl);
+
+          var _this = _possibleConstructorReturn(this, (TriggerPanelCtrl.__proto__ || Object.getPrototypeOf(TriggerPanelCtrl)).call(this, $scope, $injector));
+
+          _this.datasourceSrv = datasourceSrv;
+          _this.templateSrv = templateSrv;
+          _this.contextSrv = contextSrv;
+          _this.triggerStatusMap = triggerStatusMap;
+          _this.defaultTimeFormat = defaultTimeFormat;
+
+          // Load panel defaults
+          // _.cloneDeep() need for prevent changing shared defaultSeverity.
+          // Load object "by value" istead "by reference".
+          _.defaults(_this.panel, _.cloneDeep(panelDefaults));
+
+          _this.triggerList = [];
+          _this.refreshData();
+          return _this;
+        }
+
+        /**
+         * Override onInitMetricsPanelEditMode() method from MetricsPanelCtrl.
+         * We don't need metric editor from Metrics Panel.
+         */
+
+
+        _createClass(TriggerPanelCtrl, [{
+          key: 'onInitMetricsPanelEditMode',
+          value: function onInitMetricsPanelEditMode() {
+            this.addEditorTab('Options', triggerPanelEditor, 2);
+          }
+        }, {
+          key: 'refresh',
+          value: function refresh() {
+            this.onMetricsPanelRefresh();
+          }
+        }, {
+          key: 'onMetricsPanelRefresh',
+          value: function onMetricsPanelRefresh() {
+            // ignore fetching data if another panel is in fullscreen
+            if (this.otherPanelInFullscreenMode()) {
+              return;
+            }
+
+            this.refreshData();
+          }
+        }, {
+          key: 'refreshData',
+          value: function refreshData() {
+            // clear loading/error state
+            delete this.error;
+            this.loading = true;
+            this.setTimeQueryStart();
+
+            var self = this;
+
+            // Load datasource
+            return this.datasourceSrv.get(this.panel.datasource).then(function (datasource) {
+              var zabbix = datasource.zabbix;
+              var showEvents = self.panel.showEvents.value;
+              var triggerFilter = self.panel.triggers;
+
+              // Replace template variables
+              var groupFilter = datasource.replaceTemplateVars(triggerFilter.group.filter);
+              var hostFilter = datasource.replaceTemplateVars(triggerFilter.host.filter);
+              var appFilter = datasource.replaceTemplateVars(triggerFilter.application.filter);
+
+              var getTriggers = zabbix.getTriggers(groupFilter, hostFilter, appFilter, showEvents);
+              return getTriggers.then(function (triggers) {
+                return _.map(triggers, function (trigger) {
+                  var triggerObj = trigger;
+
+                  // Format last change and age
+                  trigger.lastchangeUnix = Number(trigger.lastchange);
+                  var timestamp = moment.unix(trigger.lastchangeUnix);
+                  if (self.panel.customLastChangeFormat) {
+                    // User defined format
+                    triggerObj.lastchange = timestamp.format(self.panel.lastChangeFormat);
+                  } else {
+                    triggerObj.lastchange = timestamp.format(self.defaultTimeFormat);
+                  }
+                  triggerObj.age = timestamp.fromNow(true);
+
+                  // Set host that the trigger belongs
+                  if (trigger.hosts.length) {
+                    triggerObj.host = trigger.hosts[0].name;
+                    triggerObj.hostTechName = trigger.hosts[0].host;
+                  }
+
+                  // Set color
+                  if (trigger.value === '1') {
+                    // Problem state
+                    triggerObj.color = self.panel.triggerSeverity[trigger.priority].color;
+                  } else {
+                    // OK state
+                    triggerObj.color = self.panel.okEventColor;
+                  }
+
+                  triggerObj.severity = self.panel.triggerSeverity[trigger.priority].severity;
+                  return triggerObj;
+                });
+              }).then(function (triggerList) {
+
+                // Request acknowledges for trigger
+                var eventids = _.map(triggerList, function (trigger) {
+                  return trigger.lastEvent.eventid;
+                });
+
+                return zabbix.getAcknowledges(eventids).then(function (events) {
+
+                  // Map events to triggers
+                  _.each(triggerList, function (trigger) {
+                    var event = _.find(events, function (event) {
+                      return event.eventid === trigger.lastEvent.eventid;
+                    });
+
+                    if (event) {
+                      trigger.acknowledges = _.map(event.acknowledges, function (ack) {
+                        var timestamp = moment.unix(ack.clock);
+                        if (self.panel.customLastChangeFormat) {
+                          ack.time = timestamp.format(self.panel.lastChangeFormat);
+                        } else {
+                          ack.time = timestamp.format(self.defaultTimeFormat);
+                        }
+                        ack.user = ack.alias + ' (' + ack.name + ' ' + ack.surname + ')';
+                        return ack;
+                      });
+
+                      // Mark acknowledged triggers with different color
+                      if (self.panel.markAckEvents && trigger.acknowledges.length) {
+                        trigger.color = self.panel.ackEventColor;
+                      }
+                    }
+                  });
+
+                  // Filter triggers by description
+                  var triggerFilter = self.panel.triggers.trigger.filter;
+                  if (triggerFilter) {
+                    triggerList = filterTriggers(triggerList, triggerFilter);
+                  }
+
+                  // Filter acknowledged triggers
+                  if (self.panel.showTriggers === 'unacknowledged') {
+                    triggerList = _.filter(triggerList, function (trigger) {
+                      return !trigger.acknowledges;
+                    });
+                  } else if (self.panel.showTriggers === 'acknowledged') {
+                    triggerList = _.filter(triggerList, 'acknowledges');
+                  } else {
+                    triggerList = triggerList;
+                  }
+
+                  // Filter triggers by severity
+                  triggerList = _.filter(triggerList, function (trigger) {
+                    return self.panel.triggerSeverity[trigger.priority].show;
+                  });
+
+                  // Sort triggers
+                  if (self.panel.sortTriggersBy.value === 'priority') {
+                    triggerList = _.sortBy(triggerList, 'priority').reverse();
+                  } else {
+                    triggerList = _.sortBy(triggerList, 'lastchangeUnix').reverse();
+                  }
+
+                  // Limit triggers number
+                  self.triggerList = triggerList.slice(0, self.panel.limit);
+
+                  // Notify panel that request is finished
+                  self.setTimeQueryEnd();
+                  self.loading = false;
+                });
+              });
+            });
+          }
+        }, {
+          key: 'switchComment',
+          value: function switchComment(trigger) {
+            trigger.showComment = !trigger.showComment;
+          }
+        }, {
+          key: 'acknowledgeTrigger',
+          value: function acknowledgeTrigger(trigger, message) {
+            var _this2 = this;
+
+            var eventid = trigger.lastEvent.eventid;
+            var grafana_user = this.contextSrv.user.name;
+            var ack_message = grafana_user + ' (Grafana): ' + message;
+            return this.datasourceSrv.get(this.panel.datasource).then(function (datasource) {
+              var zabbixAPI = datasource.zabbix.zabbixAPI;
+              return zabbixAPI.acknowledgeEvent(eventid, ack_message).then(function () {
+                _this2.refresh();
+              });
+            });
+          }
+        }]);
+
+        return TriggerPanelCtrl;
+      }(MetricsPanelCtrl)));
+
+      TriggerPanelCtrl.templateUrl = 'panel-triggers/module.html';
+      _export('TriggerPanelCtrl', TriggerPanelCtrl);
+
+      _export('PanelCtrl', TriggerPanelCtrl);
+    }
+  };
+});
+//# sourceMappingURL=module.js.map

dist/panel-triggers/plugin.json

@@ -0,0 +1,12 @@
+{
+  "type": "panel",
+  "name": "Zabbix Triggers",
+  "id": "alexanderzobnin-zabbix-triggers-panel",
+
+  "info": {
+    "author": {
+      "name": "Alexander Zobnin",
+      "url": "https://github.com/alexanderzobnin/grafana-zabbix"
+    }
+  }
+}