Merge pull request #11695 from grafana/11508_variables_preview_values

allow to show more preview values for variables

public/app/features/templating/editor_ctrl.ts

@@ -10,6 +10,7 @@ export class VariableEditorCtrl {
     $scope.ctrl = {};
     $scope.ctrl = {};
     $scope.namePattern = /^(?!__).*$/;
     $scope.namePattern = /^(?!__).*$/;
     $scope._ = _;
     $scope._ = _;
+    $scope.optionsLimit = 20;
 
 
     $scope.refreshOptions = [
     $scope.refreshOptions = [
       { value: 0, text: 'Never' },
       { value: 0, text: 'Never' },
@@ -96,6 +97,7 @@ export class VariableEditorCtrl {
     };
     };
 
 
     $scope.runQuery = function() {
     $scope.runQuery = function() {
+      $scope.optionsLimit = 20;
       return variableSrv.updateOptions($scope.current).catch(err => {
       return variableSrv.updateOptions($scope.current).catch(err => {
         if (err.data && err.data.message) {
         if (err.data && err.data.message) {
           err.message = err.data.message;
           err.message = err.data.message;
@@ -165,6 +167,10 @@ export class VariableEditorCtrl {
     $scope.removeVariable = function(variable) {
     $scope.removeVariable = function(variable) {
       variableSrv.removeVariable(variable);
       variableSrv.removeVariable(variable);
     };
     };
+
+    $scope.showMoreOptions = function() {
+      $scope.optionsLimit += 20;
+    };
   }
   }
 }
 }
 
 

public/app/features/templating/partials/editor.html

@@ -280,11 +280,14 @@
 		</div>
 		</div>
 
 
 		<div class="gf-form-group" ng-show="current.options.length">
 		<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-inline">
-				<div class="gf-form" ng-repeat="option in current.options | limitTo: 20">
+				<div class="gf-form" ng-repeat="option in current.options | limitTo: optionsLimit">
           <span class="gf-form-label">{{option.text}}</span>
           <span class="gf-form-label">{{option.text}}</span>
         </div>
         </div>
+        <div class="gf-form" ng-if= "current.options.length > optionsLimit">
+          <a class="gf-form-label btn-secondary" ng-click="showMoreOptions()">Show more</a>
+        </div>
 			</div>
 			</div>
 		</div>
 		</div>