From c2cc77fa08e5f907b7b60ee867fd566808564a39 Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Mon, 23 Apr 2018 13:00:24 +0200
Subject: [PATCH 1/2] added button to show more preview values for variables,
 button runs a function that increases options limit, fixes #11508

---
 public/app/features/templating/editor_ctrl.ts       |  5 +++++
 public/app/features/templating/partials/editor.html | 11 +++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/public/app/features/templating/editor_ctrl.ts b/public/app/features/templating/editor_ctrl.ts
index f20e93be42c..2533ac03739 100644
--- a/public/app/features/templating/editor_ctrl.ts
+++ b/public/app/features/templating/editor_ctrl.ts
@@ -10,6 +10,7 @@ export class VariableEditorCtrl {
     $scope.ctrl = {};
     $scope.namePattern = /^(?!__).*$/;
     $scope._ = _;
+    $scope.optionsLimit = 20;
 
     $scope.refreshOptions = [
       { value: 0, text: 'Never' },
@@ -165,6 +166,10 @@ export class VariableEditorCtrl {
     $scope.removeVariable = function(variable) {
       variableSrv.removeVariable(variable);
     };
+
+    $scope.showMoreOptions = function() {
+      $scope.optionsLimit += 20;
+    };
   }
 }
 
diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html
index d904aeb4789..74cb2f23e84 100644
--- a/public/app/features/templating/partials/editor.html
+++ b/public/app/features/templating/partials/editor.html
@@ -280,11 +280,14 @@
 		</div>
 
 		<div class="gf-form-group" ng-show="current.options.length">
-			<h5>Preview of values (shows max 20)</h5>
+			<h5>Preview of values</h5>
 			<div class="gf-form-inline">
-				<div class="gf-form" ng-repeat="option in current.options | limitTo: 20">
-					<span class="gf-form-label">{{option.text}}</span>
-				</div>
+				<div class="gf-form" ng-repeat="option in current.options | limitTo: optionsLimit">
+          <span class="gf-form-label">{{option.text}}</span>
+        </div>
+        <div class="gf-form" ng-if= "current.options.length > optionsLimit">
+          <span class="gf-form-label btn-secondary" ng-click="showMoreOptions()">Show more</span>
+        </div>
 			</div>
 		</div>
 

From a40314022b0db1110d6d38d8919f2526dd915ca8 Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Tue, 24 Apr 2018 17:40:03 +0200
Subject: [PATCH 2/2] added pointer to show more, reset values on new query

---
 public/app/features/templating/editor_ctrl.ts       | 1 +
 public/app/features/templating/partials/editor.html | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/app/features/templating/editor_ctrl.ts b/public/app/features/templating/editor_ctrl.ts
index 2533ac03739..75a84cca2bf 100644
--- a/public/app/features/templating/editor_ctrl.ts
+++ b/public/app/features/templating/editor_ctrl.ts
@@ -97,6 +97,7 @@ export class VariableEditorCtrl {
     };
 
     $scope.runQuery = function() {
+      $scope.optionsLimit = 20;
       return variableSrv.updateOptions($scope.current).catch(err => {
         if (err.data && err.data.message) {
           err.message = err.data.message;
diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html
index 74cb2f23e84..0d8b0ace327 100644
--- a/public/app/features/templating/partials/editor.html
+++ b/public/app/features/templating/partials/editor.html
@@ -286,7 +286,7 @@
           <span class="gf-form-label">{{option.text}}</span>
         </div>
         <div class="gf-form" ng-if= "current.options.length > optionsLimit">
-          <span class="gf-form-label btn-secondary" ng-click="showMoreOptions()">Show more</span>
+          <a class="gf-form-label btn-secondary" ng-click="showMoreOptions()">Show more</a>
         </div>
 			</div>
 		</div>