mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(adhoc filters): initial base mvp for adhoc filters are donecloses #6038
This commit is contained in:
parent
dfe0f91105
commit
15423e6e51
@ -9,6 +9,7 @@ export class VariableEditorCtrl {
|
||||
/** @ngInject */
|
||||
constructor(private $scope, private datasourceSrv, private variableSrv, templateSrv) {
|
||||
$scope.variableTypes = variableTypes;
|
||||
$scope.ctrl = {};
|
||||
|
||||
$scope.refreshOptions = [
|
||||
{value: 0, text: "Never"},
|
||||
@ -60,9 +61,8 @@ export class VariableEditorCtrl {
|
||||
};
|
||||
|
||||
$scope.isValid = function() {
|
||||
if (!$scope.current.name) {
|
||||
$scope.appEvent('alert-warning', ['Validation', 'Template variable requires a name']);
|
||||
return false;
|
||||
if (!$scope.ctrl.form.$valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!$scope.current.name.match(/^\w+$/)) {
|
||||
@ -79,6 +79,18 @@ export class VariableEditorCtrl {
|
||||
return true;
|
||||
};
|
||||
|
||||
$scope.validate = function() {
|
||||
$scope.infoText = '';
|
||||
if ($scope.current.type === 'adhoc' && $scope.current.datasource !== null) {
|
||||
$scope.infoText = 'Adhoc filters are applied automatically to all queries that target this datasource';
|
||||
datasourceSrv.get($scope.current.datasource).then(ds => {
|
||||
if (!ds.supportAdhocFilters) {
|
||||
$scope.infoText = 'This datasource does not support adhoc filters yet.';
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$scope.runQuery = function() {
|
||||
return variableSrv.updateOptions($scope.current).then(null, function(err) {
|
||||
if (err.data && err.data.message) { err.message = err.data.message; }
|
||||
@ -90,6 +102,7 @@ export class VariableEditorCtrl {
|
||||
$scope.current = variable;
|
||||
$scope.currentIsNew = false;
|
||||
$scope.mode = 'edit';
|
||||
$scope.validate();
|
||||
};
|
||||
|
||||
$scope.duplicate = function(variable) {
|
||||
@ -126,6 +139,8 @@ export class VariableEditorCtrl {
|
||||
if (oldIndex !== -1) {
|
||||
this.variables[oldIndex] = $scope.current;
|
||||
}
|
||||
|
||||
$scope.validate();
|
||||
};
|
||||
|
||||
$scope.removeVariable = function(variable) {
|
||||
@ -133,7 +148,6 @@ export class VariableEditorCtrl {
|
||||
$scope.variables.splice(index, 1);
|
||||
$scope.updateSubmenuVisibility();
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -70,13 +70,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="mode === 'edit' || mode === 'new'">
|
||||
<form ng-if="mode === 'edit' || mode === 'new'" name="ctrl.form">
|
||||
<h5 class="section-heading">Variable</h5>
|
||||
<div class="gf-form-group">
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form max-width-19">
|
||||
<span class="gf-form-label width-6">Name</span>
|
||||
<input type="text" class="gf-form-input" placeholder="name" ng-model='current.name'></input>
|
||||
<input type="text" class="gf-form-input" placeholder="name" ng-model='current.name' required></input>
|
||||
</div>
|
||||
<div class="gf-form max-width-19">
|
||||
<span class="gf-form-label width-6">
|
||||
@ -102,15 +102,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div ng-show="current.type === 'interval'" class="gf-form-group">
|
||||
<div ng-if="current.type === 'interval'" class="gf-form-group">
|
||||
<h5 class="section-heading">Interval Options</h5>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-9">Values</span>
|
||||
<input type="text" class="gf-form-input" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()"></input>
|
||||
<input type="text" class="gf-form-input" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()" required></input>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-9">Auto option</span>
|
||||
@ -134,15 +133,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="current.type === 'custom'" class="gf-form-group">
|
||||
<div ng-if="current.type === 'custom'" class="gf-form-group">
|
||||
<h5 class="section-heading">Custom Options</h5>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-13">Values separated by comma</span>
|
||||
<input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
|
||||
<input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue" required></input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="current.type === 'constant'" class="gf-form-group">
|
||||
<div ng-if="current.type === 'constant'" class="gf-form-group">
|
||||
<h5 class="section-heading">Constant options</h5>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label">Value</span>
|
||||
@ -150,14 +149,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="current.type === 'query'" class="gf-form-group">
|
||||
<div ng-if="current.type === 'query'" class="gf-form-group">
|
||||
<h5 class="section-heading">Query Options</h5>
|
||||
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form max-width-21">
|
||||
<span class="gf-form-label width-7">Data source</span>
|
||||
<div class="gf-form-select-wrapper max-width-14">
|
||||
<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
|
||||
<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources" required></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gf-form max-width-21">
|
||||
@ -174,7 +173,7 @@
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-7">Query</span>
|
||||
<input type="text" class="gf-form-input" ng-model='current.query' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()"></input>
|
||||
<input type="text" class="gf-form-input" ng-model='current.query' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()" required></input>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-7">
|
||||
@ -223,19 +222,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="current.type === 'adhoc'" class="gf-form-group">
|
||||
<div ng-if="current.type === 'adhoc'" class="gf-form-group">
|
||||
<h5 class="section-heading">Options</h5>
|
||||
|
||||
<div class="gf-form max-width-21">
|
||||
<span class="gf-form-label width-8">Data source</span>
|
||||
<div class="gf-form-select-wrapper max-width-14">
|
||||
<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
|
||||
<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources" required ng-change="validate()"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-group" ng-show="variableTypes[current.type].supportsMulti">
|
||||
<h5 class="section-heading">Selection Options</h5>
|
||||
<div class="section gf-form-group" ng-show="variableTypes[current.type].supportsMulti">
|
||||
<h5 class="section-heading">Selection Options</h5>
|
||||
<div class="section">
|
||||
<gf-form-switch class="gf-form"
|
||||
label="Multi-value"
|
||||
@ -272,7 +270,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-group">
|
||||
<div class="gf-form-group" ng-show="current.options.length">
|
||||
<h5>Preview of values (shows max 20)</h5>
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form" ng-repeat="option in current.options | limitTo: 20">
|
||||
@ -280,12 +278,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-button-row p-y-0">
|
||||
<button type="button" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
|
||||
<button type="button" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-info gf-form-group" ng-if="infoText">
|
||||
{{infoText}}
|
||||
</div>
|
||||
|
||||
<div class="gf-form-button-row p-y-0">
|
||||
<button type="submit" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
|
||||
<button type="submit" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -21,6 +21,7 @@ export default class InfluxDatasource {
|
||||
interval: any;
|
||||
supportAnnotations: boolean;
|
||||
supportMetrics: boolean;
|
||||
supportAdhocFilters: boolean;
|
||||
responseParser: any;
|
||||
|
||||
/** @ngInject */
|
||||
@ -39,6 +40,7 @@ export default class InfluxDatasource {
|
||||
this.interval = (instanceSettings.jsonData || {}).timeInterval;
|
||||
this.supportAnnotations = true;
|
||||
this.supportMetrics = true;
|
||||
this.supportAdhocFilters = true;
|
||||
this.responseParser = new ResponseParser();
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user