From 04ec2224621c159832ef41dac2ad45385e17ae4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 2 Feb 2015 21:59:04 +0100 Subject: [PATCH] Big refactoring of the way panels are loaded and how they are built using directives, this way feel cleaner and allowed for placing the panel edit box outside the panel-container --- src/app/components/panelmeta.js | 2 + src/app/components/settings.js | 2 +- src/app/controllers/search.js | 1 - src/app/directives/all.js | 1 - src/app/directives/grafanaPanel.js | 80 ------------------- .../features/account/partials/account.html | 40 ++++------ src/app/features/all.js | 1 + src/app/features/dashboard/all.js | 1 - src/app/features/dashboard/viewStateSrv.js | 4 +- src/app/features/panel/all.js | 5 ++ src/app/features/panel/panelDirective.js | 40 ++++++++++ .../panel}/panelMenu.js | 0 .../features/{dashboard => panel}/panelSrv.js | 0 src/app/features/panel/partials/panel.html | 42 ++++++++++ src/app/panels/graph/module.html | 21 +---- src/app/panels/graph/module.js | 10 ++- src/app/panels/singlestat/module.html | 26 +----- src/app/panels/singlestat/module.js | 12 ++- src/app/panels/text/module.html | 7 +- src/app/panels/text/module.js | 15 +++- src/app/partials/dashboard.html | 7 +- src/app/partials/paneleditor.html | 22 ----- src/app/routes/backend/dashboard.js | 2 +- src/css/less/gfbox.less | 4 - src/css/less/panel.less | 24 ++++-- src/test/specs/graph-ctrl-specs.js | 2 +- 26 files changed, 167 insertions(+), 204 deletions(-) delete mode 100644 src/app/directives/grafanaPanel.js create mode 100644 src/app/features/panel/all.js create mode 100644 src/app/features/panel/panelDirective.js rename src/app/{directives => features/panel}/panelMenu.js (100%) rename src/app/features/{dashboard => panel}/panelSrv.js (100%) create mode 100644 src/app/features/panel/partials/panel.html delete mode 100644 src/app/partials/paneleditor.html diff --git a/src/app/components/panelmeta.js b/src/app/components/panelmeta.js index fc26f1c3d0e..4ee4a9b9b55 100644 --- a/src/app/components/panelmeta.js +++ b/src/app/components/panelmeta.js @@ -6,6 +6,8 @@ function () { function PanelMeta(options) { this.description = options.description; this.fullscreen = options.fullscreen; + this.editIcon = options.editIcon; + this.panelName = options.panelName; this.menu = []; this.editorTabs = []; this.extendedMenu = []; diff --git a/src/app/components/settings.js b/src/app/components/settings.js index 98c57d40084..f21c0826058 100644 --- a/src/app/components/settings.js +++ b/src/app/components/settings.js @@ -18,7 +18,7 @@ function (_, crypto) { panels : { 'graph': { path: 'panels/graph' }, 'singlestat': { path: 'panels/singlestat' }, - 'text': { path: 'panels/text' } + 'text': { path: 'panels/text' }, }, plugins : {}, default_route : '/dashboard/file/default.json', diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js index 192f4099fb9..d501f01a81f 100644 --- a/src/app/controllers/search.js +++ b/src/app/controllers/search.js @@ -143,7 +143,6 @@ function (angular, _, config, $) { }; $scope.newDashboard = function() { - //$location.path('/dashboard/file/empty.json'); $location.url('dashboard/new'); }; diff --git a/src/app/directives/all.js b/src/app/directives/all.js index 4126ec81b9a..6190ef89099 100644 --- a/src/app/directives/all.js +++ b/src/app/directives/all.js @@ -1,7 +1,6 @@ define([ './arrayJoin', './dashUpload', - './grafanaPanel', './grafanaSimplePanel', './ngBlur', './dashEditLink', diff --git a/src/app/directives/grafanaPanel.js b/src/app/directives/grafanaPanel.js deleted file mode 100644 index 4c7a0562b58..00000000000 --- a/src/app/directives/grafanaPanel.js +++ /dev/null @@ -1,80 +0,0 @@ -define([ - 'angular', - 'jquery', - 'config', - './panelMenu', -], -function (angular, $, config) { - 'use strict'; - - angular - .module('grafana.directives') - .directive('grafanaPanel', function($compile, $parse) { - - var container = '
'; - var content = '
'; - - var panelHeader = - '
'+ - '' + - '' + - '' + - '' + - '' + - - '' + - '' + - '' + - - '
' + - '
'+ - ''; - - return { - restrict: 'E', - link: function($scope, elem, attr) { - var getter = $parse(attr.type), panelType = getter($scope); - var newScope = $scope.$new(); - - // compile the module and uncloack. We're done - function loadModule($module) { - $module.appendTo(elem); - elem.wrap(container); - - $compile(elem.contents())(newScope); - elem.removeClass("ng-cloak"); - - var panelCtrlElem = $(elem.children()[0]); - var panelCtrlScope = panelCtrlElem.data().$scope; - - panelCtrlScope.$watchGroup(['fullscreen', 'panel.height', 'row.height'], function() { - panelCtrlElem.css({ minHeight: panelCtrlScope.panel.height || panelCtrlScope.row.height }); - panelCtrlElem.toggleClass('panel-fullscreen', panelCtrlScope.fullscreen ? true : false); - }); - } - - newScope.$on('$destroy',function() { - elem.unbind(); - elem.remove(); - }); - - elem.addClass('ng-cloak'); - - var panelPath = config.panels[panelType].path; - - $scope.require([ - 'jquery', - 'text!'+panelPath+'/module.html', - panelPath + "/module", - ], function ($, moduleTemplate) { - var $module = $(moduleTemplate); - $module.prepend(panelHeader); - $module.first().find('.panel-header').nextAll().wrapAll(content); - loadModule($module); - }); - } - }; - }); - -}); diff --git a/src/app/features/account/partials/account.html b/src/app/features/account/partials/account.html index b890fee6d5c..9a4d9d3d7c9 100644 --- a/src/app/features/account/partials/account.html +++ b/src/app/features/account/partials/account.html @@ -1,18 +1,4 @@ - - - - - - - - - - - - - -
@@ -22,18 +8,22 @@
-
-
    -
  • - Account name -
    • -
  • - -
    • -
-
-
+
+
    +
  • + Account name +
    • +
  • + +
    • +
+
+
+
+ + +
diff --git a/src/app/features/all.js b/src/app/features/all.js index 263c3acecb8..8e72a8221cb 100644 --- a/src/app/features/all.js +++ b/src/app/features/all.js @@ -7,6 +7,7 @@ define([ './opentsdb/datasource', './elasticsearch/datasource', './dashboard/all', + './panel/all', './profile/profileCtrl', './account/accountUsersCtrl', './account/datasourcesCtrl', diff --git a/src/app/features/dashboard/all.js b/src/app/features/dashboard/all.js index b51a34d7e77..37fe5c10bc4 100644 --- a/src/app/features/dashboard/all.js +++ b/src/app/features/dashboard/all.js @@ -9,7 +9,6 @@ define([ './keybindings', './viewStateSrv', './playlistSrv', - './panelSrv', './soloPanelCtrl', './timeSrv', './unsavedChangesSrv', diff --git a/src/app/features/dashboard/viewStateSrv.js b/src/app/features/dashboard/viewStateSrv.js index 6ebb5d05fab..289701c05fb 100644 --- a/src/app/features/dashboard/viewStateSrv.js +++ b/src/app/features/dashboard/viewStateSrv.js @@ -118,7 +118,7 @@ function (angular, _, $) { self.$scope.dashboard.emit_refresh(); } else { - self.fullscreenPanel.$emit('render'); + self.fullscreenPanel.$broadcast('render'); } delete self.fullscreenPanel; }); @@ -139,7 +139,7 @@ function (angular, _, $) { panelScope.fullscreen = true; $timeout(function() { - panelScope.$emit('render'); + panelScope.$broadcast('render'); }); }; diff --git a/src/app/features/panel/all.js b/src/app/features/panel/all.js new file mode 100644 index 00000000000..74b7badfbcc --- /dev/null +++ b/src/app/features/panel/all.js @@ -0,0 +1,5 @@ +define([ + './panelMenu', + './panelDirective', + './panelSrv', +], function () {}); diff --git a/src/app/features/panel/panelDirective.js b/src/app/features/panel/panelDirective.js new file mode 100644 index 00000000000..5692a188bca --- /dev/null +++ b/src/app/features/panel/panelDirective.js @@ -0,0 +1,40 @@ +define([ + 'angular', + 'jquery', + 'config', +], +function (angular, $, config) { + 'use strict'; + + angular + .module('grafana.directives') + .directive('panelLoader', function($compile, $parse) { + return { + restrict: 'E', + link: function(scope, elem, attr) { + var getter = $parse(attr.type), panelType = getter(scope); + var panelPath = config.panels[panelType].path; + + scope.require([panelPath + "/module"], function () { + var panelEl = angular.element(document.createElement('grafana-panel-' + panelType)); + elem.append(panelEl); + $compile(panelEl)(scope); + }); + } + }; + }).directive('grafanaPanel', function() { + return { + restrict: 'E', + templateUrl: '/app/features/panel/partials/panel.html', + transclude: true, + link: function(scope, elem) { + var panelContainer = elem.find('.panel-container'); + + scope.$watchGroup(['fullscreen', 'panel.height', 'row.height'], function() { + panelContainer.css({ minHeight: scope.panel.height || scope.row.height, display: 'block' }); + elem.toggleClass('panel-fullscreen', scope.fullscreen ? true : false); + }); + } + }; + }); +}); diff --git a/src/app/directives/panelMenu.js b/src/app/features/panel/panelMenu.js similarity index 100% rename from src/app/directives/panelMenu.js rename to src/app/features/panel/panelMenu.js diff --git a/src/app/features/dashboard/panelSrv.js b/src/app/features/panel/panelSrv.js similarity index 100% rename from src/app/features/dashboard/panelSrv.js rename to src/app/features/panel/panelSrv.js diff --git a/src/app/features/panel/partials/panel.html b/src/app/features/panel/partials/panel.html new file mode 100644 index 00000000000..a89e586b492 --- /dev/null +++ b/src/app/features/panel/partials/panel.html @@ -0,0 +1,42 @@ +
+
+ + + + + + + + + + +
+
+ +
+ +
+
+ +
+
+
+
+ + {{panelMeta.panelName}} +
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+ diff --git a/src/app/panels/graph/module.html b/src/app/panels/graph/module.html index f9bf9ebc6f4..09f2b4dbb59 100644 --- a/src/app/panels/graph/module.html +++ b/src/app/panels/graph/module.html @@ -1,4 +1,4 @@ -
+
@@ -24,23 +24,6 @@
-
-
-
- - Graph -
+ -
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js index 56a15a7b72e..ec914adedfd 100644 --- a/src/app/panels/graph/module.js +++ b/src/app/panels/graph/module.js @@ -16,10 +16,18 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) { var module = angular.module('grafana.panels.graph'); + module.directive('grafanaPanelGraph', function() { + return { + controller: 'GraphCtrl', + templateUrl: '/app/panels/graph/module.html', + }; + }); + module.controller('GraphCtrl', function($scope, $rootScope, panelSrv, annotationsSrv, timeSrv) { $scope.panelMeta = new PanelMeta({ - description: 'Graph panel', + panelName: 'Graph', + editIcon: "fa fa-bar-chart", fullscreen: true, metricsEditor: true }); diff --git a/src/app/panels/singlestat/module.html b/src/app/panels/singlestat/module.html index 43c120fd92c..7b5d6a267bb 100644 --- a/src/app/panels/singlestat/module.html +++ b/src/app/panels/singlestat/module.html @@ -1,26 +1,4 @@ -
- +
-
- -
-
-
- - Singlestat -
- -
-
-
-
-
- -
-
-
-
-
-
-
+ diff --git a/src/app/panels/singlestat/module.js b/src/app/panels/singlestat/module.js index 75e657094ef..b802dd44ab5 100644 --- a/src/app/panels/singlestat/module.js +++ b/src/app/panels/singlestat/module.js @@ -13,10 +13,18 @@ function (angular, app, _, TimeSeries, kbn, PanelMeta) { var module = angular.module('grafana.panels.singlestat'); app.useModule(module); + module.directive('grafanaPanelSinglestat', function() { + return { + controller: 'SingleStatCtrl', + templateUrl: '/app/panels/singlestat/module.html', + }; + }); + module.controller('SingleStatCtrl', function($scope, panelSrv, timeSrv) { $scope.panelMeta = new PanelMeta({ - description: 'Singlestat panel', + panelName: 'Singlestat', + editIcon: "fa fa-dashboard", fullscreen: true, metricsEditor: true }); @@ -192,7 +200,7 @@ function (angular, app, _, TimeSeries, kbn, PanelMeta) { data.colorMap = $scope.panel.colors; $scope.data = data; - $scope.$emit('render'); + $scope.$broadcast('render'); }; $scope.getFormatedValue = function(mainValue) { diff --git a/src/app/panels/text/module.html b/src/app/panels/text/module.html index a184b8283d8..5a933d5acc3 100644 --- a/src/app/panels/text/module.html +++ b/src/app/panels/text/module.html @@ -1,4 +1,3 @@ -
-

-

-
+ +

+ diff --git a/src/app/panels/text/module.js b/src/app/panels/text/module.js index ceb6bcf745c..1690293c090 100644 --- a/src/app/panels/text/module.js +++ b/src/app/panels/text/module.js @@ -8,15 +8,24 @@ define([ function (angular, app, _, require, PanelMeta) { 'use strict'; + var converter; + var module = angular.module('grafana.panels.text', []); app.useModule(module); - var converter; + module.directive('grafanaPanelText', function() { + return { + controller: 'TextPanelCtrl', + templateUrl: '/app/panels/text/module.html', + }; + }); - module.controller('text', function($scope, templateSrv, $sce, panelSrv) { + module.controller('TextPanelCtrl', function($scope, templateSrv, $sce, panelSrv) { $scope.panelMeta = new PanelMeta({ - description : "A static text panel that can use plain text, markdown, or (sanitized) HTML" + panelName: 'Text', + editIcon: "fa fa-text-width", + fullscreen: true, }); $scope.panelMeta.addEditorTab('Edit text', 'app/panels/text/editor.html'); diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index d5118a3ee96..d6d9e1bde28 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -79,12 +79,11 @@
-
- + drag-handle-class="drag-handle" panel-width> +
-
- - -
- -
-
-
-
- - -
- -
-
-
-
-
- diff --git a/src/app/routes/backend/dashboard.js b/src/app/routes/backend/dashboard.js index ac1a11681e2..5622a1f0a57 100644 --- a/src/app/routes/backend/dashboard.js +++ b/src/app/routes/backend/dashboard.js @@ -58,7 +58,7 @@ function (angular, store) { $location.path(''); return; } - $scope.initDashboard(window.grafanaImportDashboard, $scope); + $scope.initDashboard({ meta: {}, model: window.grafanaImportDashboard }, $scope); }); module.controller('NewDashboardCtrl', function($scope) { diff --git a/src/css/less/gfbox.less b/src/css/less/gfbox.less index 92ae09ef652..80a915b2ac9 100644 --- a/src/css/less/gfbox.less +++ b/src/css/less/gfbox.less @@ -5,10 +5,6 @@ border: 1px solid @grafanaTargetFuncBackground; } -.gf-box-full-edit { - margin: 30px 0 0 0; -} - .gf-box-no-margin { margin: 0; } diff --git a/src/css/less/panel.less b/src/css/less/panel.less index 8ae5869facb..1bdcce7cc2f 100644 --- a/src/css/less/panel.less +++ b/src/css/less/panel.less @@ -5,10 +5,13 @@ position: relative; } -.panel-container { - padding: 0px 0px 0px 0px; - background: @grafanaPanelBackground; +.panel-margin { margin: 5px; + display: block; +} + +.panel-container { + background: @grafanaPanelBackground; position: relative; &:hover { .panel-actions { @@ -91,17 +94,17 @@ top: 60px; height: 100%; padding: 0; - background: @grafanaPanelBackground; overflow-y: auto; height: 100%; - .panel-content { - padding-bottom: 130px; - } - .dropdown-menu { margin-bottom: 70px; } + + .panel-container { + margin: 15px; + } + .panel-menu { top: 0px; } @@ -110,6 +113,11 @@ } } +.panel-full-edit { + margin-top: 30px; + padding-bottom: 130px; +} + .panel-menu { z-index: 1000; position: absolute; diff --git a/src/test/specs/graph-ctrl-specs.js b/src/test/specs/graph-ctrl-specs.js index a1a372006a3..d55649cf3e8 100644 --- a/src/test/specs/graph-ctrl-specs.js +++ b/src/test/specs/graph-ctrl-specs.js @@ -1,6 +1,6 @@ define([ 'helpers', - 'features/dashboard/panelSrv', + 'features/panel/panelSrv', 'panels/graph/module' ], function(helpers) { 'use strict';