avoid buggy and unnecessary disconnects from changelog stream when switch...

avoid buggy and unnecessary disconnects from changelog stream when switch between deployments and architectures

app/routes/deployments/single.js

@@ -60,7 +60,8 @@ export default Route.extend({
         .catch(err => {
             if(err === 'outdated') {
                 // wait a bit to avoid DDOS, TODO: exponential backoff?
-                this.refresh();
+                this.debug('data is outdated, refreshing data');
+                setTimeout(this.refresh.bind(this)); // refresh asynchronously to avoid infinite recursions
             } else {
                 console.error('could not load models', err);
             }
@@ -143,7 +144,7 @@ export default Route.extend({
     return models;
   },
   actions: {
-    error: function(reason, transition) {
+    error: function() {
         this.debug('error', ...arguments);
         this.transitionTo('deployments');
         this.get('flashMessages').danger(`Could not find system with id "${this.get('systemId')}"`);
@@ -168,11 +169,22 @@ export default Route.extend({
         this.replaceWith(this.get('routeName'));
     },
     willTransition(transition) {
-        this.debug('transition', transition.targetName, this.get('routeName'));
-        // do not disconnect if transitioning to a child route (details)
-        if (transition.targetName.indexOf(this.get('routeName')) !== 0) {
+        const currentRoute = this.get('routeName');
+        const allowedRoutes = [ // support route aliases
+            currentRoute.replace(/^deployments/, 'architectures'),
+            currentRoute.replace(/^architectures/, 'deployments')
+        ];
+        const target = transition.targetName;
+        const keepSocketConnection = target.indexOf(allowedRoutes[0]) === 0 || target.indexOf(allowedRoutes[1]) === 0;
+
+        this.debug('transition', transition.targetName, currentRoute, allowedRoutes);
+
+        // do not disconnect if transitioning to a child route (details) or alias
+        if (!keepSocketConnection) {
+            this.debug('disconnecting from changelogStream: leaving .single route');
             this.get('changelogStream').disconnect();
-            clearTimeout(this.get('refreshTimeout'));
+        } else {
+            this.debug('keeping changelogStream connection open: navigating to subpage or alias');
         }
     }
   }

app/services/changelog-stream.js

 import Ember from 'ember';
 import ENV from 'iobserve-ui/config/environment';
 
-export default Ember.Service.extend({
-    changelogQueue: Ember.inject.service(),
+const { Service, inject, RSVP } = Ember;
+
+export default Service.extend({
+    changelogQueue: inject.service(),
     init() {
         this._super(...arguments);
         this.debug('session', this.get('systemId'));
     },
     connect(systemId) {
+        return new RSVP.Promise((resolve, reject) => {
             const oldSocket = this.get('socket');
             if(oldSocket) {
+                if(this.get('systemId') === systemId) {
+                    this.debug('already connected to the current system, doing nothing');
+                    return;
+                }
                 this.debug('already connected, disconnecting first');
                 this.disconnect();
             }
@@ -17,9 +24,16 @@ export default Ember.Service.extend({
             this.debug('setting up websocket', systemId);
             const socket = new WebSocket(`${ENV.APP.WEBSOCKET_ROOT}/v1/changelogstream/${systemId}`);
             this.set('socket', socket);
+            this.set('systemId', systemId);
 
-        socket.onopen = this.get('events.onOpen').bind(this);
-        socket.onerror = this.get('events.onError').bind(this);
+            socket.onopen = () => {
+                resolve();
+                return this.events.onOpen.call(this);
+            };
+            socket.onerror = () => {
+                reject();
+                return this.events.onError.call(this);
+            };
             socket.onmessage = this.get('events.onMessage').bind(this);
 
             // automatically reconnect
@@ -35,6 +49,7 @@ export default Ember.Service.extend({
 
             // close socket connection when the user closes the window/tab or nagivates to a different website
             window.onbeforeunload = this.get('disconnect').bind(this);
+        });
     },
     disconnect() {
         this.get('changelogQueue').reset();
@@ -45,7 +60,12 @@ export default Ember.Service.extend({
         this.set('socket.onopen', null);
         this.set('socket.onmessage', null);
 
+        try{
             this.get('socket').close();
+        } catch(e) {
+            // probably because connection was not yet established
+            console.error('could not close connection', e);
+        }
         this.set('socket', null);
 
         // just in case it disconnected right before disconnect() was called.