added button to show more preview values for variables, button runs a function…

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

@@ -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;
+    };
   }
 }
 

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>