From 69e80fd11c7aa2de128f7b2f8612ec8936c04416 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 24 Sep 2014 16:20:55 +0200 Subject: [PATCH] working on share feature, and refactorings --- src/app/controllers/dashboardNavCtrl.js | 4 ++-- src/app/controllers/grafanaCtrl.js | 10 ++++---- src/app/partials/share-panel.html | 26 +++++++++++++++++++++ src/app/partials/unsaved-changes.html | 7 +++--- src/app/services/alertSrv.js | 14 ++++++++++- src/app/services/all.js | 1 + src/app/services/panelSrv.js | 7 ++++++ src/app/services/utilSrv.js | 31 +++++++++++++++++++++++++ src/css/less/bootswatch.dark.less | 2 +- src/css/less/grafana.less | 8 +++++-- src/css/less/overrides.less | 5 ---- src/css/less/panel.less | 2 +- src/css/less/variables.dark.less | 2 +- src/vendor/angular/angular-strap.js | 3 ++- src/vendor/bootstrap/less/modals.less | 2 +- 15 files changed, 100 insertions(+), 24 deletions(-) create mode 100644 src/app/partials/share-panel.html create mode 100644 src/app/services/utilSrv.js diff --git a/src/app/controllers/dashboardNavCtrl.js b/src/app/controllers/dashboardNavCtrl.js index d16139e2e09..71a9f756a9c 100644 --- a/src/app/controllers/dashboardNavCtrl.js +++ b/src/app/controllers/dashboardNavCtrl.js @@ -78,7 +78,7 @@ function (angular, _, moment, config, store) { var clone = angular.copy($scope.dashboard); $scope.db.saveDashboard(clone) .then(function(result) { - alertSrv.set('Dashboard Saved', 'Saved as "' + result.title + '"','success', 3000); + $scope.appEvent('alert-success', ['Dashboard saved', 'Saved as ' + result.title]); if (result.url !== $location.path()) { $location.search({}); @@ -88,7 +88,7 @@ function (angular, _, moment, config, store) { $rootScope.$emit('dashboard-saved', $scope.dashboard); }, function(err) { - alertSrv.set('Save failed', err, 'error', 5000); + $scope.emitAppEvent('alert-error', ['Save failed', err]); }); }; diff --git a/src/app/controllers/grafanaCtrl.js b/src/app/controllers/grafanaCtrl.js index 5d406dee1b6..98f2115680f 100644 --- a/src/app/controllers/grafanaCtrl.js +++ b/src/app/controllers/grafanaCtrl.js @@ -10,19 +10,19 @@ function (angular, config, _, $, store) { var module = angular.module('grafana.controllers'); - module.controller('GrafanaCtrl', function($scope, alertSrv, grafanaVersion, $rootScope, $controller) { + module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, grafanaVersion, $rootScope, $controller) { $scope.grafanaVersion = grafanaVersion[0] === '@' ? 'master' : grafanaVersion; - $scope.consoleEnabled = store.getBool('grafanaConsole'); - + $scope._ = _; $rootScope.profilingEnabled = store.getBool('profilingEnabled'); $rootScope.performance = { loadStart: new Date().getTime() }; $scope.init = function() { - $scope._ = _; - if ($rootScope.profilingEnabled) { $scope.initProfiling(); } + alertSrv.init(); + utilSrv.init(); + $scope.dashAlerts = alertSrv; $scope.grafana = { style: 'dark' }; }; diff --git a/src/app/partials/share-panel.html b/src/app/partials/share-panel.html new file mode 100644 index 00000000000..34b8b424683 --- /dev/null +++ b/src/app/partials/share-panel.html @@ -0,0 +1,26 @@ +
+
+
+
+ + Share +
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
diff --git a/src/app/partials/unsaved-changes.html b/src/app/partials/unsaved-changes.html index b025575e7e7..846a30bbc3b 100644 --- a/src/app/partials/unsaved-changes.html +++ b/src/app/partials/unsaved-changes.html @@ -1,19 +1,18 @@
-
-

Unsaved changes

+
+

Unsaved changes

{{changes}} -
-
+
diff --git a/src/app/services/alertSrv.js b/src/app/services/alertSrv.js index 781539bf1cc..2a752569be2 100644 --- a/src/app/services/alertSrv.js +++ b/src/app/services/alertSrv.js @@ -7,9 +7,21 @@ function (angular, _) { var module = angular.module('grafana.services'); - module.service('alertSrv', function($timeout, $sce) { + module.service('alertSrv', function($timeout, $sce, $rootScope) { var self = this; + this.init = function() { + $rootScope.onAppEvent('alert-error', function(e, alert) { + self.set(alert[0], alert[1], 'error'); + }); + $rootScope.onAppEvent('alert-warning', function(e, alert) { + self.set(alert[0], alert[1], 'warning', 5000); + }); + $rootScope.onAppEvent('alert-success', function(e, alert) { + self.set(alert[0], alert[0], 'success', 3000); + }); + }; + // List of all alert objects this.list = []; diff --git a/src/app/services/all.js b/src/app/services/all.js index 81fe4603277..f715361b4cd 100644 --- a/src/app/services/all.js +++ b/src/app/services/all.js @@ -1,5 +1,6 @@ define([ './alertSrv', + './utilSrv', './datasourceSrv', './timeSrv', './templateSrv', diff --git a/src/app/services/panelSrv.js b/src/app/services/panelSrv.js index 8840a78695f..5bc877415f3 100644 --- a/src/app/services/panelSrv.js +++ b/src/app/services/panelSrv.js @@ -56,6 +56,13 @@ function (angular, _) { } }; + $scope.sharePanel = function() { + $scope.emitAppEvent('show-modal', { + src: './app/partials/share-panel.html', + scope: $scope.$new() + }); + }; + $scope.editPanelJson = function() { $scope.emitAppEvent('show-json-editor', { object: $scope.panel, updateHandler: $scope.replacePanel }); }; diff --git a/src/app/services/utilSrv.js b/src/app/services/utilSrv.js new file mode 100644 index 00000000000..7fca0c0334e --- /dev/null +++ b/src/app/services/utilSrv.js @@ -0,0 +1,31 @@ +define([ + 'angular', +], +function (angular) { + 'use strict'; + + var module = angular.module('grafana.services'); + + module.service('utilSrv', function($rootScope, $modal, $q) { + + this.init = function() { + $rootScope.onAppEvent('show-modal', this.showModal); + }; + + this.showModal = function(e, options) { + var modal = $modal({ + template: options.src, + persist: false, + show: false, + scope: options.scope, + keyboard: false + }); + + $q.when(modal).then(function(modalEl) { + modalEl.modal('show'); + }); + }; + + }); + +}); diff --git a/src/css/less/bootswatch.dark.less b/src/css/less/bootswatch.dark.less index ad9fe11e73d..7de0ab97437 100644 --- a/src/css/less/bootswatch.dark.less +++ b/src/css/less/bootswatch.dark.less @@ -57,7 +57,7 @@ hr { .brand { padding: 0px 15px; - color: @grayLighter; + color: @navbarBrandColor; font-weight: normal; text-shadow: none; } diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 9f55faf3ba7..0bc2d6058c4 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -53,8 +53,12 @@ } .modal { - margin: 5%; - width: 90%; + max-width: 1024px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + top: 200px; } .grafana-search-metric-actions { diff --git a/src/css/less/overrides.less b/src/css/less/overrides.less index 957a56147dd..b8fc8e640c1 100644 --- a/src/css/less/overrides.less +++ b/src/css/less/overrides.less @@ -252,11 +252,6 @@ form input.ng-invalid { max-width: 480px; } -.modal { - width: 100%; - top: 0px !important; -} - .tiny { font-size: 50%; } diff --git a/src/css/less/panel.less b/src/css/less/panel.less index 7e103fc463a..b77ea323bc2 100644 --- a/src/css/less/panel.less +++ b/src/css/less/panel.less @@ -63,7 +63,7 @@ } .panel-menu { - z-index: 10000; + z-index: 1000; position: absolute; background: @grafanaTargetFuncBackground; border: 1px solid black; diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index d0f268a5981..287694b1d0a 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -219,7 +219,7 @@ @navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundActive: @navbarBackground; -@navbarBrandColor: @navbarLinkColor; +@navbarBrandColor: @linkColor; // Inverted navbar @navbarInverseBackground: #252A30; diff --git a/src/vendor/angular/angular-strap.js b/src/vendor/angular/angular-strap.js index 2da858ded51..22d89a6a3e0 100644 --- a/src/vendor/angular/angular-strap.js +++ b/src/vendor/angular/angular-strap.js @@ -435,7 +435,8 @@ angular.module('$strap.directives').factory('$modal', [ return res.data; })).then(function onSuccess(template) { var id = templateUrl.replace('.html', '').replace(/[\/|\.|:]/g, '-') + '-' + scope.$id; - var $modal = $('
').attr('id', id).addClass('fade').html(template); + // grafana change, removed fade + var $modal = $('
').attr('id', id).html(template); if (options.modalClass) $modal.addClass(options.modalClass); $('body').append($modal); diff --git a/src/vendor/bootstrap/less/modals.less b/src/vendor/bootstrap/less/modals.less index b8b0914a400..f5f5ca5eb3d 100644 --- a/src/vendor/bootstrap/less/modals.less +++ b/src/vendor/bootstrap/less/modals.less @@ -17,7 +17,7 @@ .modal-backdrop, .modal-backdrop.fade.in { - .opacity(80); + .opacity(70); } // Base modal