basic version of filters/template targets is working

src/app/panels/filtering/module.html

@@ -6,7 +6,7 @@
     .filter-panel-filter {
       display:inline-block;
       vertical-align: top;
-      padding: 5px 10px 0px 10px;
+      padding: 3px 10px 0px 10px;
       margin: 0px 5px;
       border-left: 1px solid #111;
       border-right: 1px solid #111;
@@ -22,7 +22,7 @@
       float:right;
       margin-bottom: 0px !important;
       margin-left: 3px;
-      margin-top: 3px;
+      margin-top: 4px;
     }
     .add-filter-action {
       position: relative;
@@ -56,7 +56,7 @@
             </a>
               <ul class="dropdown-menu">
                 <li ng-repeat="option in filter.options">
-                  <a ng-click="filter.current = option">{{option.text}}</a>
+                  <a ng-click="filterSrv.filterOptionSelected(filter, option)">{{option.text}}</a>
                 </li>
               </ul>
           </li>

src/app/partials/dashboard.html

@@ -6,6 +6,7 @@
   <div class="top-row-open" ng-hide="pulldown.collapse">
     <kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel>
   </div>
+  <div class="clearfix"></div>
 </div>
 <div class="clearfix"></div>
 <div class="container-fluid main" ng-class="{'grafana-dashboard-hide-controls': dashboard.current.hideControls}">

src/app/services/filterSrv.js

@@ -27,12 +27,35 @@ define([
       self.list = dashboard.current.services.filter.list;
       self.time = dashboard.current.services.filter.time;
 
+      self.templateSettings = {
+        interpolate : /\[\[([\s\S]+?)\]\]/g,
+      };
+    };
+
+    this.filterOptionSelected = function(filter, option) {
+      filter.current = option;
+      self.filterTemplateData = undefined;
+      dashboard.refresh();
     };
 
     this.add = function(filter) {
       self.list.push(filter);
     };
 
+    this.applyFilterToTarget = function(target) {
+      if (target.indexOf('[[') === -1) {
+        return target;
+      }
+      if (!self.filterTemplateData) {
+        self.filterTemplateData = {};
+        _.each(self.list, function(filter) {
+          self.filterTemplateData[filter.name] = filter.current.value;
+        });
+      }
+
+      return _.template(target, self.filterTemplateData, self.templateSettings);
+    };
+
     this.remove = function(filter) {
       self.list = dashboard.current.services.filter.list = _.without(self.list, filter);
 

src/app/services/graphite/graphiteSrv.js

@@ -9,7 +9,7 @@ function (angular, _, $, config) {
 
   var module = angular.module('kibana.services');
 
-  module.service('graphiteSrv', function($http) {
+  module.service('graphiteSrv', function($http, filterSrv) {
 
     this.query = function(options) {
       var graphOptions = {
@@ -74,7 +74,8 @@ function (angular, _, $, config) {
         if (key === "targets") {
           $.each(value, function (index, value) {
             if (!value.hide) {
-              clean_options.push("target=" + encodeURIComponent(value.target));
+              var targetValue = filterSrv.applyFilterToTarget(value.target);
+              clean_options.push("target=" + encodeURIComponent(targetValue));
             }
           });
         }

src/vendor/bootstrap/less/grafana.less

@@ -32,7 +32,6 @@
 
 .filter-pulldown {
   background: #444;
-  overflow: hidden;
   border-top: 1px solid #111;
   border-bottom: 1px solid #111;
 }