Commit b8aa8b30 by Torkel Ödegaard

feat(prometheus): restore old prometheus query editor, revert this commit in…

feat(prometheus): restore old prometheus query editor, revert this commit in prometheus query editor v2 branch
parent c77d72b2
...@@ -256,23 +256,14 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS ...@@ -256,23 +256,14 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS
return this.renderTemplate(options.legendFormat, labelData) || '{}'; return this.renderTemplate(options.legendFormat, labelData) || '{}';
}; };
this.renderTemplate = function(format, data) { this.renderTemplate = function(aliasPattern, aliasData) {
var originalSettings = _.templateSettings; var aliasRegex = /\{\{\s*(.+?)\s*\}\}/g;
_.templateSettings = { return aliasPattern.replace(aliasRegex, function(match, g1) {
interpolate: /\{\{(.+?)\}\}/g if (aliasData[g1]) {
}; return aliasData[g1];
var template = _.template(templateSrv.replace(format));
var result;
try {
result = template(data);
} catch (e) {
result = null;
} }
return g1;
_.templateSettings = originalSettings; });
return result;
}; };
this.getOriginalMetricName = function(labelData) { this.getOriginalMetricName = function(labelData) {
......
...@@ -11,33 +11,27 @@ function (_) { ...@@ -11,33 +11,27 @@ function (_) {
} }
PrometheusMetricFindQuery.prototype.process = function() { PrometheusMetricFindQuery.prototype.process = function() {
var labelValuesRegex = /^label_values\((?:(.+),\s*)?([a-zA-Z_][a-zA-Z0-9_]+)\)$/; var label_values_regex = /^label_values\((?:(.+),\s*)?([a-zA-Z_][a-zA-Z0-9_]+)\)$/;
var metricNamesRegex = /^metrics\((.+)\)$/; var metric_names_regex = /^metrics\((.+)\)$/;
var labelsRegex = /^labels\((.+)\)$/; var query_result_regex = /^query_result\((.+)\)$/;
var queryResultRegex = /^query_result\((.+)\)$/;
var label_values_query = this.query.match(label_values_regex);
var labelsQuery = this.query.match(labelsRegex); if (label_values_query) {
if (labelsQuery) { if (label_values_query[1]) {
return this.labelsQuery(labelsQuery[1]); return this.labelValuesQuery(label_values_query[2], label_values_query[1]);
}
var labelValuesQuery = this.query.match(labelValuesRegex);
if (labelValuesQuery) {
if (labelValuesQuery[1]) {
return this.labelValuesQuery(labelValuesQuery[2], labelValuesQuery[1]);
} else { } else {
return this.labelValuesQuery(labelValuesQuery[2], null); return this.labelValuesQuery(label_values_query[2], null);
} }
} }
var metricNamesQuery = this.query.match(metricNamesRegex); var metric_names_query = this.query.match(metric_names_regex);
if (metricNamesQuery) { if (metric_names_query) {
return this.metricNameQuery(metricNamesQuery[1]); return this.metricNameQuery(metric_names_query[1]);
} }
var queryResultQuery = this.query.match(queryResultRegex); var query_result_query = this.query.match(query_result_regex);
if (queryResultQuery) { if (query_result_query) {
return this.queryResultQuery(queryResultQuery[1]); return this.queryResultQuery(query_result_query[1]);
} }
// if query contains full metric name, return metric name and label list // if query contains full metric name, return metric name and label list
...@@ -73,32 +67,6 @@ function (_) { ...@@ -73,32 +67,6 @@ function (_) {
} }
}; };
PrometheusMetricFindQuery.prototype.labelsQuery = function(metric) {
var url;
url = '/api/v1/series?match[]=' + encodeURIComponent(metric)
+ '&start=' + (this.range.from.valueOf() / 1000)
+ '&end=' + (this.range.to.valueOf() / 1000);
return this.datasource._request('GET', url)
.then(function(result) {
var tags = {};
_.each(result.data.data, function(metric) {
_.each(metric, function(value, key) {
if (key === "__name__") {
return;
}
tags[key] = key;
});
});
return _.map(tags, function(value) {
return {text: value, value: value};
});
});
};
PrometheusMetricFindQuery.prototype.metricNameQuery = function(metricFilterPattern) { PrometheusMetricFindQuery.prototype.metricNameQuery = function(metricFilterPattern) {
var url = '/api/v1/label/__name__/values'; var url = '/api/v1/label/__name__/values';
......
<query-editor-row query-ctrl="ctrl" can-collapse="false" has-text-edit-mode="true"> <query-editor-row query-ctrl="ctrl" can-collapse="false">
<div class="gf-form-inline">
<div class="gf-form" ng-if="!ctrl.target.editorMode">
<input type="text" class="gf-form-input" ng-model="ctrl.target.expr" spellcheck="false" ng-blur="ctrl.refresh()"></input>
</div>
<div class="gf-form-inline" ng-if="ctrl.target.editorMode">
<div class="gf-form">
<label class="gf-form-label width-8 query-keyword">Query</label>
<metric-segment segment="ctrl.metricSegment" get-options="ctrl.getMetricOptions()" on-change="ctrl.queryChanged()"></metric-segment>
</div>
<div class="gf-form" ng-repeat="part in ctrl.query.functions">
<query-part-editor class="gf-form-label query-part"
part="part"
remove-action="ctrl.removePart(query.functions, part)"
part-updated="ctrl.partUpdated(query.functions, part)"
get-options="ctrl.getPartOptions(part)">
</query-part-editor>
</div>
<div class="gf-form">
<label class="dropdown"
dropdown-typeahead="ctrl.addQueryPartMenu"
dropdown-typeahead-on-select="ctrl.addQueryPart($item, $subItem)">
</label>
</div>
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div> <label class="gf-form-label width-8">Query</label>
<input type="text" class="gf-form-input" ng-model="ctrl.target.expr" spellcheck='false' placeholder="query expression" data-min-length=0 data-items=100 ng-model-onblur ng-change="ctrl.refreshMetricData()">
</div>
<div class="gf-form max-width-22">
<label class="gf-form-label">Metric lookup</label>
<input type="text" class="gf-form-input" ng-model="ctrl.target.metric" spellcheck='false' bs-typeahead="ctrl.suggestMetrics" placeholder="metric name" data-min-length=0 data-items=100>
</div> </div>
</div> </div>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form max-width-26"> <div class="gf-form max-width-26">
<label class="gf-form-label width-8 query-keyword">Legend format</label> <label class="gf-form-label width-8">Legend format</label>
<input type="text" class="gf-form-input" ng-model="ctrl.target.legendFormat" <input type="text" class="gf-form-input" ng-model="ctrl.target.legendFormat"
spellcheck='false' placeholder="legend format" data-min-length=0 data-items=1000 spellcheck='false' placeholder="legend format" data-min-length=0 data-items=1000
ng-model-onblur ng-change="ctrl.refreshMetricData()"> ng-model-onblur ng-change="ctrl.refreshMetricData()">
......
import {
QueryPartDef,
QueryPart,
functionRenderer,
identityRenderer,
quotedIdentityRenderer,
} from 'app/core/components/query_part/query_part';
import _ from 'lodash';
var index = [];
var categories = {
Functions: [],
GroupBy: [],
};
export class PromQuery {
target: any;
metric: string;
range: string;
filters: any[];
functions: any[];
templateSrv: any;
scopedVars: any;
constructor(target, templateSrv?, scopedVars?) {
this.target = target;
this.target.expr = this.target.expr || '';
this.target.intervalFactor = this.target.intervalFactor || 2;
this.target.functions = this.target.functions || [];
this.target.editorMode = this.target.editorMode || true;
this.templateSrv = templateSrv;
this.scopedVars = scopedVars;
this.updateProjection();
}
updateProjection() {
this.functions = _.map(this.target.functions, function(func: any) {
return createPart(func);
});
}
render() {
var query = this.target.metric;
if (this.target.range) {
query += '[' + this.target.range + ']';
}
for (let func of this.functions) {
query = func.render(query);
}
return query;
}
addQueryPart(category, item) {
var partModel = createPart({type: item.text});
partModel.def.addStrategy(this, partModel);
}
}
export function createPart(part): any {
var def = index[part.type];
if (!def) {
throw {message: 'Could not find query part ' + part.type};
}
return new QueryPart(part, def);
}
function register(options: any) {
index[options.type] = new QueryPartDef(options);
options.category.push(index[options.type]);
}
function addFunctionStrategy(model, partModel) {
model.functions.push(partModel);
model.target.functions.push(partModel.part);
}
function groupByLabelRenderer(part, innerExpr) {
return innerExpr + ' by(' + part.params.join(',') + ')';
}
register({
type: 'rate',
addStrategy: addFunctionStrategy,
category: categories.Functions,
params: [],
defaultParams: [],
renderer: functionRenderer,
});
register({
type: 'sum',
addStrategy: addFunctionStrategy,
category: categories.Functions,
params: [],
defaultParams: [],
renderer: functionRenderer,
});
register({
type: 'by',
addStrategy: addFunctionStrategy,
category: categories.Functions,
params: [
{name: "label", type: "string", dynamicLookup: true}
],
defaultParams: [],
renderer: groupByLabelRenderer,
});
export function getQueryPartCategories() {
return categories;
}
...@@ -6,108 +6,46 @@ import moment from 'moment'; ...@@ -6,108 +6,46 @@ import moment from 'moment';
import * as dateMath from 'app/core/utils/datemath'; import * as dateMath from 'app/core/utils/datemath';
import {QueryCtrl} from 'app/plugins/sdk'; import {QueryCtrl} from 'app/plugins/sdk';
import {PromQuery, getQueryPartCategories} from './prom_query';
class PrometheusQueryCtrl extends QueryCtrl { class PrometheusQueryCtrl extends QueryCtrl {
static templateUrl = 'partials/query.editor.html'; static templateUrl = 'partials/query.editor.html';
query: any; metric: any;
metricSegment: any;
addQueryPartMenu: any[];
resolutions: any; resolutions: any;
oldTarget: any; oldTarget: any;
suggestMetrics: any; suggestMetrics: any;
linkToPrometheus: any; linkToPrometheus: any;
/** @ngInject */ /** @ngInject */
constructor($scope, $injector, private templateSrv, private uiSegmentSrv, private $rootScope) { constructor($scope, $injector, private templateSrv) {
super($scope, $injector); super($scope, $injector);
this.query = new PromQuery(this.target, templateSrv); var target = this.target;
target.expr = target.expr || '';
if (this.target.metric) { target.intervalFactor = target.intervalFactor || 2;
this.metricSegment = uiSegmentSrv.newSegment(this.target.metric);
} else {
this.metricSegment = uiSegmentSrv.newSegment({value: 'select metric', fake: true});
}
this.metric = '';
this.resolutions = _.map([1,2,3,4,5,10], function(f) { this.resolutions = _.map([1,2,3,4,5,10], function(f) {
return {factor: f, label: '1/' + f}; return {factor: f, label: '1/' + f};
}); });
this.updateLink(); $scope.$on('typeahead-updated', () => {
this.buildQueryPartMenu(); this.$scope.$apply(() => {
}
buildQueryPartMenu() {
var categories = getQueryPartCategories();
this.addQueryPartMenu = _.reduce(categories, function(memo, cat, key) {
var menu = {
text: key,
submenu: cat.map(item => {
return {text: item.type, value: item.type};
}),
};
memo.push(menu);
return memo;
}, []);
}
addQueryPart(item, subItem) {
this.query.addQueryPart(item, subItem);
this.panelCtrl.refresh();
}
getPartOptions(part) {
if (part.def.type === 'by') {
return this.datasource.metricFindQuery('labels(' + this.target.metric + ')')
.then(this.transformToSegments(true))
.catch(this.handleQueryError.bind(true));
}
}
partUpdated(part) {
this.target.expr = this.query.render();
this.panelCtrl.refresh();
}
handleQueryError(err) {
this.$rootScope.appEvent('alert-error', ['Query failed', err.message]);
}
transformToSegments(addTemplateVars) {
return (results) => {
var segments = _.map(results, segment => {
return this.uiSegmentSrv.newSegment({ value: segment.text, expandable: segment.expandable });
});
if (addTemplateVars) {
for (let variable of this.templateSrv.variables) {
segments.unshift(this.uiSegmentSrv.newSegment({ type: 'template', value: '/^$' + variable.name + '$/', expandable: true }));
}
}
return segments;
};
}
getMetricOptions() { this.target.expr += this.target.metric;
return this.datasource.performSuggestQuery('').then(res => { this.metric = '';
return _.map(res, metric => { this.refreshMetricData();
return this.uiSegmentSrv.newSegment(metric);
}); });
}); });
}
queryChanged() { // called from typeahead so need this
this.target.metric = this.metricSegment.value; // here in order to ensure this ref
this.target.expr = this.query.render(); this.suggestMetrics = (query, callback) => {
this.refresh(); console.log(this);
} this.datasource.performSuggestQuery(query).then(callback);
};
toggleEditorMode() { this.updateLink();
this.target.expr = this.query.render(false);
this.target.editorMode = !this.target.editorMode;
} }
refreshMetricData() { refreshMetricData() {
...@@ -120,6 +58,10 @@ class PrometheusQueryCtrl extends QueryCtrl { ...@@ -120,6 +58,10 @@ class PrometheusQueryCtrl extends QueryCtrl {
updateLink() { updateLink() {
var range = this.panelCtrl.range; var range = this.panelCtrl.range;
if (!range) {
return;
}
var rangeDiff = Math.ceil((range.to.valueOf() - range.from.valueOf()) / 1000); var rangeDiff = Math.ceil((range.to.valueOf() - range.from.valueOf()) / 1000);
var endTime = range.to.utc().format('YYYY-MM-DD HH:mm'); var endTime = range.to.utc().format('YYYY-MM-DD HH:mm');
var expr = { var expr = {
......
...@@ -22,22 +22,18 @@ describe('PrometheusMetricFindQuery', function() { ...@@ -22,22 +22,18 @@ describe('PrometheusMetricFindQuery', function() {
describe('When performing metricFindQuery', function() { describe('When performing metricFindQuery', function() {
var results; var results;
var response; var response;
it('label_values(resource) should generate label search query', function() { it('label_values(resource) should generate label search query', function() {
response = { response = {
status: "success", status: "success",
data: ["value1", "value2", "value3"] data: ["value1", "value2", "value3"]
}; };
ctx.$httpBackend.expect('GET', 'proxied/api/v1/label/resource/values').respond(response); ctx.$httpBackend.expect('GET', 'proxied/api/v1/label/resource/values').respond(response);
var pm = new PrometheusMetricFindQuery(ctx.ds, 'label_values(resource)', ctx.timeSrv); var pm = new PrometheusMetricFindQuery(ctx.ds, 'label_values(resource)', ctx.timeSrv);
pm.process().then(function(data) { results = data; }); pm.process().then(function(data) { results = data; });
ctx.$httpBackend.flush(); ctx.$httpBackend.flush();
ctx.$rootScope.$apply(); ctx.$rootScope.$apply();
expect(results.length).to.be(3); expect(results.length).to.be(3);
}); });
it('label_values(metric, resource) should generate series query', function() { it('label_values(metric, resource) should generate series query', function() {
response = { response = {
status: "success", status: "success",
...@@ -47,16 +43,13 @@ describe('PrometheusMetricFindQuery', function() { ...@@ -47,16 +43,13 @@ describe('PrometheusMetricFindQuery', function() {
{__name__: "metric", resource: "value3"} {__name__: "metric", resource: "value3"}
] ]
}; };
ctx.$httpBackend.expect('GET', /proxied\/api\/v1\/series\?match\[\]=metric&start=.*&end=.*/).respond(response); ctx.$httpBackend.expect('GET', /proxied\/api\/v1\/series\?match\[\]=metric&start=.*&end=.*/).respond(response);
var pm = new PrometheusMetricFindQuery(ctx.ds, 'label_values(metric, resource)', ctx.timeSrv); var pm = new PrometheusMetricFindQuery(ctx.ds, 'label_values(metric, resource)', ctx.timeSrv);
pm.process().then(function(data) { results = data; }); pm.process().then(function(data) { results = data; });
ctx.$httpBackend.flush(); ctx.$httpBackend.flush();
ctx.$rootScope.$apply(); ctx.$rootScope.$apply();
expect(results.length).to.be(3); expect(results.length).to.be(3);
}); });
it('label_values(metric, resource) should pass correct time', function() { it('label_values(metric, resource) should pass correct time', function() {
ctx.timeSrv.setTime({ from: moment.utc('2011-01-01'), to: moment.utc('2015-01-01') }); ctx.timeSrv.setTime({ from: moment.utc('2011-01-01'), to: moment.utc('2015-01-01') });
ctx.$httpBackend.expect('GET', ctx.$httpBackend.expect('GET',
...@@ -66,7 +59,6 @@ describe('PrometheusMetricFindQuery', function() { ...@@ -66,7 +59,6 @@ describe('PrometheusMetricFindQuery', function() {
ctx.$httpBackend.flush(); ctx.$httpBackend.flush();
ctx.$rootScope.$apply(); ctx.$rootScope.$apply();
}); });
it('label_values(metric{label1="foo", label2="bar", label3="baz"}, resource) should generate series query', function() { it('label_values(metric{label1="foo", label2="bar", label3="baz"}, resource) should generate series query', function() {
response = { response = {
status: "success", status: "success",
...@@ -76,7 +68,6 @@ describe('PrometheusMetricFindQuery', function() { ...@@ -76,7 +68,6 @@ describe('PrometheusMetricFindQuery', function() {
{__name__: "metric", resource: "value3"} {__name__: "metric", resource: "value3"}
] ]
}; };
ctx.$httpBackend.expect('GET', /proxied\/api\/v1\/series\?match\[\]=metric&start=.*&end=.*/).respond(response); ctx.$httpBackend.expect('GET', /proxied\/api\/v1\/series\?match\[\]=metric&start=.*&end=.*/).respond(response);
var pm = new PrometheusMetricFindQuery(ctx.ds, 'label_values(metric, resource)', ctx.timeSrv); var pm = new PrometheusMetricFindQuery(ctx.ds, 'label_values(metric, resource)', ctx.timeSrv);
pm.process().then(function(data) { results = data; }); pm.process().then(function(data) { results = data; });
...@@ -84,22 +75,18 @@ describe('PrometheusMetricFindQuery', function() { ...@@ -84,22 +75,18 @@ describe('PrometheusMetricFindQuery', function() {
ctx.$rootScope.$apply(); ctx.$rootScope.$apply();
expect(results.length).to.be(3); expect(results.length).to.be(3);
}); });
it('metrics(metric.*) should generate metric name query', function() { it('metrics(metric.*) should generate metric name query', function() {
response = { response = {
status: "success", status: "success",
data: ["metric1","metric2","metric3","nomatch"] data: ["metric1","metric2","metric3","nomatch"]
}; };
ctx.$httpBackend.expect('GET', 'proxied/api/v1/label/__name__/values').respond(response); ctx.$httpBackend.expect('GET', 'proxied/api/v1/label/__name__/values').respond(response);
var pm = new PrometheusMetricFindQuery(ctx.ds, 'metrics(metric.*)', ctx.timeSrv); var pm = new PrometheusMetricFindQuery(ctx.ds, 'metrics(metric.*)', ctx.timeSrv);
pm.process().then(function(data) { results = data; }); pm.process().then(function(data) { results = data; });
ctx.$httpBackend.flush(); ctx.$httpBackend.flush();
ctx.$rootScope.$apply(); ctx.$rootScope.$apply();
expect(results.length).to.be(3); expect(results.length).to.be(3);
}); });
it('query_result(metric) should generate metric name query', function() { it('query_result(metric) should generate metric name query', function() {
response = { response = {
status: "success", status: "success",
...@@ -111,7 +98,6 @@ describe('PrometheusMetricFindQuery', function() { ...@@ -111,7 +98,6 @@ describe('PrometheusMetricFindQuery', function() {
}] }]
} }
}; };
ctx.$httpBackend.expect('GET', /proxied\/api\/v1\/query\?query=metric&time=.*/).respond(response); ctx.$httpBackend.expect('GET', /proxied\/api\/v1\/query\?query=metric&time=.*/).respond(response);
var pm = new PrometheusMetricFindQuery(ctx.ds, 'query_result(metric)', ctx.timeSrv); var pm = new PrometheusMetricFindQuery(ctx.ds, 'query_result(metric)', ctx.timeSrv);
pm.process().then(function(data) { results = data; }); pm.process().then(function(data) { results = data; });
...@@ -120,28 +106,5 @@ describe('PrometheusMetricFindQuery', function() { ...@@ -120,28 +106,5 @@ describe('PrometheusMetricFindQuery', function() {
expect(results.length).to.be(1); expect(results.length).to.be(1);
expect(results[0].text).to.be('metric{job="testjob"} 3846 1443454528000'); expect(results[0].text).to.be('metric{job="testjob"} 3846 1443454528000');
}); });
it('labels(metric) should generate series query', function() {
response = {
status: "success",
data: [
{__name__: "metric", resource: "value1", app: "app1"},
{__name__: "metric", resource: "value2", app: "app2"},
{__name__: "metric", resource: "value3", server: "server1"}
]
};
ctx.$httpBackend.expect('GET', /proxied\/api\/v1\/series\?match\[\]=metric&start=.*&end=.*/).respond(response);
var pm = new PrometheusMetricFindQuery(ctx.ds, 'labels(metric)', ctx.timeSrv);
pm.process().then(function(data) { results = data; });
ctx.$httpBackend.flush();
ctx.$rootScope.$apply();
expect(results.length).to.be(3);
expect(results[0].text).to.be('resource');
expect(results[1].text).to.be('app');
expect(results[2].text).to.be('server');
});
}); });
}); });
import {describe, beforeEach, it, sinon, expect} from 'test/lib/common';
import {PromQuery} from '../prom_query';
describe('PromQuery', function() {
var templateSrv = {replace: val => val};
describe('render series with mesurement only', function() {
it('should generate correct query', function() {
var query = new PromQuery({
metric: 'cpu',
range: '5m',
functions: [
{type: 'rate', params: []}
]
}, templateSrv, {});
var queryText = query.render();
expect(queryText).to.be('rate(cpu[5m])');
});
});
describe('render series with group by label', function() {
it('should generate correct query', function() {
var query = new PromQuery({
metric: 'cpu',
functions: [
{type: 'sum', params: []},
{type: 'by', params: ['app']},
]
}, templateSrv, {});
var queryText = query.render();
expect(queryText).to.be('sum(cpu) by(app)');
});
});
});
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