From d9bc27c4afd77d726899b083c426c53f682598db Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Sat, 16 Jan 2016 21:16:22 +0300
Subject: [PATCH] Working on new query editor - changed dropdown to input with
 autocomplete.

---
 .../partials/query.editor.html                | 111 ++++++------------
 plugins/datasource-zabbix/queryCtrl.js        |  45 +++++--
 plugins/datasource-zabbix/zabbixCacheSrv.js   |  18 ++-
 3 files changed, 82 insertions(+), 92 deletions(-)

diff --git a/plugins/datasource-zabbix/partials/query.editor.html b/plugins/datasource-zabbix/partials/query.editor.html
index 383d965..7682311 100644
--- a/plugins/datasource-zabbix/partials/query.editor.html
+++ b/plugins/datasource-zabbix/partials/query.editor.html
@@ -76,7 +76,7 @@
 
   <ul class="tight-form-list" role="menu" ng-hide="target.mode == 1">
     <!-- Alias -->
-    <li ng-hide="target.mode == 2">
+    <li>
       <input type="text"
              class="tight-form-input input-medium"
              ng-model="target.alias"
@@ -84,52 +84,31 @@
              placeholder="Alias"
              ng-blur="targetBlur()">
     </li>
+
     <!-- Select Host Group -->
     <li class="tight-form-item input-small" style="width: 5em">Group</li>
     <li>
-      <select class="tight-form-input input-large"
-              ng-change="selectHostGroup()"
-              ng-model="target.group"
-              bs-tooltip="target.group.name.length > 25 ? target.group.name : ''"
-              ng-options="group.visible_name ? group.visible_name : group.name for group in metric.groupList track by group.name">
-        <option value="">-- Select host group --</option>
-      </select>
-      <a bs-tooltip="target.errors.metric"
-         style="color: rgb(229, 189, 28)"
-         ng-show="target.errors.metric">
-        <i class="fa fa-warning"></i>
-      </a>
+      <input type="text"
+        ng-model="target.groupFilter"
+        bs-typeahead="getGroupNames"
+        ng-blur="render()"
+        data-min-length=0
+        data-items=100
+        class="input-medium tight-form-input" >
     </li>
+
     <!-- Select Host -->
     <li class="tight-form-item input-small" style="width: 3em">Host</li>
     <li>
-      <select class="tight-form-input input-large"
-              ng-change="selectHost()"
-              ng-model="target.host"
-              bs-tooltip="target.host.name.length > 25 ? target.host.name : ''"
-              ng-options="host.visible_name ? host.visible_name : host.name for host in metric.hostList track by host.name">
-        <option value="">-- Select host --</option>
-      </select>
-      <a bs-tooltip="target.errors.metric"
-         style="color: rgb(229, 189, 28)"
-         ng-show="target.errors.metric">
-        <i class="icon-warning-sign"></i>
-      </a>
-    </li>
-    <!-- Host filter -->
-    <li class="tight-form-item" ng-hide="target.mode == 2">
-      Filter
-      <i class="fa fa-question-circle"
-         bs-tooltip="'Filtering hosts by regex. Select All in items and specify regex for host names.'"></i>
-    </li>
-    <li ng-hide="target.mode == 2">
       <input type="text"
-             class="tight-form-input input-large"
-             ng-model="target.hostFilter"
-             spellcheck='false'
-             placeholder="Host filter (regex)"
-             ng-blur="targetBlur()">
+        ng-model="target.hostFilter"
+        bs-typeahead="getHostNames"
+        ng-blur="render()"
+        data-min-length=0
+        data-items=100
+        class="input-large tight-form-input" >
     </li>
+
     <!-- Downsampling function -->
     <li class="tight-form-item input-medium" ng-hide="target.mode == 2">
       Downsampling
@@ -154,54 +133,32 @@
 
 <div class="tight-form" ng-hide="target.mode == 1">
   <ul class="tight-form-list" role="menu">
-    <li class="tight-form-item" style="width: 44px">&nbsp</li>
+    <li class="tight-form-item" style="width: 194px">&nbsp</li>
 
     <!-- Select Application -->
     <li class="tight-form-item input-small" style="width: 5em">Application</li>
     <li>
-      <select class="tight-form-input input-large"
-              ng-change="selectApplication()"
-              ng-model="target.application"
-              bs-tooltip="target.application.name.length > 15 ? target.application.name : ''"
-              ng-options="app.visible_name ? app.visible_name : app.name for app in metric.applicationList track by app.name">
-        <option value="">-- Select application --</option>
-      </select>
-      <a bs-tooltip="target.errors.metric"
-         style="color: rgb(229, 189, 28)"
-         ng-show="target.errors.metric">
-        <i class="icon-warning-sign"></i>
-      </a>
+      <input type="text"
+        ng-model="target.applicationFilter"
+        bs-typeahead="getApplicationNames"
+        ng-blur="render()"
+        data-min-length=0
+        data-items=100
+        class="input-medium tight-form-input" >
     </li>
+
     <!-- Select Item -->
     <li class="tight-form-item input-small" style="width: 3em">Item</li>
     <li>
-      <select class="tight-form-input input-large"
-              ng-change="selectItem()"
-              ng-model="target.item"
-              bs-tooltip="target.item.name.length > 25 ? target.item.name : ''"
-              ng-options="item.name for item in metric.itemList track by item.name">
-        <option value="">-- Select item --</option>
-      </select>
-      <a bs-tooltip="target.errors.metric"
-         style="color: rgb(229, 189, 28)"
-         ng-show="target.errors.metric">
-        <i class="icon-warning-sign"></i>
-      </a>
-    </li>
-    <!-- Item filter -->
-    <li class="tight-form-item" ng-hide="target.mode == 2">
-      Filter
-      <i class="fa fa-question-circle"
-         bs-tooltip="'Filtering items by regex. Select All in items and specify regex for item names.'"></i>
-    </li>
-    <li ng-hide="target.mode == 2">
       <input type="text"
-             class="tight-form-input input-large"
-             ng-model="target.itemFilter"
-             spellcheck='false'
-             placeholder="Item filter (regex)"
-             ng-blur="targetBlur()">
+        ng-model="target.itemFilter"
+        bs-typeahead="getItemNames"
+        ng-blur="render()"
+        data-min-length=0
+        data-items=100
+        class="input-large tight-form-input" >
     </li>
+
     <!-- Scale -->
     <li class="tight-form-item" ng-hide="target.mode == 2">
       Scale
@@ -220,7 +177,7 @@
 
   <div class="clearfix"></div>
 </div>
-<div class="tight-form" ng-hide="target.mode == 1">
+<div class="tight-form" ng-show="target.mode == 2">
   <ul class="tight-form-list" role="menu">
     <li class="tight-form-item" style="width: 44px">&nbsp</li>
     <!-- Text metric regex -->
diff --git a/plugins/datasource-zabbix/queryCtrl.js b/plugins/datasource-zabbix/queryCtrl.js
index e3cd929..68c286a 100644
--- a/plugins/datasource-zabbix/queryCtrl.js
+++ b/plugins/datasource-zabbix/queryCtrl.js
@@ -11,8 +11,12 @@ define([
 
     module.controller('ZabbixAPIQueryCtrl', function ($scope, $sce, templateSrv, zabbixHelperSrv) {
 
+      var zabbixCache = $scope.datasource.zabbixCache;
+
       $scope.init = function () {
         $scope.targetLetters = targetLetters;
+        $scope.metric = {};
+
         if (!$scope.target.mode || $scope.target.mode !== 1) {
           $scope.downsampleFunctionList = [
             {name: "avg", value: "avg"},
@@ -24,20 +28,22 @@ define([
           if (!$scope.target.downsampleFunction) {
             $scope.target.downsampleFunction = $scope.downsampleFunctionList[0];
           }
-          if (!$scope.metric) {
-            $scope.metric = {
-              hostGroupList: [],
-              hostList: [{name: '*', visible_name: 'All'}],
-              applicationList: [{name: '*', visible_name: 'All'}],
-              itemList: [{name: 'All'}]
-            };
+
+          if (zabbixCache._initialized) {
+            $scope.getMetricsFromCache();
+            console.log("Cached", $scope.metric);
+          } else {
+            zabbixCache.refresh().then(function () {
+              $scope.getMetricsFromCache();
+              console.log("From server", $scope.metric);
+            });
           }
 
           // Update host group, host, application and item lists
-          $scope.updateGroupList();
+          /*$scope.updateGroupList();
           $scope.updateHostList();
           $scope.updateAppList();
-          $scope.updateItemList();
+          $scope.updateItemList();*/
 
           setItemAlias();
         }
@@ -56,11 +62,32 @@ define([
         $scope.target.errors = validateTarget($scope.target);
       };
 
+      $scope.getMetricsFromCache = function () {
+        $scope.metric = {
+          groupList: zabbixCache.getGroups(),
+          hostList: zabbixCache.getHosts(),
+          applicationList: zabbixCache.getApplications(),
+          itemList: zabbixCache.getItems()
+        };
+      };
+
+      // Get list of metric names for bs-typeahead directive
+      function getMetricNames(scope, metricList) {
+        return _.map(scope.metric[metricList], 'name');
+      }
+
+      // Map functions
+      $scope.getGroupNames = _.partial(getMetricNames, $scope, 'groupList');
+      $scope.getHostNames = _.partial(getMetricNames, $scope, 'hostList');
+      $scope.getApplicationNames = _.partial(getMetricNames, $scope, 'applicationList');
+      $scope.getItemNames = _.partial(getMetricNames, $scope, 'itemList');
+
       /**
        * Switch query editor to specified mode.
        * Modes:
        *  0 - items
        *  1 - IT services
+       *  2 - Text metrics
        */
       $scope.switchEditorMode = function (mode) {
         $scope.target.mode = mode;
diff --git a/plugins/datasource-zabbix/zabbixCacheSrv.js b/plugins/datasource-zabbix/zabbixCacheSrv.js
index 0c6aed1..3585e27 100644
--- a/plugins/datasource-zabbix/zabbixCacheSrv.js
+++ b/plugins/datasource-zabbix/zabbixCacheSrv.js
@@ -10,15 +10,21 @@ function (angular, _) {
   module.factory('ZabbixCache', function($q) {
 
     function ZabbixCache(zabbixAPI, lifetime) {
+      var self = this;
+
       this.zabbixAPI = zabbixAPI;
       this.lifetime = lifetime;
 
-      this._groups        = [];
-      this._hosts         = [];
-      this._applications  = [];
-      this._items         = [];
+      this._groups        = undefined;
+      this._hosts         = undefined;
+      this._applications  = undefined;
+      this._items         = undefined;
 
-      this.refresh();
+      this._initialized = undefined;
+
+      this.refresh().then(function () {
+        self._initialized = true;
+      });
     }
 
     var p = ZabbixCache.prototype;
@@ -32,7 +38,7 @@ function (angular, _) {
         this.zabbixAPI.getItems()
       ];
 
-      $q.all(promises).then(function (results) {
+      return $q.all(promises).then(function (results) {
         if (results.length) {
           self._groups = results[0];