mirror of
https://github.com/grafana/grafana.git
synced 2024-11-25 18:30:41 -06:00
feat(prometheus): refactoring and polish of the prometheus editor removing unused/uneeded code
This commit is contained in:
Torkel Ödegaard
parent
a2bf3e056d
commit
44d377b810
@ -5,7 +5,7 @@ define([
|
||||
'moment',
|
||||
'app/core/utils/datemath',
|
||||
'./directives',
|
||||
'./queryCtrl',
|
||||
'./query_ctrl',
|
||||
],
|
||||
function (angular, _, kbn, dateMath) {
|
||||
'use strict';
|
||||
@ -22,7 +22,6 @@ function (angular, _, kbn, dateMath) {
|
||||
|
||||
var url = datasource.url;
|
||||
if (url[url.length-1] === '/') {
|
||||
// remove trailing slash
|
||||
url = url.substr(0, url.length - 1);
|
||||
}
|
||||
this.url = url;
|
||||
|
||||
@ -48,13 +48,7 @@
|
||||
placeholder="query expression"
|
||||
data-min-length=0 data-items=100
|
||||
ng-model-onblur
|
||||
ng-change="refreshMetricData()"
|
||||
>
|
||||
<a bs-tooltip="target.datasourceErrors.query"
|
||||
style="color: rgb(229, 189, 28)"
|
||||
ng-show="target.datasourceErrors.query">
|
||||
<i class="fa fa-warning"></i>
|
||||
</a>
|
||||
ng-change="refreshMetricData()">
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
Metric
|
||||
@ -66,13 +60,7 @@
|
||||
spellcheck='false'
|
||||
bs-typeahead="suggestMetrics"
|
||||
placeholder="metric name"
|
||||
data-min-length=0 data-items=100
|
||||
>
|
||||
<a bs-tooltip="target.errors.metric"
|
||||
style="color: rgb(229, 189, 28)"
|
||||
ng-show="target.errors.metric">
|
||||
<i class="fa fa-warning"></i>
|
||||
</a>
|
||||
data-min-length=0 data-items=100>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
@ -113,7 +101,7 @@
|
||||
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
|
||||
data-placement="right"
|
||||
spellcheck='false'
|
||||
placeholder="{{target.calculatedInterval}}"
|
||||
placeholder="{{interval}}"
|
||||
data-min-length=0 data-items=100
|
||||
ng-model-onblur
|
||||
ng-change="refreshMetricData()"
|
||||
@ -131,12 +119,6 @@
|
||||
</select>
|
||||
</li>
|
||||
|
||||
<li class="tight-form-item">
|
||||
<a href="{{target.prometheusLink}}" target="_blank" bs-tooltip="'Link to Graph in Prometheus'">
|
||||
<i class="fa fa-share-square-o"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
@ -1,133 +0,0 @@
|
||||
define([
|
||||
'angular',
|
||||
'lodash',
|
||||
'kbn',
|
||||
'app/core/utils/datemath',
|
||||
],
|
||||
function (angular, _, kbn, dateMath) {
|
||||
'use strict';
|
||||
|
||||
var module = angular.module('grafana.controllers');
|
||||
|
||||
module.controller('PrometheusQueryCtrl', function($scope) {
|
||||
|
||||
$scope.init = function() {
|
||||
$scope.target.errors = validateTarget();
|
||||
$scope.target.datasourceErrors = {};
|
||||
|
||||
if (!$scope.target.expr) {
|
||||
$scope.target.expr = '';
|
||||
}
|
||||
$scope.target.metric = '';
|
||||
|
||||
$scope.resolutions = [
|
||||
{ factor: 1, },
|
||||
{ factor: 2, },
|
||||
{ factor: 3, },
|
||||
{ factor: 5, },
|
||||
{ factor: 10, },
|
||||
];
|
||||
$scope.resolutions = _.map($scope.resolutions, function(r) {
|
||||
r.label = '1/' + r.factor;
|
||||
return r;
|
||||
});
|
||||
if (!$scope.target.intervalFactor) {
|
||||
$scope.target.intervalFactor = 2; // default resolution is 1/2
|
||||
}
|
||||
|
||||
$scope.calculateInterval();
|
||||
$scope.$on('render', function() {
|
||||
$scope.calculateInterval(); // re-calculate interval when time range is updated
|
||||
});
|
||||
$scope.target.prometheusLink = $scope.linkToPrometheus();
|
||||
|
||||
$scope.$on('typeahead-updated', function() {
|
||||
$scope.$apply($scope.inputMetric);
|
||||
$scope.refreshMetricData();
|
||||
});
|
||||
|
||||
$scope.datasource.lastErrors = {};
|
||||
$scope.$watch('datasource.lastErrors', function() {
|
||||
$scope.target.datasourceErrors = $scope.datasource.lastErrors;
|
||||
}, true);
|
||||
};
|
||||
|
||||
$scope.refreshMetricData = function() {
|
||||
$scope.target.errors = validateTarget($scope.target);
|
||||
$scope.calculateInterval();
|
||||
$scope.target.prometheusLink = $scope.linkToPrometheus();
|
||||
|
||||
// this does not work so good
|
||||
if (!_.isEqual($scope.oldTarget, $scope.target) && _.isEmpty($scope.target.errors)) {
|
||||
$scope.oldTarget = angular.copy($scope.target);
|
||||
$scope.get_data();
|
||||
}
|
||||
};
|
||||
|
||||
$scope.inputMetric = function() {
|
||||
$scope.target.expr += $scope.target.metric;
|
||||
$scope.target.metric = '';
|
||||
};
|
||||
|
||||
$scope.moveMetricQuery = function(fromIndex, toIndex) {
|
||||
_.move($scope.panel.targets, fromIndex, toIndex);
|
||||
};
|
||||
|
||||
$scope.suggestMetrics = function(query, callback) {
|
||||
$scope.datasource
|
||||
.performSuggestQuery(query)
|
||||
.then(callback);
|
||||
};
|
||||
|
||||
$scope.linkToPrometheus = function() {
|
||||
var from = dateMath.parse($scope.dashboard.time.from, false);
|
||||
var to = dateMath.parse($scope.dashboard.time.to, true);
|
||||
|
||||
if ($scope.panel.timeFrom) {
|
||||
from = dateMath.parseDateMath('-' + $scope.panel.timeFrom, to, false);
|
||||
}
|
||||
if ($scope.panel.timeShift) {
|
||||
from = dateMath.parseDateMath('-' + $scope.panel.timeShift, from, false);
|
||||
to = dateMath.parseDateMath('-' + $scope.panel.timeShift, to, true);
|
||||
}
|
||||
|
||||
var range = Math.ceil((to.valueOf()- from.valueOf()) / 1000);
|
||||
|
||||
var endTime = to.format('YYYY-MM-DD HH:MM');
|
||||
|
||||
var step = kbn.interval_to_seconds(this.target.calculatedInterval);
|
||||
if (step !== 0 && range / step > 11000) {
|
||||
step = Math.floor(range / 11000);
|
||||
}
|
||||
|
||||
var expr = {
|
||||
expr: $scope.target.expr,
|
||||
range_input: range + 's',
|
||||
end_input: endTime,
|
||||
//step_input: step,
|
||||
step_input: '',
|
||||
stacked: $scope.panel.stack,
|
||||
tab: 0
|
||||
};
|
||||
|
||||
var hash = encodeURIComponent(JSON.stringify([expr]));
|
||||
return $scope.datasource.url + '/graph#' + hash;
|
||||
};
|
||||
|
||||
$scope.calculateInterval = function() {
|
||||
var interval = $scope.target.interval || $scope.interval;
|
||||
var calculatedInterval = $scope.datasource.calculateInterval(interval, $scope.target.intervalFactor);
|
||||
$scope.target.calculatedInterval = kbn.secondsToHms(calculatedInterval);
|
||||
};
|
||||
|
||||
// TODO: validate target
|
||||
function validateTarget() {
|
||||
var errs = {};
|
||||
|
||||
return errs;
|
||||
}
|
||||
|
||||
$scope.init();
|
||||
});
|
||||
|
||||
});
|
||||
50
public/app/plugins/datasource/prometheus/query_ctrl.js
Normal file
50
public/app/plugins/datasource/prometheus/query_ctrl.js
Normal file
@ -0,0 +1,50 @@
|
||||
define([
|
||||
'angular',
|
||||
'lodash',
|
||||
],
|
||||
function (angular, _) {
|
||||
'use strict';
|
||||
|
||||
var module = angular.module('grafana.controllers');
|
||||
|
||||
module.controller('PrometheusQueryCtrl', function($scope) {
|
||||
|
||||
$scope.init = function() {
|
||||
var target = $scope.target;
|
||||
|
||||
target.expr = target.expr || '';
|
||||
target.intervalFactor = target.intervalFactor || 2;
|
||||
|
||||
$scope.metric = '';
|
||||
$scope.resolutions = _.map([1,2,3,4,5,10], function(f) {
|
||||
return {factor: f, label: '1/' + f};
|
||||
});
|
||||
|
||||
$scope.$on('typeahead-updated', function() {
|
||||
$scope.$apply($scope.inputMetric);
|
||||
$scope.refreshMetricData();
|
||||
});
|
||||
};
|
||||
|
||||
$scope.refreshMetricData = function() {
|
||||
if (!_.isEqual($scope.oldTarget, $scope.target)) {
|
||||
$scope.oldTarget = angular.copy($scope.target);
|
||||
$scope.get_data();
|
||||
}
|
||||
};
|
||||
|
||||
$scope.inputMetric = function() {
|
||||
$scope.target.expr += $scope.target.metric;
|
||||
$scope.metric = '';
|
||||
};
|
||||
|
||||
$scope.suggestMetrics = function(query, callback) {
|
||||
$scope.datasource
|
||||
.performSuggestQuery(query)
|
||||
.then(callback);
|
||||
};
|
||||
|
||||
$scope.init();
|
||||
});
|
||||
|
||||
});
|
||||
@ -63,7 +63,6 @@ module.exports = function(config,grunt) {
|
||||
'app/plugins/datasource/grafana/datasource',
|
||||
'app/plugins/datasource/graphite/datasource',
|
||||
'app/plugins/datasource/influxdb/datasource',
|
||||
'app/plugins/datasource/prometheus/datasource',
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user