Fix for graphite function selection menu that some times draws outside screen. It now displays upward (Fixes #293)

CHANGELOG.md

@@ -16,6 +16,7 @@ vNext
   exists after the options are reloaded the current selected value is kept (Closes #447, Closes #412)
 - Legend Current value did not display when value was zero, Fixes #460
 - Fix to series toggling bug that caused annotations to be hidden when toggling (hiding) series. Fixes #328
+- Fix for graphite function selection menu that some times draws outside screen. It now displays upward (Fixes #293)
 
 # 1.5.4 (2014-05-13)
 ### New features and improvements

src/app/directives/addGraphiteFunc.js

@@ -18,7 +18,7 @@ function (angular, app, _, $, gfunc) {
 
       var buttonTemplate = '<a  class="grafana-target-segment grafana-target-function dropdown-toggle"' +
                               ' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown"' +
-                              ' data-placement="bottom"><i class="icon-plus"></i></a>';
+                              ' data-placement="top"><i class="icon-plus"></i></a>';
 
       return {
         link: function($scope, elem) {

src/app/directives/bootstrap-tagsinput.js

@@ -87,13 +87,12 @@ function (angular, $) {
     .module('kibana.directives')
     .directive('gfDropdown', function ($parse, $compile, $timeout) {
 
-      function buildTemplate(items, ul) {
-        if (!ul) {
-          ul = [
-            '<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">',
-            '</ul>'
-          ];
-        }
+      function buildTemplate(items, placement) {
+        var upclass = placement === 'top' ? 'dropup' : '';
+        var ul = [
+          '<ul class="dropdown-menu ' + upclass + '" role="menu" aria-labelledby="drop1">',
+          '</ul>'
+        ];
 
         angular.forEach(items, function (item, index) {
           if (item.divider) {
@@ -122,10 +121,12 @@ function (angular, $) {
         link: function postLink(scope, iElement, iAttrs) {
           var getter = $parse(iAttrs.gfDropdown), items = getter(scope);
           $timeout(function () {
-            var dropdown = angular.element(buildTemplate(items).join(''));
+            var placement = iElement.data('placement');
+            var dropdown = angular.element(buildTemplate(items, placement).join(''));
             dropdown.insertAfter(iElement);
             $compile(iElement.next('ul.dropdown-menu'))(scope);
           });
+
           iElement.addClass('dropdown-toggle').attr('data-toggle', 'dropdown');
         }
       };

src/app/directives/grafanaGraph.js

@@ -37,7 +37,7 @@ function (angular, $, kbn, moment, _) {
         // Receive render events
         scope.$on('render',function(event, renderData) {
           data = renderData || data;
-          annotations = renderData.annotations;
+          annotations = data.annotations;
           render_panel();
         });