Bugfix/websockets (#2808)

* retry logic for init status

* fix login flashing and sideload hanging

* add logging

* misc backend bugfixes

* use closingObserver instead

* always show reinstall button

* go back to endWith

* show error if sideload fails

* refactor more watch channels

* navigate to services page on sideload complete

* handle error closure events properly

* handle error scenario better in sideload websocket

* remove a clone

---------

Co-authored-by: Matt Hill <mattnine@protonmail.com>

web/projects/ui/src/app/services/api/embassy-api.service.ts

@@ -7,6 +7,7 @@ import {
   GetPackagesRes,
   MarketplacePkg,
 } from '@start9labs/marketplace'
+import { WebSocketSubject } from 'rxjs/webSocket'
 
 export abstract class ApiService {
   // http
@@ -30,7 +31,7 @@ export abstract class ApiService {
   abstract openWebsocket$<T>(
     guid: string,
     config?: RR.WebsocketConfig<T>,
-  ): Observable<T>
+  ): WebSocketSubject<T>
 
   // state
 

web/projects/ui/src/app/services/api/embassy-live-api.service.ts

@@ -11,7 +11,7 @@ import { PATCH_CACHE } from 'src/app/services/patch-db/patch-db-source'
 import { ApiService } from './embassy-api.service'
 import { RR } from './api.types'
 import { ConfigService } from '../config.service'
-import { webSocket } from 'rxjs/webSocket'
+import { webSocket, WebSocketSubject } from 'rxjs/webSocket'
 import { Observable, filter, firstValueFrom } from 'rxjs'
 import { AuthService } from '../auth.service'
 import { DOCUMENT } from '@angular/common'
@@ -85,7 +85,7 @@ export class LiveApiService extends ApiService {
   openWebsocket$<T>(
     guid: string,
     config: RR.WebsocketConfig<T> = {},
-  ): Observable<T> {
+  ): WebSocketSubject<T> {
     const { location } = this.document.defaultView!
     const protocol = location.protocol === 'http:' ? 'ws' : 'wss'
     const host = location.host

web/projects/ui/src/app/services/api/embassy-mock-api.service.ts

@@ -37,6 +37,7 @@ import {
   GetPackagesRes,
   MarketplacePkg,
 } from '@start9labs/marketplace'
+import { WebSocketSubject } from 'rxjs/webSocket'
 
 const PROGRESS: T.FullProgress = {
   overall: {
@@ -107,11 +108,11 @@ export class MockApiService extends ApiService {
   openWebsocket$<T>(
     guid: string,
     config: RR.WebsocketConfig<T> = {},
-  ): Observable<T> {
+  ): WebSocketSubject<T> {
     if (guid === 'db-guid') {
       return this.mockWsSource$.pipe<any>(
         shareReplay({ bufferSize: 1, refCount: true }),
-      )
+      ) as WebSocketSubject<T>
     } else if (guid === 'logs-guid') {
       return interval(50).pipe<any>(
         map((_, index) => {
@@ -120,16 +121,16 @@ export class MockApiService extends ApiService {
           if (index === 100) throw new Error('HAAHHA')
           return Mock.ServerLogs[0]
         }),
-      )
+      ) as WebSocketSubject<T>
     } else if (guid === 'init-progress-guid') {
       return from(this.initProgress()).pipe(
         startWith(PROGRESS),
-      ) as Observable<T>
+      ) as WebSocketSubject<T>
     } else if (guid === 'sideload-progress-guid') {
       config.openObserver?.next(new Event(''))
       return from(this.initProgress()).pipe(
         startWith(PROGRESS),
-      ) as Observable<T>
+      ) as WebSocketSubject<T>
     } else {
       throw new Error('invalid guid type')
     }

web/projects/ui/src/app/services/auth.service.ts

@@ -27,9 +27,9 @@ export class AuthService {
   ) {}
 
   init(): void {
-    const loggedIn = this.storage.get(this.LOGGED_IN_KEY)
+    const loggedIn = this.storage.get<boolean>(this.LOGGED_IN_KEY)
     if (loggedIn) {
-      this.setVerified()
+      this.authState$.next(AuthState.VERIFIED)
     } else {
       this.setUnverified()
     }