working on share feature, and refactorings

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]);
         });
     };
 

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' };
     };

src/app/partials/share-panel.html

+<div ng-controller="SharePanelCtrl">
+	<div class="modal-header">
+		<div class="dashboard-editor-header">
+			<div class="dashboard-editor-title">
+				<i class="icon icon-share"></i>
+				Share
+			</div>
+
+			<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
+				<div ng-repeat="tab in ['Link', 'Embedd', 'Image']" data-title="{{tab}}">
+				</div>
+			</div>
+
+		</div>
+	</div>
+
+	<div class="modal-body">
+		<div class="editor-row">
+			<input type="text" class="input input-xxlarge"></input>
+		</div>
+	</div>
+
+	<div class="modal-footer">
+		<button class="btn btn-success pull-right" ng-click="dismiss();">close</button>
+	</div>
+</div>

src/app/partials/unsaved-changes.html

 <div class="modal-header">
 </div>
-<div class="modal-body">
 
-  <h3 class="text-center"><i class="icon-warning-sign"></i> Unsaved changes</h3>
+<div class="modal-body">
+  <h4 class="text-center"><i class="icon-warning-sign"></i> Unsaved changes</h4>
   <div class="row-fluid">
 		<span class="span3">
 			{{changes}}
-
 		</span>
 	<button type="button" class="btn btn-success span2" ng-click="dismiss()">Cancel</button>
 	<button type="button" class="btn btn-success span2" ng-click="save();dismiss();">Save</button>
 	<button type="button" class="btn btn-warning span2" ng-click="ignore();dismiss();">Ignore</button>
 	<span class="span3"></span>
   </div>
-
 </div>
+
 <div class="modal-footer">
 </div>

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 = [];
 

src/app/services/all.js

 define([
   './alertSrv',
+  './utilSrv',
   './datasourceSrv',
   './timeSrv',
   './templateSrv',

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 });
       };

src/app/services/utilSrv.js

+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');
+      });
+    };
+
+  });
+
+});

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;
 	}

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 {

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%;
 }

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;

src/css/less/variables.dark.less

@@ -219,7 +219,7 @@
 @navbarLinkBackgroundHover:       transparent;
 @navbarLinkBackgroundActive:      @navbarBackground;
 
-@navbarBrandColor:                @navbarLinkColor;
+@navbarBrandColor:                @linkColor;
 
 // Inverted navbar
 @navbarInverseBackground:                #252A30;

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 = $('<div class="modal hide" tabindex="-1"></div>').attr('id', id).addClass('fade').html(template);
+          // grafana change, removed fade
+          var $modal = $('<div class="modal hide" tabindex="-1"></div>').attr('id', id).html(template);
           if (options.modalClass)
             $modal.addClass(options.modalClass);
           $('body').append($modal);

src/vendor/bootstrap/less/modals.less

@@ -17,7 +17,7 @@
 
 .modal-backdrop,
 .modal-backdrop.fade.in {
-  .opacity(80);
+  .opacity(70);
 }
 
 // Base modal