Panels: refactoring panel meta model & menu, will open up panel specific menu actions

src/app/components/panelmeta.js

@@ -0,0 +1,45 @@
+define([
+],
+function () {
+  "use strict";
+
+  function PanelMeta(options) {
+    this.description = options.description;
+    this.titlePos = options.titlePos;
+    this.fullscreen = options.fullscreen;
+    this.menu = [];
+    this.editorTabs = [];
+    this.extendedMenu = [];
+
+    if (options.fullscreen) {
+      this.addMenuItem('view', 'icon-eye-open', 'toggleFullscreen(false)');
+    }
+
+    this.addMenuItem('edit', 'icon-cog', 'editPanel()');
+    this.addMenuItem('duplicate', 'icon-copy', 'duplicatePanel()');
+    this.addMenuItem('share', 'icon-share', 'sharePanel()');
+
+    this.addEditorTab('General', 'app/partials/panelgeneral.html');
+
+    if (options.metricsEditor) {
+      this.addEditorTab('General', 'app/partials/metrics.html');
+    }
+
+    this.addExtendedMenuItem('Panel JSON', '', 'editPanelJson()');
+  }
+
+  PanelMeta.prototype.addMenuItem = function(text, icon, click) {
+    this.menu.push({text: text, icon: icon, click: click});
+  };
+
+  PanelMeta.prototype.addExtendedMenuItem = function(text, icon, click) {
+    this.extendedMenu.push({text: text, icon: icon, click: click});
+  };
+
+  PanelMeta.prototype.addEditorTab = function(title, src) {
+    this.editorTabs.push({title: title, src: src});
+  };
+
+  return PanelMeta;
+
+});

src/app/controllers/dashboardCtrl.js

@@ -109,14 +109,6 @@ function (angular, $, config, _) {
       $scope.submenuEnabled = $scope.dashboard.templating.enable || $scope.dashboard.annotations.enable;
     };
 
-    $scope.setEditorTabs = function(panelMeta) {
-      $scope.editorTabs = ['General','Panel'];
-      if(!_.isUndefined(panelMeta.editorTabs)) {
-        $scope.editorTabs =  _.union($scope.editorTabs,_.pluck(panelMeta.editorTabs,'title'));
-      }
-      return $scope.editorTabs;
-    };
-
     $scope.onDrop = function(panelId, row, dropTarget) {
       var info = $scope.dashboard.getPanelInfoById(panelId);
       if (dropTarget) {

src/app/directives/panelMenu.js

@@ -22,7 +22,7 @@ function (angular, $, _) {
         template += '</div>';
 
         template += '<div class="panel-menu-row">';
-        template += '<a class="panel-menu-link" bs-dropdown="[{text: \'hej\'}]"><i class="icon-th-list"></i></a>';
+        template += '<a class="panel-menu-link" bs-dropdown="panelMeta.extendedMenu"><i class="icon-th-list"></i></a>';
 
         _.each($scope.panelMeta.menu, function(item) {
           template += '<a class="panel-menu-link" ';
@@ -97,7 +97,7 @@ function (angular, $, _) {
             $menu = $(menuTemplate);
             $menu.css('left', menuLeftPos);
             $menu.mouseleave(function() {
-              dismiss(1000);
+              //dismiss(1000);
             });
 
             menuScope = $scope.$new();
@@ -111,7 +111,7 @@ function (angular, $, _) {
             $(".panel-container").removeClass('panel-highlight');
             $panelContainer.toggleClass('panel-highlight');
 
-            dismiss(2500);
+            //dismiss(2500);
           };
 
           if ($scope.panelMeta.titlePos && $scope.panel.title) {

src/app/panels/graph/module.html

@@ -26,13 +26,13 @@
 			</div>
 
 			<div ng-model="editor.index" bs-tabs>
-				<div ng-repeat="tab in editorTabs" data-title="{{tab}}">
+				<div ng-repeat="tab in panelMeta.editorTabs" data-title="{{tab.title}}">
 				</div>
 			</div>
 		</div>
 
 		<div class="dashboard-editor-body">
-			<div ng-repeat="tab in panelMeta.fullEditorTabs" ng-if="editorTabs[editor.index] == tab.title">
+			<div ng-repeat="tab in panelMeta.editorTabs" ng-if="editor.index === $index">
 				<div ng-include src="tab.src"></div>
 			</div>
 		</div>

src/app/panels/graph/module.js

@@ -6,6 +6,7 @@ define([
   'kbn',
   'moment',
   'components/timeSeries',
+  'components/panelmeta',
   './seriesOverridesCtrl',
   './legend',
   'services/panelSrv',
@@ -20,68 +21,35 @@ define([
   'jquery.flot.fillbelow',
   'jquery.flot.crosshair'
 ],
-function (angular, app, $, _, kbn, moment, TimeSeries) {
+function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
   'use strict';
 
   var module = angular.module('grafana.panels.graph');
 
   module.controller('GraphCtrl', function($scope, $rootScope, panelSrv, annotationsSrv, timeSrv) {
 
-    $scope.panelMeta = {
-      editorTabs: [],
-      fullEditorTabs : [
-        {
-          title: 'General',
-          src:'app/partials/panelgeneral.html'
-        },
-        {
-          title: 'Metrics',
-          src:'app/partials/metrics.html'
-        },
-        {
-          title:'Axes & Grid',
-          src:'app/panels/graph/axisEditor.html'
-        },
-        {
-          title:'Display Styles',
-          src:'app/panels/graph/styleEditor.html'
-        }
-      ],
-      fullscreenEdit: true,
-      fullscreenView: true,
-      description : "Graphing"
-    };
+    $scope.panelMeta = new PanelMeta({
+      description: 'Graph panel',
+      fullscreen: true,
+      metricsEditor: true
+    });
+
+    $scope.panelMeta.addEditorTab('Axes & Grid', 'app/panels/graph/axisEditor.html');
+    $scope.panelMeta.addEditorTab('Display Styles', 'app/panels/graph/styleEditor.html');
 
     // Set and populate defaults
     var _d = {
-
+      // datasource name, null = default datasource
       datasource: null,
-
-      /** @scratch /panels/histogram/3
-       * renderer:: sets client side (flot) or native graphite png renderer (png)
-       */
+       // sets client side (flot) or native graphite png renderer (png)
       renderer: 'flot',
-      /** @scratch /panels/histogram/3
-       * x-axis:: Show the x-axis
-       */
+       // Show/hide the x-axis
       'x-axis'      : true,
-      /** @scratch /panels/histogram/3
-       * y-axis:: Show the y-axis
-       */
+      // Show/hide y-axis
       'y-axis'      : true,
-      /** @scratch /panels/histogram/3
-       * scale:: Scale the y-axis by this factor
-       */
-      scale         : 1,
-      /** @scratch /panels/histogram/3
-       * y_formats :: 'none','bytes','bits','bps','short', 's', 'ms'
-       */
+      // y axis formats, [left axis,right axis]
       y_formats    : ['short', 'short'],
-      /** @scratch /panels/histogram/5
-       * grid object:: Min and max y-axis values
-       * grid.min::: Minimum y-axis value
-       * grid.ma1::: Maximum y-axis value
-       */
+      // grid options
       grid          : {
         leftMax: null,
         rightMax: null,
@@ -92,48 +60,23 @@ function (angular, app, $, _, kbn, moment, TimeSeries) {
         threshold1Color: 'rgba(216, 200, 27, 0.27)',
         threshold2Color: 'rgba(234, 112, 112, 0.22)'
       },
-
-      annotate      : {
-        enable      : false,
-      },
-
-      /** @scratch /panels/histogram/3
-       * resolution:: If auto_int is true, shoot for this many bars.
-       */
-      resolution    : 100,
-
-      /** @scratch /panels/histogram/3
-       * ==== Drawing options
-       * lines:: Show line chart
-       */
+      // show/hide lines
       lines         : true,
-      /** @scratch /panels/histogram/3
-       * fill:: Area fill factor for line charts, 1-10
-       */
+      // fill factor
       fill          : 0,
-      /** @scratch /panels/histogram/3
-       * linewidth:: Weight of lines in pixels
-       */
+      // line width in pixels
       linewidth     : 1,
-      /** @scratch /panels/histogram/3
-       * points:: Show points on chart
-       */
+      // show hide points
       points        : false,
-      /** @scratch /panels/histogram/3
-       * pointradius:: Size of points in pixels
-       */
+      // point radius in pixels
       pointradius   : 5,
-      /** @scratch /panels/histogram/3
-       * bars:: Show bars on chart
-       */
+      // show hide bars
       bars          : false,
-      /** @scratch /panels/histogram/3
-       * stack:: Stack multiple series
-       */
+      // enable/disable stacking
       stack         : false,
-      /** @scratch /panels/histogram/3
-       * legend:: Display the legend
-       */
+      // stack percentage mode
+      percentage    : false,
+      // legend options
       legend: {
         show: true, // disable/enable legend
         values: false, // disable/enable legend values
@@ -143,27 +86,20 @@ function (angular, app, $, _, kbn, moment, TimeSeries) {
         total: false,
         avg: false
       },
-      /** @scratch /panels/histogram/3
-       * ==== Transformations
-      /** @scratch /panels/histogram/3
-       * percentage:: Show the y-axis as a percentage of the axis total. Only makes sense for multiple
-       * queries
-       */
-      percentage    : false,
-
+      // how null points should be handled
       nullPointMode : 'connected',
-
+      // staircase line mode
       steppedLine: false,
-
+      // tooltip options
       tooltip       : {
         value_type: 'cumulative',
         shared: false,
       },
-
+      // metric queries
       targets: [{}],
-
+      // series color overrides
       aliasColors: {},
-
+      // other style overrides
       seriesOverrides: [],
     };
 

src/app/panels/singlestat/module.html

@@ -12,13 +12,13 @@
 			</div>
 
 			<div ng-model="editor.index" bs-tabs>
-				<div ng-repeat="tab in editorTabs" data-title="{{tab}}">
+				<div ng-repeat="tab in panelMeta.editorTabs" data-title="{{tab.title}}">
 				</div>
 			</div>
 		</div>
 
 		<div class="dashboard-editor-body">
-			<div ng-repeat="tab in panelMeta.fullEditorTabs" ng-if="editorTabs[editor.index] == tab.title">
+			<div ng-repeat="tab in panelMeta.editorTabs" ng-if="editor.index === $index">
 				<div ng-include src="tab.src"></div>
 			</div>
 		</div>

src/app/panels/singlestat/module.js

@@ -4,10 +4,11 @@ define([
   'lodash',
   'components/timeSeries',
   'kbn',
+  'components/panelmeta',
   'services/panelSrv',
   './singleStatPanel',
 ],
-function (angular, app, _, TimeSeries, kbn) {
+function (angular, app, _, TimeSeries, kbn, PanelMeta) {
   'use strict';
 
   var module = angular.module('grafana.panels.singlestat');
@@ -15,25 +16,14 @@ function (angular, app, _, TimeSeries, kbn) {
 
   module.controller('SingleStatCtrl', function($scope, panelSrv, timeSrv) {
 
-    $scope.panelMeta = {
+    $scope.panelMeta = new PanelMeta({
+      description: 'Singlestat panel',
       titlePos: 'left',
-      description : "A stats values panel",
-      fullEditorTabs : [
-        {
-          title: 'General',
-          src:'app/partials/panelgeneral.html'
-        },
-        {
-          title: 'Metrics',
-          src:'app/partials/metrics.html'
-        },
-        {
-          title: 'Options',
-          src:'app/panels/singlestat/editor.html'
-        }
-      ],
-      fullscreenEdit: true,
-    };
+      fullscreen: true,
+      metricsEditor: true
+    });
+
+    $scope.panelMeta.addEditorTab('Options', 'app/panels/singlestat/editor.html');
 
     // Set and populate defaults
     var _d = {

src/app/panels/singlestat/singleStatPanel.js

@@ -2,12 +2,10 @@ define([
   'angular',
   'app',
   'lodash',
-  'kbn',
   'jquery',
   'jquery.flot',
-  'jquery.flot.time',
 ],
-function (angular, app, _, kbn, $) {
+function (angular, app, _, $) {
   'use strict';
 
   var module = angular.module('grafana.panels.singlestat', []);

src/app/panels/text/module.js

@@ -3,8 +3,9 @@ define([
   'app',
   'lodash',
   'require',
+  'components/panelmeta',
 ],
-function (angular, app, _, require) {
+function (angular, app, _, require, PanelMeta) {
   'use strict';
 
   var module = angular.module('grafana.panels.text', []);
@@ -14,13 +15,15 @@ function (angular, app, _, require) {
 
   module.controller('text', function($scope, templateSrv, $sce, panelSrv) {
 
-    $scope.panelMeta = {
+    $scope.panelMeta = new PanelMeta({
       description : "A static text panel that can use plain text, markdown, or (sanitized) HTML"
-    };
+    });
+
+    $scope.panelMeta.addEditorTab('Edit text', 'app/panels/text/editor.html');
 
     // Set and populate defaults
     var _d = {
-      title: 'default title',
+      title   : 'default title',
       mode    : "markdown", // 'html', 'markdown', 'text'
       content : "",
       style: {},

src/app/partials/paneleditor.html

@@ -5,22 +5,14 @@
 	</div>
 
 	<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
-		<div ng-repeat="tab in setEditorTabs(panelMeta)" data-title="{{tab}}">
+		<div ng-repeat="tab in panelMeta.editorTabs" data-title="{{tab.title}}">
 		</div>
 	</div>
 
 </div>
 
 <div class="dashboard-editor-body">
-	<div ng-show="editorTabs[editor.index] == 'General'">
-		<div ng-include src="'app/partials/panelgeneral.html'"></div>
-	</div>
-
-	<div ng-show="editorTabs[editor.index] == 'Panel'">
-		<div ng-include src="panelEditorPath(panel.type)"></div>
-	</div>
-
-	<div ng-repeat="tab in panelMeta.editorTabs" ng-show="editorTabs[editor.index] == tab.title">
+	<div ng-repeat="tab in panelMeta.editorTabs" ng-show="editor.index == $index">
 		<div ng-include src="tab.src"></div>
 	</div>
 </div>

src/app/services/panelSrv.js

@@ -11,44 +11,10 @@ function (angular, _) {
     this.init = function($scope) {
       if (!$scope.panel.span) { $scope.panel.span = 12; }
 
-      var menu = [
-        {
-          text: "view",
-          icon: "icon-eye-open",
-          click: 'toggleFullscreen(false)',
-          condition: $scope.panelMeta.fullscreenView
-        },
-        {
-          text: 'edit',
-          icon: 'icon-cogs',
-          click: 'editPanel()',
-          condition: true,
-        },
-        {
-          text: 'duplicate',
-          icon: 'icon-copy',
-          click: 'duplicatePanel(panel)',
-          condition: true
-        },
-        {
-          text: 'json',
-          icon: 'icon-code',
-          click: 'editPanelJson()',
-          condition: true
-        },
-        {
-          text: 'share',
-          icon: 'icon-share',
-          click: 'sharePanel()',
-          condition: true
-        },
-      ];
-
       $scope.inspector = {};
-      $scope.panelMeta.menu = _.where(menu, { condition: true });
 
       $scope.editPanel = function() {
-        if ($scope.panelMeta.fullscreenEdit) {
+        if ($scope.panelMeta.fullscreen) {
           $scope.toggleFullscreen(true);
         }
         else {
@@ -118,9 +84,6 @@ function (angular, _) {
       // Post init phase
       $scope.fullscreen = false;
       $scope.editor = { index: 1 };
-      if ($scope.panelMeta.fullEditorTabs) {
-        $scope.editorTabs = _.pluck($scope.panelMeta.fullEditorTabs, 'title');
-      }
 
       $scope.datasources = datasourceSrv.getMetricSources();
       $scope.setDatasource($scope.panel.datasource);

src/css/less/panel.less

@@ -93,6 +93,10 @@
       border: none;
     }
   }
+
+  .dropdown-menu {
+    text-align: left;
+  }
 }
 
 .panel-highlight  {

src/css/less/variables.dark.less

@@ -146,7 +146,7 @@
 
 // Dropdowns
 // -------------------------
-@dropdownBackground:            @grafanaTargetFuncBackground;
+@dropdownBackground:            @heroUnitBackground;
 @dropdownBorder:                rgba(0,0,0,.2);
 @dropdownDividerTop:            transparent;
 @dropdownDividerBottom:         #222;