Skip to content

N
nexpie-grafana-theme
Commit af91238d by Daniel Lee Committed by GitHub
Options

Merge pull request #11547 from grafana/value-select-dropdown-to-ts 

Value select dropdown to ts
parents 9413ce5e 82aa6cf4
Showing with 305 additions and 283 deletions
public/app/core/directives/value_select_dropdown.js deleted 100644 → 0
define([
'angular',
'lodash',
'../core_module',
],
function (angular, _, coreModule) {
'use strict';
coreModule.default.controller('ValueSelectDropdownCtrl', function($q) {
var vm = this;
vm.show = function() {
vm.oldVariableText = vm.variable.current.text;
vm.highlightIndex = -1;
vm.options = vm.variable.options;
vm.selectedValues = _.filter(vm.options, {selected: true});
vm.tags = _.map(vm.variable.tags, function(value) {
var tag = { text: value, selected: false };
_.each(vm.variable.current.tags, function(tagObj) {
if (tagObj.text === value) {
tag = tagObj;
}
});
return tag;
});
vm.search = {
query: '',
options: vm.options.slice(0, Math.min(vm.options.length, 1000))
};
vm.dropdownVisible = true;
};
vm.updateLinkText = function() {
var current = vm.variable.current;
if (current.tags && current.tags.length) {
// filer out values that are in selected tags
var selectedAndNotInTag = _.filter(vm.variable.options, function(option) {
if (!option.selected) { return false; }
for (var i = 0; i < current.tags.length; i++) {
var tag = current.tags[i];
if (_.indexOf(tag.values, option.value) !== -1) {
return false;
}
}
return true;
});
// convert values to text
var currentTexts = _.map(selectedAndNotInTag, 'text');
// join texts
vm.linkText = currentTexts.join(' + ');
if (vm.linkText.length > 0) {
vm.linkText += ' + ';
}
} else {
vm.linkText = vm.variable.current.text;
}
};
vm.clearSelections = function() {
_.each(vm.options, function(option) {
option.selected = false;
});
vm.selectionsChanged(false);
};
vm.selectTag = function(tag) {
tag.selected = !tag.selected;
var tagValuesPromise;
if (!tag.values) {
tagValuesPromise = vm.variable.getValuesForTag(tag.text);
} 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;
}
});
vm.selectionsChanged(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) {
if (vm.search.options.length === 0) {
vm.commitChanges();
} else {
vm.selectValue(vm.search.options[vm.highlightIndex], {}, true, false);
}
}
if (evt.keyCode === 32) {
vm.selectValue(vm.search.options[vm.highlightIndex], {}, false, false);
}
};
vm.moveHighlight = function(direction) {
vm.highlightIndex = (vm.highlightIndex + direction) % vm.search.options.length;
};
vm.selectValue = function(option, event, commitChange, excludeOthers) {
if (!option) { return; }
option.selected = vm.variable.multi ? !option.selected: true;
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(commitChange);
};
vm.selectionsChanged = function(commitChange) {
vm.selectedValues = _.filter(vm.options, {selected: true});
if (vm.selectedValues.length > 1) {
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.tags, function(tag) {
if (tag.selected) {
_.each(tag.values, function(value) {
if (!_.find(vm.selectedValues, {value: value})) {
tag.selected = false;
}
});
}
});
vm.selectedTags = _.filter(vm.tags, {selected: true});
vm.variable.current.value = _.map(vm.selectedValues, 'value');
vm.variable.current.text = _.map(vm.selectedValues, 'text').join(' + ');
vm.variable.current.tags = vm.selectedTags;
if (!vm.variable.multi) {
vm.variable.current.value = vm.selectedValues[0].value;
}
if (commitChange) {
vm.commitChanges();
}
};
vm.commitChanges = function() {
// if we have a search query and no options use that
if (vm.search.options.length === 0 && vm.search.query.length > 0) {
vm.variable.current = {text: vm.search.query, value: vm.search.query};
}
else if (vm.selectedValues.length === 0) {
// make sure one option is selected
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() {
vm.highlightIndex = -1;
vm.search.options = _.filter(vm.options, function(option) {
return option.text.toLowerCase().indexOf(vm.search.query.toLowerCase()) !== -1;
});
vm.search.options = vm.search.options.slice(0, Math.min(vm.search.options.length, 1000));
};
vm.init = function() {
vm.selectedTags = vm.variable.current.tags || [];
vm.updateLinkText();
};
});
coreModule.default.directive('valueSelectDropdown', function($compile, $window, $timeout, $rootScope) {
return {
scope: { variable: "=", onUpdated: "&"},
templateUrl: 'public/app/partials/valueSelectDropdown.html',
controller: 'ValueSelectDropdownCtrl',
controllerAs: 'vm',
bindToController: true,
link: function(scope, elem) {
var bodyEl = angular.element($window.document.body);
var linkEl = elem.find('.variable-value-link');
var inputEl = elem.find('input');
function openDropdown() {
inputEl.css('width', Math.max(linkEl.width(), 80) + 'px');
inputEl.show();
linkEl.hide();
inputEl.focus();
$timeout(function() { bodyEl.on('click', bodyOnClick); }, 0, false);
}
function switchToLink() {
inputEl.hide();
linkEl.show();
bodyEl.off('click', bodyOnClick);
}
function bodyOnClick (e) {
if (elem.has(e.target).length === 0) {
scope.$apply(function() {
scope.vm.commitChanges();
});
}
}
scope.$watch('vm.dropdownVisible', function(newValue) {
if (newValue) {
openDropdown();
} else {
switchToLink();
}
});
var cleanUp = $rootScope.$on('template-variable-value-updated', function() {
scope.vm.updateLinkText();
});
scope.$on("$destroy", function() {
cleanUp();
});
scope.vm.init();
},
};
});
});
public/app/core/directives/value_select_dropdown.ts 0 → 100644
import angular from 'angular';
import _ from 'lodash';
import coreModule from '../core_module';
export class ValueSelectDropdownCtrl {
dropdownVisible: any;
highlightIndex: any;
linkText: any;
oldVariableText: any;
options: any;
search: any;
selectedTags: any;
selectedValues: any;
tags: any;
variable: any;
hide: any;
onUpdated: any;
/** @ngInject */
constructor(private $q) {}
show() {
this.oldVariableText = this.variable.current.text;
this.highlightIndex = -1;
this.options = this.variable.options;
this.selectedValues = _.filter(this.options, { selected: true });
this.tags = _.map(this.variable.tags, value => {
let tag = { text: value, selected: false };
_.each(this.variable.current.tags, tagObj => {
if (tagObj.text === value) {
tag = tagObj;
}
});
return tag;
});
this.search = {
query: '',
options: this.options.slice(0, Math.min(this.options.length, 1000)),
};
this.dropdownVisible = true;
}
updateLinkText() {
let current = this.variable.current;
if (current.tags && current.tags.length) {
// filer out values that are in selected tags
let selectedAndNotInTag = _.filter(this.variable.options, option => {
if (!option.selected) {
return false;
}
for (let i = 0; i < current.tags.length; i++) {
let tag = current.tags[i];
if (_.indexOf(tag.values, option.value) !== -1) {
return false;
}
}
return true;
});
// convert values to text
let currentTexts = _.map(selectedAndNotInTag, 'text');
// join texts
this.linkText = currentTexts.join(' + ');
if (this.linkText.length > 0) {
this.linkText += ' + ';
}
} else {
this.linkText = this.variable.current.text;
}
}
clearSelections() {
_.each(this.options, option => {
option.selected = false;
});
this.selectionsChanged(false);
}
selectTag(tag) {
tag.selected = !tag.selected;
let tagValuesPromise;
if (!tag.values) {
tagValuesPromise = this.variable.getValuesForTag(tag.text);
} else {
tagValuesPromise = this.$q.when(tag.values);
}
tagValuesPromise.then(values => {
tag.values = values;
tag.valuesText = values.join(' + ');
_.each(this.options, option => {
if (_.indexOf(tag.values, option.value) !== -1) {
option.selected = tag.selected;
}
});
this.selectionsChanged(false);
});
}
keyDown(evt) {
if (evt.keyCode === 27) {
this.hide();
}
if (evt.keyCode === 40) {
this.moveHighlight(1);
}
if (evt.keyCode === 38) {
this.moveHighlight(-1);
}
if (evt.keyCode === 13) {
if (this.search.options.length === 0) {
this.commitChanges();
} else {
this.selectValue(this.search.options[this.highlightIndex], {}, true, false);
}
}
if (evt.keyCode === 32) {
this.selectValue(this.search.options[this.highlightIndex], {}, false, false);
}
}
moveHighlight(direction) {
this.highlightIndex = (this.highlightIndex + direction) % this.search.options.length;
}
selectValue(option, event, commitChange, excludeOthers) {
if (!option) {
return;
}
option.selected = this.variable.multi ? !option.selected : true;
commitChange = commitChange || false;
excludeOthers = excludeOthers || false;
let setAllExceptCurrentTo = function(newValue) {
_.each(this.options, 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 (!this.variable.multi) {
setAllExceptCurrentTo(false);
commitChange = true;
} else if (event.ctrlKey || event.metaKey || event.shiftKey) {
commitChange = true;
setAllExceptCurrentTo(false);
}
this.selectionsChanged(commitChange);
}
selectionsChanged(commitChange) {
this.selectedValues = _.filter(this.options, { selected: true });
if (this.selectedValues.length > 1) {
if (this.selectedValues[0].text === 'All') {
this.selectedValues[0].selected = false;
this.selectedValues = this.selectedValues.slice(1, this.selectedValues.length);
}
}
// validate selected tags
_.each(this.tags, tag => {
if (tag.selected) {
_.each(tag.values, value => {
if (!_.find(this.selectedValues, { value: value })) {
tag.selected = false;
}
});
}
});
this.selectedTags = _.filter(this.tags, { selected: true });
this.variable.current.value = _.map(this.selectedValues, 'value');
this.variable.current.text = _.map(this.selectedValues, 'text').join(' + ');
this.variable.current.tags = this.selectedTags;
if (!this.variable.multi) {
this.variable.current.value = this.selectedValues[0].value;
}
if (commitChange) {
this.commitChanges();
}
}
commitChanges() {
// if we have a search query and no options use that
if (this.search.options.length === 0 && this.search.query.length > 0) {
this.variable.current = { text: this.search.query, value: this.search.query };
} else if (this.selectedValues.length === 0) {
// make sure one option is selected
this.options[0].selected = true;
this.selectionsChanged(false);
}
this.dropdownVisible = false;
this.updateLinkText();
if (this.variable.current.text !== this.oldVariableText) {
this.onUpdated();
}
}
queryChanged() {
this.highlightIndex = -1;
this.search.options = _.filter(this.options, option => {
return option.text.toLowerCase().indexOf(this.search.query.toLowerCase()) !== -1;
});
this.search.options = this.search.options.slice(0, Math.min(this.search.options.length, 1000));
}
init() {
this.selectedTags = this.variable.current.tags || [];
this.updateLinkText();
}
}
/** @ngInject */
export function valueSelectDropdown($compile, $window, $timeout, $rootScope) {
return {
scope: { variable: '=', onUpdated: '&' },
templateUrl: 'public/app/partials/valueSelectDropdown.html',
controller: 'ValueSelectDropdownCtrl',
controllerAs: 'vm',
bindToController: true,
link: function(scope, elem) {
let bodyEl = angular.element($window.document.body);
let linkEl = elem.find('.variable-value-link');
let inputEl = elem.find('input');
function openDropdown() {
inputEl.css('width', Math.max(linkEl.width(), 80) + 'px');
inputEl.show();
linkEl.hide();
inputEl.focus();
$timeout(
function() {
bodyEl.on('click', bodyOnClick);
},
0,
false
);
}
function switchToLink() {
inputEl.hide();
linkEl.show();
bodyEl.off('click', bodyOnClick);
}
function bodyOnClick(e) {
if (elem.has(e.target).length === 0) {
scope.$apply(function() {
scope.vm.commitChanges();
});
}
}
scope.$watch('vm.dropdownVisible', newValue => {
if (newValue) {
openDropdown();
} else {
switchToLink();
}
});
let cleanUp = $rootScope.$on('template-variable-value-updated', () => {
scope.vm.updateLinkText();
});
scope.$on('$destroy', () => {
cleanUp();
});
scope.vm.init();
},
};
}
coreModule.controller('ValueSelectDropdownCtrl', ValueSelectDropdownCtrl);
coreModule.directive('valueSelectDropdown', valueSelectDropdown);
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