Merge pull request #11695 from grafana/11508_variables_preview_values

allow to show more preview values for variables
This commit is contained in:
Marcus Efraimsson
2018-04-24 20:05:47 +02:00
committed by GitHub
2 changed files with 13 additions and 4 deletions

View File

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

View File

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