Started work on annotations submenu control

src/app/dashboards/default.json

@@ -42,7 +42,6 @@
           "span": 12,
           "editable": true,
           "type": "graphite",
-          "loadingEditor": false,
           "x-axis": true,
           "y-axis": true,
           "scale": 1,

src/app/panels/annotations/module.html

@@ -0,0 +1,8 @@
+<div ng-controller='AnnotationsCtrl' ng-init="init()">
+
+  <div class="submenu-toggle">
+    <label class="small" for="showAnnotations">Hide</label>
+    <input type="checkbox" id="showAnnotations"></label>
+  </div>
+
+</div>

src/app/panels/annotations/module.js

@@ -0,0 +1,44 @@
+/*
+
+  ## annotations
+
+*/
+define([
+  'angular',
+  'app',
+  'underscore'
+],
+function (angular, app, _) {
+  'use strict';
+
+  var module = angular.module('kibana.panels.annotations', []);
+  app.useModule(module);
+
+  module.controller('AnnotationsCtrl', function($scope) {
+
+    $scope.panelMeta = {
+      status  : "Stable",
+      description : "Annotations"
+    };
+
+    // Set and populate defaults
+    var _d = {
+    };
+    _.defaults($scope.panel,_d);
+
+    $scope.init = function() {
+      $scope.panel.annotations = [
+        {
+          type: 'graphite-target',
+          target: 'metric'
+        },
+        {
+          type: 'graphite-target',
+          target: 'metric2'
+        }
+      ];
+    };
+
+
+  });
+});

src/app/panels/filtering/module.html

@@ -5,7 +5,6 @@
     }
     .filtering-container label {
       float: left;
-      font-size: inherit;
     }
     .filtering-container input[type=checkbox] {
       margin: 0;
@@ -13,11 +12,14 @@
     .filter-panel-filter {
       display:inline-block;
       vertical-align: top;
-      padding: 3px 10px 0px 10px;
+      padding: 4px 10px 3px 10px;
       border-right: 1px solid #202020;
     }
+    .filter-panel-filter:first-child {
+      padding-left: 0;
+    }
     .filter-panel-filter ul {
-      margin-bottom: 3px;
+      margin-bottom: 0px;
     }
 
     .filter-deselected {
@@ -25,12 +27,13 @@
     }
     .filter-action {
       float:right;
+      padding-right: 2px;
       margin-bottom: 0px !important;
-      margin-left: 3px;
+      margin-left: 0px;
       margin-top: 4px;
     }
     .add-filter-action {
-      padding: 3px 10px 0px 10px;
+      padding: 3px 10px 0px 5px;
       position: relative;
       top: 4px;
     }
@@ -78,7 +81,7 @@
             <input type='text' ng-model="filter.query">
           </li>
           <li>
-            <label for="includeAll">Include all</label>:
+            <label for="includeAll">Include all:</label>
             <input id="includeAll" type='checkbox' ng-model="filter.includeAll">
           </li>
         </ul>

src/app/panels/graphite/module.js

@@ -225,7 +225,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.panel.tooltip.query_as_alias = true;
 
       $scope.get_data();
-
     };
 
     $scope.remove_panel_from_row = function(row, panel) {

src/app/partials/dashboard.html

@@ -1,13 +1,27 @@
 <!-- is there a better way to repeat without actually affecting the page? -->
-<div class="filter-pulldown" ng-repeat="pulldown in dashboard.current.pulldowns" ng-controller="PulldownCtrl" ng-show="pulldown.enable">
+<!-- <div class="filter-pulldown" 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">
     <span class="small"><strong>{{pulldown.type}}</strong></span>
   </div>
   <div class="top-row-open" ng-hide="pulldown.collapse">
-    <kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel>
+    <kibana-simple-panel type="filtering" ng-cloak></kibana-simple-panel>
+    <kibana-simple-panel type="annotations" ng-cloak></kibana-simple-panel>
+  </div>
+  <div class="clearfix"></div>
+</div> -->
+
+<div class="submenu-controls">
+  <div class="submenu-panel" ng-repeat="pulldown in dashboard.current.pulldowns | filter:{ enable: true }">
+    <div class="submenu-panel-title">
+      <span class="small"><strong>{{pulldown.type}}:</strong></span>
+    </div>
+    <div class="submenu-panel-wrapper">
+      <kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel>
+    </div>
   </div>
   <div class="clearfix"></div>
 </div>
+
 <div class="clearfix"></div>
 <div class="container-fluid main" ng-class="{'grafana-dashboard-hide-controls': dashboard.current.hideControls}">
   <div>

src/app/services/dashboard.js

@@ -27,7 +27,7 @@ function (angular, $, kbn, _, config, moment, Modernizr) {
       failover: false,
       panel_hints: true,
       rows: [],
-      pulldowns: [ { type: 'filtering' } ],
+      pulldowns: [ { type: 'filtering' },  { type: 'annotations' } ],
       nav: [ { type: 'timepicker' } ],
       services: {},
       loader: {
@@ -131,6 +131,15 @@ function (angular, $, kbn, _, config, moment, Modernizr) {
         });
       }
 
+      var annotations = _.findWhere(dashboard.pulldowns, {type: 'annotations'});
+      if (!annotations) {
+        dashboard.pulldowns.push({
+          type: 'annotations',
+          enable: false,
+          collapse: true
+        });
+      }
+
       return dashboard;
     };
 

src/vendor/bootstrap/less/grafana.less

@@ -37,17 +37,37 @@
   }
 }
 
-.filter-pulldown {
+.submenu-controls {
   background: #292929;
+  font-size: inherit;
+  label {
+    margin: 0;
+    padding-right: 4px;
+    display: inline;
+  }
+  input[type=checkbox] {
+    margin: 0;
+  }
 }
 
-.top-row-close {
+.submenu-panel {
+  padding: 0 10px 0 17px;
   border-right: 1px solid #202020;
+  float: left;
+}
+
+.submenu-panel-title {
+  float: left;
+  text-transform: uppercase;
+  padding: 3px 10px 0 0;
 }
-.top-row-open {
+
+.submenu-panel-wrapper {
   float: left;
-  padding: 0px;
-  background: none;
+}
+
+.submenu-toggle {
+  padding: 3px 0;
 }
 
 .row-button {

src/vendor/bootstrap/less/overrides.less

@@ -222,28 +222,6 @@ form input.ng-invalid {
   margin: 0px 10px;
 }
 
-.row-close {
-  padding: 0px;
-  margin: 0px;
-  min-height: 30px !important;
-  line-height: 30px;
-  background: @kibanaPanelBackground;
-}
-
-.top-row-open {
-  background: @navbarBackground;
-  padding: 5px 25px 5px 25px;
-}
-
-.top-row-close {
-  padding: 5px 10px;
-  text-transform: uppercase;
-  margin: 0px;
-  text-align: left;
-  min-height: 16px !important;
-  line-height: 16px;
-}
-
 .row-open {
   margin-top: 5px;
   left:-34px;