From c5a421c933cba71fc24c6105edb6d077fd195e9f Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Wed, 30 Mar 2016 23:04:17 +0300
Subject: [PATCH] Added variables highlight in query editor.

---
 src/datasource-zabbix/css/query-editor.css    |  4 ++++
 .../partials/query.editor.html                | 20 +++++++++++++++----
 src/datasource-zabbix/query.controller.js     | 12 +++++++++++
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/datasource-zabbix/css/query-editor.css b/src/datasource-zabbix/css/query-editor.css
index 5bf1cdb..3edd27d 100644
--- a/src/datasource-zabbix/css/query-editor.css
+++ b/src/datasource-zabbix/css/query-editor.css
@@ -1,3 +1,7 @@
 .zbx-regex {
   color: #CCA300;
 }
+
+.zbx-variable {
+  color: #33B5E5;
+}
diff --git a/src/datasource-zabbix/partials/query.editor.html b/src/datasource-zabbix/partials/query.editor.html
index 5c89d6e..72f6b73 100644
--- a/src/datasource-zabbix/partials/query.editor.html
+++ b/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">
diff --git a/src/datasource-zabbix/query.controller.js b/src/datasource-zabbix/query.controller.js
index cd06a2c..3e270e1 100644
--- a/src/datasource-zabbix/query.controller.js
+++ b/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)) {