Skip to content

Commit 15423e6

Browse files
torkelotorkelo
committed
feat(adhoc filters): initial base mvp for adhoc filters are donecloses grafana#6038 
1 parent dfe0f91 commit 15423e6

File tree

3 files changed

+47
-28
lines changed

3 files changed

+47
-28
lines changed

‎public/app/features/templating/editor_ctrl.ts

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export class VariableEditorCtrl {
99
/** @ngInject */
1010
constructor(private $scope, private datasourceSrv, private variableSrv, templateSrv) {
1111
$scope.variableTypes = variableTypes;
12+
$scope.ctrl = {};
1213

1314
$scope.refreshOptions = [
1415
{value: 0, text: "Never"},
@@ -60,9 +61,8 @@ export class VariableEditorCtrl {
6061
};
6162

6263
$scope.isValid = function() {
63-
if (!$scope.current.name) {
64-
$scope.appEvent('alert-warning', ['Validation', 'Template variable requires a name']);
65-
return false;
64+
if (!$scope.ctrl.form.$valid) {
65+
return;
6666
}
6767

6868
if (!$scope.current.name.match(/^\w+$/)) {
@@ -79,6 +79,18 @@ export class VariableEditorCtrl {
7979
return true;
8080
};
8181

82+
$scope.validate = function() {
83+
$scope.infoText = '';
84+
if ($scope.current.type === 'adhoc' && $scope.current.datasource !== null) {
85+
$scope.infoText = 'Adhoc filters are applied automatically to all queries that target this datasource';
86+
datasourceSrv.get($scope.current.datasource).then(ds => {
87+
if (!ds.supportAdhocFilters) {
88+
$scope.infoText = 'This datasource does not support adhoc filters yet.';
89+
}
90+
});
91+
}
92+
};
93+
8294
$scope.runQuery = function() {
8395
return variableSrv.updateOptions($scope.current).then(null, function(err) {
8496
if (err.data && err.data.message) { err.message = err.data.message; }
@@ -90,6 +102,7 @@ export class VariableEditorCtrl {
90102
$scope.current = variable;
91103
$scope.currentIsNew = false;
92104
$scope.mode = 'edit';
105+
$scope.validate();
93106
};
94107

95108
$scope.duplicate = function(variable) {
@@ -126,14 +139,15 @@ export class VariableEditorCtrl {
126139
if (oldIndex !== -1) {
127140
this.variables[oldIndex] = $scope.current;
128141
}
142+
143+
$scope.validate();
129144
};
130145

131146
$scope.removeVariable = function(variable) {
132147
var index = _.indexOf($scope.variables, variable);
133148
$scope.variables.splice(index, 1);
134149
$scope.updateSubmenuVisibility();
135150
};
136-
137151
}
138152
}
139153

‎public/app/features/templating/partials/editor.html

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -70,13 +70,13 @@ <h2 class="tabbed-view-title">
7070
</div>
7171
</div>
7272

73-
<div ng-if="mode === 'edit' || mode === 'new'">
73+
<form ng-if="mode === 'edit' || mode === 'new'" name="ctrl.form">
7474
<h5 class="section-heading">Variable</h5>
7575
<div class="gf-form-group">
7676
<div class="gf-form-inline">
7777
<div class="gf-form max-width-19">
7878
<span class="gf-form-label width-6">Name</span>
79-
<input type="text" class="gf-form-input" placeholder="name" ng-model='current.name'></input>
79+
<input type="text" class="gf-form-input" placeholder="name" ng-model='current.name' required></input>
8080
</div>
8181
<div class="gf-form max-width-19">
8282
<span class="gf-form-label width-6">
@@ -102,15 +102,14 @@ <h5 class="section-heading">Variable</h5>
102102
</div>
103103
</div>
104104
</div>
105-
106105
</div>
107106

108-
<div ng-show="current.type === 'interval'" class="gf-form-group">
107+
<div ng-if="current.type === 'interval'" class="gf-form-group">
109108
<h5 class="section-heading">Interval Options</h5>
110109

111110
<div class="gf-form">
112111
<span class="gf-form-label width-9">Values</span>
113-
<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>
112+
<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>
114113
</div>
115114
<div class="gf-form">
116115
<span class="gf-form-label width-9">Auto option</span>
@@ -134,30 +133,30 @@ <h5 class="section-heading">Interval Options</h5>
134133
</div>
135134
</div>
136135

137-
<div ng-show="current.type === 'custom'" class="gf-form-group">
136+
<div ng-if="current.type === 'custom'" class="gf-form-group">
138137
<h5 class="section-heading">Custom Options</h5>
139138
<div class="gf-form">
140139
<span class="gf-form-label width-13">Values separated by comma</span>
141-
<input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
140+
<input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue" required></input>
142141
</div>
143142
</div>
144143

145-
<div ng-show="current.type === 'constant'" class="gf-form-group">
144+
<div ng-if="current.type === 'constant'" class="gf-form-group">
146145
<h5 class="section-heading">Constant options</h5>
147146
<div class="gf-form">
148147
<span class="gf-form-label">Value</span>
149148
<input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="your metric prefix"></input>
150149
</div>
151150
</div>
152151

153-
<div ng-show="current.type === 'query'" class="gf-form-group">
152+
<div ng-if="current.type === 'query'" class="gf-form-group">
154153
<h5 class="section-heading">Query Options</h5>
155154

156155
<div class="gf-form-inline">
157156
<div class="gf-form max-width-21">
158157
<span class="gf-form-label width-7">Data source</span>
159158
<div class="gf-form-select-wrapper max-width-14">
160-
<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
159+
<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources" required></select>
161160
</div>
162161
</div>
163162
<div class="gf-form max-width-21">
@@ -174,7 +173,7 @@ <h5 class="section-heading">Query Options</h5>
174173
</div>
175174
<div class="gf-form">
176175
<span class="gf-form-label width-7">Query</span>
177-
<input type="text" class="gf-form-input" ng-model='current.query' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()"></input>
176+
<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>
178177
</div>
179178
<div class="gf-form">
180179
<span class="gf-form-label width-7">
@@ -223,19 +222,18 @@ <h5 class="section-heading">Data source options</h5>
223222
</div>
224223
</div>
225224

226-
<div ng-show="current.type === 'adhoc'" class="gf-form-group">
225+
<div ng-if="current.type === 'adhoc'" class="gf-form-group">
227226
<h5 class="section-heading">Options</h5>
228-
229227
<div class="gf-form max-width-21">
230228
<span class="gf-form-label width-8">Data source</span>
231229
<div class="gf-form-select-wrapper max-width-14">
232-
<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
230+
<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>
233231
</div>
234232
</div>
235-
</div>
233+
</div>
236234

237-
<div class="section gf-form-group" ng-show="variableTypes[current.type].supportsMulti">
238-
<h5 class="section-heading">Selection Options</h5>
235+
<div class="section gf-form-group" ng-show="variableTypes[current.type].supportsMulti">
236+
<h5 class="section-heading">Selection Options</h5>
239237
<div class="section">
240238
<gf-form-switch class="gf-form"
241239
label="Multi-value"
@@ -272,20 +270,25 @@ <h5>Value groups/tags (Experimental feature)</h5>
272270
</div>
273271
</div>
274272

275-
<div class="gf-form-group">
273+
<div class="gf-form-group" ng-show="current.options.length">
276274
<h5>Preview of values (shows max 20)</h5>
277275
<div class="gf-form-inline">
278276
<div class="gf-form" ng-repeat="option in current.options | limitTo: 20">
279277
<span class="gf-form-label">{{option.text}}</span>
280278
</div>
281279
</div>
282280
</div>
283-
</div>
284281

285-
<div class="gf-form-button-row p-y-0">
286-
<button type="button" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
287-
<button type="button" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
288-
</div>
289-
</div>
282+
<div class="alert alert-info gf-form-group" ng-if="infoText">
283+
{{infoText}}
284+
</div>
285+
286+
<div class="gf-form-button-row p-y-0">
287+
<button type="submit" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
288+
<button type="submit" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
289+
</div>
290+
291+
</form>
292+
</div>
290293
</div>
291294

‎public/app/plugins/datasource/influxdb/datasource.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export default class InfluxDatasource {
2121
interval: any;
2222
supportAnnotations: boolean;
2323
supportMetrics: boolean;
24+
supportAdhocFilters: boolean;
2425
responseParser: any;
2526

2627
/** @ngInject */
@@ -39,6 +40,7 @@ export default class InfluxDatasource {
3940
this.interval = (instanceSettings.jsonData || {}).timeInterval;
4041
this.supportAnnotations = true;
4142
this.supportMetrics = true;
43+
this.supportAdhocFilters = true;
4244
this.responseParser = new ResponseParser();
4345
}
4446

0 commit comments

Comments
 (0)