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] 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>