From 83b9db51e3434466cd2a01d06549ad95c44a798b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 14 Sep 2016 17:36:28 +0200 Subject: [PATCH] feat(templating): great progress on adhoc filters, #6038 --- public/app/core/utils/kbn.js | 4 + .../app/features/dashboard/ad_hoc_filters.ts | 159 ++++++++++++++++++ public/app/features/dashboard/all.js | 1 + .../features/dashboard/submenu/submenu.html | 12 +- public/app/features/templating/editorCtrl.js | 2 +- .../features/templating/partials/editor.html | 13 +- .../plugins/datasource/influxdb/datasource.ts | 50 ++++-- .../datasource/influxdb/influx_query.ts | 19 ++- .../datasource/prometheus/datasource.ts | 9 +- public/sass/components/_gf-form.scss | 1 - public/sass/components/_submenu.scss | 15 +- 11 files changed, 239 insertions(+), 46 deletions(-) create mode 100644 public/app/features/dashboard/ad_hoc_filters.ts diff --git a/public/app/core/utils/kbn.js b/public/app/core/utils/kbn.js index c0d162b0ece..00c0cb3e127 100644 --- a/public/app/core/utils/kbn.js +++ b/public/app/core/utils/kbn.js @@ -9,6 +9,10 @@ function($, _, moment) { var kbn = {}; kbn.valueFormats = {}; + kbn.regexEscape = function(value) { + return value.replace(/[\\^$*+?.()|[\]{}]/g, '\\\\$&'); + }; + ///// HELPER FUNCTIONS ///// kbn.round_interval = function(interval) { diff --git a/public/app/features/dashboard/ad_hoc_filters.ts b/public/app/features/dashboard/ad_hoc_filters.ts new file mode 100644 index 00000000000..c97c5588666 --- /dev/null +++ b/public/app/features/dashboard/ad_hoc_filters.ts @@ -0,0 +1,159 @@ +/// + +import _ from 'lodash'; +import angular from 'angular'; +import coreModule from 'app/core/core_module'; + +export class AdHocFiltersCtrl { + segments: any; + variable: any; + removeTagFilterSegment: any; + + /** @ngInject */ + constructor(private uiSegmentSrv, private datasourceSrv, private $q, private templateSrv, private $rootScope) { + this.removeTagFilterSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove filter --'}); + this.buildSegmentModel(); + } + + buildSegmentModel() { + this.segments = []; + + if (this.variable.value && !_.isArray(this.variable.value)) { + } + + for (let tag of this.variable.value) { + if (this.segments.length > 0) { + this.segments.push(this.uiSegmentSrv.newCondition('AND')); + } + + if (tag.key !== undefined && tag.value !== undefined) { + this.segments.push(this.uiSegmentSrv.newKey(tag.key)); + this.segments.push(this.uiSegmentSrv.newOperator(tag.operator)); + this.segments.push(this.uiSegmentSrv.newKeyValue(tag.value)); + } + } + + this.segments.push(this.uiSegmentSrv.newPlusButton()); + } + + getOptions(segment, index) { + if (segment.type === 'operator') { + return this.$q.when(this.uiSegmentSrv.newOperators(['=', '!=', '<>', '<', '>', '=~', '!~'])); + } + + return this.datasourceSrv.get(this.variable.datasource).then(ds => { + var options: any = {}; + var promise = null; + + if (segment.type !== 'value') { + promise = ds.getTagKeys(); + } else { + options.key = this.segments[index-2].value; + promise = ds.getTagValues(options); + } + + return promise.then(results => { + results = _.map(results, segment => { + return this.uiSegmentSrv.newSegment({value: segment.text}); + }); + + // add remove option for keys + if (segment.type === 'key') { + results.splice(0, 0, angular.copy(this.removeTagFilterSegment)); + } + return results; + }); + }); + } + + segmentChanged(segment, index) { + this.segments[index] = segment; + + // handle remove tag condition + if (segment.value === this.removeTagFilterSegment.value) { + this.segments.splice(index, 3); + if (this.segments.length === 0) { + this.segments.push(this.uiSegmentSrv.newPlusButton()); + } else if (this.segments.length > 2) { + this.segments.splice(Math.max(index-1, 0), 1); + if (this.segments[this.segments.length-1].type !== 'plus-button') { + this.segments.push(this.uiSegmentSrv.newPlusButton()); + } + } + } else { + if (segment.type === 'plus-button') { + if (index > 2) { + this.segments.splice(index, 0, this.uiSegmentSrv.newCondition('AND')); + } + this.segments.push(this.uiSegmentSrv.newOperator('=')); + this.segments.push(this.uiSegmentSrv.newFake('select tag value', 'value', 'query-segment-value')); + segment.type = 'key'; + segment.cssClass = 'query-segment-key'; + } + + if ((index+1) === this.segments.length) { + this.segments.push(this.uiSegmentSrv.newPlusButton()); + } + } + + this.updateVariableModel(); + } + + updateVariableModel() { + var tags = []; + var tagIndex = -1; + var tagOperator = ""; + + this.segments.forEach((segment, index) => { + if (segment.fake) { + return; + } + + switch (segment.type) { + case 'key': { + tags.push({key: segment.value}); + tagIndex += 1; + break; + } + case 'value': { + tags[tagIndex].value = segment.value; + break; + } + case 'operator': { + tags[tagIndex].operator = segment.value; + break; + } + case 'condition': { + break; + } + } + }); + + this.$rootScope.$broadcast('refresh'); + this.variable.value = tags; + } +} + +var template = ` +
+
+ +
+
+`; + +export function adHocFiltersComponent() { + return { + restrict: 'E', + template: template, + controller: AdHocFiltersCtrl, + bindToController: true, + controllerAs: 'ctrl', + scope: { + variable: "=" + } + }; +} + +coreModule.directive('adHocFilters', adHocFiltersComponent); diff --git a/public/app/features/dashboard/all.js b/public/app/features/dashboard/all.js index 6aea2efa9f1..5ff221af85a 100644 --- a/public/app/features/dashboard/all.js +++ b/public/app/features/dashboard/all.js @@ -20,4 +20,5 @@ define([ './import/dash_import', './export/export_modal', './dash_list_ctrl', + './ad_hoc_filters', ], function () {}); diff --git a/public/app/features/dashboard/submenu/submenu.html b/public/app/features/dashboard/submenu/submenu.html index f02b3cfc881..1e1513d4021 100644 --- a/public/app/features/dashboard/submenu/submenu.html +++ b/public/app/features/dashboard/submenu/submenu.html @@ -1,19 +1,13 @@
    -
  • +
  • -
    - -
    - - - -
    -     +
diff --git a/public/app/features/templating/editorCtrl.js b/public/app/features/templating/editorCtrl.js index b4181908977..8b3e7d3a169 100644 --- a/public/app/features/templating/editorCtrl.js +++ b/public/app/features/templating/editorCtrl.js @@ -56,7 +56,7 @@ function (angular, _) { $scope.datasourceTypes = {}; $scope.datasources = _.filter(datasourceSrv.getMetricSources(), function(ds) { $scope.datasourceTypes[ds.meta.id] = {text: ds.meta.name, value: ds.meta.id}; - return !ds.meta.builtIn; + return !ds.meta.builtIn && ds.value !== null; }); $scope.datasourceTypes = _.map($scope.datasourceTypes, function(value) { diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 80ea870dfc4..a35deb0aaf5 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -165,7 +165,7 @@
- Data source + Data source
@@ -233,6 +233,17 @@
+
+
Options
+ +
+ Data source +
+ +
+
+
+
Selection Options
diff --git a/public/app/plugins/datasource/influxdb/datasource.ts b/public/app/plugins/datasource/influxdb/datasource.ts index 08af9e71a91..f451d78e117 100644 --- a/public/app/plugins/datasource/influxdb/datasource.ts +++ b/public/app/plugins/datasource/influxdb/datasource.ts @@ -7,6 +7,7 @@ import * as dateMath from 'app/core/utils/datemath'; import InfluxSeries from './influx_series'; import InfluxQuery from './influx_query'; import ResponseParser from './response_parser'; +import InfluxQueryBuilder from './query_builder'; export default class InfluxDatasource { type: string; @@ -43,18 +44,35 @@ export default class InfluxDatasource { query(options) { var timeFilter = this.getTimeFilter(options); + var scopedVars = _.extend({}, options.scopedVars); + var targets = _.cloneDeep(options.targets); var queryTargets = []; var i, y; - var allQueries = _.map(options.targets, (target) => { + var allQueries = _.map(targets, target => { if (target.hide) { return ""; } + if (!target.rawQuery) { + // apply add hoc filters + for (let variable of this.templateSrv.variables) { + if (variable.type === 'adhoc' && variable.datasource === this.name) { + for (let tag of variable.value) { + if (tag.key !== undefined && tag.value !== undefined) { + target.tags.push({key: tag.key, value: tag.value, condition: 'AND'}); + } + } + } + } + } + queryTargets.push(target); // build query - var queryModel = new InfluxQuery(target, this.templateSrv, options.scopedVars); + scopedVars.interval = {value: target.interval || options.interval}; + + var queryModel = new InfluxQuery(target, this.templateSrv, scopedVars); var query = queryModel.render(true); - query = query.replace(/\$interval/g, (target.interval || options.interval)); + return query; }).reduce((acc, current) => { if (current !== "") { @@ -64,10 +82,10 @@ export default class InfluxDatasource { }); // replace grafana variables - allQueries = allQueries.replace(/\$timeFilter/g, timeFilter); + scopedVars.timeFilter = {value: timeFilter}; // replace templated variables - allQueries = this.templateSrv.replace(allQueries, options.scopedVars); + allQueries = this.templateSrv.replace(allQueries, scopedVars); return this._seriesQuery(allQueries).then((data): any => { if (!data || !data.results) { @@ -124,16 +142,23 @@ export default class InfluxDatasource { }; metricFindQuery(query) { - var interpolated; - try { - interpolated = this.templateSrv.replace(query, null, 'regex'); - } catch (err) { - return this.$q.reject(err); - } + var interpolated = this.templateSrv.replace(query, null, 'regex'); return this._seriesQuery(interpolated) .then(_.curry(this.responseParser.parse)(query)); - }; + } + + getTagKeys(options) { + var queryBuilder = new InfluxQueryBuilder({measurement: '', tags: []}, this.database); + var query = queryBuilder.buildExploreQuery('TAG_KEYS'); + return this.metricFindQuery(query); + } + + getTagValues(options) { + var queryBuilder = new InfluxQueryBuilder({measurement: '', tags: []}, this.database); + var query = queryBuilder.buildExploreQuery('TAG_VALUES', options.key); + return this.metricFindQuery(query); + } _seriesQuery(query) { if (!query) { return this.$q.when({results: []}); } @@ -141,7 +166,6 @@ export default class InfluxDatasource { return this._influxRequest('GET', '/query', {q: query, epoch: 'ms'}); } - serializeParams(params) { if (!params) { return '';} diff --git a/public/app/plugins/datasource/influxdb/influx_query.ts b/public/app/plugins/datasource/influxdb/influx_query.ts index 1def8e8f424..fddb452767a 100644 --- a/public/app/plugins/datasource/influxdb/influx_query.ts +++ b/public/app/plugins/datasource/influxdb/influx_query.ts @@ -2,6 +2,7 @@ import _ from 'lodash'; import queryPart from './query_part'; +import kbn from 'app/core/utils/kbn'; export default class InfluxQuery { target: any; @@ -155,7 +156,7 @@ export default class InfluxQuery { if (operator !== '>' && operator !== '<') { value = "'" + value.replace(/\\/g, '\\\\') + "'"; } - } else if (interpolate){ + } else if (interpolate) { value = this.templateSrv.replace(value, this.scopedVars, 'regex'); } @@ -181,12 +182,26 @@ export default class InfluxQuery { return policy + measurement; } + interpolateQueryStr(value, variable, defaultFormatFn) { + // if no multi or include all do not regexEscape + if (!variable.multi && !variable.includeAll) { + return value; + } + + if (typeof value === 'string') { + return kbn.regexEscape(value); + } + + var escapedValues = _.map(value, kbn.regexEscape); + return escapedValues.join('|'); + }; + render(interpolate?) { var target = this.target; if (target.rawQuery) { if (interpolate) { - return this.templateSrv.replace(target.query, this.scopedVars, 'regex'); + return this.templateSrv.replace(target.query, this.scopedVars, this.interpolateQueryStr); } else { return target.query; } diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts index 53ce91144a4..af692bdd799 100644 --- a/public/app/plugins/datasource/prometheus/datasource.ts +++ b/public/app/plugins/datasource/prometheus/datasource.ts @@ -3,6 +3,7 @@ import angular from 'angular'; import _ from 'lodash'; import moment from 'moment'; +import kbn from 'app/core/utils/kbn'; import * as dateMath from 'app/core/utils/datemath'; import PrometheusMetricFindQuery from './metric_find_query'; @@ -40,10 +41,6 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS return backendSrv.datasourceRequest(options); }; - function regexEscape(value) { - return value.replace(/[\\^$*+?.()|[\]{}]/g, '\\\\$&'); - } - this.interpolateQueryExpr = function(value, variable, defaultFormatFn) { // if no multi or include all do not regexEscape if (!variable.multi && !variable.includeAll) { @@ -51,10 +48,10 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS } if (typeof value === 'string') { - return regexEscape(value); + return kbn.regexEscape(value); } - var escapedValues = _.map(value, regexEscape); + var escapedValues = _.map(value, kbn.regexEscape); return escapedValues.join('|'); }; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 82ca9073a4a..f85aa1f52bf 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -48,7 +48,6 @@ $gf-form-margin: 0.25rem; .gf-form-label { padding: $input-padding-y $input-padding-x; margin-right: $gf-form-margin; - line-height: $input-line-height; flex-shrink: 0; background-color: $input-label-bg; diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index 840bc5a7ae2..14f0658f7cb 100644 --- a/public/sass/components/_submenu.scss +++ b/public/sass/components/_submenu.scss @@ -1,6 +1,5 @@ .submenu-controls { margin: 0 $panel-margin ($panel-margin*2) $panel-margin; - font-size: 16px; } .annotation-disabled, .annotation-disabled a { @@ -25,12 +24,12 @@ .fa-caret-down { font-size: 75%; position: relative; - top: 1px; + top: -1px; + left: 1px; } } .variable-value-link { - font-size: 16px; padding-right: 10px; .label-tag { margin: 0 5px; @@ -39,19 +38,9 @@ padding: 8px 7px; box-sizing: content-box; display: inline-block; - font-weight: normal; - display: inline-block; color: $text-color; } -.submenu-item-label { - padding: 8px 0px 8px 7px; - box-sizing: content-box; - display: inline-block; - font-weight: normal; - display: inline-block; -} - .variable-link-wrapper { display: inline-block; position: relative;