Work arround for slower template variable dropdown when variable has many…

Work arround for slower template variable dropdown when variable has many thousand values, now only top 1000 values are rendered to html, you can still search all values, Closes #2246

public/app/directives/valueSelectDropdown.js

@@ -29,7 +29,11 @@ function (angular, app, _) {
           return tag;
           return tag;
         });
         });
 
 
-        vm.search = {query: '', options: vm.options};
+        vm.search = {
+          query: '',
+          options: vm.options.slice(0, Math.min(vm.options.length, 1000))
+        };
+
         vm.dropdownVisible = true;
         vm.dropdownVisible = true;
       };
       };
 
 
@@ -204,6 +208,8 @@ function (angular, app, _) {
         vm.search.options = _.filter(vm.options, function(option) {
         vm.search.options = _.filter(vm.options, function(option) {
           return option.text.toLowerCase().indexOf(vm.search.query.toLowerCase()) !== -1;
           return option.text.toLowerCase().indexOf(vm.search.query.toLowerCase()) !== -1;
         });
         });
+
+        vm.search.options = vm.search.options.slice(0, Math.min(vm.search.options.length, 1000));
       };
       };
 
 
       vm.init = function() {
       vm.init = function() {

public/app/features/templating/templateValuesSrv.js

@@ -10,6 +10,7 @@ function (angular, _, kbn) {
 
 
   module.service('templateValuesSrv', function($q, $rootScope, datasourceSrv, $location, templateSrv, timeSrv) {
   module.service('templateValuesSrv', function($q, $rootScope, datasourceSrv, $location, templateSrv, timeSrv) {
     var self = this;
     var self = this;
+
     function getNoneOption() { return { text: 'None', value: '', isNone: true }; }
     function getNoneOption() { return { text: 'None', value: '', isNone: true }; }
 
 
     $rootScope.onAppEvent('time-range-changed', function()  {
     $rootScope.onAppEvent('time-range-changed', function()  {

public/app/partials/valueSelectDropdown.html

@@ -19,7 +19,7 @@
 					<span class="variable-option-icon"></span>
 					<span class="variable-option-icon"></span>
 					Selected ({{vm.selectedValues.length}})
 					Selected ({{vm.selectedValues.length}})
 				</a>
 				</a>
-				<a class="variable-option pointer" bindonce ng-repeat="option in vm.search.options" ng-class="{'selected': option.selected, 'highlighted': $index === vm.highlightIndex}" ng-click="vm.selectValue(option, $event)">
+				<a class="variable-option pointer" ng-repeat="option in vm.search.options" ng-class="{'selected': option.selected, 'highlighted': $index === vm.highlightIndex}" ng-click="vm.selectValue(option, $event)">
 					<span class="variable-option-icon"></span>
 					<span class="variable-option-icon"></span>
 					<span>{{option.text}}</span>
 					<span>{{option.text}}</span>
 				</a>
 				</a>