wait for server confirmation before updating stats of notebook

zeppelin-server/src/main/java/org/apache/zeppelin/socket/NotebookServer.java

@@ -1185,7 +1185,7 @@ public class NotebookServer extends WebSocketServlet
 
     Map<String, Object> params = (Map<String, Object>) fromMessage.get("params");
     Map<String, Object> config = (Map<String, Object>) fromMessage.get("config");
-    String noteId = getOpenNoteId(conn);
+    String noteId = (String) fromMessage.get("noteId");
 
     if (!hasParagraphWriterPermission(conn, notebook, noteId,
         userAndRoles, fromMessage.principal, "write")) {

zeppelin-web/src/app/notebook/notebook.controller.js

@@ -381,11 +381,6 @@ function NotebookCtrl ($scope, $route, $routeParams, $location, $rootScope,
     }, 10000)
   }
 
-  angular.element(window).on('beforeunload', function (e) {
-    $scope.killSaveTimer()
-    $scope.saveNote()
-  })
-
   $scope.setLookAndFeel = function (looknfeel) {
     $scope.note.config.looknfeel = looknfeel
     if ($scope.revisionView === true) {
@@ -1069,8 +1064,52 @@ function NotebookCtrl ($scope, $route, $routeParams, $location, $rootScope,
     $scope.note.config.personalizedMode = isPersonalized
   })
 
+  $scope.$on('$routeChangeStart', function (event, next, current) {
+    if ($scope.note && $scope.note.paragraphs) {
+      _.forEach($scope.note.paragraphs, function (par) {
+        if ($scope.allowLeave === true) {
+          return
+        }
+        let thisScope = angular.element(
+          '#' + par.id + '_paragraphColumn_main').scope()
+
+        if (thisScope.dirtyText !== undefined ||
+          thisScope.dirtyText !== thisScope.originalText) {
+          event.preventDefault()
+
+          BootstrapDialog.show({
+            closable: false,
+            closeByBackdrop: false,
+            closeByKeyboard: false,
+            title: 'Do you want to leave this site?',
+            message: 'Changes that you made may not be saved.',
+            buttons: [{
+              label: 'Stay',
+              action: function (dialog) {
+                dialog.close()
+              }
+            }, {
+              label: 'Leave',
+              action: function (dialog) {
+                dialog.close()
+                angular.element(window).off('beforeunload')
+                let locationToRedirect = next['$$route']['originalPath']
+                _.forEach(next.pathParams, function (value, key) {
+                  locationToRedirect = locationToRedirect.replace(':' + key,
+                    value)
+                })
+                $scope.allowLeave = true
+                $location.path(locationToRedirect)
+              }
+            }]
+          })
+          return false
+        }
+      })
+    }
+  })
+
   $scope.$on('$destroy', function () {
-    angular.element(window).off('beforeunload')
     $scope.killSaveTimer()
     $scope.saveNote()
 

zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js

@@ -376,14 +376,41 @@ function ParagraphCtrl ($scope, $rootScope, $route, $window, $routeParams, $loca
       paragraphText, $scope.paragraph.config, $scope.paragraph.settings.params)
   }
 
+  $scope.bindBeforeUnload = function () {
+    angular.element(window).off('beforeunload')
+
+    let confirmOnPageExit = function (e) {
+      // If we haven't been passed the event get the window.event
+      e = e || window.event
+      let message = 'Do you want to reload this site?'
+
+      // For IE6-8 and Firefox prior to version 4
+      if (e) {
+        e.returnValue = message
+      }
+      // For Chrome, Safari, IE8+ and Opera 12+
+      return message
+    }
+    angular.element(window).on('beforeunload', confirmOnPageExit)
+  }
+
+  $scope.unBindBeforeUnload = function () {
+    angular.element(window).off('beforeunload')
+  }
+
   $scope.saveParagraph = function (paragraph) {
     const dirtyText = paragraph.text
     if (dirtyText === undefined || dirtyText === $scope.originalText) {
       return
     }
-    commitParagraph(paragraph)
-    $scope.originalText = dirtyText
-    $scope.dirtyText = undefined
+
+    $scope.bindBeforeUnload()
+
+    commitParagraph(paragraph).then(function () {
+      $scope.originalText = dirtyText
+      $scope.dirtyText = undefined
+      $scope.unBindBeforeUnload()
+    })
   }
 
   $scope.toggleEnableDisable = function (paragraph) {
@@ -1084,7 +1111,8 @@ function ParagraphCtrl ($scope, $rootScope, $route, $window, $routeParams, $loca
       settings: {params},
     } = paragraph
 
-    websocketMsgSrv.commitParagraph(id, title, text, config, params)
+    return websocketMsgSrv.commitParagraph(id, title, text, config, params,
+      $route.current.pathParams.noteId)
   }
 
   /** Utility function */

zeppelin-web/src/components/websocket/websocket-event.factory.js

@@ -42,7 +42,7 @@ function WebsocketEventFactory ($rootScope, $websocket, $location, baseUrlSrv) {
       data.roles = ''
     }
     console.log('Send >> %o, %o, %o, %o, %o', data.op, data.principal, data.ticket, data.roles, data)
-    websocketCalls.ws.send(JSON.stringify(data))
+    return websocketCalls.ws.send(JSON.stringify(data))
   }
 
   websocketCalls.isConnected = function () {

zeppelin-web/src/components/websocket/websocket-message.service.js

@@ -233,11 +233,12 @@ function WebsocketMessageService ($rootScope, websocketEvents) {
       })
     },
 
-    commitParagraph: function (paragraphId, paragraphTitle, paragraphData, paragraphConfig, paragraphParams) {
-      websocketEvents.sendNewEvent({
+    commitParagraph: function (paragraphId, paragraphTitle, paragraphData, paragraphConfig, paragraphParams, noteId) {
+      return websocketEvents.sendNewEvent({
         op: 'COMMIT_PARAGRAPH',
         data: {
           id: paragraphId,
+          noteId: noteId,
           title: paragraphTitle,
           paragraph: paragraphData,
           config: paragraphConfig,