Closes ##278, improvements in row height matching, refactorings of base kibana panel features into PanelBaseCtrl

src/app/controllers/panelBaseCtrl.js

@@ -0,0 +1,130 @@
+define([
+  'angular',
+  'underscore',
+  'jquery'
+],
+function (angular, _, $) {
+  'use strict';
+
+  function PanelBaseCtrl($scope, $rootScope, $timeout) {
+
+    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.inspector = {};
+    $scope.panelMeta.menu = _.where(menu, { condition: true });
+
+    $scope.updateColumnSpan = function(span) {
+      $scope.panel.span = span;
+
+      $timeout(function() {
+        $scope.$emit('render');
+      });
+    };
+
+    $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');
+            }
+          });
+        });
+      }
+
+      $(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;
+      }
+
+      $scope.enterFullscreenMode({edit: true});
+    };
+
+    $scope.toggleFullscreen = function() {
+      if ($scope.fullscreen && !$scope.editMode) {
+        $rootScope.$emit('panel-fullscreen-exit');
+        return;
+      }
+
+      $scope.enterFullscreenMode({ edit: false });
+    };
+
+  }
+
+  return PanelBaseCtrl;
+
+});

src/app/directives/grafanaGraph.js

@@ -46,10 +46,14 @@ function (angular, $, kbn, moment, _) {
         function setElementHeight() {
           try {
             var height = scope.height || scope.panel.height || scope.row.height;
-            height = height.replace('px', '') - 32; // subtract panel title bar
+            if (_.isString(height)) {
+              height = parseInt(height.replace('px', ''), 10);
+            }
+
+            height = height - 32; // subtract panel title bar
 
             if (scope.panel.legend.show) {
-              height = height - 35; // subtract one line legend
+              height = height - 21; // subtract one line legend
             }
 
             elem.css('height', height + 'px');
@@ -64,6 +68,7 @@ function (angular, $, kbn, moment, _) {
           if (!data) {
             return true;
           }
+
           if ($rootScope.fullscreen && !scope.fullscreen) {
             return true;
           }

src/app/directives/kibanaPanel.js

@@ -1,14 +1,15 @@
 define([
   'angular',
   'jquery',
-  'underscore'
+  'underscore',
+  '../controllers/PanelBaseCtrl'
 ],
-function (angular, $, _) {
+function (angular, $, _, PanelBaseCtrl) {
   'use strict';
 
   angular
     .module('kibana.directives')
-    .directive('kibanaPanel', function($compile, $timeout, $rootScope) {
+    .directive('kibanaPanel', function($compile, $timeout, $rootScope, $injector) {
 
       var container = '<div class="panel-container"></div>';
       var content = '<div class="panel-content"></div>';
@@ -23,7 +24,7 @@ function (angular, $, _) {
           '</div>' +
         '</div>\n' +
 
-        '<div class="row-fluid panel-extra">' +
+        '<div class="row-fluid panel-extra" ng-hide="panel.hide_title">' +
           '<div class="panel-extra-container">' +
 
             '<span class="panel-loading" ng-show="panelMeta.loading == true">' +
@@ -79,6 +80,10 @@ function (angular, $, _) {
             elem.remove();
           });
 
+          newScope.initBaseController = function(self, scope) {
+            $injector.invoke(PanelBaseCtrl, self, { $scope: scope });
+          };
+
           $scope.$watch(attr.type, function (name) {
             elem.addClass("ng-cloak");
             // load the panels module file, then render it in the dom.
@@ -107,125 +112,6 @@ 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.inspector = {};
-            scope.panelMeta.menu = _.where(menu, { condition: true });
-          };
         }
       };
     });

src/app/panels/graphite/module.js

@@ -199,7 +199,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
     }
 
     $scope.init = function() {
-      $scope.initPanel($scope);
+      $scope.initBaseController(this, $scope);
 
       $scope.fullscreen = false;
       $scope.editor = { index: 1 };

src/app/panels/text/module.html

@@ -1,4 +1,4 @@
-<div ng-controller='text' ng-init="init()" style="min-height:{{panel.height || row.height}}">
+<div ng-controller='text' ng-init="init()" style="min-height:{{panel.height || row.height}}" ng-dblclick="openEditor()">
   <!--<p ng-style="panel.style" ng-bind-html-unsafe="panel.content | striphtml | newlines"></p>-->
   <markdown ng-show="ready && panel.mode == 'markdown'">
     {{panel.content}}

src/app/panels/text/module.js

@@ -23,28 +23,23 @@ function (angular, app, _, require) {
   app.useModule(module);
 
   module.controller('text', function($scope) {
+
     $scope.panelMeta = {
       description : "A static text panel that can use plain text, markdown, or (sanitized) HTML"
     };
 
     // Set and populate defaults
     var _d = {
-      /** @scratch /panels/text/5
-       * === Parameters
-       *
-       * mode:: `html', `markdown' or `text'
-       */
-      mode    : "markdown", // 'html','markdown','text'
-      /** @scratch /panels/text/5
-       * content:: The content of your panel, written in the mark up specified in +mode+
-       */
+      mode    : "markdown", // 'html', 'markdown', 'text'
       content : "",
       style: {},
     };
+
     _.defaults($scope.panel,_d);
 
     $scope.init = function() {
-      $scope.initPanel($scope);
+      $scope.initBaseController(this, $scope);
+
       $scope.ready = false;
     };
 
@@ -52,6 +47,11 @@ function (angular, app, _, require) {
       $scope.$emit('render');
     };
 
+    $scope.openEditor = function() {
+      //$scope.$emit('open-modal','paneleditor');
+      console.log('scope id', $scope.$id);
+    };
+
   });
 
   module.directive('markdown', function() {

src/app/partials/panelgeneral.html

@@ -8,13 +8,8 @@
       <label class="small">Span</label> <select class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
     </div>
     <div class="editor-option">
-      <label class="small">Editable</label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable">
-    </div>
-    <div class="editor-option" ng-show="!_.isUndefined(panel.spyable)">
-      <label class="small">
-        Inspect <i class="icon-question-sign" bs-tooltip="'Allow query reveal via <i class=icon-eye-open></i>'"></i>
-      </label>
-      <input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
+      <label class="small">Hide title</label>
+      <input type="checkbox" ng-model="panel.hide_title" ng-checked="panel.hide_title">
     </div>
   </div>
 </div>

src/css/less/grafana.less

@@ -158,8 +158,11 @@
 // Graphite Graph Legends
 
 .grafana-legend-container {
-  margin: 4px 15px;
+  margin: 0 15px;
   text-align: left;
+  overflow: hidden;
+  position: relative;
+  top: 2px;
 }
 
 .grafana-legend-container .popover-content {