Graph: added typehead dropdown menu combination for the series override selection

src/app/directives/all.js

@@ -18,5 +18,6 @@ define([
   './templateParamSelector',
   './templateParamSelector',
   './graphiteSegment',
   './graphiteSegment',
   './grafanaVersionCheck',
   './grafanaVersionCheck',
+  './dropdown.typeahead',
   './influxdbFuncEditor'
   './influxdbFuncEditor'
 ], function () {});
 ], function () {});

src/app/directives/dropdown.typeahead.js

+define([
+  'angular',
+  'app',
+  'lodash',
+  'jquery',
+],
+function (angular, app, _, $) {
+  'use strict';
+
+  angular
+    .module('grafana.directives')
+    .directive('dropdownTypeahead', function($compile) {
+
+      var inputTemplate = '<input type="text"'+
+                            ' class="grafana-target-segment-input input-medium grafana-target-segment-input"' +
+                            ' spellcheck="false" style="display:none"></input>';
+
+      var buttonTemplate = '<a  class="grafana-target-segment grafana-target-function dropdown-toggle"' +
+                              ' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' +
+                              ' data-placement="top"><i class="icon-plus"></i></a>';
+
+      return {
+        scope: {
+          "menuItems": "=dropdownTypeahead",
+          "dropdownTypeaheadOnSelect": "&dropdownTypeaheadOnSelect"
+        },
+        link: function($scope, elem) {
+          var $input = $(inputTemplate);
+          var $button = $(buttonTemplate);
+          $input.appendTo(elem);
+          $button.appendTo(elem);
+
+          var typeaheadValues = _.reduce($scope.menuItems, function(memo, value) {
+            _.each(value.submenu, function(item) {
+              memo.push(value.text + ' ' + item.text);
+            });
+            return memo;
+          }, []);
+
+          $input.attr('data-provide', 'typeahead');
+          $input.typeahead({
+            source: typeaheadValues,
+            minLength: 1,
+            items: 10,
+            updater: function (value) {
+              var result = {};
+              _.each($scope.menuItems, function(menuItem, optionIndex) {
+                _.each(menuItem.submenu, function(submenuItem, valueIndex) {
+                  if (value === (menuItem.text + ' ' + submenuItem.text)) {
+                    result.$item  = submenuItem;
+                    result.$optionIndex = optionIndex;
+                    result.$valueIndex = valueIndex;
+                  }
+                });
+              });
+
+              if (result.$item) {
+                $scope.$apply(function() {
+                  $scope.dropdownTypeaheadOnSelect(result);
+                });
+              }
+
+              $input.trigger('blur');
+              return '';
+            }
+          });
+
+          $button.click(function() {
+            $button.hide();
+            $input.show();
+            $input.focus();
+          });
+
+          $input.keyup(function() {
+            elem.toggleClass('open', $input.val() === '');
+          });
+
+          $input.blur(function() {
+            $input.hide();
+            $input.val('');
+            $button.show();
+            $button.focus();
+            // clicking the function dropdown menu wont
+            // work if you remove class at once
+            setTimeout(function() {
+              elem.removeClass('open');
+            }, 200);
+          });
+
+          $compile(elem.contents())($scope);
+        }
+      };
+    });
+});

src/app/panels/graph/styleEditor.html

@@ -88,11 +88,10 @@
 							<i class="pointer icon-remove" ng-click="removeOverride(option)"></i>
 							<i class="pointer icon-remove" ng-click="removeOverride(option)"></i>
 							{{option.name}}: {{option.value}}
 							{{option.name}}: {{option.value}}
 						</li>
 						</li>
-						<li class="dropdown">
-							<a class="dropdown-toggle grafana-target-segment" data-toggle="dropdown" gf-dropdown="overrideMenu" bs-tooltip="'set option to override'" data-placement="top">
-								<i class="icon-plus"></i>
-							</a>
+
+						<li class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($optionIndex, $valueIndex)">
 						</li>
 						</li>
+
 					</ul>
 					</ul>
 					<div class="clearfix"></div>
 					<div class="clearfix"></div>
 				</div>
 				</div>

src/vendor/jquery/jquery.flot.fillbelow.js

@@ -12,7 +12,6 @@
 
 
             var i;
             var i;
 
 
-            debugger;
             for ( i = 0; i < allseries.length; ++i ) {
             for ( i = 0; i < allseries.length; ++i ) {
                 if ( allseries[ i ].id === series.fillBelowTo ) {
                 if ( allseries[ i ].id === series.fillBelowTo ) {
                     return allseries[ i ];
                     return allseries[ i ];