worked on filter panel styling

src/app/panels/filtering/module.html

@@ -6,9 +6,10 @@
     .filter-panel-filter {
     .filter-panel-filter {
       display:inline-block;
       display:inline-block;
       vertical-align: top;
       vertical-align: top;
-      padding: 5px 5px 0px 5px;
+      padding: 5px 10px 0px 10px;
       margin: 0px 5px;
       margin: 0px 5px;
-      background-color: #444;
+      border-left: 1px solid #111;
+      border-right: 1px solid #111;
     }
     }
     .filter-panel-filter ul {
     .filter-panel-filter ul {
       margin-bottom: 3px;
       margin-bottom: 3px;
@@ -25,7 +26,7 @@
     }
     }
     .add-filter-action {
     .add-filter-action {
       position: relative;
       position: relative;
-      top: 3px;
+      top: 4px;
     }
     }
     .filter-mandate {
     .filter-mandate {
       text-decoration: underline;
       text-decoration: underline;
@@ -50,9 +51,14 @@
         <ul class="unstyled">
         <ul class="unstyled">
           <li ng-if="filter.name" class="dropdown">
           <li ng-if="filter.name" class="dropdown">
             {{filter.name}} :
             {{filter.name}} :
-            <a bs-dropdown="filter.options">
-              'All'
+            <a class="dropdown-toggle" data-toggle="dropdown">
+              {{filter.current.text}}
             </a>
             </a>
+              <ul class="dropdown-menu">
+                <li ng-repeat="option in filter.options">
+                  <a ng-click="filter.current = option">{{option.text}}</a>
+                </li>
+              </ul>
           </li>
           </li>
         </ul>
         </ul>
       </div>
       </div>
@@ -60,10 +66,15 @@
       <form ng-show="filter.editing">
       <form ng-show="filter.editing">
         <ul class="unstyled">
         <ul class="unstyled">
           <li>
           <li>
-            <strong>name</strong> : <input type='text' ng-model="filter.name">
+            <strong>name</strong>:<br/>
+            <input type='text' ng-model="filter.name">
+          </li>
+          <li>
+            <strong>filter.query</strong>:<br/>
+            <input type='text' ng-model="filter.query">
           </li>
           </li>
           <li>
           <li>
-            <strong>filter.query</strong> : <input type='text' ng-model="filter.query">
+            <strong>Include All</strong> : <input type='checkbox' ng-model="filter.includeAll">
           </li>
           </li>
         </ul>
         </ul>
         <div>
         <div>

src/app/panels/filtering/module.js

@@ -38,7 +38,13 @@ function (angular, app, _) {
       graphiteSrv.metricFindQuery(filter.query)
       graphiteSrv.metricFindQuery(filter.query)
         .then(function (results) {
         .then(function (results) {
           filter.editing=undefined;
           filter.editing=undefined;
-          filter.options = results;
+          filter.options = _.map(results, function(node) {
+            return { text: node.text, value: node.text };
+          });
+          if (filter.includeAll) {
+            filter.options.unshift({text: 'All', value: '*'});
+          }
+          filter.current = filter.options[0];
         });
         });
     };
     };
 
 
@@ -47,7 +53,6 @@ function (angular, app, _) {
         type      : 'filter',
         type      : 'filter',
         name      : 'filter name',
         name      : 'filter name',
         editing   : true,
         editing   : true,
-        value     : '*',
         query     : 'metric.path.query.*',
         query     : 'metric.path.query.*',
       });
       });
     };
     };

src/app/partials/dashboard.html

 <!-- is there a better way to repeat without actually affecting the page? -->
 <!-- is there a better way to repeat without actually affecting the page? -->
-<nil ng-repeat="pulldown in dashboard.current.pulldowns" ng-controller="PulldownCtrl" ng-show="pulldown.enable">
+<div class="filter-pulldown" ng-repeat="pulldown in dashboard.current.pulldowns" ng-controller="PulldownCtrl" ng-show="pulldown.enable">
   <div class="top-row-close pointer pull-left" ng-click="toggle_pulldown(pulldown);dismiss();" bs-tooltip="'Toggle '+pulldown.type" data-placement="bottom">
   <div class="top-row-close pointer pull-left" ng-click="toggle_pulldown(pulldown);dismiss();" bs-tooltip="'Toggle '+pulldown.type" data-placement="bottom">
-    <span class="small">{{pulldown.type}}</span>
-    <i class="small" ng-class="{'icon-caret-left':pulldown.collapse,'icon-caret-right':!pulldown.collapse}"></i>
-    <i class="small icon-star" ng-show="row.notice && pulldown.collapse"></i>
+    <span class="small"><strong>{{pulldown.type}}</strong></span>
   </div>
   </div>
   <div class="top-row-open" ng-hide="pulldown.collapse">
   <div class="top-row-open" ng-hide="pulldown.collapse">
     <kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel>
     <kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel>
   </div>
   </div>
-</nil>
-<div class="clearfix bgNav" ></div>
+</div>
+<div class="clearfix"></div>
 <div class="container-fluid main" ng-class="{'grafana-dashboard-hide-controls': dashboard.current.hideControls}">
 <div class="container-fluid main" ng-class="{'grafana-dashboard-hide-controls': dashboard.current.hideControls}">
   <div class="row-fluid">
   <div class="row-fluid">
     <div class="row-fluid container" style="margin-top:10px; width:98%">
     <div class="row-fluid container" style="margin-top:10px; width:98%">

src/vendor/angular/angular-strap.js

@@ -546,7 +546,6 @@ angular.module('$strap.directives').directive('bsPopover', [
     $('body').on('keyup', function (ev) {
     $('body').on('keyup', function (ev) {
       if (ev.keyCode === 27) {
       if (ev.keyCode === 27) {
         $('.popover.in').each(function () {
         $('.popover.in').each(function () {
-          debugger;
           $(this).popover('hide');
           $(this).popover('hide');
         });
         });
       }
       }

src/vendor/bootstrap/less/grafana.less

@@ -30,9 +30,19 @@
   }
   }
 }
 }
 
 
+.filter-pulldown {
+  background: #444;
+  overflow: hidden;
+  border-top: 1px solid #111;
+  border-bottom: 1px solid #111;
+}
+
 .top-row-open {
 .top-row-open {
   float: left;
   float: left;
-  padding: 0 10px;
+  padding: 0px;
+}
+.top-row-open {
+  background: none;
 }
 }
 
 
 .panelCont {
 .panelCont {