working on unsaved changes warning

src/app/controllers/dash.js

@@ -30,7 +30,8 @@ function (angular, $, config, _) {
   var module = angular.module('kibana.controllers');
 
   module.controller('DashCtrl', function(
-    $scope, $rootScope, $route, ejsResource, dashboard, alertSrv, panelMove, keyboardManager, grafanaVersion) {
+    $scope, $rootScope, ejsResource, dashboard,
+    alertSrv, panelMove, keyboardManager, grafanaVersion, unsavedChangesSrv) {
 
     $scope.requiredElasticSearchVersion = ">=0.90.3";
 

src/app/partials/unsaved-changes.html

@@ -0,0 +1,12 @@
+<div class="modal-header">
+  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+  <h3>{{modal.title}}</h3>
+</div>
+<div class="modal-body">
+
+  <div ng-bind-html='modal.body'></div>
+
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-danger" ng-click="dismiss()">Close</button>
+</div>

src/app/services/all.js

@@ -8,5 +8,6 @@ define([
   './keyboardManager',
   './annotationsSrv',
   './playlistSrv',
+  './unsavedChangesSrv',
 ],
 function () {});

src/app/services/dashboard.js

@@ -60,12 +60,6 @@ function (angular, $, kbn, _, config, moment, Modernizr) {
     this.last = {};
     this.availablePanels = [];
 
-    $rootScope.$on("$locationChangeStart", function(event, next, current) {
-      if (!self.confirm_dash_change()) {
-        event.preventDefault();
-      }
-    });
-
     $rootScope.$on('$routeChangeSuccess',function(){
       // Clear the current dashboard to prevent reloading
       self.current = {};
@@ -191,22 +185,6 @@ function (angular, $, kbn, _, config, moment, Modernizr) {
       return true;
     };
 
-   this.confirm_dash_change = function() {
-      if (!self.original) {
-        return true;
-      }
-
-      var current = angular.copy(self.current);
-      var currentJson = angular.toJson(current);
-      var originalJson = angular.toJson(self.original);
-
-      if (currentJson !== originalJson) {
-        return confirm('There are unsaved changes, are you sure you want to change dashboard?');
-      }
-
-      return true;
-    };
-
     this.gist_id = function(string) {
       if(self.is_gist(string)) {
         return string.match(gist_pattern)[0].replace(/.*\//, '');
@@ -416,6 +394,7 @@ function (angular, $, kbn, _, config, moment, Modernizr) {
           if(type === 'dashboard') {
             $location.path('/dashboard/elasticsearch/'+title);
           }
+          self.original = angular.copy(self.current);
           return result;
         },
         // Failure

src/app/services/unsavedChangesSrv.js

@@ -0,0 +1,59 @@
+define([
+  'angular',
+  'underscore'
+],
+function (angular, _) {
+  'use strict';
+
+  var module = angular.module('kibana.services');
+
+  module.service('unsavedChangesSrv', function($rootScope, $modal, dashboard, $q, $location) {
+    var self = this;
+
+    var modalScope = $rootScope.$new();
+
+    $rootScope.$on("$locationChangeStart", function(event, next, current) {
+      if (self.has_unsaved_changes()) {
+        event.preventDefault();
+        self.next = next;
+        self.open_modal();
+      }
+    });
+
+    this.open_modal = function() {
+      var confirmModal = $modal({
+          template: './app/partials/unsaved-changes.html',
+          persist: true,
+          show: false,
+          scope: modalScope,
+          keyboard: false
+        });
+
+      $q.when(confirmModal).then(function(modalEl) {
+        modalEl.modal('show');
+      });
+    };
+
+    this.has_unsaved_changes = function() {
+      if (!dashboard.original) {
+        return false;
+      }
+
+      var current = angular.copy(dashboard.current);
+      var currentJson = angular.toJson(current);
+      var originalJson = angular.toJson(dashboard.original);
+
+      if (currentJson !== originalJson) {
+        return true; //confirm('There are unsaved changes, are you sure you want to change dashboard?');
+      }
+
+      return false;
+    };
+
+    modalScope.ignore = function() {
+      dashboard.original = null;
+      $location.path(self.next)
+    };
+
+  });
+});