fix unsubscribes on logout, better connection monitoring, and better message for lost connection

ui/src/app/pages/apps-routes/app-list/app-list.page.html

@@ -36,8 +36,8 @@
             <img *ngIf="!connectionFailure" [class]="pkg.value.bulb.class" [src]="pkg.value.bulb.img" />
 
             <ion-card-header>
-              <status *ngIf="[PackageState.Installed, PackageState.Removing] | includes : pkg.value.entry.state" [rendering]="pkg.value.statusRendering" size="calc(8px + .4vw)" weight="bold"></status>
-              <p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : pkg.value.entry.state" class="installing-status"><ion-text color="primary">{{ pkg.value.entry.state | titlecase }}...{{ (pkg.value.entry['install-progress'] | installState).totalProgress }}%</ion-text></p>
+              <status *ngIf="[PackageState.Installed, PackageState.Removing] | includes : pkg.value.entry.state" [disconnected]="connectionFailure" [rendering]="pkg.value.statusRendering" size="calc(8px + .4vw)" weight="bold"></status>
+              <p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : pkg.value.entry.state" class="main-status"><ion-text color="primary">{{ pkg.value.entry.state | titlecase }}...{{ (pkg.value.entry['install-progress'] | installState).totalProgress }}%</ion-text></p>
               <ion-card-title>{{ pkg.value.entry.manifest.title }}</ion-card-title>
             </ion-card-header>
           </ion-card>

ui/src/app/pages/apps-routes/app-list/app-list.page.scss

@@ -78,7 +78,7 @@
   right: 0px;
 }
 
-.installing-status {
+.main-status {
   font-size: calc(8px + .4vw);
   font-weight: bold;
   margin: 0;

ui/src/app/pages/apps-routes/app-show/app-show.page.html

@@ -23,54 +23,69 @@
     <ion-item-divider>Status</ion-item-divider>
     <ion-item>
       <ion-label style="overflow: visible;">
-        <status size="x-large" weight="500" [rendering]="rendering"></status>
+        <status [disconnected]="connectionFailure" size="x-large" weight="500" [rendering]="rendering"></status>
       </ion-label>
       <ion-button slot="end" class="action-button" *ngIf="pkg.state === PackageState.Installed && (pkg.manifest.interfaces | hasUi)" [disabled]="!(pkg.state | isLaunchable : pkg.installed.status.main.status : pkg.manifest.interfaces)" (click)="launchUiTab()">
         <ion-icon slot="start" name="open-outline"></ion-icon>
         Open UI
       </ion-button>
-      <ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.NeedsConfig" [routerLink]="['config']">
-        Configure
-      </ion-button>
-      <ion-button slot="end" class="action-button" *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : rendering.feStatus" color="danger" (click)="stop()">
-        Stop
-      </ion-button>
-      <ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.DependencyIssue" (click)="scrollToRequirements()">
-        Fix
-      </ion-button>
-      <ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.Stopped" color="success" (click)="tryStart()">
-        Start
-      </ion-button>
+      <ng-container *ngIf="!connectionFailure">
+        <ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.NeedsConfig" [routerLink]="['config']">
+          Configure
+        </ion-button>
+        <ion-button slot="end" class="action-button" *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : rendering.feStatus" color="danger" (click)="stop()">
+          Stop
+        </ion-button>
+        <ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.DependencyIssue" (click)="scrollToRequirements()">
+          Fix
+        </ion-button>
+        <ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.Stopped" color="success" (click)="tryStart()">
+          Start
+        </ion-button>
+      </ng-container>
     </ion-item>
 
-    <!-- ** iff  && !restoring/backing-up ** -->
+    <!-- ** installed ** -->
     <ng-container *ngIf="pkg.state === PackageState.Installed">
-      <!-- ** iff !restoring/backing-up ** -->
+      <!-- ** !restoring/backing-up ** -->
       <ng-container *ngIf="!([PackageMainStatus.BackingUp, PackageMainStatus.Restoring] | includes : mainStatus.status); else maintenance">
-        <!-- ** iff health checks ** -->
+        <!-- ** health checks ** -->
         <ng-container *ngIf="!(mainStatus.health | empty)">
           <ion-item-divider>Health Checks</ion-item-divider>
-          <ion-item *ngFor="let health of mainStatus.health | keyvalue : asIsOrder">
-            <ion-spinner class="icon-spinner" color="warning" slot="start" *ngIf="['starting', 'loading'] | includes : health.value.result"></ion-spinner>
-            <ion-icon slot="start" *ngIf="health.value.result === 'success'" name="checkmark-outline" color="success"></ion-icon>
-            <ion-icon slot="start" *ngIf="health.value.result === 'failure'" name="close" color="danger"></ion-icon>
-            <ion-icon slot="start" *ngIf="health.value.result === 'disabled'" name="remove-outline" color="dark"></ion-icon>
-            <ion-label>
-              <p>{{ health.key }}</p>
-              <h2>{{ health.value.result }}</h2>
-              <p *ngIf="health.value.result === 'failure'"><ion-text color="danger">{{ health.value.error }}</ion-text></p>
-            </ion-label>
-          </ion-item>
+          <ng-container *ngIf="connectionFailure">
+            <ion-item *ngFor="let health of mainStatus.health | keyvalue">
+              <ion-avatar slot="start">
+                <ion-skeleton-text style="width: 20px; height: 20px; border-radius: 0;"></ion-skeleton-text>
+              </ion-avatar>
+              <ion-label>
+                <ion-skeleton-text style="width: 100px; margin-bottom: 10px;"></ion-skeleton-text>
+                <ion-skeleton-text style="width: 150px; margin-bottom: 10px;"></ion-skeleton-text>
+              </ion-label>
+            </ion-item>
+          </ng-container>
+          <ng-container *ngIf="!connectionFailure">
+            <ion-item *ngFor="let health of mainStatus.health | keyvalue : asIsOrder">
+              <ion-spinner class="icon-spinner" color="warning" slot="start" *ngIf="['starting', 'loading'] | includes : health.value.result"></ion-spinner>
+              <ion-icon slot="start" *ngIf="health.value.result === 'success'" name="checkmark-outline" color="success"></ion-icon>
+              <ion-icon slot="start" *ngIf="health.value.result === 'failure'" name="close" color="danger"></ion-icon>
+              <ion-icon slot="start" *ngIf="health.value.result === 'disabled'" name="remove-outline" color="dark"></ion-icon>
+              <ion-label>
+                <p>{{ health.key }}</p>
+                <h2>{{ health.value.result }}</h2>
+                <p *ngIf="health.value.result === 'failure'"><ion-text color="danger">{{ health.value.error }}</ion-text></p>
+              </ion-label>
+            </ion-item>
+          </ng-container>
         </ng-container>
 
-        <!-- ** always ** -->
+        <!-- ** menu ** -->
         <ion-item-divider>Menu</ion-item-divider>
         <ion-item button detail *ngFor="let button of buttons" (click)="button.action()">
           <ion-icon slot="start" [name]="button.icon"></ion-icon>
           <ion-label>{{ button.title }}</ion-label>
         </ion-item>
 
-        <!-- ** iff dependencies ** -->
+        <!-- ** dependencies ** -->
         <ng-container *ngIf="!(pkg.installed['current-dependencies'] | empty)">
           <ion-item-divider id="dependencies">Dependencies</ion-item-divider>
           <!-- A current-dependency is a subset of the pkg.manifest.dependencies that is currently required as determined by the service config. -->

ui/src/app/pages/apps-routes/app-show/app-show.page.ts

@@ -10,7 +10,7 @@ import { ConfigService } from 'src/app/services/config.service'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { DependencyErrorConfigUnsatisfied, DependencyErrorNotInstalled, DependencyErrorType, MainStatus, PackageDataEntry, PackageMainStatus, PackageState } from 'src/app/services/patch-db/data-model'
 import { FEStatus, PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
-import { ConnectionService } from 'src/app/services/connection.service'
+import { ConnectionFailure, ConnectionService } from 'src/app/services/connection.service'
 import { ErrorToastService } from 'src/app/services/error-toast.service'
 import { AppConfigPage } from 'src/app/modals/app-config/app-config.page'
 
@@ -24,7 +24,6 @@ export class AppShowPage {
   pkg: PackageDataEntry
   hideLAN: boolean
   buttons: Button[] = []
-  connected: boolean
   FeStatus = FEStatus
   PackageState = PackageState
   DependencyErrorType = DependencyErrorType
@@ -32,6 +31,7 @@ export class AppShowPage {
   Math = Math
   mainStatus: MainStatus
   PackageMainStatus = PackageMainStatus
+  connectionFailure: boolean
 
   @ViewChild(IonContent) content: IonContent
   subs: Subscription[] = []
@@ -53,18 +53,17 @@ export class AppShowPage {
   async ngOnInit () {
     this.pkgId = this.route.snapshot.paramMap.get('pkgId')
     this.subs = [
-      combineLatest([
-        this.patch.connected$(),
-        this.patch.watch$('package-data', this.pkgId),
-      ])
-      .subscribe(([connected, pkg]) => {
+      // 1
+      this.patch.watch$('package-data', this.pkgId)
+      .subscribe(pkg => {
         this.pkg = pkg
-        this.connected = connected
         this.rendering = renderPkgStatus(pkg.state, pkg.installed.status)
+        this.mainStatus = pkg.installed.status.main
       }),
-      this.patch.watch$('package-data', this.pkgId, 'installed', 'status', 'main')
-      .subscribe(main => {
-        this.mainStatus = main
+      // 2
+      this.connectionService.watchFailure$()
+      .subscribe(connectionFailure => {
+        this.connectionFailure = connectionFailure !== ConnectionFailure.None
       }),
     ]
     this.setButtons()