Detect regex in metric queries.

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

@@ -89,24 +89,28 @@
     <li class="tight-form-item input-small" style="width: 5em">Group</li>
     <li>
       <input type="text"
-        ng-model="target.groupFilter"
+        ng-model="target.group.filter"
         bs-typeahead="getGroupNames"
-        ng-blur="render()"
+        ng-change="onTargetPartChange(target.group)"
+        ng-blur="parseTarget()"
         data-min-length=0
         data-items=100
-        class="input-medium tight-form-input" >
+        class="input-medium tight-form-input"
+        ng-style="target.group.style">
     </li>
 
     <!-- Select Host -->
     <li class="tight-form-item input-small" style="width: 3em">Host</li>
     <li>
       <input type="text"
-        ng-model="target.hostFilter"
+        ng-model="target.host.filter"
         bs-typeahead="getHostNames"
-        ng-blur="render()"
+        ng-change="onTargetPartChange(target.host)"
+        ng-blur="parseTarget()"
         data-min-length=0
         data-items=100
-        class="input-large tight-form-input" >
+        class="input-large tight-form-input"
+        ng-style="target.host.style">
     </li>
 
     <!-- Downsampling function -->
@@ -139,24 +143,28 @@
     <li class="tight-form-item input-small" style="width: 5em">Application</li>
     <li>
       <input type="text"
-        ng-model="target.applicationFilter"
+        ng-model="target.application.filter"
         bs-typeahead="getApplicationNames"
-        ng-blur="render()"
+        ng-change="onTargetPartChange(target.application)"
+        ng-blur="parseTarget()"
         data-min-length=0
         data-items=100
-        class="input-medium tight-form-input" >
+        class="input-medium tight-form-input"
+        ng-style="target.application.style">
     </li>
 
     <!-- Select Item -->
     <li class="tight-form-item input-small" style="width: 3em">Item</li>
     <li>
       <input type="text"
-        ng-model="target.itemFilter"
+        ng-model="target.item.filter"
         bs-typeahead="getItemNames"
-        ng-blur="render()"
+        ng-change="onTargetPartChange(target.item)"
+        ng-blur="parseTarget()"
         data-min-length=0
         data-items=100
-        class="input-large tight-form-input" >
+        class="input-large tight-form-input"
+        ng-style="target.item.style">
     </li>
 
     <!-- Scale -->

plugins/datasource-zabbix/queryCtrl.js

@@ -1,7 +1,8 @@
 define([
     'angular',
     'lodash',
-    './helperFunctions'
+    './helperFunctions',
+    './utils'
   ],
   function (angular, _) {
     'use strict';
@@ -9,7 +10,7 @@ define([
     var module = angular.module('grafana.controllers');
     var targetLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 
-    module.controller('ZabbixAPIQueryCtrl', function ($scope, $sce, templateSrv, zabbixHelperSrv) {
+    module.controller('ZabbixAPIQueryCtrl', function ($scope, $sce, templateSrv, zabbixHelperSrv, Utils) {
 
       var zabbixCache = $scope.datasource.zabbixCache;
 
@@ -76,12 +77,34 @@ define([
         return _.uniq(_.map(scope.metric[metricList], 'name'));
       }
 
-      // Map functions
+      // Map functions for bs-typeahead
       $scope.getGroupNames = _.partial(getMetricNames, $scope, 'groupList');
       $scope.getHostNames = _.partial(getMetricNames, $scope, 'hostList');
       $scope.getApplicationNames = _.partial(getMetricNames, $scope, 'applicationList');
       $scope.getItemNames = _.partial(getMetricNames, $scope, 'itemList');
 
+      $scope.onTargetPartChange = function (targetPart) {
+        var regexStyle = {'color': '#CCA300'};
+        targetPart.isRegex = Utils.isRegex(targetPart.filter);
+        targetPart.style = targetPart.isRegex ? regexStyle : {};
+      };
+
+      $scope.parseTarget = function() {
+        var regexStyle = {'color': '#CCA300'};
+
+        $scope.target.groupIsRegex = Utils.isRegex($scope.target.groupFilter);
+        $scope.groupStyle = $scope.target.groupIsRegex ? regexStyle : {};
+
+        $scope.target.hostIsRegex = Utils.isRegex($scope.target.hostFilter);
+        $scope.hostStyle = $scope.target.hostIsRegex ? regexStyle : {};
+
+        $scope.target.applicationIsRegex = Utils.isRegex($scope.target.applicationFilter);
+        $scope.applicationsStyle = $scope.target.applicationIsRegex ? regexStyle : {};
+
+        $scope.target.itemIsRegex = Utils.isRegex($scope.target.itemFilter);
+        $scope.itemStyle = $scope.target.itemIsRegex ? regexStyle : {};
+      };
+
       /**
        * Switch query editor to specified mode.
        * Modes:

plugins/datasource-zabbix/utils.js

@@ -28,5 +28,20 @@ function (angular, _) {
       }
       return name;
     };
+
+    // Pattern for testing regex
+    var regexPattern = /^\/(.*)\/([gmi]*)$/m;
+
+    this.isRegex = function (str) {
+      return regexPattern.test(str);
+    };
+
+    this.buildRegex = function (str) {
+      var matches = str.match(regexPattern);
+      var pattern = matches[1];
+      var flags = matches[2] !== "" ? matches[2] : undefined;
+      return new RegExp(pattern, flags);
+    };
+
   });
 });