more work on metric filters / templates

src/app/panels/filtering/module.html

@@ -6,7 +6,6 @@
     .filter-panel-filter {
       display:inline-block;
       vertical-align: top;
-      width: 220px;
       padding: 5px 5px 0px 5px;
       margin: 0px 5px;
       background-color: #444;
@@ -38,39 +37,39 @@
   </style>
 
   <div class='filtering-container'>
-    <span ng-show="filterSrv.ids.length == 0">
+    <span ng-show="filterSrv.list.length == 0">
       <h5>No filters available</h5>
     </span>
-    <div ng-repeat="id in filterSrv.ids" ng-show="filterSrv.list[id].type !== 'time'" class="small filter-panel-filter">
+    <div ng-repeat="filter in filterSrv.list" class="small filter-panel-filter">
       <div>
-        <i class="filter-action pointer icon-remove" bs-tooltip="'Remove'" ng-click="remove(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>
+        <i class="filter-action pointer icon-remove" bs-tooltip="'Remove'" ng-click="remove(filter)"></i>
+        <i class="filter-action pointer icon-edit" ng-hide="filter.editing" bs-tooltip="'Edit'" ng-click="filter.editing = true"></i>
       </div>
 
-      <div ng-hide="filterSrv.list[id].editing" style="margin-right: 35px;">
+      <div ng-hide="filter.editing" style="margin-right: 45px;">
         <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'}}
+          <li ng-if="filter.name" class="dropdown">
+            {{filter.name}} :
+            <a bs-dropdown="filter.options">
+              '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">
+      <form ng-show="filter.editing">
         <ul class="unstyled">
-          <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>
+            <strong>name</strong> : <input type='text' ng-model="filter.name">
+          </li>
+          <li>
+            <strong>filter.query</strong> : <input type='text' ng-model="filter.query">
           </li>
         </ul>
         <div>
-          <input type="submit" value="Apply" ng-click="applyFilter(filterSrv.list[id])" class="filter-apply btn btn-success btn-mini" bs-tooltip="'Save and refresh'"/>
+          <input type="submit" value="Apply" ng-click="applyFilter(filter)" class="filter-apply btn btn-success btn-mini" bs-tooltip="'Save and refresh'"/>
 
-          <button ng-click="filterSrv.list[id].editing=undefined" class="filter-apply btn btn-mini" bs-tooltip="'Save without refresh'">Save</button>
+          <button ng-click="filter.editing=undefined" class="filter-apply btn btn-mini" bs-tooltip="'Save without refresh'">Save</button>
         </div>
       </form>
     </div>

src/app/panels/filtering/module.js

@@ -26,10 +26,6 @@ function (angular, app, _) {
     };
     _.defaults($scope.panel,_d);
 
-    $scope.$on('filter', function() {
-      $scope.row.notice = true;
-    });
-
     $scope.init = function() {
       $scope.filterSrv = filterSrv;
     };
@@ -39,22 +35,21 @@ function (angular, app, _) {
     };
 
     $scope.applyFilter = function(filter) {
-      filterSrv.list[id].editing=undefined;
-      $scope.refresh()
+      graphiteSrv.metricFindQuery(filter.query)
+        .then(function (results) {
+          filter.editing=undefined;
+          filter.options = results;
+        });
     };
 
     $scope.add = function() {
-      filterSrv.set({
-        editing   : true,
+      filterSrv.add({
         type      : 'filter',
         name      : 'filter name',
+        editing   : true,
         value     : '*',
         query     : 'metric.path.query.*',
-      },undefined,true);
-    };
-
-    $scope.getMetricFilterOptions = function(filter) {
-      return graphiteSrv.metricFindQuery(filter.query);
+      });
     };
 
     $scope.refresh = function() {
@@ -65,22 +60,5 @@ 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','active','editing', 'name', 'query', 'value'],key);
-    };
-
-    $scope.isEditable = function(filter) {
-      var uneditable = ['time'];
-      if(_.contains(uneditable,filter.type)) {
-        return false;
-      } else {
-        return true;
-      }
-    };
-
   });
 });

src/app/services/filterSrv.js

@@ -26,14 +26,15 @@ define([
       _.defaults(dashboard.current.services.filter, _d);
       self.list = dashboard.current.services.filter.list;
       self.time = dashboard.current.services.filter.time;
+
     };
 
     this.add = function(filter) {
-      self.list.add(filter);
+      self.list.push(filter);
     };
 
     this.remove = function(filter) {
-      self.list = dashboard.current.services.filters = _.without(self.list, filter);
+      self.list = dashboard.current.services.filter.list = _.without(self.list, filter);
 
       if(!$rootScope.$$phase) {
         $rootScope.$apply();