Panel: plugins panels can now reside outsude the app/panels directory, added example plugin panel

1330488e · Torkel Ödegaard · 920689b8 · 1330488e · 1330488e · 1330488e
Commit 1330488e authored Oct 14, 2014 by Torkel Ödegaard
11 changed files
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,8 +3,10 @@
 **UI Improvements*
 - [Issue #770](https://github.com/grafana/grafana/issues/770). UI: Panel dropdown menu replaced with a new panel menu
+**Misc**
 - [Issue #877](https://github.com/grafana/grafana/issues/877). Graph: Smart auto decimal precision when using scaled unit formats
 - [Issue #850](https://github.com/grafana/grafana/issues/850). Graph: Shared tooltip that shows multiple series & crosshair line, thx @toni-moreno
+- [Issue #938](https://github.com/grafana/grafana/issues/938). Panel: Plugin panels now reside outside of app/panels directory
 **Fixes**
 - [Issue #925](https://github.com/grafana/grafana/issues/925). Graph: bar width calculation fix for some edge cases (bars would render on top of each other)

--- a/src/app/app.js
+++ b/src/app/app.js
@@ -57,7 +57,6 @@ function (angular, $, _, appLevelRequire, config) {
    register_fns.factory    = $provide.factory;
    register_fns.service    = $provide.service;
    register_fns.filter     = $filterProvider.register;
  });
  var apps_deps = [

--- a/src/app/components/settings.js
+++ b/src/app/components/settings.js
@@ -15,7 +15,10 @@ function (_, crypto) {
    var defaults = {
      datasources                   : {},
      window_title_prefix           : 'Grafana - ',
-      panels                        : ['graph', 'text'],
+      panels                        : {
+        'graph': { path: 'panels/graph' },
+        'text': { path: 'panels/text' }
+      },
      plugins                       : {},
      default_route                 : '/dashboard/file/default.json',
      playlist_timespan             : "1m",
@@ -76,7 +79,7 @@ function (_, crypto) {
    });
    if (settings.plugins.panels) {
-      settings.panels = _.union(settings.panels, settings.plugins.panels);
+      _.extend(settings.panels, settings.plugins.panels);
    }
    if (!settings.plugins.dependencies) {

--- a/src/app/controllers/dashboardCtrl.js
+++ b/src/app/controllers/dashboardCtrl.js
@@ -21,7 +21,7 @@ function (angular, $, config, _) {
      $timeout) {
    $scope.editor = { index: 0 };
-    $scope.panelNames = config.panels;
+    $scope.panelNames = _.map(config.panels, function(value, key) { return key; });
    var resizeEventTimeout;
    this.init = function(dashboardData) {
@@ -90,21 +90,12 @@ function (angular, $, config, _) {
      };
    };
-    $scope.edit_path = function(type) {
+    $scope.panelEditorPath = function(type) {
-      var p = $scope.panel_path(type);
+      return 'app/' + config.panels[type].path + '/editor.html';
-      if(p) {
-        return p+'/editor.html';
-      } else {
-        return false;
-      }
    };
-    $scope.panel_path =function(type) {
+    $scope.pulldownEditorPath = function(type) {
-      if(type) {
+      return 'app/panels/'+type+'/editor.html';
-        return 'app/panels/'+type.replace(".","/");
-      } else {
-        return false;
-      }
    };
    $scope.showJsonEditor = function(evt, options) {

--- a/src/app/controllers/graphiteTarget.js
+++ b/src/app/controllers/graphiteTarget.js
@@ -201,7 +201,7 @@ function (angular, _, config, gfunc, Parser) {
    $scope.targetTextChanged = function() {
      parseTarget();
-      $scope.$parent.get_data();
+      $scope.get_data();
    };
    $scope.targetChanged = function() {

--- a/src/app/directives/grafanaPanel.js
+++ b/src/app/directives/grafanaPanel.js
 define([
  'angular',
  'jquery',
+  'config',
  './panelMenu',
 ],
-function (angular, $) {
+function (angular, $, config) {
  'use strict';
  angular
@@ -68,10 +69,12 @@ function (angular, $) {
          elem.addClass('ng-cloak');
+          var panelPath = config.panels[panelType].path;
          $scope.require([
            'jquery',
-            'text!panels/'+panelType+'/module.html',
+            'text!'+panelPath+'/module.html',
-            'panels/' + panelType + "/module",
+            panelPath + "/module",
          ], function ($, moduleTemplate) {
            var $module = $(moduleTemplate);
            $module.prepend(panelHeader);

--- a/src/app/partials/dasheditor.html
+++ b/src/app/partials/dasheditor.html
@@ -84,7 +84,7 @@
 		</div>
 		<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 4+$index">
-			<ng-include ng-show="pulldown.enable" src="edit_path(pulldown.type)"></ng-include>
+			<ng-include ng-show="pulldown.enable" src="pulldownEditorPath(pulldown.type)"></ng-include>
 			<button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button>
 		</div>

--- a/src/app/partials/paneleditor.html
+++ b/src/app/partials/paneleditor.html
@@ -17,7 +17,7 @@
 	</div>
 	<div ng-show="editorTabs[editor.index] == 'Panel'">
-		<div ng-include src="edit_path(panel.type)"></div>
+		<div ng-include src="panelEditorPath(panel.type)"></div>
 	</div>
 	<div ng-repeat="tab in panelMeta.editorTabs" ng-show="editorTabs[editor.index] == tab.title">

--- a/src/plugins/custom.panel.example/editor.html
+++ b/src/plugins/custom.panel.example/editor.html
+<div>
+  <div class="row-fluid">
+    <div class="span4">
+      <label class="small">Mode</label> <select class="input-medium" ng-model="panel.mode" ng-options="f for f in ['html','markdown','text']"></select>
+    </div>
+    <div class="span2" ng-show="panel.mode == 'text'">
+      <label class="small">Font Size</label> <select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['6pt','7pt','8pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select>
+    </div>
+  </div>
+</div>
--- a/src/plugins/custom.panel.example/module.html
+++ b/src/plugins/custom.panel.example/module.html
+<div ng-controller='CustomPanelCtrl'>
+	<h2>Custom panel</h2>
+</div>
--- a/src/plugins/custom.panel.example/module.js
+++ b/src/plugins/custom.panel.example/module.js
+define([
+  'angular',
+  'app',
+  'lodash',
+  'require',
+],
+function (angular, app, _) {
+  'use strict';
+  var module = angular.module('grafana.panels.custom', []);
+  app.useModule(module);
+  module.controller('CustomPanelCtrl', function($scope, panelSrv) {
+    $scope.panelMeta = {
+      description : "Example plugin panel",
+    };
+    // set and populate defaults
+    var _d = {
+    };
+    _.defaults($scope.panel, _d);
+    $scope.init = function() {
+      panelSrv.init($scope);
+    };
+    $scope.init();
+  });
+});