feat(sockets): full-screen socket connection status if disconnected /…

… retrying to server

src/app/app.component.html

@@ -1 +1,6 @@
 <router-outlet></router-outlet>
+
+<div class="disconnected" *ngIf="!connected">
+  <p *ngIf="state === 2">Connection closed. Please check your internet connection.</p>
+  <p *ngIf="state === 3 || state === 0">Retrying to connect ...</p>
+</div>

src/app/app.component.ts

@@ -1,7 +1,27 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { SocketService } from './services/socket.service';
+import { ConnectionStates } from './classes/rx-web-socket.class';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html'
 })
-export class AppComponent { }
+export class AppComponent {
+  connected: boolean;
+  state: ConnectionStates;
+
+  constructor(private socketService: SocketService) { }
+
+  ngOnInit() {
+    this.socketService.connectionState
+      .subscribe(state => {
+        this.state = state;
+
+        if (state === ConnectionStates.CONNECTED) {
+          this.connected = true;
+        } else {
+          this.connected = false;
+        }
+      });
+  }
+}

src/app/components/app-setup/app-setup.component.ts

@@ -97,7 +97,7 @@ export class AppSetupComponent implements OnInit {
       this.loading = false;
       if (!exists) {
         this.step = 'docker';
-        this.socketService.onMessage().subscribe(event => {
+        this.socketService.outputEvents.subscribe(event => {
           if (event.type === 'terminalOutput') {
             if (event.data.type === 'exit') {
               if (event.data.data === 0) {

src/app/styles/app.sass

@@ -20,6 +20,7 @@
 @import 'build-details'
 @import 'job'
 @import 'settings'
+@import 'disconnected'
 
 html, body, .hero
   width: 100%

src/app/styles/disconnected.sass

@@ -0,0 +1,16 @@
+.disconnected
+  position: fixed
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  width: 100%
+  height: 100%
+  display: flex
+  align-items: center
+  justify-content: center
+  color: $white
+  font-size: 18px
+  font-weight: bold
+  background: rgba($black, 0.7)
+  z-index: 999