show connection status in header

Signed-off-by: Pierre Tardy <pierre.tardy@intel.com>
buildbot · Mar 20, 2015 · 10c325e · 10c325e
1 parent 824d75e
commit 10c325e
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 5 deletions.
diff --git a/www/base/src/app/common/directives/connectionstatus/connectionstatus.directive.coffee b/www/base/src/app/common/directives/connectionstatus/connectionstatus.directive.coffee
@@ -0,0 +1,25 @@
+class connectionstatus extends Directive('common')
+    constructor: (RecursionHelper) ->
+        return {
+            replace: true
+            restrict: 'E'
+            scope: {data:'='}
+            templateUrl: 'views/connectionstatus.html'
+            compile: RecursionHelper.compile
+            controller: '_connectionstatusController'
+        }
+
+class _connectionstatus extends Controller('common')
+    constructor: ($scope, $timeout) ->
+        $scope.alertenabled = false
+        $scope.connectionlost = false
+        $scope.$on "mq.lost_connection", ->
+            $scope.connectionlost = true
+            $scope.alertenabled = true
+
+        $scope.$on "mq.restored_connection", ->
+            $scope.connectionlost = false
+            $scope.alertenabled = true
+            $timeout ->
+                $scope.alertenabled = false
+            , 4000
diff --git a/www/base/src/app/common/directives/connectionstatus/connectionstatus.less b/www/base/src/app/common/directives/connectionstatus/connectionstatus.less
@@ -0,0 +1,13 @@
+.connectionstatus
+{
+    z-index: 1000;
+    width: 100%;
+    position: absolute;
+    top: 20px;
+    .alert {
+        margin-left: auto;
+        margin-right: auto;
+        width: 300px;
+        text-align: center;
+    }
+}
diff --git a/www/base/src/app/common/directives/connectionstatus/connectionstatus.tpl.jade b/www/base/src/app/common/directives/connectionstatus/connectionstatus.tpl.jade
@@ -0,0 +1,6 @@
+.connectionstatus.anim-fade(ng-show="alertenabled")
+    .alert.alert-warning(ng-show="connectionlost")
+        i.fa.fa-spin.fa-spinner
+        | &nbsp;Connection Lost. Retrying...
+    .alert.alert-success(ng-hide="connectionlost")
+        | Connection restored!
diff --git a/www/base/src/app/common/services/mq/mq.service.coffee b/www/base/src/app/common/services/mq/mq.service.coffee
@@ -5,7 +5,7 @@ class MqService extends Factory('common')
             # ultra simple matcher used to route event back to the original subscriber
             matcher = new RegExp("^"+matcher.replace(/\*/g, "[^/]+") + "$")
             return matcher.test(value)
-
+        window.$rootScope = $rootScope
         listeners = {}
         ws = null
         curid = 1
@@ -54,6 +54,7 @@ class MqService extends Factory('common')
 
             # this is intended to be mocked in unittests
             getWebSocket: (url) ->
+                # we use reconnecting websocket for automatic reconnection
                 return new ReconnectingWebSocket(url)
 
             setBaseUrl: (url) ->
@@ -72,19 +73,18 @@ class MqService extends Factory('common')
                     listeners = {}
 
                 ws.onopen = (e) ->
-                    # now we got our handshake, we can start consuming
-                    # what was registered in between
-                    # this is still racy, as we can have miss some events during this handshake time
                     pending_msgs = {}
                     allp = []
                     for k, v of listeners
                         allp.push(self.startConsuming(k))
 
                     $q.all(allp).then ->
                         deferred.resolve()
-                        # this will trigger bound data to re fetch the full-data
                         if lostConnection
+                            # this will trigger bound data to re fetch the full-data
                             $rootScope.$broadcast("mq.restored_connection", e)
+                        else
+                            $rootScope.$broadcast("mq.first_connection", e)
 
                 ws.onmessage = (e) ->
                     msg = JSON.parse(e.data)

diff --git a/www/base/src/app/index.jade b/www/base/src/app/index.jade
@@ -4,4 +4,5 @@ block content
         gl-topbar
             gl-topbar-contextual-actions
             loginbar
+        connectionstatus
         ui-view
diff --git a/www/base/src/styles/animations.less b/www/base/src/styles/animations.less
@@ -38,6 +38,19 @@ tl;dr is:
   }
 }
 
+/* animation for  */
+.anim-fade {
+    -webkit-transition: .5s linear all;
+    transition:  .5s linear all;
+    opacity: 1;
+    &.ng-hide-remove,
+    &.ng-hide-add,.list.ng-hide {
+      display:block!important;
+    }
+    &.ng-hide {
+        opacity: 0;
+    }
+}
 /* animation for validation tooltips in force forms */
 .anim-popover {
   &.ng-enter,