diff --git a/public/app/core/components/form_dropdown/form_dropdown.ts b/public/app/core/components/form_dropdown/form_dropdown.ts index 1fa1dea4338..f3d920c5b4d 100644 --- a/public/app/core/components/form_dropdown/form_dropdown.ts +++ b/public/app/core/components/form_dropdown/form_dropdown.ts @@ -1,9 +1,11 @@ import _ from 'lodash'; -import $ from 'jquery'; import coreModule from '../../core_module'; function typeaheadMatcher(item) { var str = this.query; + if (str === '') { + return true; + } if (str[0] === '/') { str = str.substring(1); } @@ -30,6 +32,8 @@ export class FormDropdownCtrl { getOptions: any; optionCache: any; lookupText: boolean; + placeholder: any; + startOpen: any; /** @ngInject **/ constructor(private $scope, $element, private $sce, private templateSrv, private $q) { @@ -47,6 +51,10 @@ export class FormDropdownCtrl { this.cssClasses = 'gf-form-input gf-form-input--dropdown ' + this.cssClass; } + if (this.placeholder) { + this.inputElement.attr('placeholder', this.placeholder); + } + this.inputElement.attr('data-provide', 'typeahead'); this.inputElement.typeahead({ source: this.typeaheadSource.bind(this), @@ -61,8 +69,7 @@ export class FormDropdownCtrl { var typeahead = this.inputElement.data('typeahead'); typeahead.lookup = function() { this.query = this.$element.val() || ''; - var items = this.source(this.query, $.proxy(this.process, this)); - return items ? this.process(items) : items; + this.source(this.query, this.process.bind(this)); }; this.linkElement.keydown(evt => { @@ -81,6 +88,10 @@ export class FormDropdownCtrl { }); this.inputElement.blur(this.inputBlur.bind(this)); + + if (this.startOpen) { + setTimeout(this.open.bind(this), 0); + } } getOptionsInternal(query) { @@ -121,9 +132,9 @@ export class FormDropdownCtrl { }); // add custom values - if (this.allowCustom) { + if (this.allowCustom && this.text !== '') { if (_.indexOf(optionTexts, this.text) === -1) { - options.unshift(this.text); + optionTexts.unshift(this.text); } } @@ -165,7 +176,7 @@ export class FormDropdownCtrl { updateValue(text) { text = _.unescape(text); - if (text === '' || this.text === text) { + if ((!this.allowCustom && text === '') || this.text === text) { return; } @@ -214,7 +225,9 @@ export class FormDropdownCtrl { var typeahead = this.inputElement.data('typeahead'); if (typeahead) { - this.inputElement.val(''); + if (!this.allowCustom) { + this.inputElement.val(''); + } typeahead.lookup(); } } @@ -228,10 +241,10 @@ const template = ` style="display:none"> + tabindex="1" + ng-click="ctrl.open()" + give-focus="ctrl.focus" + ng-bind-html="ctrl.display || ' '"> `; @@ -250,6 +263,8 @@ export function formDropdownDirective() { allowCustom: '@', labelMode: '@', lookupText: '@', + placeholder: '@', + startOpen: '@', }, }; } diff --git a/public/app/core/directives/dropdown_typeahead.js b/public/app/core/directives/dropdown_typeahead.js index b44e953785e..25772b4638a 100644 --- a/public/app/core/directives/dropdown_typeahead.js +++ b/public/app/core/directives/dropdown_typeahead.js @@ -12,7 +12,7 @@ function (_, $, coreModule) { ' class="gf-form-input input-medium tight-form-input"' + ' spellcheck="false" style="display:none">'; - var buttonTemplate = ''; diff --git a/public/app/core/services/segment_srv.js b/public/app/core/services/segment_srv.js index d615525988a..6c126da1acd 100644 --- a/public/app/core/services/segment_srv.js +++ b/public/app/core/services/segment_srv.js @@ -106,10 +106,6 @@ function (angular, _, coreModule) { return new MetricSegment({fake: true, html: '', type: 'plus-button', cssClass: 'query-part' }); }; - this.newSelectTagValue = function() { - return new MetricSegment({value: 'select tag value', fake: true}); - }; - }); }); diff --git a/public/app/plugins/datasource/graphite/add_graphite_func.js b/public/app/plugins/datasource/graphite/add_graphite_func.js index 10d9b9ced71..97c34664ed7 100644 --- a/public/app/plugins/datasource/graphite/add_graphite_func.js +++ b/public/app/plugins/datasource/graphite/add_graphite_func.js @@ -13,7 +13,7 @@ function (angular, _, $) { ' class="gf-form-input"' + ' spellcheck="false" style="display:none">'; - var buttonTemplate = '' + ''; diff --git a/public/app/plugins/datasource/graphite/graphite_query.ts b/public/app/plugins/datasource/graphite/graphite_query.ts index 9f651e72744..10e0144e3ff 100644 --- a/public/app/plugins/datasource/graphite/graphite_query.ts +++ b/public/app/plugins/datasource/graphite/graphite_query.ts @@ -209,7 +209,7 @@ export default class GraphiteQuery { } splitSeriesByTagParams(func) { - const tagPattern = /([^\!=~]+)([\!=~]+)([^\!=~]+)/; + const tagPattern = /([^\!=~]+)(\!?=~?)(.*)/; return _.flatten( _.map(func.params, (param: string) => { let matches = tagPattern.exec(param); diff --git a/public/app/plugins/datasource/graphite/partials/query.editor.html b/public/app/plugins/datasource/graphite/partials/query.editor.html index c1889cb92fa..df32353644d 100755 --- a/public/app/plugins/datasource/graphite/partials/query.editor.html +++ b/public/app/plugins/datasource/graphite/partials/query.editor.html @@ -11,29 +11,45 @@