public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Trying to make progres on persisting selection state, restoring selection state for new multi variable dropdown, proving to be really complex

Browse Source
This commit is contained in:
Torkel Ödegaard
2015-06-03 14:53:52 +02:00
parent f48d0fcb13
commit b5a846154a
4 changed files with 79 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/directives/variableValueSelect.js
+43 -45
View File
@@ -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;
}
});
_.each(vm.tags, function(tag) {
if (tag.selected) {
_.each(tag.values, function(value) {
if (!_.findWhere(vm.selectedValues, {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;
}
}
return true;
});
vm.variable.current.value = _.pluck(selected, 'value');
vm.variable.current.text = _.pluck(valuesNotInTag, 'text').join(', ');
vm.selectedValuesCount = selected.length;
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
+2 -2
View File
@@ -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
+4
View File
@@ -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
+30 -3
View File
@@ -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() {