mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Breaking out logic for variable dropdown into a controller, this needs some unit tests
This commit is contained in:
Torkel Ödegaard
parent
137cbe5bb4
commit
d96f5598ca
@ -8,24 +8,206 @@ function (angular, app, _) {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('grafana.controllers')
|
||||
.controller('VariableSelectCtrl', function($scope) {
|
||||
var vm = this;
|
||||
|
||||
vm.beforeDropdownShow = function() {
|
||||
vm.oldCurrentText = vm.variable.current.text;
|
||||
vm.highlightIndex = -1;
|
||||
|
||||
var currentValues = vm.variable.current.value;
|
||||
|
||||
if (_.isString(currentValues)) {
|
||||
currentValues = [currentValues];
|
||||
}
|
||||
|
||||
vm.options = _.map(vm.variable.options, function(option) {
|
||||
if (_.indexOf(currentValues, option.value) >= 0) {
|
||||
option.selected = true;
|
||||
}
|
||||
return option;
|
||||
});
|
||||
|
||||
vm.search = {query: '', options: vm.options};
|
||||
vm.selectedValuesCount = currentValues.length;
|
||||
vm.selectedTags = vm.selectedTag || [];
|
||||
|
||||
if (!vm.tags) {
|
||||
vm.tags = _.map(vm.variable.tags, function(value) {
|
||||
return { text: value, selected: false };
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
vm.updateLinkText = function() {
|
||||
vm.labelText = vm.variable.label || '$' + vm.variable.name;
|
||||
vm.linkText = vm.variable.current.text;
|
||||
};
|
||||
|
||||
vm.clearSelections = function() {
|
||||
_.each(vm.options, function(option) {
|
||||
option.selected = false;
|
||||
});
|
||||
|
||||
vm.selectionsChanged(vm.options[0], false);
|
||||
};
|
||||
|
||||
vm.selectTag = function(tag) {
|
||||
tag.selected = !tag.selected;
|
||||
if (!tag.values) {
|
||||
if (tag.text === 'backend') {
|
||||
tag.values = ['backend_01', 'backend_02', 'backend_03', 'backend_04'];
|
||||
} else {
|
||||
tag.values = ['web_server_01', 'web_server_02', 'web_server_03', 'web_server_04'];
|
||||
}
|
||||
console.log('querying for tag values');
|
||||
}
|
||||
|
||||
_.each(vm.options, function(option) {
|
||||
if (_.indexOf(tag.values, option.value) !== -1) {
|
||||
option.selected = tag.selected;
|
||||
}
|
||||
});
|
||||
|
||||
vm.selectedTags = _.filter(vm.tags, {selected: true});
|
||||
vm.selectionsChanged(vm.options[0], false);
|
||||
};
|
||||
|
||||
vm.keyDown = function (evt) {
|
||||
if (evt.keyCode === 27) {
|
||||
vm.hide();
|
||||
}
|
||||
if (evt.keyCode === 40) {
|
||||
vm.moveHighlight(1);
|
||||
}
|
||||
if (evt.keyCode === 38) {
|
||||
vm.moveHighlight(-1);
|
||||
}
|
||||
if (evt.keyCode === 13) {
|
||||
vm.optionSelected(vm.search.options[vm.highlightIndex], {}, true, false);
|
||||
}
|
||||
if (evt.keyCode === 32) {
|
||||
vm.optionSelected(vm.search.options[vm.highlightIndex], {}, false, false);
|
||||
}
|
||||
};
|
||||
|
||||
vm.moveHighlight = function(direction) {
|
||||
vm.highlightIndex = (vm.highlightIndex + direction) % vm.search.options.length;
|
||||
};
|
||||
|
||||
vm.optionSelected = function(option, event, commitChange, excludeOthers) {
|
||||
if (!option) { return; }
|
||||
|
||||
option.selected = !option.selected;
|
||||
|
||||
commitChange = commitChange || false;
|
||||
excludeOthers = excludeOthers || false;
|
||||
|
||||
var setAllExceptCurrentTo = function(newValue) {
|
||||
_.each(vm.options, function(other) {
|
||||
if (option !== other) { other.selected = newValue; }
|
||||
});
|
||||
};
|
||||
|
||||
// commit action (enter key), should not deselect it
|
||||
if (commitChange) {
|
||||
option.selected = true;
|
||||
}
|
||||
|
||||
if (option.text === 'All' || excludeOthers) {
|
||||
setAllExceptCurrentTo(false);
|
||||
commitChange = true;
|
||||
}
|
||||
else if (!vm.variable.multi) {
|
||||
setAllExceptCurrentTo(false);
|
||||
commitChange = true;
|
||||
} else if (event.ctrlKey || event.metaKey || event.shiftKey) {
|
||||
commitChange = true;
|
||||
setAllExceptCurrentTo(false);
|
||||
}
|
||||
|
||||
vm.selectionsChanged(option, commitChange);
|
||||
};
|
||||
|
||||
vm.selectionsChanged = function(defaultItem, commitChange) {
|
||||
var selected = _.filter(vm.options, {selected: true});
|
||||
|
||||
if (selected.length === 0) {
|
||||
defaultItem.selected = true;
|
||||
selected = [defaultItem];
|
||||
}
|
||||
|
||||
if (selected.length > 1 && selected.length !== vm.options.length) {
|
||||
if (selected[0].text === 'All') {
|
||||
selected[0].selected = false;
|
||||
selected = selected.slice(1, selected.length);
|
||||
}
|
||||
}
|
||||
|
||||
vm.variable.current = {
|
||||
text: _.pluck(selected, 'text').join(', '),
|
||||
value: _.pluck(selected, 'value'),
|
||||
};
|
||||
|
||||
var valuesNotInTag = _.filter(selected, function(test) {
|
||||
for (var i = 0; i < vm.selectedTags.length; i++) {
|
||||
var tag = vm.selectedTags[i];
|
||||
if (_.indexOf(tag.values, test.value) !== -1) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
vm.variable.current.text = _.pluck(valuesNotInTag, 'text').join(', ');
|
||||
|
||||
vm.selectedValuesCount = vm.variable.current.value.length;
|
||||
|
||||
// only single value
|
||||
if (vm.selectedValuesCount === 1) {
|
||||
vm.variable.current.value = selected[0].value;
|
||||
}
|
||||
|
||||
if (commitChange) {
|
||||
vm.switchToLink();
|
||||
}
|
||||
};
|
||||
|
||||
vm.queryChanged = function() {
|
||||
vm.highlightIndex = -1;
|
||||
vm.search.options = _.filter(vm.options, function(option) {
|
||||
return option.text.toLowerCase().indexOf(vm.search.query.toLowerCase()) !== -1;
|
||||
});
|
||||
};
|
||||
|
||||
$scope.$watchGroup(['vm.variable.hideLabel', 'vm.variable.name', 'vm.variable.label', 'vm.variable.current.text'], function() {
|
||||
vm.updateLinkText();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
angular
|
||||
.module('grafana.directives')
|
||||
.directive('variableValueSelect', function($compile, $window, $timeout) {
|
||||
|
||||
return {
|
||||
scope: { variable: "=", onUpdated: "&" },
|
||||
templateUrl: 'app/features/dashboard/partials/variableValueSelect.html',
|
||||
|
||||
controller: 'VariableSelectCtrl',
|
||||
controllerAs: 'vm',
|
||||
bindToController: true,
|
||||
link: function(scope, elem) {
|
||||
var vm = scope.vm;
|
||||
var bodyEl = angular.element($window.document.body);
|
||||
var linkEl = elem.find('.variable-value-link');
|
||||
var inputEl = elem.find('input');
|
||||
var variable = scope.variable;
|
||||
var cancelBlur = null;
|
||||
|
||||
scope.openDropdown = function() {
|
||||
inputEl.show();
|
||||
linkEl.hide();
|
||||
scope.dropdownVisible = true;
|
||||
vm.dropdownVisible = true;
|
||||
|
||||
inputEl.css('width', (linkEl.width() + 16) + 'px');
|
||||
|
||||
@ -42,11 +224,12 @@ function (angular, app, _) {
|
||||
cancelBlur = null;
|
||||
inputEl.hide();
|
||||
linkEl.show();
|
||||
scope.dropdownVisible = false;
|
||||
|
||||
vm.dropdownVisible = false;
|
||||
scope.$digest();
|
||||
|
||||
scope.updateLinkText();
|
||||
scope.onUpdated();
|
||||
scope.vm.updateLinkText();
|
||||
scope.vm.onUpdated();
|
||||
}
|
||||
else {
|
||||
// need to have long delay because the blur
|
||||
@ -64,180 +247,10 @@ function (angular, app, _) {
|
||||
};
|
||||
|
||||
scope.show = function() {
|
||||
scope.oldCurrentText = variable.current.text;
|
||||
scope.highlightIndex = -1;
|
||||
|
||||
var currentValues = variable.current.value;
|
||||
|
||||
if (_.isString(currentValues)) {
|
||||
currentValues = [currentValues];
|
||||
}
|
||||
|
||||
scope.options = _.map(variable.options, function(option) {
|
||||
if (_.indexOf(currentValues, option.value) >= 0) {
|
||||
option.selected = true;
|
||||
}
|
||||
return option;
|
||||
});
|
||||
|
||||
scope.search = {query: '', options: scope.options};
|
||||
scope.selectedValuesCount = currentValues.length;
|
||||
scope.selectedTags = scope.selectedTag || [];
|
||||
|
||||
if (!scope.tags) {
|
||||
scope.tags = _.map(variable.tags, function(value) {
|
||||
return { text: value, selected: false };
|
||||
});
|
||||
}
|
||||
|
||||
vm.beforeDropdownShow();
|
||||
scope.openDropdown();
|
||||
};
|
||||
|
||||
scope.queryChanged = function() {
|
||||
scope.highlightIndex = -1;
|
||||
scope.search.options = _.filter(scope.options, function(option) {
|
||||
return option.text.toLowerCase().indexOf(scope.search.query.toLowerCase()) !== -1;
|
||||
});
|
||||
};
|
||||
|
||||
scope.keyDown = function (evt) {
|
||||
if (evt.keyCode === 27) {
|
||||
scope.hide();
|
||||
}
|
||||
if (evt.keyCode === 40) {
|
||||
scope.moveHighlight(1);
|
||||
}
|
||||
if (evt.keyCode === 38) {
|
||||
scope.moveHighlight(-1);
|
||||
}
|
||||
if (evt.keyCode === 13) {
|
||||
scope.optionSelected(scope.search.options[scope.highlightIndex], {}, true, false);
|
||||
}
|
||||
if (evt.keyCode === 32) {
|
||||
scope.optionSelected(scope.search.options[scope.highlightIndex], {}, false, false);
|
||||
}
|
||||
};
|
||||
|
||||
scope.moveHighlight = function(direction) {
|
||||
scope.highlightIndex = (scope.highlightIndex + direction) % scope.search.options.length;
|
||||
};
|
||||
|
||||
scope.optionSelected = function(option, event, commitChange, excludeOthers) {
|
||||
if (!option) { return; }
|
||||
|
||||
option.selected = !option.selected;
|
||||
|
||||
commitChange = commitChange || false;
|
||||
excludeOthers = excludeOthers || false;
|
||||
|
||||
var setAllExceptCurrentTo = function(newValue) {
|
||||
_.each(scope.options, function(other) {
|
||||
if (option !== other) { other.selected = newValue; }
|
||||
});
|
||||
};
|
||||
|
||||
// commit action (enter key), should not deselect it
|
||||
if (commitChange) {
|
||||
option.selected = true;
|
||||
}
|
||||
|
||||
if (option.text === 'All' || excludeOthers) {
|
||||
setAllExceptCurrentTo(false);
|
||||
commitChange = true;
|
||||
}
|
||||
else if (!variable.multi) {
|
||||
setAllExceptCurrentTo(false);
|
||||
commitChange = true;
|
||||
} else if (event.ctrlKey || event.metaKey || event.shiftKey) {
|
||||
commitChange = true;
|
||||
setAllExceptCurrentTo(false);
|
||||
}
|
||||
|
||||
scope.selectionsChanged(option, commitChange);
|
||||
};
|
||||
|
||||
scope.selectionsChanged = function(defaultItem, commitChange) {
|
||||
var selected = _.filter(scope.options, {selected: true});
|
||||
|
||||
if (selected.length === 0) {
|
||||
defaultItem.selected = true;
|
||||
selected = [defaultItem];
|
||||
}
|
||||
|
||||
if (selected.length > 1 && selected.length !== scope.options.length) {
|
||||
if (selected[0].text === 'All') {
|
||||
selected[0].selected = false;
|
||||
selected = selected.slice(1, selected.length);
|
||||
}
|
||||
}
|
||||
|
||||
variable.current = {
|
||||
text: _.pluck(selected, 'text').join(', '),
|
||||
value: _.pluck(selected, 'value'),
|
||||
};
|
||||
|
||||
var valuesNotInTag = _.filter(selected, function(test) {
|
||||
for (var i = 0; i < scope.selectedTags.length; i++) {
|
||||
var tag = scope.selectedTags[i];
|
||||
if (_.indexOf(tag.values, test.value) !== -1) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
variable.current.text = _.pluck(valuesNotInTag, 'text').join(', ');
|
||||
|
||||
scope.selectedValuesCount = variable.current.value.length;
|
||||
|
||||
// only single value
|
||||
if (scope.selectedValuesCount === 1) {
|
||||
variable.current.value = selected[0].value;
|
||||
}
|
||||
|
||||
if (commitChange) {
|
||||
scope.switchToLink();
|
||||
}
|
||||
};
|
||||
|
||||
scope.clearSelections = function() {
|
||||
_.each(scope.options, function(option) {
|
||||
option.selected = false;
|
||||
});
|
||||
|
||||
scope.selectionsChanged(scope.options[0], false);
|
||||
};
|
||||
|
||||
scope.selectTag = function(tag) {
|
||||
tag.selected = !tag.selected;
|
||||
if (!tag.values) {
|
||||
if (tag.text === 'backend') {
|
||||
tag.values = ['backend_01', 'backend_02', 'backend_03', 'backend_04'];
|
||||
} else {
|
||||
tag.values = ['web_server_01', 'web_server_02', 'web_server_03', 'web_server_04'];
|
||||
}
|
||||
console.log('querying for tag values');
|
||||
}
|
||||
|
||||
_.each(scope.options, function(option) {
|
||||
if (_.indexOf(tag.values, option.value) !== -1) {
|
||||
option.selected = tag.selected;
|
||||
}
|
||||
});
|
||||
|
||||
scope.selectedTags = _.filter(scope.tags, {selected: true});
|
||||
scope.selectionsChanged(scope.options[0], false);
|
||||
};
|
||||
|
||||
scope.updateLinkText = function() {
|
||||
scope.labelText = variable.label || '$' + variable.name;
|
||||
scope.linkText = variable.current.text;
|
||||
};
|
||||
|
||||
scope.$watchGroup(['variable.hideLabel', 'variable.name', 'variable.label', 'variable.current.text'], function() {
|
||||
scope.updateLinkText();
|
||||
});
|
||||
|
||||
linkEl.click(scope.openDropdown);
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,36 +1,36 @@
|
||||
<span class="template-variable tight-form-item" ng-show="!variable.hideLabel" style="padding-right: 5px">
|
||||
{{labelText}}:
|
||||
<span class="template-variable tight-form-item" ng-show="!vm.variable.hideLabel" style="padding-right: 5px">
|
||||
{{vm.labelText}}:
|
||||
</span>
|
||||
|
||||
<div class="variable-link-wrapper">
|
||||
<a ng-click="show()" class="variable-value-link tight-form-item">
|
||||
{{linkText}}
|
||||
<span class="label-tag" ng-repeat="tag in selectedTags" tag-color-from-name="tag.text">
|
||||
{{vm.linkText}}
|
||||
<span class="label-tag" ng-repeat="tag in vm.selectedTags" tag-color-from-name="tag.text">
|
||||
{{tag.text}}
|
||||
<i class="fa fa-tag"></i>
|
||||
</span>
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</a>
|
||||
|
||||
<input type="text" class="tight-form-clear-input input-small" style="display: none" ng-keydown="keyDown($event)" ng-model="search.query" ng-change="queryChanged()" ></input>
|
||||
<input type="text" class="tight-form-clear-input input-small" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.queryChanged()" ></input>
|
||||
|
||||
<div class="variable-value-dropdown" ng-if="dropdownVisible" ng-class="{'multi': variable.multi, 'single': !variable.multi}">
|
||||
<div class="variable-value-dropdown" ng-if="vm.dropdownVisible" ng-class="{'multi': vm.variable.multi, 'single': !vm.variable.multi}">
|
||||
<div class="variable-options-wrapper">
|
||||
<div class="variable-options-column">
|
||||
<a class="variable-options-column-header" ng-if="variable.multi" ng-class="{'many-selected': selectedValuesCount > 1}" bs-tooltip="'Clear selections'" data-placement="top" ng-click="clearSelections()">
|
||||
<a class="variable-options-column-header" ng-if="vm.variable.multi" ng-class="{'many-selected': vm.selectedValuesCount > 1}" bs-tooltip="'Clear selections'" data-placement="top" ng-click="vm.clearSelections()">
|
||||
<span class="variable-option-icon"></span>
|
||||
Selected ({{selectedValuesCount}})
|
||||
Selected ({{vm.selectedValuesCount}})
|
||||
</a>
|
||||
<a class="variable-option pointer" bindonce ng-repeat="option in search.options" ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex}" ng-click="optionSelected(option, $event)">
|
||||
<a class="variable-option pointer" bindonce ng-repeat="option in vm.search.options" ng-class="{'selected': option.selected, 'highlighted': $index === vm.highlightIndex}" ng-click="vm.optionSelected(option, $event)">
|
||||
<span class="variable-option-icon"></span>
|
||||
<span>{{option.text}}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="variable-options-column" ng-if="tags.length">
|
||||
<div class="variable-options-column" ng-if="vm.tags.length">
|
||||
<div class="variable-options-column-header text-center">
|
||||
Tags
|
||||
</div>
|
||||
<a class="variable-option-tag pointer" ng-repeat="tag in tags" ng-click="selectTag(tag, $event)" ng-class="{'selected': tag.selected}">
|
||||
<a class="variable-option-tag pointer" ng-repeat="tag in vm.tags" ng-click="vm.selectTag(tag, $event)" ng-class="{'selected': tag.selected}">
|
||||
<span class="fa fa-fw variable-option-icon"></span>
|
||||
<span class="label-tag" tag-color-from-name="tag.text">{{tag.text}} <i class="fa fa-tag"></i> </span>
|
||||
</a>
|
||||
|
||||
@ -82,15 +82,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.variable-option-icon {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
background: url(@checkboxImageUrl) left top no-repeat;
|
||||
}
|
||||
|
||||
.variable-options-wrapper {
|
||||
display: table;
|
||||
width: 100%;
|
||||
@ -126,6 +117,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.variable-option-icon {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
background: url(@checkboxImageUrl) left top no-repeat;
|
||||
}
|
||||
|
||||
.variable-option {
|
||||
&:hover, &.highlighted {
|
||||
background-color: @blueDark;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user