Added variables highlight in query editor.

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

@@ -1,3 +1,7 @@
 .zbx-regex {
   color: #CCA300;
 }
+
+.zbx-variable {
+  color: #33B5E5;
+}

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

@@ -94,7 +94,10 @@
         data-min-length=0
         data-items=100
         class="input-medium tight-form-input"
-        ng-class="{'zbx-regex': ctrl.isRegex(ctrl.target.group.filter)}">
+        ng-class="{
+          'zbx-variable': ctrl.isVariable(ctrl.target.group.filter),
+          'zbx-regex': ctrl.isRegex(ctrl.target.group.filter)
+        }">
     </li>
 
     <!-- Select Host -->
@@ -108,7 +111,10 @@
         data-min-length=0
         data-items=100
         class="input-large tight-form-input"
-        ng-class="{'zbx-regex': ctrl.isRegex(ctrl.target.host.filter)}">
+        ng-class="{
+          'zbx-variable': ctrl.isVariable(ctrl.target.host.filter),
+          '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 +161,10 @@
         data-min-length=0
         data-items=100
         class="input-medium tight-form-input"
-        ng-class="{'zbx-regex': ctrl.isRegex(ctrl.target.application.filter)}">
+        ng-class="{
+          'zbx-variable': ctrl.isVariable(ctrl.target.application.filter),
+          'zbx-regex': ctrl.isRegex(ctrl.target.application.filter)
+        }">
     </li>
 
     <!-- Select Item -->
@@ -169,7 +178,10 @@
         data-min-length=0
         data-items=100
         class="input-large tight-form-input"
-        ng-class="{'zbx-regex': ctrl.isRegex(ctrl.target.item.filter)}">
+        ng-class="{
+          'zbx-variable': ctrl.isVariable(ctrl.target.item.filter),
+          '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

@@ -182,6 +182,18 @@ export class ZabbixQueryController extends QueryCtrl {
     return utils.isRegex(str);
   }
 
+  isVariable(str) {
+    var variablePattern = /^\$\w+/;
+    if (variablePattern.test(str)) {
+      var variables = _.map(this.templateSrv.variables, variable => {
+        return '$' + variable.name;
+      });
+      return _.contains(variables, str);
+    } else {
+      return false;
+    }
+  }
+
   onTargetBlur() {
     var newTarget = _.cloneDeep(this.target);
     if (!_.isEqual(this.oldTarget, this.target)) {