From a4daba63ea4d42bc767e0f06b80c0fd052542592 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Wed, 4 Oct 2017 19:46:18 +0300 Subject: [PATCH 001/173] graphite-tags: initial tag editor --- .../plugins/datasource/graphite/datasource.ts | 54 +++++++ .../graphite/partials/query.editor.html | 14 +- .../plugins/datasource/graphite/query_ctrl.ts | 145 ++++++++++++++++++ 3 files changed, 212 insertions(+), 1 deletion(-) diff --git a/public/app/plugins/datasource/graphite/datasource.ts b/public/app/plugins/datasource/graphite/datasource.ts index 2c846ee6be8..8e2f62d9e63 100644 --- a/public/app/plugins/datasource/graphite/datasource.ts +++ b/public/app/plugins/datasource/graphite/datasource.ts @@ -200,6 +200,60 @@ export function GraphiteDatasource(instanceSettings, $q, backendSrv, templateSrv }); }; + this.getTags = function(optionalOptions) { + let options = optionalOptions || {}; + + let httpOptions: any = { + method: 'GET', + url: '/tags', + // for cancellations + requestId: options.requestId, + }; + + if (options && options.range) { + httpOptions.params.from = this.translateTime(options.range.from, false); + httpOptions.params.until = this.translateTime(options.range.to, true); + } + + return this.doGraphiteRequest(httpOptions).then(results => { + return _.map(results.data, tag => { + return { + text: tag.tag, + id: tag.id + }; + }); + }); + }; + + this.getTagValues = function(tag, optionalOptions) { + let options = optionalOptions || {}; + + let httpOptions: any = { + method: 'GET', + url: '/tags/' + tag, + // for cancellations + requestId: options.requestId, + }; + + if (options && options.range) { + httpOptions.params.from = this.translateTime(options.range.from, false); + httpOptions.params.until = this.translateTime(options.range.to, true); + } + + return this.doGraphiteRequest(httpOptions).then(results => { + if (results.data && results.data.values) { + return _.map(results.data.values, value => { + return { + text: value.value, + id: value.id + }; + }); + } else { + return []; + } + }); + }; + this.testDatasource = function() { return this.metricFindQuery('*').then(function () { return { status: "success", message: "Data source is working"}; diff --git a/public/app/plugins/datasource/graphite/partials/query.editor.html b/public/app/plugins/datasource/graphite/partials/query.editor.html index 5646f005be9..33da74dda78 100755 --- a/public/app/plugins/datasource/graphite/partials/query.editor.html +++ b/public/app/plugins/datasource/graphite/partials/query.editor.html @@ -6,12 +6,24 @@
+
+ +
+ + +
- +
diff --git a/public/app/plugins/datasource/graphite/query_ctrl.ts b/public/app/plugins/datasource/graphite/query_ctrl.ts index fd753fb77e1..3aa733a9323 100644 --- a/public/app/plugins/datasource/graphite/query_ctrl.ts +++ b/public/app/plugins/datasource/graphite/query_ctrl.ts @@ -12,6 +12,9 @@ export class GraphiteQueryCtrl extends QueryCtrl { functions: any[]; segments: any[]; + tagSegments: any[]; + seriesByTagUsed: boolean; + removeTagSegment: any; /** @ngInject **/ constructor($scope, $injector, private uiSegmentSrv, private templateSrv) { @@ -21,6 +24,8 @@ export class GraphiteQueryCtrl extends QueryCtrl { this.target.target = this.target.target || ''; this.parseTarget(); } + + this.removeTagSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove tag --'}); } toggleEditorMode() { @@ -59,6 +64,7 @@ export class GraphiteQueryCtrl extends QueryCtrl { } this.checkOtherSegments(this.segments.length - 1); + this.checkForSeriesByTag(); } addFunctionParameter(func, value, index, shiftBack) { @@ -114,6 +120,40 @@ export class GraphiteQueryCtrl extends QueryCtrl { return func.def.name !== 'seriesByTag'; } + checkForSeriesByTag() { + let seriesByTagFunc = _.find(this.functions, (func) => func.def.name === 'seriesByTag'); + if (seriesByTagFunc) { + this.seriesByTagUsed = true; + let tags = this.splitSeriesByTagParams(seriesByTagFunc); + this.tagSegments = []; + _.each(tags, (tag) => { + this.tagSegments.push(this.uiSegmentSrv.newKey(tag.key)); + this.tagSegments.push(this.uiSegmentSrv.newOperator(tag.operator)); + this.tagSegments.push(this.uiSegmentSrv.newKeyValue(tag.value)); + }); + + this.fixTagSegments(); + } + } + + splitSeriesByTagParams(func) { + const tagPattern = /([^\!=~]+)([\!=~]+)([^\!=~]+)/; + return _.flatten(_.map(func.params, (param: string) => { + let matches = tagPattern.exec(param); + if (matches) { + let tag = matches.slice(1); + if (tag.length === 3) { + return { + key: tag[0], + operator: tag[1], + value: tag[2] + } + } + } + return []; + })); + } + getSegmentPathUpTo(index) { var arr = this.segments.slice(0, index); @@ -161,6 +201,36 @@ export class GraphiteQueryCtrl extends QueryCtrl { return func.render(target); } + getAltTagSegments(index) { + let paramPartIndex = getParamPartIndex(index); + + if (paramPartIndex === 1) { + // Operator + let operators = ['=', '!=', '=~', '!=~']; + let segments = _.map(operators, (operator) => this.uiSegmentSrv.newOperator(operator)); + return Promise.resolve(segments); + } else if (paramPartIndex === 0) { + // Tag + return this.datasource.getTags().then(segments => { + let altSegments = _.map(segments, segment => { + return this.uiSegmentSrv.newSegment({value: segment.text, expandable: false}); + }); + altSegments.splice(0, 0, _.cloneDeep(this.removeTagSegment)); + return altSegments; + }); + } else { + // Tag value + let relatedTagSegmentIndex = getRelatedTagSegmentIndex(index); + let tag = this.tagSegments[relatedTagSegmentIndex].value; + return this.datasource.getTagValues(tag).then(segments => { + let altSegments = _.map(segments, segment => { + return this.uiSegmentSrv.newSegment({value: segment.text, expandable: false}); + }); + return altSegments; + }); + } + } + getAltSegments(index) { var query = index === 0 ? '*' : this.getSegmentPathUpTo(index) + '.*'; var options = {range: this.panelCtrl.range, requestId: "get-alt-segments"}; @@ -209,6 +279,52 @@ export class GraphiteQueryCtrl extends QueryCtrl { this.targetChanged(); } + tagSegmentChanged(tagSegment, segmentIndex) { + this.error = null; + + if (tagSegment.value === this.removeTagSegment.value) { + this.removeTag(segmentIndex); + return; + } + + if (tagSegment.type === 'plus-button') { + let newTag = {key: tagSegment.value, operator: '=', value: 'select tag value'}; + this.tagSegments.splice(this.tagSegments.length - 1, 1); + this.addNewTag(newTag); + } + + let paramIndex = getParamIndex(segmentIndex); + let newTagParam = this.renderTagParam(segmentIndex); + this.functions[this.getSeriesByTagFuncIndex()].params[paramIndex] = newTagParam; + + this.targetChanged(); + this.parseTarget(); + } + + getSeriesByTagFuncIndex() { + return _.findIndex(this.functions, (func) => func.def.name === 'seriesByTag'); + } + + addNewTag(tag) { + this.tagSegments.push(this.uiSegmentSrv.newKey(tag.key)); + this.tagSegments.push(this.uiSegmentSrv.newOperator(tag.operator)); + this.tagSegments.push(this.uiSegmentSrv.newKeyValue(tag.value)); + } + + removeTag(index) { + let paramIndex = getParamIndex(index); + this.tagSegments.splice(index, 3); + this.functions[this.getSeriesByTagFuncIndex()].params.splice(paramIndex, 1); + + this.targetChanged(); + this.parseTarget(); + } + + renderTagParam(segmentIndex) { + let tagIndex = getRelatedTagSegmentIndex(segmentIndex) + return _.map(this.tagSegments.slice(tagIndex, tagIndex + 3), (segment) => segment.value).join(''); + } + targetTextChanged() { this.updateModelTarget(); this.refresh(); @@ -304,6 +420,10 @@ export class GraphiteQueryCtrl extends QueryCtrl { if (!newFunc.params.length && newFunc.added) { this.targetChanged(); } + + if (newFunc.def.name === 'seriesByTag') { + this.parseTarget(); + } } moveAliasFuncLast() { @@ -333,4 +453,29 @@ export class GraphiteQueryCtrl extends QueryCtrl { } } } + + fixTagSegments() { + var count = this.tagSegments.length; + var lastSegment = this.tagSegments[Math.max(count-1, 0)]; + + if (!lastSegment || lastSegment.type !== 'plus-button') { + this.tagSegments.push(this.uiSegmentSrv.newPlusButton()); + } + } + + showDelimiter(index) { + return getParamPartIndex(index) === 2 && index !== this.tagSegments.length - 2; + } +} + +function getParamIndex(segmentIndex) { + return Math.floor(segmentIndex / 3); +} + +function getParamPartIndex(segmentIndex) { + return segmentIndex % 3; +} + +function getRelatedTagSegmentIndex(segmentIndex) { + return getParamIndex(segmentIndex) * 3; } From 63d51d0db3b078b62b74b0039c8f3107cdafa6fa Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Thu, 5 Oct 2017 14:39:09 +0300 Subject: [PATCH 002/173] graphite-tags: refactor, use instead of --- .../graphite/partials/query.editor.html | 24 +- .../plugins/datasource/graphite/query_ctrl.ts | 244 +++++++++--------- 2 files changed, 136 insertions(+), 132 deletions(-) diff --git a/public/app/plugins/datasource/graphite/partials/query.editor.html b/public/app/plugins/datasource/graphite/partials/query.editor.html index 33da74dda78..1eef13dfecc 100755 --- a/public/app/plugins/datasource/graphite/partials/query.editor.html +++ b/public/app/plugins/datasource/graphite/partials/query.editor.html @@ -10,13 +10,27 @@
-