work on tags in variables

public/app/directives/variableValueSelect.js

@@ -9,7 +9,7 @@ function (angular, app, _) {
 
 
   angular
   angular
     .module('grafana.directives')
     .module('grafana.directives')
-    .directive('variableValueSelect', function($compile, $window, $timeout) {
+    .directive('variableValueSelect', function($compile, $window, $timeout, datasourceSrv) {
       return {
       return {
         scope: {
         scope: {
           variable: "=",
           variable: "=",
@@ -132,6 +132,9 @@ function (angular, app, _) {
             }
             }
           };
           };
 
 
+          scope.selectTag = function(tag) {
+          };
+
           scope.hide = function() {
           scope.hide = function() {
             scope.selectorOpen = false;
             scope.selectorOpen = false;
             bodyEl.off('click', scope.bodyOnClick);
             bodyEl.off('click', scope.bodyOnClick);

public/app/features/dashboard/partials/variableValueSelect.html

@@ -25,8 +25,8 @@
 			</div>
 			</div>
 			<div class="variable-options-column" ng-if="variable.tags">
 			<div class="variable-options-column" ng-if="variable.tags">
 				<!-- <div class="variable&#45;options&#45;column&#45;header">Tags</div> -->
 				<!-- <div class="variable&#45;options&#45;column&#45;header">Tags</div> -->
-				<a class="variable-option-tag pointer" ng-repeat="(key, values) in variable.tags" ng-click="selectTag(option, $event)">
-					<span class="label-tag" tag-color-from-name="key">{{key}}</span>
+				<a class="variable-option-tag pointer" ng-repeat="tag in variable.tags" ng-click="selectTag(option, $event)">
+					<span class="label-tag" tag-color-from-name="tag">{{tag}}</span>
 					<span class="fa fa-fw variable-option-icon"></span>
 					<span class="fa fa-fw variable-option-icon"></span>
 				</a>
 				</a>
 			</div>
 			</div>

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

@@ -226,6 +226,42 @@
 				</div>
 				</div>
 			</div>
 			</div>
 
 
+			<div class="editor-row" ng-if="current.type === 'query'">
+				<div class="tight-form-section">
+					<h5>Value Groups/Tags</h5>
+					<div class="tight-form" ng-if="current.useTags">
+						<ul class="tight-form-list">
+							<li class="tight-form-item" style="width: 115px">
+								Tags query
+							</li>
+							<li>
+								<input type="text" style="width: 588px" class="input-xxlarge tight-form-input last" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()"></input>
+							</li>
+						</ul>
+						<div class="clearfix"></div>
+					</div>
+					<div class="tight-form" ng-if="current.useTags">
+						<ul class="tight-form-list">
+							<li class="tight-form-item" style="width: 115px;">
+								Tags values query
+							</li>
+							<li>
+								<input type="text" style="width: 588px" class="input tight-form-input last" ng-model='current.tagValuesQuery' placeholder="apps.$__tag.*" ng-model-onblur ng-change="runQuery()"></input>
+							</li>
+						</ul>
+						<div class="clearfix"></div>
+					</div>
+					<div class="tight-form">
+						<ul class="tight-form-list">
+							<li class="tight-form-item last">
+								<editor-checkbox text="Enable" model="current.useTags" change="runQuery()"></editor-checkbox>
+							</li>
+						</ul>
+						<div class="clearfix"></div>
+					</div>
+				</div>
+			</div>
+
 			<div class="editor-row">
 			<div class="editor-row">
 				<div class="tight-form-section">
 				<div class="tight-form-section">
 					<h5>Preview of values (shows max 20)</h5>
 					<h5>Preview of values (shows max 20)</h5>

public/app/features/templating/templateValuesSrv.js

@@ -120,7 +120,7 @@ function (angular, _, kbn) {
       }
       }
 
 
       return datasourceSrv.get(variable.datasource).then(function(datasource) {
       return datasourceSrv.get(variable.datasource).then(function(datasource) {
-        return datasource.metricFindQuery(variable.query).then(function (results) {
+        var queryPromise = datasource.metricFindQuery(variable.query).then(function (results) {
           variable.options = self.metricNamesToVariableValues(variable, results);
           variable.options = self.metricNamesToVariableValues(variable, results);
 
 
           if (variable.includeAll) {
           if (variable.includeAll) {
@@ -138,6 +138,19 @@ function (angular, _, kbn) {
 
 
           return self.setVariableValue(variable, variable.options[0]);
           return self.setVariableValue(variable, variable.options[0]);
         });
         });
+
+        if (variable.useTags) {
+          return queryPromise.then(function() {
+            datasource.metricFindQuery(variable.tagsQuery).then(function (results) {
+              variable.tags = [];
+              for (var i = 0; i < results.length; i++) {
+                variable.tags.push(results[i].text);
+              }
+            });
+          });
+        } else {
+          return queryPromise;
+        }
       });
       });
     };
     };