Iss #152 - fixed query editor.

Query editor now use app/plugins/sdk for work. Fixed controller
and template.

plugins/datasource-zabbix/addMetricFunction.js

@@ -98,7 +98,7 @@ function (angular, _, $, metricFunctions) {
         submenu: _.map(list, function(value) {
           return {
             text: value.name,
-            click: "addFunction('" + value.name + "')",
+            click: "ctrl.addFunction('" + value.name + "')",
           };
         })
       };

plugins/datasource-zabbix/metricFunctionEditor.js

@@ -27,6 +27,7 @@ function (angular, _, $) {
         link: function postLink($scope, elem) {
           var $funcLink = $(funcSpanTemplate);
           var $funcControls = $(funcControlsTemplate);
+          var ctrl = $scope.ctrl;
           var func = $scope.func;
           var funcDef = func.def;
           var scheduledRelink = false;
@@ -79,11 +80,13 @@ function (angular, _, $) {
               func.updateParam($input.val(), paramIndex);
               scheduledRelinkIfNeeded();
 
-              $scope.$apply($scope.targetChanged);
+              $scope.$apply(function() {
-            }
+                ctrl.targetChanged();
+              });
 
-            $input.hide();
+              $input.hide();
-            $link.show();
+              $link.show();
+            }
           }
 
           function inputKeyPress(paramIndex, e) {
@@ -198,7 +201,7 @@ function (angular, _, $) {
               if ($target.hasClass('fa-remove')) {
                 toggleFuncControls();
                 $scope.$apply(function() {
-                  $scope.removeFunction($scope.func);
+                  ctrl.removeFunction($scope.func);
                 });
                 return;
               }
@@ -206,7 +209,7 @@ function (angular, _, $) {
               if ($target.hasClass('fa-arrow-left')) {
                 $scope.$apply(function() {
                   _.move($scope.target.functions, $scope.$index, $scope.$index - 1);
-                  $scope.targetChanged();
+                  ctrl.targetChanged();
                 });
                 return;
               }
@@ -214,7 +217,7 @@ function (angular, _, $) {
               if ($target.hasClass('fa-arrow-right')) {
                 $scope.$apply(function() {
                   _.move($scope.target.functions, $scope.$index, $scope.$index + 1);
-                  $scope.targetChanged();
+                  ctrl.targetChanged();
                 });
                 return;
               }

plugins/datasource-zabbix/module.js

@@ -1,13 +1,10 @@
 define([
-  './datasource'
+  './datasource',
+  './queryCtrl'
 ],
-function (ZabbixAPIDatasource) {
+function (ZabbixAPIDatasource, ZabbixQueryCtrl) {
   'use strict';
 
-  function ZabbixQueryCtrl() {
-    return {controller: 'ZabbixAPIQueryCtrl', templateUrl: 'public/plugins/zabbix/partials/query.editor.html'};
-  }
-
   function ZabbixQueryOptionsCtrl() {
     return {templateUrl: 'public/plugins/zabbix/partials/query.options.html'};
   }
@@ -22,8 +19,8 @@ function (ZabbixAPIDatasource) {
 
   return {
     Datasource: ZabbixAPIDatasource,
-    ConfigCtrl: ZabbixConfigCtrl,
     QueryCtrl: ZabbixQueryCtrl,
+    ConfigCtrl: ZabbixConfigCtrl,
     QueryOptionsCtrl: ZabbixQueryOptionsCtrl,
     AnnotationsQueryCtrl: ZabbixAnnotationsQueryCtrl
   };

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

@@ -1,7 +1,7 @@
 <div class="tight-form">
   <ul class="tight-form-list pull-right">
-    <li class="tight-form-item small" ng-show="target.datasource">
+    <li class="tight-form-item small" ng-show="ctrl.target.datasource">
-      <em>{{target.datasource}}</em>
+      <em>{{ctrl.target.datasource}}</em>
     </li>
     <li class="tight-form-item">
       <div class="dropdown">
@@ -13,119 +13,125 @@
         <ul class="dropdown-menu pull-right" role="menu">
 
           <!-- Switch editor mode -->
-          <li role="menuitem" ng-show="target.mode">
+          <li role="menuitem" ng-show="ctrl.target.mode">
             <a class="pointer" tabindex="1"
-               ng-click="switchEditorMode(0)">Numeric metrics</a>
+               ng-click="ctrl.switchEditorMode(0)">Numeric metrics</a>
           </li>
-          <li role="menuitem" ng-show="target.mode != 1">
+          <li role="menuitem" ng-show="ctrl.target.mode != 1">
             <a class="pointer" tabindex="1"
-               ng-click="switchEditorMode(1)">IT services</a>
+               ng-click="ctrl.switchEditorMode(1)">IT services</a>
           </li>
-          <li role="menuitem" ng-show="target.mode != 2">
+          <li role="menuitem" ng-show="ctrl.target.mode != 2">
             <a class="pointer" tabindex="1"
-               ng-click="switchEditorMode(2)">Text metrics</a>
+               ng-click="ctrl.switchEditorMode(2)">Text metrics</a>
           </li>
           <li class="divider" role="menuitem"></li>
-          <li role="menuitem"><a tabindex="1" ng-click="duplicate()">Duplicate</a></li>
+
-          <li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index-1)">Move up</a></li>
+          <!-- From app/features/panel/partials/query_editor_row.html -->
-          <li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index+1)">Move down</a></li>
+          <li role="menuitem">
+            <a tabindex="1" ng-click="ctrl.duplicateQuery()">Duplicate</a>
+          </li>
+          <li role="menuitem">
+            <a tabindex="1" ng-click="ctrl.moveQuery(-1)">Move up</a>
+          </li>
+          <li role="menuitem">
+            <a tabindex="1" ng-click="ctrl.moveQuery(1)">Move down</a>
+          </li>
         </ul>
       </div>
     </li>
     <li class="tight-form-item last">
-      <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
+      <a class="pointer" tabindex="1" ng-click="ctrl.removeQuery(target)">
-        <i class="fa fa-remove"></i>
+        <i class="fa fa-trash"></i>
       </a>
     </li>
   </ul>
 
   <ul class="tight-form-list">
     <li class="tight-form-item" style="min-width: 15px; text-align: center">
-      {{target.refId}}
+      {{ctrl.target.refId}}
     </li>
     <li>
-      <a class="tight-form-item"
+      <a class="tight-form-item" ng-click="ctrl.toggleHideQuery()" role="menuitem">
-         ng-click="target.hide = !target.hide; get_data();"
-         role="menuitem">
         <i class="fa fa-eye"></i>
       </a>
     </li>
   </ul>
 
   <!-- IT Service editor -->
-  <ul class="tight-form-list" role="menu" ng-show="target.mode == 1">
+  <ul class="tight-form-list" role="menu" ng-show="ctrl.target.mode == 1">
     <li class="tight-form-item input-small">IT Service</li>
     <li>
       <select class="tight-form-input input-large"
-              ng-change="selectITService()"
+              ng-change="ctrl.selectITService()"
-              ng-model="target.itservice"
+              ng-model="ctrl.target.itservice"
-              bs-tooltip="target.itservice.name.length > 25 ? target.itservice.name : ''"
+              bs-tooltip="ctrl.target.itservice.name.length > 25 ? ctrl.target.itservice.name : ''"
-              ng-options="itservice.name for itservice in itserviceList track by itservice.name">
+              ng-options="itservice.name for itservice in ctrl.itserviceList track by itservice.name">
         <option value="">-- Select IT service --</option>
       </select>
     </li>
     <li class="tight-form-item input-medium">IT service property</li>
     <li>
       <select class="tight-form-input input-medium"
-              ng-change="selectITService()"
+              ng-change="ctrl.selectITService()"
-              ng-model="target.slaProperty"
+              ng-model="ctrl.target.slaProperty"
-              ng-options="slaProperty.name for slaProperty in slaPropertyList track by slaProperty.name">
+              ng-options="slaProperty.name for slaProperty in ctrl.slaPropertyList track by slaProperty.name">
         <option value="">-- Property --</option>
       </select>
     </li>
   </ul>
 
-  <ul class="tight-form-list" role="menu" ng-hide="target.mode == 1">
+  <ul class="tight-form-list" role="menu" ng-hide="ctrl.target.mode == 1">
 
     <!-- Select Host Group -->
     <li class="tight-form-item input-small" style="width: 5em">Group</li>
     <li>
       <input type="text"
-        ng-model="target.group.filter"
+        ng-model="ctrl.target.group.filter"
-        bs-typeahead="getGroupNames"
+        bs-typeahead="ctrl.getGroupNames"
-        ng-change="onTargetPartChange(target.group)"
+        ng-change="ctrl.onTargetPartChange(ctrl.target.group)"
-        ng-blur="onGroupBlur()"
+        ng-blur="ctrl.onTargetBlur()"
         data-min-length=0
         data-items=100
         class="input-medium tight-form-input"
-        ng-style="target.group.style">
+        ng-style="ctrl.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.host.filter"
+        ng-model="ctrl.target.host.filter"
-        bs-typeahead="getHostNames"
+        bs-typeahead="ctrl.getHostNames"
-        ng-change="onTargetPartChange(target.host)"
+        ng-change="ctrl.onTargetPartChange(ctrl.target.host)"
-        ng-blur="onHostBlur()"
+        ng-blur="ctrl.onTargetBlur()"
         data-min-length=0
         data-items=100
         class="input-large tight-form-input"
-        ng-style="target.host.style">
+        ng-style="ctrl.target.host.style">
     </li>
-    <li class="tight-form-item" ng-hide="target.mode == 2">
+    <li class="tight-form-item" ng-hide="ctrl.target.mode == 2">
       Show disabled items&nbsp;
       <editor-checkbox text=""
-        model="target.showDisabledItems"
+        model="ctrl.target.showDisabledItems"
-        change="onApplicationBlur()">
+        change="ctrl.onTargetBlur()">
       </editor-checkbox>
     </li>
 
     <!-- Downsampling function -->
-    <!-- <li class="tight-form-item input-medium" ng-hide="target.mode == 2">
+    <!-- <li class="tight-form-item input-medium" ng-hide="ctrl.target.mode == 2">
       Downsampling
     </li>
-    <li ng-hide="target.mode == 2">
+    <li ng-hide="ctrl.target.mode == 2">
       <select class="tight-form-input input-small"
-              ng-change="targetBlur()"
+              ng-change="ctrl.targetBlur()"
-              ng-model="target.downsampleFunction"
+              ng-model="ctrl.target.downsampleFunction"
               bs-tooltip="'Downsampling function'"
               ng-options="func.name for func in downsampleFunctionList track by func.name">
       </select>
-      <a bs-tooltip="target.errors.metric"
+      <a bs-tooltip="ctrl.target.errors.metric"
          style="color: rgb(229, 189, 28)"
-         ng-show="target.errors.metric">
+         ng-show="ctrl.target.errors.metric">
         <i class="icon-warning-sign"></i>
       </a>
     </li> -->
@@ -134,7 +140,7 @@
   <div class="clearfix"></div>
 </div>
 
-<div class="tight-form" ng-hide="target.mode == 1">
+<div class="tight-form" ng-hide="ctrl.target.mode == 1">
   <ul class="tight-form-list" role="menu">
     <li class="tight-form-item" style="width: 44px">&nbsp</li>
 
@@ -142,31 +148,31 @@
     <li class="tight-form-item" style="width: 5em">Application</li>
     <li>
       <input type="text"
-        ng-model="target.application.filter"
+        ng-model="ctrl.target.application.filter"
-        bs-typeahead="getApplicationNames"
+        bs-typeahead="ctrl.getApplicationNames"
-        ng-change="onTargetPartChange(target.application)"
+        ng-change="ctrl.onTargetPartChange(ctrl.target.application)"
-        ng-blur="onApplicationBlur()"
+        ng-blur="ctrl.onTargetBlur()"
         data-min-length=0
         data-items=100
         class="input-medium tight-form-input"
-        ng-style="target.application.style">
+        ng-style="ctrl.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.item.filter"
+        ng-model="ctrl.target.item.filter"
-        bs-typeahead="getItemNames"
+        bs-typeahead="ctrl.getItemNames"
-        ng-change="onTargetPartChange(target.item)"
+        ng-change="ctrl.onTargetPartChange(ctrl.target.item)"
-        ng-blur="onItemBlur()"
+        ng-blur="ctrl.onTargetBlur()"
         data-min-length=0
         data-items=100
         class="input-large tight-form-input"
-        ng-style="target.item.style">
+        ng-style="ctrl.target.item.style">
     </li>
     <li class="tight-form-item query-keyword">Options</li>
-    <li ng-repeat="func in target.functions">
+    <li ng-repeat="func in ctrl.target.functions">
       <span metric-function-editor class="tight-form-item tight-form-func">
       </span>
     </li>
@@ -176,38 +182,37 @@
 
   <div class="clearfix"></div>
 </div>
-<div class="tight-form" ng-hide="target.mode == 1" ng-if="target.options">
+<div class="tight-form" ng-hide="ctrl.target.mode === 1" ng-if="ctrl.target.options">
   <ul class="tight-form-list" role="menu">
     <li class="tight-form-item" style="width: 44px">&nbsp</li>
-
-    <!-- Select Application -->
     <li class="tight-form-item query-keyword" style="width: 5em">Options</li>
   </ul>
   <div class="clearfix"></div>
 </div>
 
-<div class="tight-form" ng-show="target.mode == 2">
+<div class="tight-form" ng-show="ctrl.target.mode == 2">
   <ul class="tight-form-list" role="menu">
     <li class="tight-form-item" style="width: 44px">&nbsp</li>
+
     <!-- Text metric regex -->
-    <li class="tight-form-item" style="width: 5em" ng-show="target.mode == 2">
+    <li class="tight-form-item" style="width: 5em" ng-show="ctrl.target.mode == 2">
       Text filter
     </li>
-    <li ng-show="target.mode == 2">
+    <li ng-show="ctrl.target.mode == 2">
       <input type="text"
              class="tight-form-input" style="width: 417px"
-             ng-model="target.textFilter"
+             ng-model="ctrl.target.textFilter"
              spellcheck='false'
              placeholder="Text filter (regex)"
-             ng-blur="targetBlur()">
+             ng-blur="ctrl.targetBlur()">
     </li>
-    <li class="tight-form-item" ng-show="target.mode == 2">
+    <li class="tight-form-item" ng-show="ctrl.target.mode == 2">
       Use capture groups&nbsp;
-      <input class="cr1" id="target.useCaptureGroups" type="checkbox"
+      <input class="cr1" id="ctrl.target.useCaptureGroups" type="checkbox"
-             ng-model="target.useCaptureGroups"
+             ng-model="ctrl.target.useCaptureGroups"
-             ng-checked="target.useCaptureGroups"
+             ng-checked="ctrl.target.useCaptureGroups"
-             ng-change="targetBlur()">
+             ng-change="ctrl.targetBlur()">
-      <label for="target.useCaptureGroups" class="cr1"></label>
+      <label for="ctrl.target.useCaptureGroups" class="cr1"></label>
     </li>
   </ul>
 

plugins/datasource-zabbix/queryCtrl.js

@@ -1,26 +1,42 @@
 define([
-    'angular',
+  'app/plugins/sdk',
-    'lodash',
+  'angular',
-    './metricFunctions',
+  'lodash',
-    './utils'
+  './metricFunctions',
-  ],
+  './utils'
-  function (angular, _, metricFunctions, Utils) {
+],
-    'use strict';
+function (sdk, angular, _, metricFunctions, utils) {
+  'use strict';
 
-    var module = angular.module('grafana.controllers');
+  var ZabbixQueryCtrl = (function(_super)  {
-    var targetLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 
-    module.controller('ZabbixAPIQueryCtrl', function ($scope, $sce, $q, templateSrv) {
+    // ZabbixQueryCtrl constructor
+    function ZabbixQueryCtrl($scope, $injector, $sce, $q, templateSrv) {
 
-      var zabbixCache = $scope.datasource.zabbixCache;
+      // Call superclass constructor
+      _super.call(this, $scope, $injector);
 
-      $scope.init = function () {
+      this.editorModes = {
-        $scope.targetLetters = targetLetters;
+        0: 'num',
+        1: 'itservice',
+        2: 'text'
+      };
+
+      // Map functions for bs-typeahead
+      this.getGroupNames = _.partial(getMetricNames, this, 'groupList');
+      this.getHostNames = _.partial(getMetricNames, this, 'filteredHosts');
+      this.getApplicationNames = _.partial(getMetricNames, this, 'filteredApplications');
+      this.getItemNames = _.partial(getMetricNames, this, 'filteredItems');
+
+      this.init = function() {
+
+        this.templateSrv = templateSrv;
+        var target = this.target;
 
         var scopeDefaults = {
           metric: {}
         };
-        _.defaults($scope, scopeDefaults);
+        _.defaults(this, scopeDefaults);
 
         // Load default values
         var targetDefaults = {
@@ -31,250 +47,196 @@ define([
           item: { filter: "" },
           functions: [],
         };
-        _.defaults($scope.target, targetDefaults);
+        _.defaults(target, targetDefaults);
 
         // Create function instances from saved JSON
-        $scope.target.functions = _.map($scope.target.functions, function(func) {
+        target.functions = _.map(target.functions, function(func) {
           return metricFunctions.createFuncInstance(func.def, func.params);
         });
 
-        if ($scope.target.mode === 0 ||
+        if (target.mode === 0 ||
-            $scope.target.mode === 2) {
+            target.mode === 2) {
 
-          $scope.downsampleFunctionList = [
+          this.downsampleFunctionList = [
             {name: "avg", value: "avg"},
             {name: "min", value: "min"},
             {name: "max", value: "max"}
           ];
 
           // Set avg by default
-          if (!$scope.target.downsampleFunction) {
+          if (!target.downsampleFunction) {
-            $scope.target.downsampleFunction = $scope.downsampleFunctionList[0];
+            target.downsampleFunction = this.downsampleFunctionList[0];
           }
 
-          $scope.initFilters();
+          this.initFilters();
         }
-        else if ($scope.target.mode === 1) {
+        else if (target.mode === 1) {
-          $scope.slaPropertyList = [
+          this.slaPropertyList = [
             {name: "Status", property: "status"},
             {name: "SLA", property: "sla"},
             {name: "OK time", property: "okTime"},
             {name: "Problem time", property: "problemTime"},
             {name: "Down time", property: "downtimeTime"}
           ];
-          $scope.itserviceList = [{name: "test"}];
+          this.itserviceList = [{name: "test"}];
-          $scope.updateITServiceList();
+          this.updateITServiceList();
         }
       };
 
-      $scope.initFilters = function () {
+      this.init();
-        $scope.filterGroups();
+    }
-        $scope.filterHosts();
-        $scope.filterApplications();
-        $scope.filterItems();
-      };
 
-      // Get list of metric names for bs-typeahead directive
+    ZabbixQueryCtrl.templateUrl = 'partials/query.editor.html';
-      function getMetricNames(scope, metricList) {
+
-        return _.uniq(_.map(scope.metric[metricList], 'name'));
+    ZabbixQueryCtrl.prototype = Object.create(_super.prototype);
+    ZabbixQueryCtrl.prototype.constructor = ZabbixQueryCtrl;
+
+    var p = ZabbixQueryCtrl.prototype;
+
+    p.initFilters = function () {
+      this.filterGroups();
+      this.filterHosts();
+      this.filterApplications();
+      this.filterItems();
+    };
+
+    p.filterHosts = function () {
+      var self = this;
+      var groupFilter = this.templateSrv.replace(this.target.group.filter);
+      this.datasource.queryProcessor.filterHosts(groupFilter).then(function(hosts) {
+        self.metric.filteredHosts = hosts;
+      });
+    };
+
+    p.filterGroups = function() {
+      var self = this;
+      this.datasource.queryProcessor.filterGroups().then(function(groups) {
+        self.metric.groupList = groups;
+      });
+    };
+
+    p.filterApplications = function () {
+      var self = this;
+      var groupFilter = this.templateSrv.replace(this.target.group.filter);
+      var hostFilter = this.templateSrv.replace(this.target.host.filter);
+      this.datasource.queryProcessor.filterApplications(groupFilter, hostFilter)
+        .then(function(apps) {
+          self.metric.filteredApplications = apps;
+        });
+    };
+
+    p.filterItems = function () {
+      var self = this;
+      var item_type = this.editorModes[this.target.mode];
+      var groupFilter = this.templateSrv.replace(this.target.group.filter);
+      var hostFilter = this.templateSrv.replace(this.target.host.filter);
+      var appFilter = this.templateSrv.replace(this.target.application.filter);
+      this.datasource.queryProcessor.filterItems(groupFilter, hostFilter, appFilter,
+        item_type, this.target.showDisabledItems).then(function(items) {
+          self.metric.filteredItems = items;
+        });
+    };
+
+    p.onTargetPartChange = function (targetPart) {
+      var regexStyle = {'color': '#CCA300'};
+      targetPart.isRegex = utils.isRegex(targetPart.filter);
+      targetPart.style = targetPart.isRegex ? regexStyle : {};
+    };
+
+    p.onTargetBlur = function() {
+      this.initFilters();
+      this.parseTarget();
+      this.panelCtrl.refresh();
+    };
+
+    p.parseTarget = function() {
+      // Parse target
+    };
+
+    // Validate target and set validation info
+    p.validateTarget = function () {};
+
+    p.targetChanged = function() {
+      this.panelCtrl.refresh();
+    };
+
+    p.addFunction = function(funcDef) {
+      var newFunc = metricFunctions.createFuncInstance(funcDef);
+      newFunc.added = true;
+      this.target.functions.push(newFunc);
+
+      this.moveAliasFuncLast();
+
+      if (newFunc.params.length && newFunc.added ||
+          newFunc.def.params.length === 0) {
+        this.targetChanged();
       }
+    };
 
-      // Map functions for bs-typeahead
+    p.removeFunction = function(func) {
-      $scope.getGroupNames = _.partial(getMetricNames, $scope, 'groupList');
+      this.target.functions = _.without(this.target.functions, func);
-      $scope.getHostNames = _.partial(getMetricNames, $scope, 'filteredHosts');
+      this.targetChanged();
-      $scope.getApplicationNames = _.partial(getMetricNames, $scope, 'filteredApplications');
+    };
-      $scope.getItemNames = _.partial(getMetricNames, $scope, 'filteredItems');
 
-      $scope.filterHosts = function () {
+    p.moveAliasFuncLast = function() {
-        var groupFilter = templateSrv.replace($scope.target.group.filter);
+      var aliasFunc = _.find(this.target.functions, function(func) {
-        $scope.datasource.queryProcessor.filterHosts(groupFilter).then(function(hosts) {
+        return func.def.name === 'alias' ||
-          $scope.metric.filteredHosts = hosts;
+          func.def.name === 'aliasByNode' ||
-        });
+          func.def.name === 'aliasByMetric';
-      };
+      });
 
-      $scope.filterGroups = function() {
+      if (aliasFunc) {
-        $scope.datasource.queryProcessor.filterGroups().then(function(groups) {
+        this.target.functions = _.without(this.target.functions, aliasFunc);
-          $scope.metric.groupList = groups;
+        this.target.functions.push(aliasFunc);
-        });
-      };
-
-      $scope.filterApplications = function () {
-        var groupFilter = templateSrv.replace($scope.target.group.filter);
-        var hostFilter = templateSrv.replace($scope.target.host.filter);
-        $scope.datasource.queryProcessor.filterApplications(groupFilter, hostFilter)
-          .then(function(apps) {
-            $scope.metric.filteredApplications = apps;
-          });
-      };
-
-      $scope.filterItems = function () {
-        var item_type = $scope.editorModes[$scope.target.mode];
-        var groupFilter = templateSrv.replace($scope.target.group.filter);
-        var hostFilter = templateSrv.replace($scope.target.host.filter);
-        var appFilter = templateSrv.replace($scope.target.application.filter);
-        $scope.datasource.queryProcessor.filterItems(groupFilter, hostFilter, appFilter,
-          item_type, $scope.target.showDisabledItems).then(function(items) {
-            $scope.metric.filteredItems = items;
-          });
-      };
-
-      $scope.onTargetPartChange = function (targetPart) {
-        var regexStyle = {'color': '#CCA300'};
-        targetPart.isRegex = Utils.isRegex(targetPart.filter);
-        targetPart.style = targetPart.isRegex ? regexStyle : {};
-      };
-
-      // Handle group blur and filter hosts
-      $scope.onGroupBlur = function() {
-        $scope.initFilters();
-        $scope.parseTarget();
-        $scope.get_data();
-      };
-
-      // Handle host blur and filter applications
-      $scope.onHostBlur = function() {
-        $scope.initFilters();
-        $scope.parseTarget();
-        $scope.get_data();
-      };
-
-      // Handle application blur and filter items
-      $scope.onApplicationBlur = function() {
-        $scope.initFilters();
-        $scope.parseTarget();
-        $scope.get_data();
-      };
-
-      $scope.onItemBlur = function () {
-        $scope.parseTarget();
-        $scope.get_data();
-      };
-
-      $scope.parseTarget = function() {
-        // Parse target
-      };
-
-      $scope.targetChanged = function() {
-        //console.log($scope.target);
-        $scope.get_data();
-      };
-
-      // Validate target and set validation info
-      $scope.validateTarget = function () {};
-
-      $scope.addFunction = function(funcDef) {
-        var newFunc = metricFunctions.createFuncInstance(funcDef);
-        newFunc.added = true;
-        $scope.target.functions.push(newFunc);
-
-        $scope.moveAliasFuncLast();
-
-        if (newFunc.params.length && newFunc.added ||
-            newFunc.def.params.length === 0) {
-          $scope.targetChanged();
-        }
-      };
-
-      $scope.removeFunction = function(func) {
-        $scope.target.functions = _.without($scope.target.functions, func);
-        $scope.targetChanged();
-      };
-
-      $scope.moveAliasFuncLast = function() {
-        var aliasFunc = _.find($scope.target.functions, function(func) {
-          return func.def.name === 'alias' ||
-            func.def.name === 'aliasByNode' ||
-            func.def.name === 'aliasByMetric';
-        });
-
-        if (aliasFunc) {
-          $scope.target.functions = _.without($scope.target.functions, aliasFunc);
-          $scope.target.functions.push(aliasFunc);
-        }
-      };
-
-      $scope.functionChanged = function() {};
-
-      $scope.editorModes = {
-        0: 'num',
-        1: 'itservice',
-        2: 'text'
-      };
-
-      /**
-       * Switch query editor to specified mode.
-       * Modes:
-       *  0 - items
-       *  1 - IT services
-       *  2 - Text metrics
-       */
-      $scope.switchEditorMode = function (mode) {
-        $scope.target.mode = mode;
-        $scope.init();
-      };
-
-      /**
-       * Take alias from item name by default
-       */
-      function setItemAlias() {
-        if (!$scope.target.alias && $scope.target.item) {
-          $scope.target.alias = $scope.target.item.name;
-        }
       }
+    };
 
-      $scope.targetBlur = function () {
+    /**
-        setItemAlias();
+     * Switch query editor to specified mode.
-        if (!_.isEqual($scope.oldTarget, $scope.target) && _.isEmpty($scope.target.errors)) {
+     * Modes:
-          $scope.oldTarget = angular.copy($scope.target);
+     *  0 - items
-          $scope.get_data();
+     *  1 - IT services
-        }
+     *  2 - Text metrics
-      };
+     */
+    p.switchEditorMode = function (mode) {
+      this.target.mode = mode;
+      this.init();
+    };
 
-      /**
+    /////////////////
-       * Call when IT service is selected.
+    // IT Services //
-       */
+    /////////////////
-      $scope.selectITService = function () {
-        if (!_.isEqual($scope.oldTarget, $scope.target) && _.isEmpty($scope.target.errors)) {
-          $scope.oldTarget = angular.copy($scope.target);
-          $scope.get_data();
-        }
-      };
 
-      $scope.duplicate = function () {
+    /**
-        var clone = angular.copy($scope.target);
+     * Update list of IT services
-        $scope.panel.targets.push(clone);
+     */
-      };
+    p.updateITServiceList = function () {
+      var self = this;
+      this.datasource.zabbixAPI.getITService().then(function (iteservices) {
+        self.itserviceList = [];
+        self.itserviceList = self.itserviceList.concat(iteservices);
+      });
+    };
 
-      $scope.moveMetricQuery = function (fromIndex, toIndex) {
+    /**
-        _.move($scope.panel.targets, fromIndex, toIndex);
+     * Call when IT service is selected.
-      };
+     */
-
+    p.selectITService = function () {
-      /**
+      if (!_.isEqual(this.oldTarget, this.target) && _.isEmpty(this.target.errors)) {
-       * Update list of IT services
+        this.oldTarget = angular.copy(this.target);
-       */
+        this.panelCtrl.refresh();
-      $scope.updateITServiceList = function () {
-        $scope.datasource.zabbixAPI.getITService().then(function (iteservices) {
-          $scope.itserviceList = [];
-          $scope.itserviceList = $scope.itserviceList.concat(iteservices);
-        });
-      };
-
-      /**
-       * Add templated variables to list of available metrics
-       *
-       * @param {Array} metricList List of metrics which variables add to
-       */
-      function addTemplatedVariables(metricList) {
-        _.each(templateSrv.variables, function (variable) {
-          metricList.push({
-            name: '$' + variable.name,
-            templated: true
-          });
-        });
       }
+    };
 
-      $scope.init();
+    return ZabbixQueryCtrl;
 
-    });
+  })(sdk.QueryCtrl);
 
-  });
+  return ZabbixQueryCtrl;
+
+  // Get list of metric names for bs-typeahead directive
+  function getMetricNames(scope, metricList) {
+    return _.uniq(_.map(scope.metric[metricList], 'name'));
+  }
+
+});