Change metric form input text

Preparation of templated dashboard support.

public/app/plugins/datasource/kairosdb/datasource.js

@@ -18,7 +18,6 @@ function (angular, _, kbn) {
       this.url = datasource.url;
       this.name = datasource.name;
       this.supportMetrics = true;
-      this.grafanaDB = datasource.grafanaDB;
     }
 
     // Called once per panel (graph)
@@ -85,11 +84,11 @@ function (angular, _, kbn) {
         method : 'GET'
       };
 
-      return $http(options).then(function(results) {
-        if (!results.data) {
+      return $http(options).then(function(response) {
+        if (!response.data) {
           return [];
         }
-        return results.data.results;
+        return response.data.results;
       });
     };
 

public/app/plugins/datasource/kairosdb/partials/query.editor.html

@@ -61,14 +61,15 @@
 					spellcheck='false' placeholder="alias" ng-blur="targetBlur()">
 				</li>
 				<li>
-					<select style="width: 20em"
-						class="input-medium tight-form-input"
-						ng-change="targetBlur()"
-						ng-model="metric.value"
-						bs-tooltip="metricValue.length > 40 ? metricValue : ''"
-						ng-options="f for f in metric.list" >
-						<option value="">--select metric--</option>
-					</select>
+					<input type="text"
+						   class="input-large tight-form-input"
+						   ng-model="target.metric"
+						   spellcheck="false"
+						   bs-typeahead="suggestMetrics"
+						   placeholder="metric name"
+						   data-min-length=0 data-items=100
+						   ng-blur="targetBlur()"
+						   >
 					<a bs-tooltip="target.errors.metric"
 						style="color: rgb(229, 189, 28)"
 						ng-show="target.errors.metric">

public/app/plugins/datasource/kairosdb/queryCtrl.js

@@ -6,16 +6,12 @@ function (angular, _) {
   'use strict';
 
   var module = angular.module('grafana.controllers');
-  var metricList = null;
+  var metricList = [];
   var targetLetters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O'];
 
   module.controller('KairosDBQueryCtrl', function($scope) {
 
     $scope.init = function() {
-      $scope.metric = {
-        list: ["Loading..."],
-        value: "Loading..."
-      };
       $scope.panel.stack = false;
       if (!$scope.panel.downsampling) {
         $scope.panel.downsampling = 'avg';
@@ -25,12 +21,10 @@ function (angular, _) {
         $scope.target.sampling = $scope.panel.sampling;
       }
       $scope.targetLetters = targetLetters;
-      $scope.updateMetricList();
       $scope.target.errors = validateTarget($scope.target);
     };
 
     $scope.targetBlur = function() {
-      $scope.target.metric = $scope.metric.value;
       $scope.target.errors = validateTarget($scope.target);
       if (!_.isEqual($scope.oldTarget, $scope.target) && _.isEmpty($scope.target.errors)) {
         $scope.oldTarget = angular.copy($scope.target);
@@ -55,22 +49,16 @@ function (angular, _) {
       _.move($scope.panel.targets, fromIndex, toIndex);
     };
 
-    // Fetch metric list
-    $scope.updateMetricList = function() {
-      $scope.metricListLoading = true;
-      metricList = [];
-      $scope.datasource.performMetricSuggestQuery().then(function(series) {
-        metricList = series;
-        $scope.metric.list = series;
-        if ($scope.target.metric) {
-          $scope.metric.value = $scope.target.metric;
-        }
-        else {
-          $scope.metric.value = "";
-        }
-        $scope.metricListLoading = false;
+    $scope.suggestMetrics = function(query, callback) {
+      if (!_.isEmpty(metricList)) {
         return metricList;
-      });
+      }
+      else {
+        $scope.datasource.performMetricSuggestQuery().then(function(result) {
+          metricList = result;
+          callback(metricList);
+        });
+      }
     };
 
     $scope.suggestTagKeys = function(query, callback) {