From 15423e6e51313e071ac64df8a313f813e397c610 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Tue, 20 Sep 2016 17:34:38 +0200
Subject: [PATCH] feat(adhoc filters): initial base mvp for adhoc filters are
 donecloses #6038

---
 public/app/features/templating/editor_ctrl.ts | 22 ++++++--
 .../features/templating/partials/editor.html  | 51 ++++++++++---------
 .../plugins/datasource/influxdb/datasource.ts |  2 +
 3 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/public/app/features/templating/editor_ctrl.ts b/public/app/features/templating/editor_ctrl.ts
index 25ddec62cce..81bf2d4d71c 100644
--- a/public/app/features/templating/editor_ctrl.ts
+++ b/public/app/features/templating/editor_ctrl.ts
@@ -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();
     };
-
   }
 }
 
diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html
index c74245ae6be..e485072eed0 100644
--- a/public/app/features/templating/partials/editor.html
+++ b/public/app/features/templating/partials/editor.html
@@ -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>
 
diff --git a/public/app/plugins/datasource/influxdb/datasource.ts b/public/app/plugins/datasource/influxdb/datasource.ts
index dd35f42f02e..4c707dd59d1 100644
--- a/public/app/plugins/datasource/influxdb/datasource.ts
+++ b/public/app/plugins/datasource/influxdb/datasource.ts
@@ -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();
   }