apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues 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
pull/2119/head
Torkel Ödegaard 10 years ago
parent f48d0fcb13
commit b5a846154a
4 changed files with 79 additions and 50 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 88
      public/app/directives/variableValueSelect.js
  2. 4
      public/app/features/dashboard/partials/variableValueSelect.html
  3. 4
      public/app/features/templating/templateValuesSrv.js
  4. 33
      public/test/specs/selectDropdownCtrl-specs.js

88
public/app/directives/variableValueSelect.js
Unescape 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;
}
});
});
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() {

4
public/app/features/dashboard/partials/variableValueSelect.html
Unescape 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>

4
public/app/features/templating/templateValuesSrv.js
Unescape 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);

33
public/test/specs/selectDropdownCtrl-specs.js
Unescape 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() {

Write Preview
Loading…
Cancel
Save