diff --git a/src/app/components/panelmeta.js b/src/app/components/panelmeta.js new file mode 100644 index 00000000000..1039641f742 --- /dev/null +++ b/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; + +}); diff --git a/src/app/controllers/dashboardCtrl.js b/src/app/controllers/dashboardCtrl.js index 294862d5fae..d69978dcdea 100644 --- a/src/app/controllers/dashboardCtrl.js +++ b/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) { diff --git a/src/app/directives/panelMenu.js b/src/app/directives/panelMenu.js index 18062d19af7..94d8d3cc070 100644 --- a/src/app/directives/panelMenu.js +++ b/src/app/directives/panelMenu.js @@ -22,7 +22,7 @@ function (angular, $, _) { template += ''; template += '
'; - template += ''; + template += ''; _.each($scope.panelMeta.menu, function(item) { template += '
-
+
-
+
diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js index 0da63bef1d0..3e7506cccb4 100644 --- a/src/app/panels/graph/module.js +++ b/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: [], }; diff --git a/src/app/panels/singlestat/module.html b/src/app/panels/singlestat/module.html index b27d9917353..e59fb82f303 100644 --- a/src/app/panels/singlestat/module.html +++ b/src/app/panels/singlestat/module.html @@ -12,13 +12,13 @@
-
+
-
+
diff --git a/src/app/panels/singlestat/module.js b/src/app/panels/singlestat/module.js index 87d81e6ed07..1c1c2a3d0bb 100644 --- a/src/app/panels/singlestat/module.js +++ b/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 = { diff --git a/src/app/panels/singlestat/singleStatPanel.js b/src/app/panels/singlestat/singleStatPanel.js index 74823ae83e5..90a718ca118 100644 --- a/src/app/panels/singlestat/singleStatPanel.js +++ b/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', []); diff --git a/src/app/panels/text/module.js b/src/app/panels/text/module.js index 1401cff50b2..ceb6bcf745c 100644 --- a/src/app/panels/text/module.js +++ b/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: {}, diff --git a/src/app/partials/paneleditor.html b/src/app/partials/paneleditor.html index d1a5c5eaab8..cd2555fbf8a 100644 --- a/src/app/partials/paneleditor.html +++ b/src/app/partials/paneleditor.html @@ -5,22 +5,14 @@
-
+
-
-
-
- -
-
-
- -
+
diff --git a/src/app/services/panelSrv.js b/src/app/services/panelSrv.js index faa37b4e057..9c429438b08 100644 --- a/src/app/services/panelSrv.js +++ b/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); diff --git a/src/css/less/panel.less b/src/css/less/panel.less index a2891fb6291..8dd1dccdd45 100644 --- a/src/css/less/panel.less +++ b/src/css/less/panel.less @@ -93,6 +93,10 @@ border: none; } } + + .dropdown-menu { + text-align: left; + } } .panel-highlight { diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index d2acddb13ac..42ab0bba861 100644 --- a/src/css/less/variables.dark.less +++ b/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;