[ZEPPELIN-4542] Websocket client support of auto-reconnect

zeppelin-web-angular/projects/zeppelin-sdk/src/message.ts

@@ -116,6 +116,10 @@ export class Message {
     this.send<OP.PING>(OP.PING);
   }
 
+  close() {
+    this.close$.next();
+  }
+
   opened(): Observable<Event> {
     return this.open$.asObservable();
   }

zeppelin-web-angular/src/app/pages/workspace/workspace.component.html

@@ -10,8 +10,7 @@
   ~ limitations under the License.
   -->
 
-<div class="content" [class.blur]="!websocketConnected">
+<div class="content">
   <zeppelin-header *ngIf="!publishMode"></zeppelin-header>
   <router-outlet (activate)="onActivate($event)"></router-outlet>
 </div>
-<zeppelin-spin *ngIf="!websocketConnected" [transparent]="true">Connecting WebSocket ...</zeppelin-spin>

zeppelin-web-angular/src/app/pages/workspace/workspace.component.less

@@ -18,9 +18,5 @@
     min-height: 100vh;
     display: block;
     position: relative;
-
-    &.blur {
-      filter: blur(4px);
-    }
   }
 });

zeppelin-web-angular/src/app/pages/workspace/workspace.component.ts

@@ -10,16 +10,15 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { Subject } from 'rxjs';
-import { filter, map, startWith, takeUntil, tap } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 
-import { ActivatedRoute, NavigationEnd, Route, Router } from '@angular/router';
-import { publishedSymbol, Published } from '@zeppelin/core/paragraph-base/published';
+import { publishedSymbol } from '@zeppelin/core/paragraph-base/published';
 import { HeliumManagerService } from '@zeppelin/helium-manager';
 import { MessageService } from '@zeppelin/services';
 import { setTheme } from '@zeppelin/visualizations/g2.config';
-import { log } from 'ng-zorro-antd/core';
+import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
   selector: 'zeppelin-workspace',
@@ -29,26 +28,48 @@ import { log } from 'ng-zorro-antd/core';
 })
 export class WorkspaceComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject();
-  websocketConnected = false;
+  private messageId = null;
   publishMode = false;
 
   constructor(
     public messageService: MessageService,
     private cdr: ChangeDetectorRef,
+    private nzMessageService: NzMessageService,
     private heliumManagerService: HeliumManagerService
   ) {}
 
-  onActivate(e) {
-    this.publishMode = e && e[publishedSymbol];
+  onActivate(component) {
+    this.publishMode = component && component[publishedSymbol];
     this.cdr.markForCheck();
   }
 
-  ngOnInit() {
+  /**
+   * Close the old connection manually when the network is offline
+   * and connect a new, the {@link MessageService} will auto-retry
+   */
+  @HostListener('window:offline')
+  onOffline() {
+    this.messageService.close();
+    this.messageService.connect();
+  }
+
+  setUpWebsocketReconnectMessage() {
     this.messageService.connectedStatus$.pipe(takeUntil(this.destroy$)).subscribe(data => {
-      this.websocketConnected = data;
+      if (!data) {
+        if (this.messageId === null) {
+          this.messageId = this.nzMessageService.loading('Connecting WebSocket ...', { nzDuration: 0 }).messageId;
+        }
+      } else {
+        this.nzMessageService.remove(this.messageId);
+        this.messageId = null;
+      }
       this.cdr.markForCheck();
     });
+  }
+
+  ngOnInit() {
     setTheme();
+    this.setUpWebsocketReconnectMessage();
     this.heliumManagerService.initPackages();
   }
 

zeppelin-web-angular/src/app/pages/workspace/workspace.module.ts

@@ -19,9 +19,11 @@ import { RouterModule } from '@angular/router';
 import { HeliumManagerModule } from '@zeppelin/helium-manager';
 import { ShareModule } from '@zeppelin/share';
 
-import { WorkspaceRoutingModule } from './workspace-routing.module';
+import { NzMessageModule } from 'ng-zorro-antd/message';
 import { WorkspaceComponent } from './workspace.component';
 
+import { WorkspaceRoutingModule } from './workspace-routing.module';
+
 @NgModule({
   declarations: [WorkspaceComponent],
   imports: [
@@ -31,7 +33,8 @@ import { WorkspaceComponent } from './workspace.component';
     HttpClientModule,
     ShareModule,
     RouterModule,
-    HeliumManagerModule
+    HeliumManagerModule,
+    NzMessageModule
   ]
 })
 export class WorkspaceModule {}

zeppelin-web-angular/src/app/share/about-zeppelin/about-zeppelin.component.html

@@ -12,7 +12,7 @@
 
 <div nz-row class="modal">
   <div nz-col [nzSm]="8" [nzXs]="0" class="about-logo">
-    <img src="../../assets/images/zeppelin_svg_logo.svg" alt="Apache Zeppelin" title="Apache Zeppelin"/>
+    <img src="assets/images/zeppelin_svg_logo.svg" alt="Apache Zeppelin" title="Apache Zeppelin"/>
   </div>
   <div nz-col [nzSm]="16" [nzXs]="24" class="content">
     <h3>Apache Zeppelin</h3>