Refactoring of Websocket

zeppelin-web/bower.json

@@ -12,7 +12,7 @@
     "angular-touch": "1.3.8",
     "angular-route": "1.3.8",
     "angular-bootstrap": "~0.11.0",
-    "angular-websocket": "~0.0.5",
+    "angular-websocket": "~1.0.13",
     "ace-builds": "1.1.8",
     "angular-ui-ace": "0.1.1",
     "jquery.scrollTo": "~1.4.13",

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

@@ -22,82 +22,16 @@
  *
  * @author anthonycorbacho
  */
-angular.module('zeppelinWebApp').controller('MainCtrl', function($scope, WebSocket, $rootScope, $window) {
+angular.module('zeppelinWebApp').controller('MainCtrl', function($scope, $rootScope, $window) {
   $rootScope.compiledScope = $scope.$new(true, $rootScope);
-  $scope.WebSocketWaitingList = [];
-  $scope.connected = false;
   $scope.looknfeel = 'default';
 
   var init = function() {
     $scope.asIframe = (($window.location.href.indexOf('asIframe') > -1) ? true : false);
   };
+  
   init();
 
-  /**
-   * Web socket
-   */
-  WebSocket.onopen(function() {
-    console.log('Websocket created');
-    $scope.connected = true;
-    if ($scope.WebSocketWaitingList.length > 0) {
-      for (var o in $scope.WebSocketWaitingList) {
-        WebSocket.send(JSON.stringify($scope.WebSocketWaitingList[o]));
-      }
-    }
-  });
-
-  WebSocket.onmessage(function(event) {
-    var payload;
-    if (event.data) {
-      payload = angular.fromJson(event.data);
-    }
-    console.log('Receive << %o, %o, %o', payload.op, payload, $scope);
-    var op = payload.op;
-    var data = payload.data;
-    if (op === 'NOTE') {
-      $rootScope.$broadcast('setNoteContent', data.note);
-    } else if (op === 'NOTES_INFO') {
-      $rootScope.$broadcast('setNoteMenu', data.notes);
-    } else if (op === 'PARAGRAPH') {
-      $scope.$broadcast('updateParagraph', data);
-    } else if (op === 'PROGRESS') {
-      $rootScope.$broadcast('updateProgress', data);
-    } else if (op === 'COMPLETION_LIST') {
-      $rootScope.$broadcast('completionList', data);
-    } else if (op === 'ANGULAR_OBJECT_UPDATE') {
-      $rootScope.$broadcast('angularObjectUpdate', data);
-    }
-  });
-
-  WebSocket.onerror(function(event) {
-    console.log('error message: ', event);
-    $scope.connected = false;
-  });
-
-  WebSocket.onclose(function(event) {
-    console.log('close message: ', event);
-    $scope.connected = false;
-  });
-
-  /** Send info to the websocket server */
-  var send = function(data) {
-    if (WebSocket.currentState() !== 'OPEN') {
-      $scope.WebSocketWaitingList.push(data);
-    } else {
-      console.log('Send >> %o, %o', data.op, data);
-      WebSocket.send(JSON.stringify(data));
-    }
-  };
-
-
-  /** get the childs event and sebd to the websocket server */
-  $rootScope.$on('sendNewEvent', function(event, data) {
-    if (!event.defaultPrevented) {
-      send(data);
-      event.preventDefault();
-    }
-  });
-
   $rootScope.$on('setIframe', function(event, data) {
     if (!event.defaultPrevented) {
       $scope.asIframe = data;

zeppelin-web/src/app/app.js

@@ -36,50 +36,7 @@
   * In the case of running "grunt serve", this function will appear
   * as is.
   */
-function getPort() {
-  var port = Number(location.port);
-  if (location.protocol !== 'https:' && (port === 'undifined' || port === 0))
-    port = 80;
-  else if (location.protocol === 'https:' && (port === 'undifined' || port === 0))
-    port = 443;
-  else if (port === 3333 || port === 9000)
-    port = 8080;
-  return port+1;
-}
 
-function getWebsocketProtocol() {
-  var protocol = 'ws';
-  if (location.protocol === 'https:') {
-    protocol = 'wss';
-  }
-  return protocol;
-}
-
-function getRestApiBase() {
-  var port = Number(location.port);
-  if (port === 'undefined' || port === 0) {
-    port = 80;
-    if (location.protocol === 'https:') {
-      port = 443;
-    }
-  }
-
-  if (port === 3333 || port === 9000) {
-    port = 8080;
-  }
-  return location.protocol + '//' + location.hostname + ':' + port + '/api';
-}
-
-/**
- * @ngdoc overview
- * @name zeppelinWebApp
- * @description
- * # zeppelinWebApp
- *
- * Main module of the application.
- *
- * @author anthonycorbacho
- */
 angular
   .module('zeppelinWebApp', [
     'ngAnimate',
@@ -103,10 +60,7 @@ angular
       }
     };
   })
-  .config(function ($routeProvider, WebSocketProvider) {
-    WebSocketProvider
-      .prefix('')
-      .uri(getWebsocketProtocol() + '://' + location.hostname + ':' + getPort());
+  .config(function ($routeProvider) {
 
     $routeProvider
       .when('/', {
@@ -129,6 +83,3 @@ angular
         redirectTo: '/'
       });
   });
-
-
-

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

@@ -1,4 +1,4 @@
-/* global confirm:false, alert:false, getRestApiBase:false */
+/* global confirm:false, alert:false */
 /* jshint loopfunc: true */
 /*
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -22,7 +22,8 @@
  * # InterpreterCtrl
  * Controller of interpreter, manage the note (update)
  */
-angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope, $route, $routeParams, $location, $rootScope, $http) {
+angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope, $route, $routeParams, $location, $rootScope,
+                                                                         $http, baseUrlSrv) {
 
   var remoteSettingToLocalSetting = function(settingId, setting) {
     var property = {};
@@ -42,7 +43,7 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
   };
 
   var getInterpreterSettings = function() {
-    $http.get(getRestApiBase()+'/interpreter/setting').
+    $http.get(baseUrlSrv.getRestApiBase()+'/interpreter/setting').
       success(function(data, status, headers, config) {
         var interpreterSettings = [];
         //console.log("getInterpreterSettings=%o", data);
@@ -59,7 +60,7 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
   };
 
   var getAvailableInterpreters = function() {
-    $http.get(getRestApiBase()+'/interpreter').
+    $http.get(baseUrlSrv.getRestApiBase()+'/interpreter').
       success(function(data, status, headers, config) {
         var groupedInfo = {};
         var info;
@@ -122,7 +123,7 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
       }
     }
 
-    $http.put(getRestApiBase()+'/interpreter/setting/'+settingId, request).
+    $http.put(baseUrlSrv.getRestApiBase()+'/interpreter/setting/'+settingId, request).
     success(function(data, status, headers, config) {
       for (var i=0; i < $scope.interpreterSettings.length; i++) {
         var setting = $scope.interpreterSettings[i];
@@ -156,7 +157,7 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
     }
 
     console.log('Delete setting %o', settingId);
-    $http.delete(getRestApiBase()+'/interpreter/setting/'+settingId).
+    $http.delete(baseUrlSrv.getRestApiBase()+'/interpreter/setting/'+settingId).
       success(function(data, status, headers, config) {
         for (var i=0; i < $scope.interpreterSettings.length; i++) {
           var setting = $scope.interpreterSettings[i];
@@ -192,7 +193,7 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
       return;
     }
 
-    $http.put(getRestApiBase()+'/interpreter/setting/restart/'+settingId).
+    $http.put(baseUrlSrv.getRestApiBase()+'/interpreter/setting/restart/'+settingId).
       success(function(data, status, headers, config) {
         for (var i=0; i < $scope.interpreterSettings.length; i++) {
           var setting = $scope.interpreterSettings[i];
@@ -235,7 +236,7 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
       newSetting.properties[p] = $scope.newInterpreterSetting.properties[p].value;
     }
 
-    $http.post(getRestApiBase()+'/interpreter/setting', newSetting).
+    $http.post(baseUrlSrv.getRestApiBase()+'/interpreter/setting', newSetting).
       success(function(data, status, headers, config) {
         $scope.resetNewInterpreterSetting();
         getInterpreterSettings();

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

@@ -23,7 +23,7 @@
  * Controller of notes, manage the note (update)
  *
  */
-angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $route, $routeParams, $location, $rootScope, $http, websocketMsgSrv) {
+angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $route, $routeParams, $location, $rootScope, $http, websocketMsgSrv, baseUrlSrv) {
   $scope.note = null;
   $scope.showEditor = false;
   $scope.editorToggled = false;
@@ -351,7 +351,7 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $ro
   };
 
   var getInterpreterBindings = function(callback) {
-    $http.get(getRestApiBase()+ '/notebook/interpreter/bind/' +$scope.note.id).
+    $http.get(baseUrlSrv.getRestApiBase()+ '/notebook/interpreter/bind/' +$scope.note.id).
       success(function(data, status, headers, config) {
         $scope.interpreterBindings = data.body;
         $scope.interpreterBindingsOrig = jQuery.extend(true, [], $scope.interpreterBindings); // to check dirty
@@ -418,7 +418,7 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $ro
       }
     }
 
-    $http.put(getRestApiBase() + '/notebook/interpreter/bind/' + $scope.note.id,
+    $http.put(baseUrlSrv.getRestApiBase() + '/notebook/interpreter/bind/' + $scope.note.id,
              selectedSettingIds).
       success(function(data, status, headers, config) {
         console.log('Interpreter binding %o saved', selectedSettingIds);

zeppelin-web/src/components/baseUrl/baseUrl.service.js

@@ -0,0 +1,53 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
+angular.module('zeppelinWebApp').service('baseUrlSrv', function() {
+
+  this.getPort = function() {
+    var port = Number(location.port);
+    if (location.protocol !== 'https:' && (port === 'undifined' || port === 0)) {
+      port = 80;
+    } else if (location.protocol === 'https:' && (port === 'undifined' || port === 0)) {
+      port = 443;
+    } else if (port === 3333 || port === 9000) {
+      port = 8080;
+    }
+    return port+1;
+  };
+
+  this.getWebsocketProtocol = function() {
+    var protocol = 'ws';
+    if (location.protocol === 'https:') {
+      protocol = 'wss';
+    }
+    return protocol;
+  };
+
+  this.getRestApiBase = function() {
+    var port = Number(location.port);
+    if (port === 'undefined' || port === 0) {
+      port = 80;
+      if (location.protocol === 'https:') {
+        port = 443;
+      }
+    }
+
+    if (port === 3333 || port === 9000) {
+      port = 8080;
+    }
+    return location.protocol + '//' + location.hostname + ':' + port + '/api';
+  };
+
+});

zeppelin-web/src/components/navbar/navbar.controller.js

@@ -30,6 +30,7 @@ angular.module('zeppelinWebApp').controller('NavCtrl', function($scope, $rootSco
   
   var vm = this;
   vm.notes = notebookListDataFactory;
+  vm.connected = false;
   vm.websocketMsgSrv = websocketMsgSrv;
   
   $('#notebook-list').perfectScrollbar({suppressScrollX: true});
@@ -37,6 +38,10 @@ angular.module('zeppelinWebApp').controller('NavCtrl', function($scope, $rootSco
   $scope.$on('setNoteMenu', function(event, notes) {
       notebookListDataFactory.setNotes(notes);
   });
+  
+  $scope.$on('setConnectedStatus', function(event, param) {
+      vm.connected = param;
+  });
 
   function loadNotes() {
     websocketMsgSrv.getNotebookList();

zeppelin-web/src/components/navbar/navbar.html

@@ -31,9 +31,9 @@
       </ul>
       <ul class="nav navbar-nav navbar-right" style="margin-top:10px; margin-right:5px;">
         <li class="server-status">
-          <i class="fa fa-circle" ng-class="{'server-connected':connected, 'server-disconnected':!connected }"></i>
-          <span ng-show="connected">Connected</span>
-          <span ng-show="!connected">Disconnected</span>
+          <i class="fa fa-circle" ng-class="{'server-connected':navbar.connected, 'server-disconnected':!navbar.connected}"></i>
+          <span ng-show="navbar.connected">Connected</span>
+          <span ng-show="!navbar.connected">Disconnected</span>
         </li>
       </ul>
     </div>

zeppelin-web/src/components/websocketEvents/websocketEvents.factory.js

@@ -0,0 +1,66 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
+angular.module('zeppelinWebApp').factory('websocketEvents', function($rootScope, $websocket, baseUrlSrv) {
+  var websocketCalls = {};
+  
+  websocketCalls.ws = $websocket(baseUrlSrv.getWebsocketProtocol() + '://' + location.hostname + ':' + baseUrlSrv.getPort());
+  
+  websocketCalls.ws.onOpen(function() {
+    console.log('Websocket created');
+    $rootScope.$broadcast('setConnectedStatus', true);
+  });
+  
+  
+  websocketCalls.sendNewEvent = function(data) {
+    console.log('Send >> %o, %o', data.op, data);
+    websocketCalls.ws.send(JSON.stringify(data));
+  };
+
+  websocketCalls.ws.onMessage(function(event) {
+    var payload;
+    if (event.data) {
+      payload = angular.fromJson(event.data);
+    }
+    console.log('Receive << %o, %o', payload.op, payload);
+    var op = payload.op;
+    var data = payload.data;
+    if (op === 'NOTE') {
+      $rootScope.$broadcast('setNoteContent', data.note);
+    } else if (op === 'NOTES_INFO') {
+      $rootScope.$broadcast('setNoteMenu', data.notes);
+    } else if (op === 'PARAGRAPH') {
+      $rootScope.$broadcast('updateParagraph', data);
+    } else if (op === 'PROGRESS') {
+      $rootScope.$broadcast('updateProgress', data);
+    } else if (op === 'COMPLETION_LIST') {
+      $rootScope.$broadcast('completionList', data);
+    } else if (op === 'ANGULAR_OBJECT_UPDATE') {
+      $rootScope.$broadcast('angularObjectUpdate', data);
+    }
+  });
+
+  websocketCalls.ws.onError(function(event) {
+    console.log('error message: ', event);
+    $rootScope.$broadcast('setConnectedStatus', false);
+  });
+
+  websocketCalls.ws.onClose(function(event) {
+    console.log('close message: ', event);
+    $rootScope.$broadcast('setConnectedStatus', false);
+  });
+
+  return websocketCalls;
+});

zeppelin-web/src/components/websocketEvents/websocketMsg.service.js

@@ -13,38 +13,38 @@
  */
 'use strict';
 
-angular.module('zeppelinWebApp').service('websocketMsgSrv', function($rootScope) {
+angular.module('zeppelinWebApp').service('websocketMsgSrv', function($rootScope, websocketEvents) {
 
   this.createNotebook = function() {
-    $rootScope.$broadcast('sendNewEvent', {op: 'NEW_NOTE'});
+    websocketEvents.sendNewEvent({op: 'NEW_NOTE'});
   };
 
   this.deleteNotebook = function(noteId) {
-    $rootScope.$broadcast('sendNewEvent', {op: 'DEL_NOTE', data: {id: noteId}});
+    websocketEvents.sendNewEvent({op: 'DEL_NOTE', data: {id: noteId}});
   };
 
   this.getNotebookList = function() {
-    $rootScope.$broadcast('sendNewEvent', {op: 'LIST_NOTES'});
+    websocketEvents.sendNewEvent({op: 'LIST_NOTES'});
   };
 
   this.getNotebook = function(noteId) {
-    $rootScope.$broadcast('sendNewEvent', {op: 'GET_NOTE', data: {id: noteId}});
+    websocketEvents.sendNewEvent({op: 'GET_NOTE', data: {id: noteId}});
   };
 
   this.updateNotebook = function(noteId, noteName, noteConfig) {
-    $rootScope.$broadcast('sendNewEvent', {op: 'NOTE_UPDATE', data: {id: noteId, name: noteName, config : noteConfig}});
+    websocketEvents.sendNewEvent({op: 'NOTE_UPDATE', data: {id: noteId, name: noteName, config : noteConfig}});
   };
 
   this.moveParagraph = function(paragraphId, newIndex) {
-    $rootScope.$broadcast('sendNewEvent', { op: 'MOVE_PARAGRAPH', data : {id: paragraphId, index: newIndex}});
+    websocketEvents.sendNewEvent({ op: 'MOVE_PARAGRAPH', data : {id: paragraphId, index: newIndex}});
   };
 
   this.insertParagraph = function(newIndex) {
-    $rootScope.$broadcast('sendNewEvent', { op: 'INSERT_PARAGRAPH', data : {index: newIndex}});
+    websocketEvents.sendNewEvent({ op: 'INSERT_PARAGRAPH', data : {index: newIndex}});
   };
 
   this.updateAngularObject = function(noteId, name, value, interpreterGroupId) {
-    $rootScope.$broadcast('sendNewEvent', {
+    websocketEvents.sendNewEvent({
       op: 'ANGULAR_OBJECT_UPDATED',
       data: {
         noteId: noteId,
@@ -56,11 +56,11 @@ angular.module('zeppelinWebApp').service('websocketMsgSrv', function($rootScope)
   };
 
   this.cancelParagraphRun = function(paragraphId) {
-    $rootScope.$broadcast('sendNewEvent', {op: 'CANCEL_PARAGRAPH', data: {id: paragraphId}});
+    websocketEvents.sendNewEvent({op: 'CANCEL_PARAGRAPH', data: {id: paragraphId}});
   };
 
   this.runParagraph = function(paragraphId, paragraphTitle, paragraphData, paragraphConfig, paragraphParams) {
-    $rootScope.$broadcast('sendNewEvent', {
+    websocketEvents.sendNewEvent({
       op: 'RUN_PARAGRAPH',
       data: {
         id: paragraphId,
@@ -73,11 +73,11 @@ angular.module('zeppelinWebApp').service('websocketMsgSrv', function($rootScope)
   };
 
   this.removeParagraph = function(paragraphId) {
-    $rootScope.$broadcast('sendNewEvent', {op: 'PARAGRAPH_REMOVE', data: {id: paragraphId}});
+    websocketEvents.sendNewEvent({op: 'PARAGRAPH_REMOVE', data: {id: paragraphId}});
   };
 
   this.completion = function(paragraphId, buf, cursor) {
-    $rootScope.$broadcast('sendNewEvent', {
+    websocketEvents.sendNewEvent({
       op : 'COMPLETION',
       data : {
         id : paragraphId,
@@ -88,7 +88,7 @@ angular.module('zeppelinWebApp').service('websocketMsgSrv', function($rootScope)
   };
 
   this.commitParagraph = function(paragraphId, paragraphTitle, paragraphData, paragraphConfig, paragraphParams) {
-    $rootScope.$broadcast('sendNewEvent', {
+    websocketEvents.sendNewEvent({
       op: 'COMMIT_PARAGRAPH',
       data: {
         id: paragraphId,
@@ -100,4 +100,4 @@ angular.module('zeppelinWebApp').service('websocketMsgSrv', function($rootScope)
     });
   };
 
-});
+});

zeppelin-web/src/index.html

@@ -114,7 +114,9 @@ limitations under the License.
     <script src="components/dropdowninput/dropdowninput.directive.js"></script>
     <script src="components/resizable/resizable.directive.js"></script>
     <script src="components/websocketEvents/websocketMsg.service.js"></script>
+    <script src="components/websocketEvents/websocketEvents.factory.js"></script>
     <script src="components/notebookListDataFactory/notebookList.datafactory.js"></script>
+    <script src="components/baseUrl/baseUrl.service.js"></script>
     <!-- endbuild -->
   </body>
 </html>