feat(adhoc fiters): began work on ad-hoc filters, refactored submenu filters to use gf-form styles, #6038

public/app/features/dashboard/submenu/submenu.html

@@ -1,10 +1,19 @@
-<div class="submenu-controls">
+<div class="submenu-controls gf-form-query">
 	<ul ng-if="ctrl.dashboard.templating.list.length > 0">
 		<li ng-repeat="variable in ctrl.variables" ng-hide="variable.hide === 2" class="submenu-item">
-			<span class="submenu-item-label template-variable " ng-hide="variable.hide === 1">
-				{{variable.label || variable.name}}:
+			<div class="gf-form">
+				<label class="gf-form-label template-variable " ng-hide="variable.hide === 1">
+					{{variable.label || variable.name}}:
+				</label>
+				<value-select-dropdown ng-if="variable.type !== 'adhoc'" variable="variable" on-updated="ctrl.variableUpdated(variable)" get-values-for-tag="ctrl.getValuesForTag(variable, tagKey)"></value-select-dropdown>
+			</div>
+			<span ng-if="variable.type === 'adhoc'">
+				<div class="gf-form">
+					<label class="gf-form-label">hostname</label>
+					<label class="gf-form-label query-operator">=</label>
+					<label class="gf-form-label">server1</label>
+				</div>
 			</span>
-			<value-select-dropdown variable="variable" on-updated="ctrl.variableUpdated(variable)" get-values-for-tag="ctrl.getValuesForTag(variable, tagKey)"></value-select-dropdown>
 		</li>
 	</ul>
 

public/app/features/templating/editorCtrl.js

@@ -23,6 +23,7 @@ function (angular, _) {
 
     $scope.variableTypes = [
       {value: "query",      text: "Query"},
+      {value: "adhoc",      text: "Ad hoc filters"},
       {value: "interval",   text: "Interval"},
       {value: "datasource", text: "Data source"},
       {value: "custom",     text: "Custom"},

public/app/features/templating/templateValuesSrv.js

@@ -188,6 +188,11 @@ function (angular, _, $, kbn) {
         return;
       }
 
+      if (variable.type === 'adhoc') {
+        variable.options = [];
+        return;
+      }
+
       // extract options in comma separated string
       variable.options = _.map(variable.query.split(/[,]+/), function(text) {
         return { text: text.trim(), value: text.trim() };
@@ -271,7 +276,7 @@ function (angular, _, $, kbn) {
 
     this.validateVariableSelectionState = function(variable) {
       if (!variable.current) {
-        if (!variable.options.length) { return; }
+        if (!variable.options.length) { return $q.when(); }
         return self.setVariableValue(variable, variable.options[0], false);
       }
 

public/app/partials/valueSelectDropdown.html

@@ -1,5 +1,5 @@
 <div class="variable-link-wrapper">
-	<a ng-click="vm.show()" class="variable-value-link">
+	<a ng-click="vm.show()" class="gf-form-label variable-value-link">
 		{{vm.linkText}}
 		<span ng-repeat="tag in vm.selectedTags" bs-tooltip='tag.valuesText' data-placement="bottom">
 			<span class="label-tag"tag-color-from-name="tag.text">
@@ -10,7 +10,7 @@
 		<i class="fa fa-caret-down"></i>
 	</a>
 
-	<input type="text" class="hidden-input input-small" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.queryChanged()" ></input>
+	<input type="text" class="hidden-input input-small gf-form-input" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.queryChanged()" ></input>
 
 	<div class="variable-value-dropdown" ng-if="vm.dropdownVisible" ng-class="{'multi': vm.variable.multi, 'single': !vm.variable.multi}">
 		<div class="variable-options-wrapper">

public/sass/components/_submenu.scss

@@ -18,10 +18,7 @@
 .submenu-item {
   margin-right: 20px;
   display: inline-block;
-  border-radius: 3px;
-  background-color: $panel-bg;
-  border: $panel-border;
-  margin-right: 10px;
+  margin-right: 15px;
   display: inline-block;
   float: left;