From dbd46a523fe1023f56614fd665cfbf7b2cfcace0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 6 Jul 2015 13:43:08 +0200
Subject: [PATCH] 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        | 8 +++++++-
 public/app/features/templating/templateValuesSrv.js | 1 +
 public/app/partials/valueSelectDropdown.html        | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/public/app/directives/valueSelectDropdown.js b/public/app/directives/valueSelectDropdown.js
index 8c963bcf1eb..65b45135fd5 100644
--- a/public/app/directives/valueSelectDropdown.js
+++ b/public/app/directives/valueSelectDropdown.js
@@ -29,7 +29,11 @@ function (angular, app, _) {
           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;
       };
 
@@ -204,6 +208,8 @@ function (angular, app, _) {
         vm.search.options = _.filter(vm.options, function(option) {
           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() {
diff --git a/public/app/features/templating/templateValuesSrv.js b/public/app/features/templating/templateValuesSrv.js
index 8e91403c1e4..a5767ffa312 100644
--- a/public/app/features/templating/templateValuesSrv.js
+++ b/public/app/features/templating/templateValuesSrv.js
@@ -10,6 +10,7 @@ function (angular, _, kbn) {
 
   module.service('templateValuesSrv', function($q, $rootScope, datasourceSrv, $location, templateSrv, timeSrv) {
     var self = this;
+
     function getNoneOption() { return { text: 'None', value: '', isNone: true }; }
 
     $rootScope.onAppEvent('time-range-changed', function()  {
diff --git a/public/app/partials/valueSelectDropdown.html b/public/app/partials/valueSelectDropdown.html
index 4ecb46db14b..a75b7e8a6a9 100644
--- a/public/app/partials/valueSelectDropdown.html
+++ b/public/app/partials/valueSelectDropdown.html
@@ -19,7 +19,7 @@
 					<span class="variable-option-icon"></span>
 					Selected ({{vm.selectedValues.length}})
 				</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>{{option.text}}</span>
 				</a>