ntopng grafana dataplugin refresh

Refreshed to keep into account changes to
https://github.com/grafana/simple-json-datasource/issues/69

Version:
a986ea5779
This commit is contained in:
Simone Mainardi 2017-07-28 16:02:26 +02:00
parent 4ad439f934
commit 6b7cdb265e
11 changed files with 64 additions and 59 deletions

View file

@ -160,6 +160,10 @@ This plugin requires node 6.10.0
### Changelog
1.3.4
- Adds support for With Credentials (sends grafana cookies with request) when using Direct mode
- Fix for the typeahead component for metrics dropdown (/search endpoint).
1.3.3
- Adds support for basic authentication

View file

@ -160,6 +160,10 @@ This plugin requires node 6.10.0
### Changelog
1.3.4
- Adds support for With Credentials (sends grafana cookies with request) when using Direct mode
- Fix for the typeahead component for metrics dropdown (/search endpoint).
1.3.3
- Adds support for basic authentication

View file

@ -44,6 +44,7 @@ System.register(['lodash'], function (_export, _context) {
this.q = $q;
this.backendSrv = backendSrv;
this.templateSrv = templateSrv;
this.withCredentials = instanceSettings.withCredentials;
this.headers = { 'Content-Type': 'application/json' };
if (typeof instanceSettings.basicAuth === 'string' && instanceSettings.basicAuth.length > 0) {
this.headers['Authorization'] = instanceSettings.basicAuth;
@ -62,20 +63,18 @@ System.register(['lodash'], function (_export, _context) {
return this.q.when({ data: [] });
}
return this.backendSrv.datasourceRequest({
return this.doRequest({
url: this.url + '/query',
data: query,
method: 'POST',
headers: this.headers
method: 'POST'
});
}
}, {
key: 'testDatasource',
value: function testDatasource() {
return this.backendSrv.datasourceRequest({
return this.doRequest({
url: this.url + '/',
method: 'GET',
headers: this.headers
method: 'GET'
}).then(function (response) {
if (response.status === 200) {
return { status: "success", message: "Data source is working", title: "Success" };
@ -98,10 +97,9 @@ System.register(['lodash'], function (_export, _context) {
rangeRaw: options.rangeRaw
};
return this.backendSrv.datasourceRequest({
return this.doRequest({
url: this.url + '/annotations',
method: 'POST',
headers: this.headers,
data: annotationQuery
}).then(function (result) {
return result.data;
@ -109,17 +107,15 @@ System.register(['lodash'], function (_export, _context) {
}
}, {
key: 'metricFindQuery',
value: function metricFindQuery(options) {
var target = typeof options === "string" ? options : options.target;
value: function metricFindQuery(query) {
var interpolated = {
target: this.templateSrv.replace(target, null, 'regex')
target: this.templateSrv.replace(query, null, 'regex')
};
return this.backendSrv.datasourceRequest({
return this.doRequest({
url: this.url + '/search',
data: interpolated,
method: 'POST',
headers: this.headers
method: 'POST'
}).then(this.mapToTextValue);
}
}, {
@ -134,6 +130,14 @@ System.register(['lodash'], function (_export, _context) {
return { text: d, value: d };
});
}
}, {
key: 'doRequest',
value: function doRequest(options) {
options.withCredentials = this.withCredentials;
options.headers = this.headers;
return this.backendSrv.datasourceRequest(options);
}
}, {
key: 'buildQueryParameters',
value: function buildQueryParameters(options) {
@ -146,7 +150,7 @@ System.register(['lodash'], function (_export, _context) {
var targets = _.map(options.targets, function (target) {
return {
target: _this.templateSrv.replace(target.target),
target: _this.templateSrv.replace(target.target, options.scopedVars, 'regex'),
refId: target.refId,
hide: target.hide,
type: target.type || 'timeserie'

File diff suppressed because one or more lines are too long

View file

@ -10,8 +10,11 @@
<div ng-if="!ctrl.target.rawQuery">
<div class="gf-form">
<metric-segment-model property="ctrl.target.target" get-options="ctrl.getOptions()" on-change="ctrl.onChangeInternal()"
css-class="tight-form-item-xxlarge"></metric-segment-model>
<gf-form-dropdown model="ctrl.target.target"
lookup-text="true"
get-options="ctrl.getOptions($query)"
on-change="ctrl.onChangeInternal()">
</gf-form-dropdown>
</div>
</div>
</div>

View file

@ -61,13 +61,12 @@ System.register(['app/plugins/sdk', './css/query-editor.css!'], function (_expor
_export('GenericDatasourceQueryCtrl', GenericDatasourceQueryCtrl = function (_QueryCtrl) {
_inherits(GenericDatasourceQueryCtrl, _QueryCtrl);
function GenericDatasourceQueryCtrl($scope, $injector, uiSegmentSrv) {
function GenericDatasourceQueryCtrl($scope, $injector) {
_classCallCheck(this, GenericDatasourceQueryCtrl);
var _this = _possibleConstructorReturn(this, (GenericDatasourceQueryCtrl.__proto__ || Object.getPrototypeOf(GenericDatasourceQueryCtrl)).call(this, $scope, $injector));
_this.scope = $scope;
_this.uiSegmentSrv = uiSegmentSrv;
_this.target.target = _this.target.target || 'select metric';
_this.target.type = _this.target.type || 'timeserie';
return _this;
@ -75,9 +74,8 @@ System.register(['app/plugins/sdk', './css/query-editor.css!'], function (_expor
_createClass(GenericDatasourceQueryCtrl, [{
key: 'getOptions',
value: function getOptions() {
return this.datasource.metricFindQuery(this.target).then(this.uiSegmentSrv.transformToSegments(false));
// Options have to be transformed by uiSegmentSrv to be usable by metric-segment-model directive
value: function getOptions(query) {
return this.datasource.metricFindQuery(query || '');
}
}, {
key: 'toggleEditorMode',

View file

@ -1 +1 @@
{"version":3,"sources":["../src/query_ctrl.js"],"names":["QueryCtrl","GenericDatasourceQueryCtrl","$scope","$injector","uiSegmentSrv","scope","target","type","datasource","metricFindQuery","then","transformToSegments","rawQuery","panelCtrl","refresh","templateUrl"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAQA,e,kBAAAA,S;;;;;;;;;;;;;;;;;;;;;4CAGKC,0B;;;AAEX,4CAAYC,MAAZ,EAAoBC,SAApB,EAA+BC,YAA/B,EAA8C;AAAA;;AAAA,8JACtCF,MADsC,EAC9BC,SAD8B;;AAG5C,gBAAKE,KAAL,GAAaH,MAAb;AACA,gBAAKE,YAAL,GAAoBA,YAApB;AACA,gBAAKE,MAAL,CAAYA,MAAZ,GAAqB,MAAKA,MAAL,CAAYA,MAAZ,IAAsB,eAA3C;AACA,gBAAKA,MAAL,CAAYC,IAAZ,GAAmB,MAAKD,MAAL,CAAYC,IAAZ,IAAoB,WAAvC;AAN4C;AAO7C;;;;uCAEY;AACX,mBAAO,KAAKC,UAAL,CAAgBC,eAAhB,CAAgC,KAAKH,MAArC,EACJI,IADI,CACC,KAAKN,YAAL,CAAkBO,mBAAlB,CAAsC,KAAtC,CADD,CAAP;AAEE;AACH;;;6CAEkB;AACjB,iBAAKL,MAAL,CAAYM,QAAZ,GAAuB,CAAC,KAAKN,MAAL,CAAYM,QAApC;AACD;;;6CAEkB;AACjB,iBAAKC,SAAL,CAAeC,OAAf,GADiB,CACS;AAC3B;;;;QAvB6Cd,S;;;;AA0BhDC,iCAA2Bc,WAA3B,GAAyC,4BAAzC","file":"query_ctrl.js","sourcesContent":["import {QueryCtrl} from 'app/plugins/sdk';\nimport './css/query-editor.css!'\n\nexport class GenericDatasourceQueryCtrl extends QueryCtrl {\n\n constructor($scope, $injector, uiSegmentSrv) {\n super($scope, $injector);\n\n this.scope = $scope;\n this.uiSegmentSrv = uiSegmentSrv;\n this.target.target = this.target.target || 'select metric';\n this.target.type = this.target.type || 'timeserie';\n }\n\n getOptions() {\n return this.datasource.metricFindQuery(this.target)\n .then(this.uiSegmentSrv.transformToSegments(false));\n // Options have to be transformed by uiSegmentSrv to be usable by metric-segment-model directive\n }\n\n toggleEditorMode() {\n this.target.rawQuery = !this.target.rawQuery;\n }\n\n onChangeInternal() {\n this.panelCtrl.refresh(); // Asks the panel to refresh data.\n }\n}\n\nGenericDatasourceQueryCtrl.templateUrl = 'partials/query.editor.html';\n\n"]}
{"version":3,"sources":["../src/query_ctrl.js"],"names":["QueryCtrl","GenericDatasourceQueryCtrl","$scope","$injector","scope","target","type","query","datasource","metricFindQuery","rawQuery","panelCtrl","refresh","templateUrl"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAQA,e,kBAAAA,S;;;;;;;;;;;;;;;;;;;;;4CAGKC,0B;;;AAEX,4CAAYC,MAAZ,EAAoBC,SAApB,EAAgC;AAAA;;AAAA,8JACxBD,MADwB,EAChBC,SADgB;;AAG9B,gBAAKC,KAAL,GAAaF,MAAb;AACA,gBAAKG,MAAL,CAAYA,MAAZ,GAAqB,MAAKA,MAAL,CAAYA,MAAZ,IAAsB,eAA3C;AACA,gBAAKA,MAAL,CAAYC,IAAZ,GAAmB,MAAKD,MAAL,CAAYC,IAAZ,IAAoB,WAAvC;AAL8B;AAM/B;;;;qCAEUC,K,EAAO;AAChB,mBAAO,KAAKC,UAAL,CAAgBC,eAAhB,CAAgCF,SAAS,EAAzC,CAAP;AACD;;;6CAEkB;AACjB,iBAAKF,MAAL,CAAYK,QAAZ,GAAuB,CAAC,KAAKL,MAAL,CAAYK,QAApC;AACD;;;6CAEkB;AACjB,iBAAKC,SAAL,CAAeC,OAAf,GADiB,CACS;AAC3B;;;;QApB6CZ,S;;;;AAuBhDC,iCAA2BY,WAA3B,GAAyC,4BAAzC","file":"query_ctrl.js","sourcesContent":["import {QueryCtrl} from 'app/plugins/sdk';\nimport './css/query-editor.css!'\n\nexport class GenericDatasourceQueryCtrl extends QueryCtrl {\n\n constructor($scope, $injector) {\n super($scope, $injector);\n\n this.scope = $scope;\n this.target.target = this.target.target || 'select metric';\n this.target.type = this.target.type || 'timeserie';\n }\n\n getOptions(query) {\n return this.datasource.metricFindQuery(query || '');\n }\n\n toggleEditorMode() {\n this.target.rawQuery = !this.target.rawQuery;\n }\n\n onChangeInternal() {\n this.panelCtrl.refresh(); // Asks the panel to refresh data.\n }\n}\n\nGenericDatasourceQueryCtrl.templateUrl = 'partials/query.editor.html';\n\n"]}

View file

@ -9,7 +9,6 @@ describe('GenericDatasource', function() {
ctx.backendSrv = {};
ctx.templateSrv = {};
ctx.ds = new Datasource({}, ctx.$q, ctx.backendSrv, ctx.templateSrv);
});
it('should return an empty array when no targets are set', function(done) {
@ -89,7 +88,7 @@ describe('GenericDatasource', function() {
return data;
}
ctx.ds.metricFindQuery({target: 'search'}).then(function(result) {
ctx.ds.metricFindQuery('search').then(function(result) {
expect(result).to.have.length(3);
expect(result[0].text).to.equal('search_0');
expect(result[0].value).to.equal('search_0');
@ -117,7 +116,7 @@ describe('GenericDatasource', function() {
return data;
}
ctx.ds.metricFindQuery({target: ''}).then(function(result) {
ctx.ds.metricFindQuery('').then(function(result) {
expect(result).to.have.length(3);
expect(result[0].text).to.equal('metric_0');
expect(result[0].value).to.equal('metric_0');
@ -145,7 +144,7 @@ describe('GenericDatasource', function() {
return data;
}
ctx.ds.metricFindQuery({}).then(function(result) {
ctx.ds.metricFindQuery().then(function(result) {
expect(result).to.have.length(3);
expect(result[0].text).to.equal('metric_0');
expect(result[0].value).to.equal('metric_0');
@ -157,16 +156,6 @@ describe('GenericDatasource', function() {
});
});
it ('should throw error when args are undefined', function(done) {
global.assert.throw(ctx.ds.metricFindQuery, Error, "Cannot read property 'target' of undefined");
done();
});
it ('should throw error when args are null', function(done) {
global.assert.throw(function() { ctx.ds.metricFindQuery(null); }, Error, "Cannot read property 'target' of null");
done();
});
it ('should return the metric target results when the args are a string', function(done) {
ctx.backendSrv.datasourceRequest = function(request) {
var target = request.data.target;

View file

@ -9,6 +9,7 @@ export class GenericDatasource {
this.q = $q;
this.backendSrv = backendSrv;
this.templateSrv = templateSrv;
this.withCredentials = instanceSettings.withCredentials;
this.headers = {'Content-Type': 'application/json'};
if (typeof instanceSettings.basicAuth === 'string' && instanceSettings.basicAuth.length > 0) {
this.headers['Authorization'] = instanceSettings.basicAuth;
@ -23,19 +24,17 @@ export class GenericDatasource {
return this.q.when({data: []});
}
return this.backendSrv.datasourceRequest({
return this.doRequest({
url: this.url + '/query',
data: query,
method: 'POST',
headers: this.headers
method: 'POST'
});
}
testDatasource() {
return this.backendSrv.datasourceRequest({
return this.doRequest({
url: this.url + '/',
method: 'GET',
headers: this.headers
}).then(response => {
if (response.status === 200) {
return { status: "success", message: "Data source is working", title: "Success" };
@ -57,27 +56,24 @@ export class GenericDatasource {
rangeRaw: options.rangeRaw
};
return this.backendSrv.datasourceRequest({
return this.doRequest({
url: this.url + '/annotations',
method: 'POST',
headers: this.headers,
data: annotationQuery
}).then(result => {
return result.data;
});
}
metricFindQuery(options) {
var target = typeof (options) === "string" ? options : options.target;
metricFindQuery(query) {
var interpolated = {
target: this.templateSrv.replace(target, null, 'regex')
target: this.templateSrv.replace(query, null, 'regex')
};
return this.backendSrv.datasourceRequest({
return this.doRequest({
url: this.url + '/search',
data: interpolated,
method: 'POST',
headers: this.headers
}).then(this.mapToTextValue);
}
@ -92,6 +88,13 @@ export class GenericDatasource {
});
}
doRequest(options) {
options.withCredentials = this.withCredentials;
options.headers = this.headers;
return this.backendSrv.datasourceRequest(options);
}
buildQueryParameters(options) {
//remove placeholder targets
options.targets = _.filter(options.targets, target => {
@ -100,7 +103,7 @@ export class GenericDatasource {
var targets = _.map(options.targets, target => {
return {
target: this.templateSrv.replace(target.target),
target: this.templateSrv.replace(target.target, options.scopedVars, 'regex'),
refId: target.refId,
hide: target.hide,
type: target.type || 'timeserie'

View file

@ -10,8 +10,11 @@
<div ng-if="!ctrl.target.rawQuery">
<div class="gf-form">
<metric-segment-model property="ctrl.target.target" get-options="ctrl.getOptions()" on-change="ctrl.onChangeInternal()"
css-class="tight-form-item-xxlarge"></metric-segment-model>
<gf-form-dropdown model="ctrl.target.target"
lookup-text="true"
get-options="ctrl.getOptions($query)"
on-change="ctrl.onChangeInternal()">
</gf-form-dropdown>
</div>
</div>
</div>

View file

@ -3,19 +3,16 @@ import './css/query-editor.css!'
export class GenericDatasourceQueryCtrl extends QueryCtrl {
constructor($scope, $injector, uiSegmentSrv) {
constructor($scope, $injector) {
super($scope, $injector);
this.scope = $scope;
this.uiSegmentSrv = uiSegmentSrv;
this.target.target = this.target.target || 'select metric';
this.target.type = this.target.type || 'timeserie';
}
getOptions() {
return this.datasource.metricFindQuery(this.target)
.then(this.uiSegmentSrv.transformToSegments(false));
// Options have to be transformed by uiSegmentSrv to be usable by metric-segment-model directive
getOptions(query) {
return this.datasource.metricFindQuery(query || '');
}
toggleEditorMode() {