Improved regex highlighting in query editor (using custom css).

Removed unused fields from targets ('isRegex' and 'style').

src/datasource-zabbix/css/query-editor.css

@@ -0,0 +1,3 @@
+.zbx-regex {
+  color: #CCA300;
+}

src/datasource-zabbix/datasource.js

@@ -134,7 +134,7 @@ export class ZabbixAPIDatasource {
           return self.queryProcessor.build(groupFilter, hostFilter, appFilter, itemFilter)
             .then(function(items) {
               // Add hostname for items from multiple hosts
-              var addHostName = target.host.isRegex;
+              var addHostName = utils.isRegex(target.host.filter);
               var getHistory;
 
               // Use trends

src/datasource-zabbix/migrations.js

@@ -19,13 +19,9 @@ export function isGrafana2target(target) {
 
 export function migrateFrom2To3version(target) {
   target.group.filter = target.group.name === "*" ? "/.*/" : target.group.name;
-  target.group.isRegex = target.group.name === "*";
   target.host.filter = target.host.name === "*" ? convertToRegex(target.hostFilter) : target.host.name;
-  target.host.isRegex = target.host.name === "*";
   target.application.filter = target.application.name === "*" ? "" : target.application.name;
-  target.application.isRegex = target.application.name === "*";
   target.item.filter = target.item.name === "All" ? convertToRegex(target.itemFilter) : target.item.name;
-  target.item.isRegex = target.item.name === "All";
   return target;
 }
 

src/datasource-zabbix/partials/query.editor.html

@@ -94,7 +94,7 @@
         data-min-length=0
         data-items=100
         class="input-medium tight-form-input"
-        ng-style="ctrl.target.group.style">
+        ng-class="{'zbx-regex': ctrl.isRegex(ctrl.target.group.filter)}">
     </li>
 
     <!-- Select Host -->
@@ -108,7 +108,7 @@
         data-min-length=0
         data-items=100
         class="input-large tight-form-input"
-        ng-style="ctrl.target.host.style">
+        ng-class="{'zbx-regex': ctrl.isRegex(ctrl.target.host.filter)}">
     </li>
     <li class="tight-form-item" ng-hide="ctrl.target.mode == 2">
       Show disabled items&nbsp;
@@ -155,7 +155,7 @@
         data-min-length=0
         data-items=100
         class="input-medium tight-form-input"
-        ng-style="ctrl.target.application.style">
+        ng-class="{'zbx-regex': ctrl.isRegex(ctrl.target.application.filter)}">
     </li>
 
     <!-- Select Item -->
@@ -169,7 +169,7 @@
         data-min-length=0
         data-items=100
         class="input-large tight-form-input"
-        ng-style="ctrl.target.item.style">
+        ng-class="{'zbx-regex': ctrl.isRegex(ctrl.target.item.filter)}">
     </li>
     <li class="tight-form-item query-keyword">Options</li>
     <li ng-repeat="func in ctrl.target.functions">

src/datasource-zabbix/query.controller.js

@@ -7,6 +7,8 @@ import * as migrations from './migrations';
 import './add-metric-function.directive';
 import './metric-function-editor.directive';
 
+import './css/query-editor.css!';
+
 export class ZabbixQueryController extends QueryCtrl {
 
   // ZabbixQueryCtrl constructor
@@ -171,9 +173,13 @@ export class ZabbixQueryController extends QueryCtrl {
   }
 
   onTargetPartChange(targetPart) {
-    var regexStyle = {'color': '#CCA300'};
+    /*var regexStyle = {'color': '#CCA300'};
     targetPart.isRegex = utils.isRegex(targetPart.filter);
-    targetPart.style = targetPart.isRegex ? regexStyle : {};
+    targetPart.style = targetPart.isRegex ? regexStyle : {};*/
+  }
+
+  isRegex(str) {
+    return utils.isRegex(str);
   }
 
   onTargetBlur() {