added typeahead / autocomplete to influxdb series name, #103

src/app/controllers/influxTargetCtrl.js

@@ -6,12 +6,38 @@ function (angular) {
 
 
   var module = angular.module('kibana.controllers');
   var module = angular.module('kibana.controllers');
 
 
-  module.controller('InfluxTargetCtrl', function($scope) {
+  var seriesList = null;
+
+  module.controller('InfluxTargetCtrl', function($scope, $timeout) {
 
 
     $scope.init = function() {
     $scope.init = function() {
       if (!$scope.target.function) {
       if (!$scope.target.function) {
         $scope.target.function = 'mean';
         $scope.target.function = 'mean';
       }
       }
+
+      if (!seriesList) {
+        seriesList = [];
+        $scope.datasource.listSeries().then(function(series) {
+          seriesList = series;
+        });
+      }
+
+      $scope.oldSeris = $scope.target.series;
+      $scope.$on('typeahead-updated', function(){
+        $timeout($scope.get_data);
+      });
+    };
+
+    // Cannot use typeahead and ng-change on blur at the same time
+    $scope.seriesBlur = function() {
+      if ($scope.oldSeris !== $scope.target.series) {
+        $scope.oldSeris = $scope.target.series;
+        $scope.get_data();
+      }
+    };
+
+    $scope.listSeries = function() {
+      return seriesList;
     };
     };
 
 
     $scope.duplicate = function() {
     $scope.duplicate = function() {

src/app/partials/influxdb/editor.html

@@ -51,8 +51,11 @@
                    class="input-medium grafana-target-segment-input"
                    class="input-medium grafana-target-segment-input"
                    ng-model="target.series"
                    ng-model="target.series"
                    spellcheck='false'
                    spellcheck='false'
+                   bs-typeahead="listSeries"
                    placeholder="series name"
                    placeholder="series name"
-                   ng-model-onblur ng-change="get_data()" >
+                   data-min-length=0 data-items=100
+                   ng-blur="seriesBlur()"
+                   >
           </li>
           </li>
           <li class="grafana-target-segment">
           <li class="grafana-target-segment">
             select
             select

src/app/services/influxdb/influxdbDatasource.js

@@ -54,6 +54,18 @@ function (angular, _, kbn) {
 
 
     };
     };
 
 
+    InfluxDatasource.prototype.listSeries = function() {
+      return this.doInfluxRequest('list series').then(function(results) {
+        if (!results.data) {
+          return [];
+        }
+
+        return _.map(results.data, function(series) {
+          return series.name;
+        });
+      });
+    };
+
     InfluxDatasource.prototype.doInfluxRequest = function(query) {
     InfluxDatasource.prototype.doInfluxRequest = function(query) {
       var params = {
       var params = {
         u: this.username,
         u: this.username,

src/css/less/overrides.less

@@ -570,3 +570,4 @@ div.flot-text {
     white-space: nowrap;
     white-space: nowrap;
   }
   }
 }
 }
+

src/css/less/variables.dark.less

@@ -149,7 +149,7 @@
 @dropdownLinkColorHover:        @white;
 @dropdownLinkColorHover:        @white;
 @dropdownLinkColorActive:       @white;
 @dropdownLinkColorActive:       @white;
 
 
-@dropdownLinkBackgroundActive:  @linkColor;
+@dropdownLinkBackgroundActive:  @blue;
 @dropdownLinkBackgroundHover:   @blue;
 @dropdownLinkBackgroundHover:   @blue;
 
 
 
 

src/css/less/variables.light.less

@@ -152,7 +152,7 @@
 @dropdownLinkColorActive:       @white;
 @dropdownLinkColorActive:       @white;
 
 
 @dropdownLinkBackgroundActive:  @blue;
 @dropdownLinkBackgroundActive:  @blue;
-@dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;
+@dropdownLinkBackgroundHover:   @blue;