mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(prometheus): refactoring and polish of the prometheus editor removing unused/uneeded code
This commit is contained in:
parent
a2bf3e056d
commit
44d377b810
@ -5,7 +5,7 @@ define([
|
|||||||
'moment',
|
'moment',
|
||||||
'app/core/utils/datemath',
|
'app/core/utils/datemath',
|
||||||
'./directives',
|
'./directives',
|
||||||
'./queryCtrl',
|
'./query_ctrl',
|
||||||
],
|
],
|
||||||
function (angular, _, kbn, dateMath) {
|
function (angular, _, kbn, dateMath) {
|
||||||
'use strict';
|
'use strict';
|
||||||
@ -22,7 +22,6 @@ function (angular, _, kbn, dateMath) {
|
|||||||
|
|
||||||
var url = datasource.url;
|
var url = datasource.url;
|
||||||
if (url[url.length-1] === '/') {
|
if (url[url.length-1] === '/') {
|
||||||
// remove trailing slash
|
|
||||||
url = url.substr(0, url.length - 1);
|
url = url.substr(0, url.length - 1);
|
||||||
}
|
}
|
||||||
this.url = url;
|
this.url = url;
|
||||||
|
@ -48,13 +48,7 @@
|
|||||||
placeholder="query expression"
|
placeholder="query expression"
|
||||||
data-min-length=0 data-items=100
|
data-min-length=0 data-items=100
|
||||||
ng-model-onblur
|
ng-model-onblur
|
||||||
ng-change="refreshMetricData()"
|
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>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="tight-form-item">
|
<li class="tight-form-item">
|
||||||
Metric
|
Metric
|
||||||
@ -66,13 +60,7 @@
|
|||||||
spellcheck='false'
|
spellcheck='false'
|
||||||
bs-typeahead="suggestMetrics"
|
bs-typeahead="suggestMetrics"
|
||||||
placeholder="metric name"
|
placeholder="metric name"
|
||||||
data-min-length=0 data-items=100
|
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>
|
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
@ -113,7 +101,7 @@
|
|||||||
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
|
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
|
||||||
data-placement="right"
|
data-placement="right"
|
||||||
spellcheck='false'
|
spellcheck='false'
|
||||||
placeholder="{{target.calculatedInterval}}"
|
placeholder="{{interval}}"
|
||||||
data-min-length=0 data-items=100
|
data-min-length=0 data-items=100
|
||||||
ng-model-onblur
|
ng-model-onblur
|
||||||
ng-change="refreshMetricData()"
|
ng-change="refreshMetricData()"
|
||||||
@ -131,12 +119,6 @@
|
|||||||
</select>
|
</select>
|
||||||
</li>
|
</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>
|
</ul>
|
||||||
|
|
||||||
<div class="clearfix"></div>
|
<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/grafana/datasource',
|
||||||
'app/plugins/datasource/graphite/datasource',
|
'app/plugins/datasource/graphite/datasource',
|
||||||
'app/plugins/datasource/influxdb/datasource',
|
'app/plugins/datasource/influxdb/datasource',
|
||||||
'app/plugins/datasource/prometheus/datasource',
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
Loading…
Reference in New Issue
Block a user