From ebad19b2322e2ffb417b7b394ee7171ee714e4f3 Mon Sep 17 00:00:00 2001 From: Dan Cech Date: Fri, 22 Dec 2017 15:08:59 -0500 Subject: [PATCH] work on tag dropdown behavior --- .../components/form_dropdown/form_dropdown.ts | 37 ++++++++++++----- .../app/core/directives/dropdown_typeahead.js | 2 +- public/app/core/services/segment_srv.js | 4 -- .../datasource/graphite/add_graphite_func.js | 2 +- .../datasource/graphite/graphite_query.ts | 2 +- .../graphite/partials/query.editor.html | 40 +++++++++++++------ .../plugins/datasource/graphite/query_ctrl.ts | 4 +- .../graphite/specs/query_ctrl_specs.ts | 4 +- 8 files changed, 61 insertions(+), 34 deletions(-) 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 @@
- - - + - - + - + on-change="ctrl.tagChanged(tag, $index)" + start-open="!ctrl.showDelimiter($index)" + />
diff --git a/public/app/plugins/datasource/graphite/query_ctrl.ts b/public/app/plugins/datasource/graphite/query_ctrl.ts index 72b72cfbb32..d8cc6c4c16b 100644 --- a/public/app/plugins/datasource/graphite/query_ctrl.ts +++ b/public/app/plugins/datasource/graphite/query_ctrl.ts @@ -270,7 +270,7 @@ export class GraphiteQueryCtrl extends QueryCtrl { let newFunc = this.datasource.createFuncInstance('seriesByTag', { withDefaultParams: false, }); - let tagParam = `${tag}=select tag value`; + let tagParam = `${tag}=`; newFunc.params = [tagParam]; this.queryModel.addFunction(newFunc); newFunc.added = true; @@ -353,7 +353,7 @@ export class GraphiteQueryCtrl extends QueryCtrl { addNewTag(segment) { let newTagKey = segment.value; - let newTag = { key: newTagKey, operator: '=', value: 'select tag value' }; + let newTag = { key: newTagKey, operator: '=', value: '' }; this.queryModel.addTag(newTag); this.targetChanged(); this.fixTagSegments(); diff --git a/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts b/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts index 70fc5bbb7b6..fbbd9134c3e 100644 --- a/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts +++ b/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts @@ -284,12 +284,12 @@ describe('GraphiteQueryCtrl', function() { }); it('should update tags with default value', function() { - const expected = [{ key: 'tag1', operator: '=', value: 'select tag value' }]; + const expected = [{ key: 'tag1', operator: '=', value: '' }]; expect(ctx.ctrl.queryModel.tags).to.eql(expected); }); it('should update target', function() { - const expected = "seriesByTag('tag1=select tag value')"; + const expected = "seriesByTag('tag1=')"; expect(ctx.ctrl.target.target).to.eql(expected); }); });