Skip to content

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

Breaking out logic for variable dropdown into a controller, this needs some unit tests

parent 137cbe5b
Showing with 210 additions and 197 deletions
public/app/directives/variableValueSelect.js
......@@ -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);
},
};
......
public/app/features/dashboard/partials/variableValueSelect.html
<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}}
&nbsp;&nbsp;<i class="fa fa-tag"></i>&nbsp;
</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}}&nbsp;&nbsp;<i class="fa fa-tag"></i>&nbsp;</span>
</a>
......
public/css/less/submenu.less
......@@ -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;
......
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