worked on filters / templated metric paths

src/app/panels/filtering/module.html

@@ -47,35 +47,30 @@
     <span ng-show="filterSrv.ids.length == 0">
       <h5>No filters available</h5>
     </span>
-    <div ng-repeat="id in filterSrv.ids" class="small filter-panel-filter filter-{{filterSrv.list[id].mandate}}" ng-class="{'filter-deselected': !filterSrv.list[id].active}">
+    <div ng-repeat="id in filterSrv.ids" class="small filter-panel-filter filter-must" ng-class="{'filter-deselected': !filterSrv.list[id].active}">
       <div>
-        <strong>{{filterSrv.list[id].type}}</strong>
-        <span ng-show="!filterSrv.list[id].editing && isEditable(filterSrv.list[id])" class="filter-mandate" ng-click="filterSrv.list[id].editing = true">
-          {{filterSrv.list[id].mandate}}
-        </span>
-        <span ng-show="!isEditable(filterSrv.list[id])">
-          {{filterSrv.list[id].mandate}}
-        </span>
-
-        <span ng-show="filterSrv.list[id].editing">
-          <select class="input-small" ng-model="filterSrv.list[id].mandate" ng-options="f for f in ['must','mustNot','either']"></select>
-        </span>
-
         <i class="filter-action pointer icon-remove" bs-tooltip="'Remove'" ng-click="remove(id)"></i>
         <i class="filter-action pointer" ng-class="{'icon-check': filterSrv.list[id].active,'icon-check-empty': !filterSrv.list[id].active}" bs-tooltip="'Toggle'" ng-click="toggle(id)"></i>
         <i class="filter-action pointer icon-edit" ng-hide="filterSrv.list[id].editing || !isEditable(filterSrv.list[id])" bs-tooltip="'Edit'" ng-click="filterSrv.list[id].editing = true"></i>
       </div>
 
-      <div ng-hide="filterSrv.list[id].editing && isEditable(filterSrv.list[id])">
+      <div ng-hide="filterSrv.list[id].editing" style="margin-right: 35px;">
         <ul class="unstyled">
+          <li ng-if="filterSrv.list[id].name" class="dropdown">
+            {{filterSrv.list[id].name}} :
+            <a bs-dropdown="getMetricFilterOptions(filterSrv.list[id])">
+              {{filterSrv.list[id].value || 'All'}}
+            </a>
+          </li>
           <li ng-repeat="(key,value) in filterSrv.list[id] track by $index" ng-show="show_key(key)">
             <strong>{{key}}</strong> : {{value}}
           </li>
         </ul>
       </div>
-      <form ng-show="filterSrv.list[id].editing && isEditable(filterSrv.list[id])">
+
+      <form ng-show="filterSrv.list[id].editing">
         <ul class="unstyled">
-          <li ng-repeat="key in _.keys(filterSrv.list[id])" ng-show="show_key(key)">
+          <li ng-repeat="key in _.keys(filterSrv.list[id])" ng-show="edit_key(key)">
             <strong>{{key}}</strong> : <input type='text' ng-model="filterSrv.list[id][key]">
           </li>
         </ul>
@@ -85,6 +80,6 @@
         </div>
       </form>
     </div>
-    <i class="link icon-plus-sign" ng-click="add()" bs-tooltip="'Add a query filter'" data-placement="right"></i>
+    <i class="link icon-plus-sign" ng-click="add()" bs-tooltip="'Add metric filter / param'" data-placement="right"></i>
   </div>
 </div>

src/app/panels/filtering/module.js

@@ -14,7 +14,7 @@ function (angular, app, _) {
   var module = angular.module('kibana.panels.filtering', []);
   app.useModule(module);
 
-  module.controller('filtering', function($scope, filterSrv, $rootScope, dashboard) {
+  module.controller('filtering', function($scope, filterSrv, graphiteSrv, $rootScope, dashboard) {
 
     $scope.panelMeta = {
       status  : "Stable",
@@ -45,15 +45,19 @@ function (angular, app, _) {
     };
 
     $scope.add = function(query) {
-      query = query || '*';
       filterSrv.set({
         editing   : true,
-        type      : 'querystring',
-        query     : query,
-        mandate   : 'must'
+        type      : 'filter',
+        name      : 'filter name',
+        value     : '*',
+        query     : 'metric.path.query.*',
       },undefined,true);
     };
 
+    $scope.getMetricFilterOptions = function(filter) {
+      return graphiteSrv.metricFindQuery(filter.query);
+    };
+
     $scope.refresh = function() {
       dashboard.refresh();
     };
@@ -62,8 +66,12 @@ function (angular, app, _) {
       $rootScope.$broadcast('render');
     };
 
+    $scope.edit_key = function(key) {
+      return !_.contains(['type','id','active','editing', 'value'],key);
+    };
+
     $scope.show_key = function(key) {
-      return !_.contains(['type','id','alias','mandate','active','editing'],key);
+      return !_.contains(['type','id','active','editing', 'name', 'query', 'value'],key);
     };
 
     $scope.isEditable = function(filter) {

src/app/services/filterSrv.js

@@ -53,10 +53,16 @@ define([
       var _r;
 
       _.defaults(filter,{
-        mandate:'must',
         active: true
       });
 
+      if (!id && filter.type === 'time') {
+        var _existing = _.findWhere(self.list, {type: 'time'});
+        if (_existing) {
+          id = _existing.id;
+        }
+      }
+
       if(!_.isUndefined(id)) {
         if(!_.isUndefined(self.list[id])) {
           _.extend(self.list[id],filter);
@@ -70,9 +76,7 @@ define([
         } else {
           var _id = nextId();
           var _filter = {
-            alias: '',
             id: _id,
-            mandate: 'must'
           };
           _.defaults(filter,_filter);
           self.list[_id] = filter;

src/app/services/graphite/graphiteSrv.js

@@ -46,6 +46,20 @@ function (angular, _, $, config) {
       return found;
     };
 
+    this.metricFindQuery = function(query) {
+      var url = config.graphiteUrl + '/metrics/find/?query=' + query;
+      return $http.get(url)
+        .then(function(results) {
+          return _.map(results.data, function(metric) {
+            return {
+              text: metric.text,
+              expandable: metric.expandable ? true : false
+            };
+          });
+        });
+    }
+
+
     function buildGraphitePostParams(options) {
       var clean_options = [];
       var graphite_options = ['target', 'targets', 'from', 'until', 'rawData', 'format', 'maxDataPoints'];