Triggers panel refactor.

src/panel-triggers/editor.html

@@ -10,12 +10,14 @@
           <input type="text"
             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="editor.panel.triggers.group.style">
+            ng-class="{
+              'zbx-variable': editor.isVariable(editor.panel.triggers.group.filter),
+              'zbx-regex': editor.isRegex(editor.panel.triggers.group.filter)
+            }">
         </li>
         <li class="tight-form-item" style="width: 50px">
           Host
@@ -24,12 +26,14 @@
           <input type="text"
             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="editor.panel.triggers.host.style">
+            ng-class="{
+              'zbx-variable': editor.isVariable(editor.panel.triggers.host.filter),
+              'zbx-regex': editor.isRegex(editor.panel.triggers.host.filter)
+            }">
         </li>
       </ul>
       <div class="clearfix"></div>
@@ -43,12 +47,14 @@
           <input type="text"
             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="editor.panel.triggers.application.style">
+            ng-class="{
+              'zbx-variable': editor.isVariable(editor.panel.triggers.application.filter),
+              'zbx-regex': editor.isRegex(editor.panel.triggers.application.filter)
+            }">
         </li>
         <li class="tight-form-item" style="width: 50px">
           Trigger
@@ -56,7 +62,6 @@
         <li>
           <input  type="text"
                   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"

src/panel-triggers/editor.js

@@ -12,7 +12,9 @@
  */
 
 import _ from 'lodash';
-import $ from 'jquery';
+import * as utils from '../datasource-zabbix/utils';
+
+import '../datasource-zabbix/css/query-editor.css!';
 
 class TriggerPanelEditorCtrl {
 
@@ -108,12 +110,6 @@ class TriggerPanelEditorCtrl {
       });
   }
 
-  onTargetPartChange(targetPart) {
-    var regexStyle = {'color': '#CCA300'};
-    targetPart.isRegex = isRegex(targetPart.filter);
-    targetPart.style = targetPart.isRegex ? regexStyle : {};
-  }
-
   parseTarget() {
     this.initFilters();
     var newTarget = _.cloneDeep(this.panel.triggers);
@@ -140,36 +136,20 @@ class TriggerPanelEditorCtrl {
     this.refreshTriggerSeverity();
   }
 
-  openTriggerColorSelector(event) {
+  isRegex(str) {
-    var el = $(event.currentTarget);
+    return utils.isRegex(str);
-    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/alexanderzobnin-zabbix-app/panel-triggers/trigger.colorpicker.html',
-      scope: popoverScope
-    });
   }
 
-  openOkEventColorSelector(event) {
+  isVariable(str) {
-    var el = $(event.currentTarget);
+    var variablePattern = /^\$\w+/;
-    var popoverScope = this.$new();
+    if (variablePattern.test(str)) {
-    popoverScope.trigger = {color: this.panel.okEventColor};
+      var variables = _.map(this.templateSrv.variables, variable => {
-    popoverScope.changeTriggerSeverityColor = function(trigger, color) {
+        return '$' + variable.name;
-      this.panel.okEventColor = color;
+      });
-      this.refreshTriggerSeverity();
+      return _.contains(variables, str);
-    };
+    } else {
-
+      return false;
-    this.popoverSrv.show({
+    }
-      element: el,
-      placement: 'top',
-      templateUrl:  'public/plugins/alexanderzobnin-zabbix-app/panel-triggers/trigger.colorpicker.html',
-      scope: popoverScope
-    });
   }
 }
 
@@ -178,16 +158,6 @@ function getMetricNames(scope, metricList) {
   return _.uniq(_.map(scope.metric[metricList], 'name'));
 }
 
-function getTriggerIndexForElement(el) {
-  return el.parents('[data-trigger-index]').data('trigger-index');
-}
-
-function isRegex(str) {
-  // Pattern for testing regex
-  var regexPattern = /^\/(.*)\/([gmi]*)$/m;
-  return regexPattern.test(str);
-}
-
 export function triggerPanelEditor() {
   return {
     restrict: 'E',

src/panel-triggers/module.js

@@ -13,6 +13,7 @@
 
 import _ from 'lodash';
 import moment from 'moment';
+import * as utils from '../datasource-zabbix/utils';
 import {MetricsPanelCtrl} from 'app/plugins/sdk';
 import {triggerPanelEditor} from './editor';
 import './css/panel_triggers.css!';
@@ -90,15 +91,15 @@ class TriggerPanelCtrl extends MetricsPanelCtrl {
     // ignore fetching data if another panel is in fullscreen
     if (this.otherPanelInFullscreenMode()) { return; }
 
+    this.refreshData();
+  }
+
+  refreshData() {
     // clear loading/error state
     delete this.error;
     this.loading = true;
     this.setTimeQueryStart();
 
-    this.refreshData();
-  }
-
-  refreshData() {
     var self = this;
 
     // Load datasource
@@ -210,8 +211,9 @@ class TriggerPanelCtrl extends MetricsPanelCtrl {
                 // Limit triggers number
                 self.triggerList  = _.first(triggerList, self.panel.limit);
 
-                this.setTimeQueryEnd();
+                // Notify panel that request is finished
-                this.loading = false;
+                self.setTimeQueryEnd();
+                self.loading = false;
               });
           });
       });
@@ -230,9 +232,9 @@ class TriggerPanelCtrl extends MetricsPanelCtrl {
 TriggerPanelCtrl.templateUrl = 'panel-triggers/module.html';
 
 function filterTriggers(triggers, triggerFilter) {
-  if (isRegex(triggerFilter)) {
+  if (utils.isRegex(triggerFilter)) {
     return _.filter(triggers, function(trigger) {
-      return buildRegex(triggerFilter).test(trigger.description);
+      return utils.buildRegex(triggerFilter).test(trigger.description);
     });
   } else {
     return _.filter(triggers, function(trigger) {
@@ -241,20 +243,6 @@ function filterTriggers(triggers, triggerFilter) {
   }
 }
 
-function isRegex(str) {
-  // Pattern for testing regex
-  var regexPattern = /^\/(.*)\/([gmi]*)$/m;
-  return regexPattern.test(str);
-}
-
-function buildRegex(str) {
-  var regexPattern = /^\/(.*)\/([gmi]*)$/m;
-  var matches = str.match(regexPattern);
-  var pattern = matches[1];
-  var flags = matches[2] !== "" ? matches[2] : undefined;
-  return new RegExp(pattern, flags);
-}
-
 export {
   TriggerPanelCtrl,
   TriggerPanelCtrl as PanelCtrl

src/panel-triggers/trigger.colorpicker.html

@@ -1,13 +0,0 @@
-<div class="graph-legend-popover">
-	<a 	class="close"
-			href=""
-			ng-click="dismiss();">×</a>
-
-	<div class="editor-row">
-		<i 	ng-repeat="color in colors" class="pointer"
-				ng-class="{'fa fa-circle-o': color === trigger.color,'fa fa-circle': color !== trigger.color}"
-				ng-style="{color:color}"
-				ng-click="changeTriggerSeverityColor(trigger, color);dismiss();">&nbsp;</i>
-	</div>
-</div>
-