Skip to content

N
nexpie-grafana-theme
Commit b5a84615 by Torkel Ödegaard
Options

Trying to make progres on persisting selection state, restoring selection state… 

Trying to make progres on persisting selection state, restoring selection state for new multi variable dropdown, proving to be really complex
parent f48d0fcb
Showing with 79 additions and 50 deletions
public/app/directives/variableValueSelect.js
......@@ -13,24 +13,20 @@ function (angular, app, _) {
var vm = this;
vm.show = function() {
vm.oldLinkText = vm.variable.current.text;
vm.oldVariableText = 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;
}
if (_.indexOf(currentValues, option.value) >= 0) { option.selected = true; }
return option;
});
vm.search = {query: '', options: vm.options};
vm.selectedValuesCount = currentValues.length;
vm.selectedValues = _.filter(vm.options, {selected: true});
vm.selectedTags = vm.selectedTags || [];
if (!vm.tags) {
......@@ -39,14 +35,26 @@ function (angular, app, _) {
});
}
vm.search = {query: '', options: vm.options};
vm.dropdownVisible = true;
};
vm.updateLinkText = function() {
// var currentValues = vm.variable.current.text;
//
// if (vm.variable.current.tags) {
// selectedOptions = _.filter(selectedOptions, function(test) {
// for (var i = 0; i < vm.variable.current.tags; i++) {
// var tag = vm.selectedTags[i];
// if (_.indexOf(tag.values, test.text) !== -1) {
// return false;
// }
// }
// return true;
// });
// }
//
vm.linkText = vm.variable.current.text;
if (vm.oldLinkText && vm.oldLinkText !== vm.linkText) {
vm.onUpdated();
}
};
vm.clearSelections = function() {
......@@ -62,17 +70,13 @@ function (angular, app, _) {
var tagValuesPromise;
if (!tag.values) {
tagValuesPromise = vm.getValuesForTag({tagKey: tag.text});
// 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'];
// }
} else {
tagValuesPromise = $q.when(tag.values);
}
tagValuesPromise.then(function(values) {
tag.values = values;
tag.valuesText = values.join(', ');
_.each(vm.options, function(option) {
if (_.indexOf(tag.values, option.value) !== -1) {
option.selected = tag.selected;
......@@ -105,7 +109,7 @@ function (angular, app, _) {
vm.highlightIndex = (vm.highlightIndex + direction) % vm.search.options.length;
};
vm.optionSelected = function(option, event, commitChange, excludeOthers) {
vm.selectValue = function(option, event, commitChange, excludeOthers) {
if (!option) { return; }
option.selected = !option.selected;
......@@ -140,43 +144,34 @@ function (angular, app, _) {
};
vm.selectionsChanged = function(commitChange) {
var selected = _.filter(vm.options, {selected: true});
vm.selectedValues = _.filter(vm.options, {selected: true});
if (selected.length > 1 && selected.length !== vm.options.length) {
if (selected[0].text === 'All') {
selected[0].selected = false;
selected = selected.slice(1, selected.length);
if (vm.selectedValues.length > 1 && vm.selectedValues.length !== vm.options.length) {
if (vm.selectedValues[0].text === 'All') {
vm.selectedValues[0].selected = false;
vm.selectedValues = vm.selectedValues.slice(1, vm.selectedValues.length);
}
}
// validate selected tags
_.each(vm.selectedTags, function(tag) {
_.each(tag.values, function(value) {
if (!_.findWhere(selected, {value: value})) {
tag.selected = false;
}
});
});
vm.selectedTags = _.filter(vm.tags, {selected: true});
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;
}
_.each(vm.tags, function(tag) {
if (tag.selected) {
_.each(tag.values, function(value) {
if (!_.findWhere(vm.selectedValues, {value: value})) {
tag.selected = false;
}
});
}
return true;
});
vm.variable.current.value = _.pluck(selected, 'value');
vm.variable.current.text = _.pluck(valuesNotInTag, 'text').join(', ');
vm.selectedValuesCount = selected.length;
vm.selectedTags = _.filter(vm.tags, {selected: true});
vm.variable.current.value = _.pluck(vm.selectedValues, 'value');
vm.variable.current.text = _.pluck(vm.selectedValues, 'text').join(' + ');
vm.variable.current.tags = vm.selectedTags;
// only single value
if (vm.selectedValuesCount === 1) {
vm.variable.current.value = selected[0].value;
if (vm.selectedValues.length === 1) {
vm.variable.current.value = vm.selectedValues[0].value;
}
if (commitChange) {
......@@ -186,14 +181,17 @@ function (angular, app, _) {
vm.commitChanges = function() {
// make sure one option is selected
var selected = _.filter(vm.options, {selected: true});
if (selected.length === 0) {
if (vm.selectedValues.length === 0) {
vm.options[0].selected = true;
vm.selectionsChanged(false);
}
vm.dropdownVisible = false;
vm.updateLinkText();
if (vm.variable.current.text !== vm.oldVariableText) {
vm.onUpdated();
}
};
vm.queryChanged = function() {
......
public/app/features/dashboard/partials/variableValueSelect.html
......@@ -15,9 +15,9 @@
<div class="variable-options-column">
<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 ({{vm.selectedValuesCount}})
Selected ({{vm.selectedValues.length}})
</a>
<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)">
<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.selectValue(option, $event)">
<span class="variable-option-icon"></span>
<span>{{option.text}}</span>
</a>
......
public/app/features/templating/templateValuesSrv.js
......@@ -130,6 +130,10 @@ function (angular, _, kbn) {
// if parameter has current value
// if it exists in options array keep value
if (variable.current) {
// if current value is an array do not do anything
if (_.isArray(variable.current.value)) {
return $q.when([]);
}
var currentOption = _.findWhere(variable.options, { text: variable.current.text });
if (currentOption) {
return self.setVariableValue(variable, currentOption);
......
public/test/specs/selectDropdownCtrl-specs.js
......@@ -19,6 +19,7 @@ function () {
ctrl.getValuesForTag = function(obj) {
return $q.when(tagValuesMap[obj.tagKey]);
};
ctrl.onUpdated = sinon.spy();
}));
describe("Given simple variable", function() {
......@@ -35,13 +36,14 @@ function () {
describe("Given variable with tags and dropdown is opened", function() {
beforeEach(function() {
ctrl.variable = {
current: {text: 'hej', value: 'hej'},
current: {text: 'server-1', value: 'server-1'},
options: [
{text: 'server-1', value: 'server-1'},
{text: 'server-2', value: 'server-2'},
{text: 'server-3', value: 'server-3'},
],
tags: ["key1", "key2", "key3"]
tags: ["key1", "key2", "key3"],
multi: true
};
tagValuesMap.key1 = ['server-1', 'server-3'];
tagValuesMap.key2 = ['server-2', 'server-3'];
......@@ -59,10 +61,30 @@ function () {
expect(ctrl.options.length).to.be(3);
});
it("should init selected values array", function() {
expect(ctrl.selectedValues.length).to.be(1);
});
it("should set linkText", function() {
expect(ctrl.linkText).to.be('server-1');
});
describe('after adititional value is selected', function() {
beforeEach(function() {
ctrl.selectValue(ctrl.options[2], {});
ctrl.commitChanges();
});
it('should update link text', function() {
expect(ctrl.linkText).to.be('server-1 + server-3');
});
});
describe('When tag is selected', function() {
beforeEach(function() {
ctrl.selectTag(ctrl.tags[0]);
rootScope.$digest();
ctrl.commitChanges();
});
it("should select tag", function() {
......@@ -72,6 +94,11 @@ function () {
it("should select values", function() {
expect(ctrl.options[0].selected).to.be(true);
expect(ctrl.options[2].selected).to.be(true);
expect(ctrl.linkText).to.be('server-1 + server-2');
});
it("link text should not include tag values", function() {
expect(ctrl.linkText).to.not.contain('server-1');
});
describe('and then dropdown is opened and closed without changes', function() {
......@@ -99,7 +126,7 @@ function () {
describe('and then value is unselected', function() {
beforeEach(function() {
ctrl.optionSelected(ctrl.options[0]);
ctrl.selectValue(ctrl.options[0], {});
});
it("should deselect tag", function() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment