moving stuff out of graphite panel and into kibanaPanel

src/app/directives/addPanel.js

@@ -32,5 +32,4 @@ function (angular, app, _) {
         }
       };
     });
-
 });

src/app/directives/bootstrap-tagsinput.js

@@ -82,4 +82,52 @@ function (angular, $) {
         }
       };
     });
+
+  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>'
+          ];
+        }
+
+        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.configModal ? ' config-modal="' + item.configModal + '"' : "") +
+              '>' + (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.gfDropdown), items = getter(scope);
+          $timeout(function () {
+            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/directives/kibanaPanel.js

@@ -1,13 +1,14 @@
 define([
   'angular',
-  'jquery'
+  'jquery',
+  'underscore'
 ],
-function (angular, $) {
+function (angular, $, _) {
   'use strict';
 
   angular
     .module('kibana.directives')
-    .directive('kibanaPanel', function($compile) {
+    .directive('kibanaPanel', function($compile, $timeout, $rootScope) {
 
       var container = '<div class="panel-container"></div>';
       var content = '<div class="panel-content"></div>';
@@ -28,8 +29,8 @@ function (angular, $) {
               '<i class="icon-spinner icon-spin icon-large"></i>' +
             '</span>' +
 
-            '<span ng-if="panelMeta.menuItems" class="dropdown">' +
-              '<span class="panel-text panel-title pointer" bs-dropdown="panelMeta.menuItems" tabindex="1" ' +
+            '<span class="dropdown">' +
+              '<span class="panel-text panel-title pointer" gf-dropdown="panelMeta.menu" tabindex="1" ' +
               'data-drag=true data-jqyoui-options="kbnJqUiDraggableOptions"'+
               ' jqyoui-draggable="'+
               '{'+
@@ -44,11 +45,6 @@ function (angular, $) {
               '</span>' +
             '</span>'+
 
-            '<span ng-if="!panelMeta.menuItems" config-modal="./app/partials/paneleditor.html" ' +
-                  ' class="panel-text panel-title pointer" >' +
-              '{{panel.title}}' +
-            '</span>'+
-
           '</div>'+
         '</div>\n'+
       '</div>';
@@ -100,9 +96,7 @@ function (angular, $) {
                 $controllers.first().prepend(panelHeader);
                 $controllers.first().find('.panel-header').nextAll().wrapAll(content);
 
-                $scope.require([
-                  'panels/'+nameAsPath+'/module'
-                ], function() {
+                $scope.require(['panels/' + nameAsPath + '/module'], function() {
                   loadModule($module);
                 });
               } else {
@@ -110,6 +104,126 @@ function (angular, $) {
               }
             });
           });
+
+
+          /*
+          /* Panel base functionality
+          /* */
+          newScope.initPanel = function(scope) {
+
+            scope.updateColumnSpan = function(span) {
+              scope.panel.span = span;
+
+              $timeout(function() {
+                scope.$emit('render');
+              });
+            };
+
+            function enterFullscreenMode(options) {
+              var docHeight = $(window).height();
+              var editHeight = Math.floor(docHeight * 0.3);
+              var fullscreenHeight = Math.floor(docHeight * 0.7);
+              var oldTimeRange = scope.range;
+
+              scope.height = options.edit ? editHeight : fullscreenHeight;
+              scope.editMode = options.edit;
+
+              if (!scope.fullscreen) {
+                var closeEditMode = $rootScope.$on('panel-fullscreen-exit', function() {
+                  scope.editMode = false;
+                  scope.fullscreen = false;
+                  delete scope.height;
+
+                  closeEditMode();
+
+                  $timeout(function() {
+                    if (oldTimeRange !== $scope.range) {
+                      scope.dashboard.refresh();
+                    }
+                    else {
+                      scope.$emit('render');
+                    }
+                  });
+                });
+              }
+
+              $(window).scrollTop(0);
+
+              scope.fullscreen = true;
+
+              $rootScope.$emit('panel-fullscreen-enter');
+
+              $timeout(function() {
+                scope.$emit('render');
+              });
+            }
+
+            scope.toggleFullscreenEdit = function() {
+              if (scope.editMode) {
+                $rootScope.$emit('panel-fullscreen-exit');
+                return;
+              }
+
+              enterFullscreenMode({edit: true});
+            };
+
+            $scope.toggleFullscreen = function() {
+              if (scope.fullscreen && !scope.editMode) {
+                $rootScope.$emit('panel-fullscreen-exit');
+                return;
+              }
+
+              enterFullscreenMode({ edit: false });
+            };
+
+            var menu = [
+              {
+                text: 'Edit',
+                configModal: "app/partials/paneleditor.html",
+                condition: !scope.panelMeta.fullscreenEdit
+              },
+              {
+                text: 'Edit',
+                click: "toggleFullscreenEdit()",
+                condition: scope.panelMeta.fullscreenEdit
+              },
+              {
+                text: "Fullscreen",
+                click: 'toggleFullscreen()',
+                condition: scope.panelMeta.fullscreenView
+              },
+              {
+                text: 'Duplicate',
+                click: 'duplicatePanel(panel)',
+                condition: true
+              },
+              {
+                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)' },
+                ],
+                condition: true
+              },
+              {
+                text: 'Remove',
+                click: 'remove_panel_from_row(row, panel)',
+                condition: true
+              }
+            ];
+
+            scope.panelMeta.menu = _.where(menu, { condition: true });
+          };
         }
       };
     });

src/app/panels/graphite/module.html

@@ -2,13 +2,6 @@
       ng-init="init()"
       style="min-height:{{panel.height || row.height}}"
       ng-class="{'panel-fullscreen': fullscreen}">
-  <div>
-    <span ng-show='panel.options'>
-      <a class="link underline small" ng-show='panel.options' ng-click="options=!options">
-        <i ng-show="!options" class="icon-caret-right"></i><i ng-show="options" class="icon-caret-down"></i> View
-      </a> |&nbsp
-    </span>
-  </div>
 
   <div style="position: relative">
 

src/app/panels/graphite/module.js

@@ -39,7 +39,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
     $scope.panelMeta = {
       modals : [],
       editorTabs: [],
-
       fullEditorTabs : [
         {
           title: 'General',
@@ -57,30 +56,9 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
           src:'app/panels/graphite/styleEditor.html'
         }
       ],
-
-      menuItems: [
-        { text: 'Edit',         click: 'openConfigureModal()' },
-        { text: 'Fullscreen',   click: 'toggleFullscreen()' },
-        { text: 'Duplicate',    click: 'duplicatePanel(panel)' },
-        { 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",
-      description : "Graphs panel"
+      fullscreenEdit: true,
+      fullscreenView: true,
+      description : "Graphing"
     };
 
     // Set and populate defaults
@@ -220,10 +198,10 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
     }
 
     $scope.init = function() {
-      // Hide view options by default
+      $scope.initPanel($scope);
+
       $scope.fullscreen = false;
-      $scope.options = false;
-      $scope.editor = {index: 1};
+      $scope.editor = { index: 1 };
       $scope.editorTabs = _.pluck($scope.panelMeta.fullEditorTabs,'title');
       $scope.hiddenSeries = {};
 
@@ -239,15 +217,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.get_data();
     };
 
-    $scope.remove_panel_from_row = function(row, panel) {
-      if ($scope.fullscreen) {
-        $rootScope.$emit('panel-fullscreen-exit');
-      }
-      else {
-        $scope.$parent.remove_panel_from_row(row, panel);
-      }
-    };
-
     $scope.removeTarget = function (target) {
       $scope.panel.targets = _.without($scope.panel.targets, target);
       $scope.get_data();
@@ -284,13 +253,13 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.annotationsPromise = annotationsSrv.getAnnotations($scope.rangeUnparsed);
 
       return $scope.datasource.query(graphiteQuery)
-        .then($scope.receiveGraphiteData)
+        .then($scope.dataHandler)
         .then(null, function(err) {
           $scope.panel.error = err.message || "Graphite HTTP Request Error";
         });
     };
 
-    $scope.receiveGraphiteData = function(results) {
+    $scope.dataHandler = function(results) {
       $scope.panelMeta.loading = false;
       $scope.legend = [];
 
@@ -300,44 +269,11 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
         return;
       }
 
-      results = results.data;
-      var data = [];
-
       $scope.datapointsWarning = false;
       $scope.datapointsCount = 0;
       $scope.datapointsOutside = false;
 
-      _.each(results, function(targetData) {
-        var datapoints = targetData.datapoints;
-        var alias = targetData.target;
-        var color = $scope.panel.aliasColors[alias] || $scope.colors[data.length];
-        var yaxis = $scope.panel.aliasYAxis[alias] || 1;
-
-        var seriesInfo = {
-          alias: alias,
-          color:  color,
-          enable: true,
-          yaxis: yaxis
-        };
-
-        var series = new timeSeries.ZeroFilled({
-          datapoints: datapoints,
-          info: seriesInfo,
-        });
-
-        if (datapoints && datapoints.length > 0) {
-          var last = moment.utc(datapoints[datapoints.length - 1][1] * 1000);
-          var from = moment.utc($scope.range.from);
-          if (last - from < -1000) {
-            $scope.datapointsOutside = true;
-          }
-        }
-
-        $scope.datapointsCount += datapoints.length;
-
-        $scope.legend.push(seriesInfo);
-        data.push(series);
-      });
+      var data = _.map(results.data, $scope.seriesHandler);
 
       $scope.datapointsWarning = $scope.datapointsCount || !$scope.datapointsOutside;
 
@@ -350,53 +286,39 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
         });
     };
 
-    $scope.add_target = function() {
-      $scope.panel.targets.push({target: ''});
-    };
+    $scope.seriesHandler = function(seriesData, index) {
+      var datapoints = seriesData.datapoints;
+      var alias = seriesData.target;
+      var color = $scope.panel.aliasColors[alias] || $scope.colors[index];
+      var yaxis = $scope.panel.aliasYAxis[alias] || 1;
+
+      var seriesInfo = {
+        alias: alias,
+        color:  color,
+        enable: true,
+        yaxis: yaxis
+      };
 
-    $scope.enterFullscreenMode = function(options) {
-      var docHeight = $(window).height();
-      var editHeight = Math.floor(docHeight * 0.3);
-      var fullscreenHeight = Math.floor(docHeight * 0.7);
-      var oldTimeRange = $scope.range;
-
-      $scope.height = options.edit ? editHeight : fullscreenHeight;
-      $scope.editMode = options.edit;
-
-      if (!$scope.fullscreen) {
-        var closeEditMode = $rootScope.$on('panel-fullscreen-exit', function() {
-          $scope.editMode = false;
-          $scope.fullscreen = false;
-          delete $scope.height;
-
-          closeEditMode();
-
-          $timeout(function() {
-            if (oldTimeRange !== $scope.range) {
-              $scope.dashboard.refresh();
-            }
-            else {
-              $scope.$emit('render');
-            }
-          });
-        });
-      }
+      var series = new timeSeries.ZeroFilled({
+        datapoints: datapoints,
+        info: seriesInfo,
+      });
 
-      $(window).scrollTop(0);
+      if (datapoints && datapoints.length > 0) {
+        var last = moment.utc(datapoints[datapoints.length - 1][1] * 1000);
+        var from = moment.utc($scope.range.from);
+        if (last - from < -1000) {
+          $scope.datapointsOutside = true;
+        }
+      }
 
-      $scope.fullscreen = true;
-      $rootScope.$emit('panel-fullscreen-enter');
+      $scope.datapointsCount += datapoints.length;
 
-      $timeout($scope.render);
+      return series;
     };
 
-    $scope.openConfigureModal = function() {
-      if ($scope.editMode) {
-        $rootScope.$emit('panel-fullscreen-exit');
-        return;
-      }
-
-      $scope.enterFullscreenMode({edit: true});
+    $scope.add_target = function() {
+      $scope.panel.targets.push({target: ''});
     };
 
     $scope.otherPanelInFullscreenMode = function() {
@@ -413,15 +335,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.render();
     };
 
-    $scope.toggleFullscreen = function() {
-      if ($scope.fullscreen && !$scope.editMode) {
-        $rootScope.$emit('panel-fullscreen-exit');
-        return;
-      }
-
-      $scope.enterFullscreenMode({edit: false});
-    };
-
     $scope.toggleSeries = function(info) {
       if ($scope.hiddenSeries[info.alias]) {
         delete $scope.hiddenSeries[info.alias];
@@ -444,11 +357,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.render();
     };
 
-    $scope.updateColumnSpan = function(span) {
-      $scope.panel.span = span;
-      $timeout($scope.render);
-    };
-
   });
 
 

src/app/panels/text/module.js

@@ -24,7 +24,6 @@ function (angular, app, _, require) {
 
   module.controller('text', function($scope) {
     $scope.panelMeta = {
-      status  : "Stable",
       description : "A static text panel that can use plain text, markdown, or (sanitized) HTML"
     };
 
@@ -45,6 +44,7 @@ function (angular, app, _, require) {
     _.defaults($scope.panel,_d);
 
     $scope.init = function() {
+      $scope.initPanel($scope);
       $scope.ready = false;
     };