added colspan submenu to panel dropdown menu for quick span changes

src/app/directives/kibanaPanel.js

@@ -48,12 +48,9 @@ function (angular) {
           '</span>' +
 
           '<span ng-if="panelMeta.menuItems" class="dropdown" ng-show="panel.title">' +
-            '<span class="dropdown-toggle panel-text panel-title pointer" data-toggle="dropdown" tabindex="1">' +
+            '<span class="panel-text panel-title pointer" bs-dropdown="panelMeta.menuItems" tabindex="1">' +
               '{{panel.title}}' +
             '</span>' +
-            '<ul class="dropdown-menu" role="menu">' +
-              '<li ng-repeat="item in panelMeta.menuItems"><a ng-click="item.action();">{{item.text}}</a></li>' +
-            '</ul>' +
           '</span>'+
 
           '<span ng-if="!panelMeta.menuItems" class="panel-text panel-title" ng-show="panel.title">' +

src/app/directives/panelMenu.js

@@ -0,0 +1,47 @@
+define([
+  'angular'
+],
+function (angular) {
+  'use strict';
+
+  angular.module('kibana.directives').directive('panelMenu', [
+  '$parse',
+  '$compile',
+  '$timeout',
+  function ($parse, $compile, $timeout) {
+    var buildTemplate = function (items, ul) {
+      if (!ul)
+        ul = [
+          '<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">',
+          '</ul>'
+        ];
+      angular.forEach(items, function (item, index) {
+        if (item.divider)
+          return ul.splice(index + 1, 0, '<li class="divider"></li>');
+        var li = '<li' + (item.submenu && item.submenu.length ? ' class="dropdown-submenu"' : '') + '>' + '<a tabindex="-1" ng-href="' + (item.href || '') + '"' + (item.click ? '" ng-click="' + item.click + '"' : '') + (item.target ? '" target="' + item.target + '"' : '') + (item.method ? '" data-method="' + item.method + '"' : '') + '>' + (item.text || '') + '</a>';
+        if (item.submenu && item.submenu.length)
+          li += buildTemplate(item.submenu).join('\n');
+        li += '</li>';
+        ul.splice(index + 1, 0, li);
+      });
+      return ul;
+    };
+    return {
+      restrict: 'EA',
+      scope: true,
+      link: function postLink(scope, iElement, iAttrs) {
+        var getter = $parse(iAttrs.bsDropdown), items = getter(scope);
+        $timeout(function () {
+          if (!angular.isArray(items)) {
+          }
+          var dropdown = angular.element(buildTemplate(items).join(''));
+          dropdown.insertAfter(iElement);
+          $compile(iElement.next('ul.dropdown-menu'))(scope);
+        });
+        iElement.addClass('dropdown-toggle').attr('data-toggle', 'dropdown');
+      }
+    };
+  }
+]);
+
+});

src/app/panels/graphite/module.js

@@ -56,10 +56,24 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       ],
 
       menuItems: [
-        { text: 'View fullscreen',  action: function() { $scope.toggleFullscreen(); }},
-        { text: 'Edit',             action: function() { $scope.openConfigureModal(); }},
-        { text: 'Duplicate',        action: function() { $scope.duplicate(); }},
-        { text: 'Remove',           action: function() { $scope.remove_panel_from_row($scope.row, $scope.panel); }}
+        { text: 'View fullscreen', click: 'toggleFullscreen()' },
+        { text: 'Edit',            click: 'openConfigureModal()' },
+        { text: 'Duplicate',       click: 'duplicate()' },
+        { text: 'Span', submenu: [
+          { text: '1', click: 'updateColumnSpan(1)' },
+          { text: '2', click: 'updateColumnSpan(2)' },
+          { text: '3', click: 'updateColumnSpan(3)' },
+          { text: '4', click: 'updateColumnSpan(4)' },
+          { text: '5', click: 'updateColumnSpan(5)' },
+          { text: '6', click: 'updateColumnSpan(6)' },
+          { text: '7', click: 'updateColumnSpan(7)' },
+          { text: '8', click: 'updateColumnSpan(8)' },
+          { text: '9', click: 'updateColumnSpan(9)' },
+          { text: '10', click: 'updateColumnSpan(10)' },
+          { text: '11', click: 'updateColumnSpan(11)' },
+          { text: '12', click: 'updateColumnSpan(12)' },
+        ]},
+        { text: 'Remove',          click: 'remove_panel_from_row(row, panel)' }
       ],
 
       status  : "Unstable",
@@ -308,17 +322,15 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       };
 
       return graphiteSrv.query(graphiteQuery)
-        .then(function(results) {
-          $scope.panelMeta.loading = false;
-          var data = $scope.receiveGraphiteData(results);
-          $scope.$emit('render', data);
-        })
+        .then($scope.receiveGraphiteData)
         .then(null, function(err) {
           $scope.panel.error = err.message || "Graphite HTTP Request Error";
         });
     };
 
     $scope.receiveGraphiteData = function(results) {
+      $scope.panelMeta.loading = false;
+
       results = results.data;
       $scope.legend = [];
       var data = [];
@@ -363,7 +375,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
       });
 
-      return data;
+      $scope.render(data);
     };
 
     $scope.add_target = function() {
@@ -402,9 +414,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.fullscreen = true;
       $rootScope.$emit('panel-fullscreen-enter');
 
-      $timeout(function() {
-        $scope.$emit('render');
-      });
+      $timeout($scope.render);
     };
 
     $scope.openConfigureModal = function() {
@@ -416,8 +426,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.enterFullscreenMode({edit: true});
     };
 
-    $scope.render = function() {
-      $scope.$emit('render');
+    $scope.render = function(data) {
+      $scope.$emit('render', data);
     };
 
     $scope.changeSeriesColor = function(series, color) {
@@ -470,7 +480,12 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
     $scope.toggleYAxis = function(info) {
       info.yaxis = info.yaxis === 2 ? 1 : 2;
       $scope.panel.aliasYAxis[info.alias] = info.yaxis;
-      $scope.$emit('render');
+      $scope.render();
+    };
+
+    $scope.updateColumnSpan = function(span) {
+      $scope.panel.span = span;
+      $timeout($scope.render);
     };
 
   });