better network monitoring

ui/src/app/app.component.ts

@@ -12,7 +12,7 @@ import { LoadingOptions } from '@ionic/core'
 import { PatchDbModel } from './models/patch-db/patch-db-model'
 import { HttpService } from './services/http.service'
 import { ServerStatus } from './models/patch-db/data-model'
-import { ConnectionService } from './services/connection.service'
+import { ConnectionFailure, ConnectionService } from './services/connection.service'
 
 @Component({
   selector: 'app-root',
@@ -83,6 +83,7 @@ export class AppComponent {
         this.http.authReqEnabled = true
         this.showMenu = true
         this.patch.start()
+        this.connectionService.start()
         // watch network
         this.watchConnection(auth)
         // watch router to highlight selected menu item
@@ -95,6 +96,7 @@ export class AppComponent {
       } else if (auth === AuthState.UNVERIFIED) {
         this.http.authReqEnabled = false
         this.showMenu = false
+        this.connectionService.stop()
         this.patch.stop()
         this.storage.clear()
         this.router.navigate(['/login'], { replaceUrl: true })
@@ -107,13 +109,13 @@ export class AppComponent {
   }
 
   private watchConnection (auth: AuthState): void {
-    this.connectionService.monitor$()
+    this.connectionService.watch$()
     .pipe(
       distinctUntilChanged(),
       takeWhile(() => auth === AuthState.VERIFIED),
     )
-    .subscribe(internet => {
-      if (!internet) {
+    .subscribe(connectionFailure => {
+      if (connectionFailure !== ConnectionFailure.None) {
         this.presentToastOffline()
       } else {
         if (this.offlineToast) {
@@ -121,7 +123,6 @@ export class AppComponent {
           this.offlineToast = undefined
         }
       }
-      console.log('INTERNET CONNECTION', internet)
     })
   }
 

ui/src/app/components/status/status.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core'
 import { PackageDataEntry } from 'src/app/models/patch-db/data-model'
-import { ConnectionState } from 'src/app/services/connection.service'
 import { renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
+import { ConnectionStatus } from 'patch-db-client'
 
 @Component({
   selector: 'status',
@@ -10,7 +10,7 @@ import { renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
 })
 export class StatusComponent {
   @Input() pkg: PackageDataEntry
-  @Input() connection: ConnectionState
+  @Input() connected: boolean
   @Input() size?: 'small' | 'medium' | 'large' = 'large'
   @Input() style?: string = 'regular'
   @Input() weight?: string = 'normal'
@@ -19,7 +19,7 @@ export class StatusComponent {
   showDots = false
 
   ngOnChanges () {
-    const { display, color, showDots } = renderPkgStatus(this.pkg, this.connection)
+    const { display, color, showDots } = renderPkgStatus(this.pkg)
     this.display = display
     this.color = color
     this.showDots = showDots

ui/src/app/models/patch-db/data-model.ts

@@ -16,7 +16,8 @@ export interface ServerInfo {
   'lan-address': URL
   'tor-address': URL
   status: ServerStatus
-  registry: URL
+  'package-registry': URL
+  'system-registry': URL
   wifi: WiFiInfo
   'unread-notification-count': number
   specs: {
@@ -24,6 +25,10 @@ export interface ServerInfo {
     Disk: string
     Memory: string
   }
+  'connection-addresses': {
+    tor: string[]
+    clearnet: string[]
+  }
 }
 
 export enum ServerStatus {

ui/src/app/models/patch-db/patch-db-model.ts

@@ -1,7 +1,7 @@
 import { Inject, Injectable, InjectionToken } from '@angular/core'
-import { Bootstrapper, PatchDB, Source, Store } from 'patch-db-client'
+import { Bootstrapper, ConnectionStatus, PatchDB, Source, Store } from 'patch-db-client'
 import { Observable, of, Subscription } from 'rxjs'
-import { catchError, debounceTime } from 'rxjs/operators'
+import { catchError, debounceTime, map } from 'rxjs/operators'
 import { DataModel } from './data-model'
 
 export const BOOTSTRAPPER = new InjectionToken<Bootstrapper<DataModel>>('app.config')
@@ -37,6 +37,7 @@ export class PatchDbModel {
         },
         error: e => {
           console.error('patch-db-sync sub ERROR', e)
+          this.start()
         },
         complete: () => {
           console.error('patch-db-sync sub COMPLETE')
@@ -54,7 +55,18 @@ export class PatchDbModel {
     }
   }
 
-  watch$: Store < DataModel > ['watch$'] = (...args: (string | number)[]): Observable<DataModel> => {
+  connected$ (): Observable<boolean> {
+    return this.patchDb.connectionStatus$
+    .pipe(
+      map(status => status === ConnectionStatus.Connected),
+    )
+  }
+
+  connectionStatus$ (): Observable<ConnectionStatus> {
+    return this.patchDb.connectionStatus$.asObservable()
+  }
+
+  watch$: Store<DataModel> ['watch$'] = (...args: (string | number)[]): Observable<DataModel> => {
     // console.log('WATCHING')
     return this.patchDb.store.watch$(...(args as [])).pipe(
       catchError(e => {

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

@@ -8,45 +8,43 @@
 </ion-header>
 
 <ion-content style="position: relative">
-  <ng-container *ngIf="patch.watch$('package-data') | ngrxPush as pkgs">
 
-    <div *ngIf="pkgs | empty; else list" class="ion-text-center ion-padding">
-      <div style="display: flex; flex-direction: column; justify-content: center; height: 40vh">
-        <h2>Welcome to your <span style="font-style: italic; color: var(--ion-color-start9)">Embassy</span></h2>
-        <p class="ion-text-wrap">Get started by installing your first service.</p>
-      </div>
-      <ion-button [routerLink]="['/marketplace']" style="width: 50%;" fill="outline">
-        <ion-icon slot="start" name="storefront-outline"></ion-icon>
-        Marketplace
-      </ion-button>
+  <div *ngIf="pkgs | empty; else list" class="ion-text-center ion-padding">
+    <div style="display: flex; flex-direction: column; justify-content: center; height: 40vh">
+      <h2>Welcome to your <span style="font-style: italic; color: var(--ion-color-start9)">Embassy</span></h2>
+      <p class="ion-text-wrap">Get started by installing your first service.</p>
     </div>
+    <ion-button [routerLink]="['/marketplace']" style="width: 50%;" fill="outline">
+      <ion-icon slot="start" name="storefront-outline"></ion-icon>
+      Marketplace
+    </ion-button>
+  </div>
 
-    <ng-template #list>
-      <ion-grid>
-        <ion-row *ngIf="connectionService.monitor$() | ngrxPush as connection">
-          <ion-col *ngFor="let pkg of pkgs | keyvalue : asIsOrder" sizeXs="4" sizeSm="3" sizeLg="3" sizeXl="2">
-            <ion-card class="installed-card" style="position:relative" [routerLink]="['/services', (pkg.value | manifest).id]">
-              <div class="launch-container" *ngIf="pkg.value | hasUi">
-                <div class="launch-button-triangle"  (click)="launchUi(pkg.value, $event)" [class.launch-disabled]="!(pkg.value | isLaunchable)">
-                  <ion-icon name="rocket-outline"></ion-icon>
-                </div>
+  <ng-template #list>
+    <ion-grid>
+      <ion-row>
+        <ion-col *ngFor="let pkg of pkgs | keyvalue : asIsOrder" sizeXs="4" sizeSm="3" sizeLg="3" sizeXl="2">
+          <ion-card class="installed-card" style="position:relative" [routerLink]="['/services', (pkg.value | manifest).id]">
+            <div class="launch-container" *ngIf="pkg.value | hasUi">
+              <div class="launch-button-triangle"  (click)="launchUi(pkg.value, $event)" [class.launch-disabled]="!(pkg.value | isLaunchable)">
+                <ion-icon name="rocket-outline"></ion-icon>
               </div>
-    
-              <img style="position: absolute" class="main-img" [src]="pkg.value['static-files'].icon" alt="icon" />
-              <img class="main-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
-              <img class="bulb-on" *ngIf="pkg.value | displayBulb: 'green' : connection" src="assets/img/running-bulb.png"/>
-              <img class="bulb-on" *ngIf="pkg.value | displayBulb: 'red' : connection" src="assets/img/issue-bulb.png"/>
-              <img class="bulb-on" *ngIf="pkg.value | displayBulb: 'yellow' : connection" src="assets/img/warning-bulb.png"/>
-              <img class="bulb-off" *ngIf="pkg.value | displayBulb: 'off' : connection" src="assets/img/off-bulb.png"/>
+            </div>
+  
+            <img style="position: absolute" class="main-img" [src]="pkg.value['static-files'].icon" alt="icon" />
+            <img class="main-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
+            <img class="bulb-on" *ngIf="pkg.value | displayBulb: 'green' : connected" src="assets/img/running-bulb.png"/>
+            <img class="bulb-on" *ngIf="pkg.value | displayBulb: 'red' : connected" src="assets/img/issue-bulb.png"/>
+            <img class="bulb-on" *ngIf="pkg.value | displayBulb: 'yellow' : connected" src="assets/img/warning-bulb.png"/>
+            <img class="bulb-off" *ngIf="pkg.value | displayBulb: 'off' : connected" src="assets/img/off-bulb.png"/>
 
-              <ion-card-header>
-                <status [pkg]="pkg.value" [connection]="connection" size="calc(4px + .7vw)" weight="bold"></status>
-                <ion-card-title>{{ (pkg.value | manifest).title }}</ion-card-title>
-              </ion-card-header>
-            </ion-card>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    </ng-template>
-  </ng-container>
+            <ion-card-header>
+              <status *ngIf="connected" [pkg]="pkg.value" size="calc(4px + .7vw)" weight="bold"></status>
+              <ion-card-title>{{ (pkg.value | manifest).title }}</ion-card-title>
+            </ion-card-header>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </ng-template>
 </ion-content>

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

@@ -3,6 +3,7 @@ import { ConfigService } from 'src/app/services/config.service'
 import { ConnectionService } from 'src/app/services/connection.service'
 import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
 import { PackageDataEntry } from 'src/app/models/patch-db/data-model'
+import { Subscription } from 'rxjs'
 
 @Component({
   selector: 'app-list',
@@ -10,7 +11,9 @@ import { PackageDataEntry } from 'src/app/models/patch-db/data-model'
   styleUrls: ['./app-list.page.scss'],
 })
 export class AppListPage {
-  pkgs: PackageDataEntry[] = []
+  pkgs: { [id: string]: PackageDataEntry } = { }
+  connected: boolean
+  subs: Subscription[] = []
 
   constructor (
     private readonly config: ConfigService,
@@ -18,6 +21,19 @@ export class AppListPage {
     public readonly patch: PatchDbModel,
   ) { }
 
+  ngOnInit () {
+    this.subs = [
+      this.patch.watch$('package-data').subscribe(pkgs => {
+        this.pkgs = pkgs
+      }),
+      this.patch.connected$().subscribe(c => this.connected = c),
+    ]
+  }
+
+  ngOnDestroy () {
+    this.subs.forEach(sub => sub.unsubscribe())
+  }
+
   launchUi (pkg: PackageDataEntry, event: Event): void {
     event.preventDefault()
     event.stopPropagation()

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

@@ -16,122 +16,120 @@
     <ion-text class="ion-text-wrap" color="danger">{{ error }}</ion-text>
   </ion-item>
 
-  <ng-container *ngrxLet="connectionService.monitor$() as connection">
-    <ng-container *ngIf="pkg | status : connection as status">
-      <!-- top plate -->
-      <div class="top-plate">
-        <ion-item class="no-cushion-item" lines="none">
-          <ion-label class="ion-text-wrap" style="
-            display: grid;
-            grid-template-columns: 80px auto;
-            margin: 0px;
-            margin-top: 15px;"
-          >
-            <ion-avatar style="justify-self: center; height: 55px; width: 55px" slot="start">
-              <img [src]="pkg['static-files'].icon" />
-            </ion-avatar>
-            <div style="display: flex; flex-direction: column;">
-              <ion-text style="font-family: 'Montserrat'; font-size: x-large; line-height: normal;" [class.less-large]="manifest.title.length > 20">
-                {{ manifest.title }}
-              </ion-text>
-              <ion-text style="margin-top: -5px; margin-left: 2px;">
-                {{ manifest.version | displayEmver }}
-              </ion-text>
-            </div>
-          </ion-label>
-        </ion-item>
-    
-        <div class="status-readout">
-          <status size="large" weight="bold" [pkg]="pkg" [connection]="connection"></status>
-          <ion-button *ngIf="status === FeStatus.NeedsConfig" expand="block" fill="outline" [routerLink]="['config']">
-            Configure
-          </ion-button>
-          <ion-button *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : status" expand="block" fill="outline" color="danger" (click)="stop()">
-            Stop
-          </ion-button>
-          <ion-button *ngIf="status === FeStatus.DependencyIssue" expand="block" fill="outline" (click)="scrollToRequirements()">
-            Fix
-          </ion-button>
-          <ion-button *ngIf="status === FeStatus.Stopped" expand="block" fill="outline" color="success" (click)="tryStart()">
-            Start
-          </ion-button>
-        </div>
-    
-        <ion-button size="small" *ngIf="pkg | hasUi" [disabled]="!(pkg | isLaunchable)" class="launch-button" expand="block" (click)="launchUiTab()">
-          Launch Web Interface
-          <ion-icon slot="end" name="rocket-outline"></ion-icon>
+  <ng-container *ngIf="pkg">
+    <!-- top plate -->
+    <div class="top-plate">
+      <ion-item class="no-cushion-item" lines="none">
+        <ion-label class="ion-text-wrap" style="
+          display: grid;
+          grid-template-columns: 80px auto;
+          margin: 0px;
+          margin-top: 15px;"
+        >
+          <ion-avatar style="justify-self: center; height: 55px; width: 55px" slot="start">
+            <img [src]="pkg['static-files'].icon" />
+          </ion-avatar>
+          <div style="display: flex; flex-direction: column;">
+            <ion-text style="font-family: 'Montserrat'; font-size: x-large; line-height: normal;" [class.less-large]="manifest.title.length > 20">
+              {{ manifest.title }}
+            </ion-text>
+            <ion-text style="margin-top: -5px; margin-left: 2px;">
+              {{ manifest.version | displayEmver }}
+            </ion-text>
+          </div>
+        </ion-label>
+      </ion-item>
+  
+      <div class="status-readout">
+        <status *ngIf="connected" size="large" weight="bold" [pkg]="pkg"></status>
+        <ion-button *ngIf="pkg.status === FeStatus.NeedsConfig" expand="block" fill="outline" [routerLink]="['config']">
+          Configure
+        </ion-button>
+        <ion-button *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : pkg.status" expand="block" fill="outline" color="danger" (click)="stop()">
+          Stop
+        </ion-button>
+        <ion-button *ngIf="pkg.status === FeStatus.DependencyIssue" expand="block" fill="outline" (click)="scrollToRequirements()">
+          Fix
+        </ion-button>
+        <ion-button *ngIf="pkg.status === FeStatus.Stopped" expand="block" fill="outline" color="success" (click)="tryStart()">
+          Start
         </ion-button>
       </div>
+  
+      <ion-button size="small" *ngIf="pkg | hasUi" [disabled]="!(pkg | isLaunchable)" class="launch-button" expand="block" (click)="launchUiTab()">
+        Launch Web Interface
+        <ion-icon slot="end" name="rocket-outline"></ion-icon>
+      </ion-button>
+    </div>
 
-      <ng-container *ngIf="!([FeStatus.Installing, FeStatus.Updating, FeStatus.Removing] | includes : status)">
-        <ion-grid class="ion-text-center" style="margin: 0 6px;">
-          <ion-row>
-            <ion-col *ngFor="let button of buttons" sizeMd="4" sizeSm="6" sizeXs="6">
-                <ion-button style="width: 100%; min-height: 120px;" color="light" [disabled]="button.disabled | includes : status" (click)="button.action()">
-                  <div>
-                    <ion-icon size="large" [name]="button.icon"></ion-icon>
-                    <br/><br/>
-                    {{ button.title }}
-                  </div>
-                </ion-button>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
+    <ng-container *ngIf="!([FeStatus.Installing, FeStatus.Updating, FeStatus.Removing] | includes : pkg.status)">
+      <ion-grid class="ion-text-center" style="margin: 0 6px;">
+        <ion-row>
+          <ion-col *ngFor="let button of buttons" sizeMd="4" sizeSm="6" sizeXs="6">
+              <ion-button style="width: 100%; min-height: 120px;" color="light" [disabled]="button.disabled | includes : pkg.status" (click)="button.action()">
+                <div>
+                  <ion-icon size="large" [name]="button.icon"></ion-icon>
+                  <br/><br/>
+                  {{ button.title }}
+                </div>
+              </ion-button>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
 
-        <ion-item-group class="ion-padding-bottom">      
-          <!-- dependencies -->
-          <ng-container *ngIf="!(pkg.installed['current-dependencies'] | empty)">
-            <ion-card id="dependencies" class="dep-card">
-              <ion-card-header>
-                <ion-card-title>Dependencies</ion-card-title>
-              </ion-card-header>
-              <ion-card-content>
-                <!-- A current-dependency is a subset of the manifest.dependencies that is currently required as determined by the service config. -->
-                <div *ngFor="let dep of pkg.installed['current-dependencies'] | keyvalue">
-                  <ion-item *ngrxLet="patch.watch$('package-data', dep.key) as localDep" class="dependency-item">
-                    <ion-avatar slot="start" style="position: relative; height: 5vh; width: 5vh; margin: 0px;">
-                      <div class="dep-badge" [class]="pkg.installed.status['dependency-errors'][dep.key] ? 'dep-issue' : 'dep-sat'"></div>
-                      <img [src]="localDep ? localDep['static-files'].icon : pkg.installed.status['dependency-errors'][dep.key]?.icon" />
-                    </ion-avatar>
-                    <ion-label class="ion-text-wrap" style="padding: 1vh; padding-left: 2vh">
-                      <h4 style="font-family: 'Montserrat'">{{ localDep ? (localDep | manifest).title : pkg.installed.status['dependency-errors'][dep.key]?.title }}</h4>
-                      <p style="font-size: small">{{ manifest.dependencies[dep.key].version | displayEmver }}</p>
-                      <p style="padding-top: 2px; position: relative; font-style: italic; font-size: smaller"><ion-text [color]="pkg.installed.status['dependency-errors'][dep.key] ? 'warning' : 'success'">{{ pkg.installed.status['dependency-errors'][dep.key] ? pkg.installed.status['dependency-errors'][dep.key].type : 'satisfied' }}</ion-text></p>
-                    </ion-label>
+      <ion-item-group class="ion-padding-bottom">      
+        <!-- dependencies -->
+        <ng-container *ngIf="!(pkg.installed['current-dependencies'] | empty)">
+          <ion-card id="dependencies" class="dep-card">
+            <ion-card-header>
+              <ion-card-title>Dependencies</ion-card-title>
+            </ion-card-header>
+            <ion-card-content>
+              <!-- A current-dependency is a subset of the manifest.dependencies that is currently required as determined by the service config. -->
+              <div *ngFor="let dep of pkg.installed['current-dependencies'] | keyvalue">
+                <ion-item *ngrxLet="patch.watch$('package-data', dep.key) as localDep" class="dependency-item">
+                  <ion-avatar slot="start" style="position: relative; height: 5vh; width: 5vh; margin: 0px;">
+                    <div class="dep-badge" [class]="pkg.installed.status['dependency-errors'][dep.key] ? 'dep-issue' : 'dep-sat'"></div>
+                    <img [src]="localDep ? localDep['static-files'].icon : pkg.installed.status['dependency-errors'][dep.key]?.icon" />
+                  </ion-avatar>
+                  <ion-label class="ion-text-wrap" style="padding: 1vh; padding-left: 2vh">
+                    <h4 style="font-family: 'Montserrat'">{{ localDep ? (localDep | manifest).title : pkg.installed.status['dependency-errors'][dep.key]?.title }}</h4>
+                    <p style="font-size: small">{{ manifest.dependencies[dep.key].version | displayEmver }}</p>
+                    <p style="padding-top: 2px; position: relative; font-style: italic; font-size: smaller"><ion-text [color]="pkg.installed.status['dependency-errors'][dep.key] ? 'warning' : 'success'">{{ pkg.installed.status['dependency-errors'][dep.key] ? pkg.installed.status['dependency-errors'][dep.key].type : 'satisfied' }}</ion-text></p>
+                  </ion-label>
 
-                    <ion-button *ngIf="!pkg.installed.status['dependency-errors'][dep.key] || (pkg.installed.status['dependency-errors'][dep.key] && [DependencyErrorType.InterfaceHealthChecksFailed, DependencyErrorType.HealthChecksFailed] | includes : pkg.installed.status['dependency-errors'][dep.key].type)" slot="end" size="small" [routerLink]="['/services', dep.key]" color="primary" fill="outline" style="font-size: x-small">
-                      View
+                  <ion-button *ngIf="!pkg.installed.status['dependency-errors'][dep.key] || (pkg.installed.status['dependency-errors'][dep.key] && [DependencyErrorType.InterfaceHealthChecksFailed, DependencyErrorType.HealthChecksFailed] | includes : pkg.installed.status['dependency-errors'][dep.key].type)" slot="end" size="small" [routerLink]="['/services', dep.key]" color="primary" fill="outline" style="font-size: x-small">
+                    View
+                  </ion-button>
+
+                  <ng-container *ngIf="pkg.installed.status['dependency-errors'][dep.key]">
+                    <ion-button *ngIf="!localDep" slot="end" size="small" (click)="fixDep('install', dep.key)" color="primary" fill="outline" style="font-size: x-small">
+                      Install
                     </ion-button>
 
-                    <ng-container *ngIf="pkg.installed.status['dependency-errors'][dep.key]">
-                      <ion-button *ngIf="!localDep" slot="end" size="small" (click)="fixDep('install', dep.key)" color="primary" fill="outline" style="font-size: x-small">
-                        Install
+                    <ng-container *ngIf="localDep && localDep.state === PackageState.Installed">
+                      <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.NotRunning" slot="end" size="small" [routerLink]="['/services', dep.key]" color="primary" fill="outline" style="font-size: x-small">
+                        Start
                       </ion-button>
+                      <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.IncorrectVersion" slot="end" size="small" (click)="fixDep('update', dep.key)" color="primary" fill="outline" style="font-size: x-small">
+                        Update
+                      </ion-button>
+                      <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.ConfigUnsatisfied" slot="end" size="small" (click)="fixDep('configure', dep.key)" color="primary" fill="outline" style="font-size: x-small">
+                        Configure
+                      </ion-button>
+                    </ng-container>
 
-                      <ng-container *ngIf="localDep && localDep.state === PackageState.Installed">
-                        <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.NotRunning" slot="end" size="small" [routerLink]="['/services', dep.key]" color="primary" fill="outline" style="font-size: x-small">
-                          Start
-                        </ion-button>
-                        <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.IncorrectVersion" slot="end" size="small" (click)="fixDep('update', dep.key)" color="primary" fill="outline" style="font-size: x-small">
-                          Update
-                        </ion-button>
-                        <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.ConfigUnsatisfied" slot="end" size="small" (click)="fixDep('configure', dep.key)" color="primary" fill="outline" style="font-size: x-small">
-                          Configure
-                        </ion-button>
-                      </ng-container>
+                    <div *ngIf="localDep && localDep.state !== PackageState.Installed" slot="end" class="spinner">
+                      <ion-spinner [color]="localDep.state === PackageState.Removing ? 'danger' : 'primary'" style="height: 3vh; width: 3vh" name="dots"></ion-spinner>
+                    </div>
 
-                      <div *ngIf="localDep && localDep.state !== PackageState.Installed" slot="end" class="spinner">
-                        <ion-spinner [color]="localDep.state === PackageState.Removing ? 'danger' : 'primary'" style="height: 3vh; width: 3vh" name="dots"></ion-spinner>
-                      </div>
-
-                    </ng-container>            
-                  </ion-item>
-                </div>
-              </ion-card-content>
-            </ion-card>
-          </ng-container>  
-        </ion-item-group>
-      </ng-container>
+                  </ng-container>            
+                </ion-item>
+              </div>
+            </ion-card-content>
+          </ion-card>
+        </ng-container>  
+      </ion-item-group>
     </ng-container>
   </ng-container>
 </ion-content>

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

@@ -23,10 +23,12 @@ export class AppShowPage {
   error: string
   pkgId: string
   pkg: PackageDataEntry
-  pkgSub: Subscription
   hideLAN: boolean
   buttons: Button[] = []
   manifest: Manifest = { } as Manifest
+  connected: boolean
+
+  subs: Subscription[] = []
 
   FeStatus = FEStatus
   PackageState = PackageState
@@ -49,10 +51,13 @@ export class AppShowPage {
 
   async ngOnInit () {
     this.pkgId = this.route.snapshot.paramMap.get('pkgId')
-    this.pkgSub = this.patch.watch$('package-data', this.pkgId).subscribe(pkg => {
-      this.pkg = pkg
-      this.manifest = getManifest(this.pkg)
-    })
+    this.subs = [
+      this.patch.watch$('package-data', this.pkgId).subscribe(pkg => {
+        this.pkg = pkg
+        this.manifest = getManifest(this.pkg)
+      }),
+      this.patch.connected$().subscribe(c => this.connected = c),
+    ]
     this.setButtons()
   }
 
@@ -61,7 +66,7 @@ export class AppShowPage {
   }
 
   async ngOnDestroy () {
-    this.pkgSub.unsubscribe()
+    this.subs.forEach(sub => sub.unsubscribe())
   }
 
   launchUiTab (): void {

ui/src/app/pipes/display-bulb.pipe.ts

@@ -1,6 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core'
 import { PackageDataEntry } from '../models/patch-db/data-model'
-import { ConnectionState } from '../services/connection.service'
 import { renderPkgStatus } from '../services/pkg-status-rendering.service'
 
 @Pipe({
@@ -8,8 +7,9 @@ import { renderPkgStatus } from '../services/pkg-status-rendering.service'
 })
 export class DisplayBulbPipe implements PipeTransform {
 
-  transform (pkg: PackageDataEntry, bulb: DisplayBulb, connection: ConnectionState): boolean {
-    const { color } = renderPkgStatus(pkg, connection)
+  transform (pkg: PackageDataEntry, bulb: DisplayBulb, connected: boolean): boolean {
+    if (!connected) return bulb === 'off'
+    const { color } = renderPkgStatus(pkg)
     switch (color) {
       case 'danger': return bulb === 'red'
       case 'success': return bulb === 'green'

ui/src/app/pipes/status.pipe.ts

@@ -1,13 +1,12 @@
 import { Pipe, PipeTransform } from '@angular/core'
 import { PackageDataEntry } from '../models/patch-db/data-model'
-import { ConnectionState } from '../services/connection.service'
 import { FEStatus, renderPkgStatus } from '../services/pkg-status-rendering.service'
 
 @Pipe({
   name: 'status',
 })
 export class StatusPipe implements PipeTransform {
-  transform (pkg: PackageDataEntry, connection: ConnectionState): FEStatus {
-    return renderPkgStatus(pkg, connection).feStatus
+  transform (pkg: PackageDataEntry): FEStatus {
+    return renderPkgStatus(pkg).feStatus
   }
 }

ui/src/app/services/api/api.service.ts

@@ -1,11 +1,10 @@
 import { Subject, Observable } from 'rxjs'
-import { Http, Source, Update, Operation, Revision } from 'patch-db-client'
+import { Http, Update, Operation, Revision } from 'patch-db-client'
 import { RR } from './api-types'
 import { DataModel } from 'src/app/models/patch-db/data-model'
 import { filter } from 'rxjs/operators'
-import * as uuid from 'uuid'
 
-export abstract class ApiService implements Source<DataModel>, Http<DataModel> {
+export abstract class ApiService implements Http<DataModel> {
   protected readonly sync = new Subject<Update<DataModel>>()
   private syncing = true
 

ui/src/app/services/api/mock-app-fixures.ts

@@ -719,13 +719,18 @@ export module Mock {
           selected: 'Goosers5G',
           connected: 'Goosers5G',
         },
-        registry: 'https://registry.start9.com',
+        'package-registry': 'https://registry.start9.com',
+        'system-registry': 'https://registry.start9.com',
         'unread-notification-count': 4,
         specs: {
           CPU: 'Cortex-A72: 4 Cores @1500MHz',
           Disk: '1TB SSD',
           Memory: '8GB',
         },
+        'connection-addresses': {
+          tor: [],
+          clearnet: [],
+        },
       },
       'package-data': {
         'bitcoind': bitcoind,

ui/src/app/services/connection.service.ts

@@ -1,80 +1,98 @@
 import { Injectable } from '@angular/core'
-import { BehaviorSubject, fromEvent, merge, Observable, Subscription, timer } from 'rxjs'
-import { delay, retryWhen, switchMap, tap } from 'rxjs/operators'
-import { ApiService } from './api/api.service'
+import { BehaviorSubject, combineLatest, fromEvent, merge, Observable, Subscription } from 'rxjs'
+import { ConnectionStatus } from '../../../../../patch-db/client/dist'
+import { DataModel } from '../models/patch-db/data-model'
+import { PatchDbModel } from '../models/patch-db/patch-db-model'
+import { HttpService, Method } from './http.service'
 
 @Injectable({
   providedIn: 'root',
 })
 export class ConnectionService {
-  private httpSubscription$: Subscription
-  private readonly networkState$ = new BehaviorSubject<boolean>(navigator.onLine)
-  private readonly internetState$ = new BehaviorSubject<boolean | null>(null)
+  private addrs: DataModel['server-info']['connection-addresses']
+  private readonly networkState$ = new BehaviorSubject<boolean>(true)
+  private readonly connectionFailure$ = new BehaviorSubject<ConnectionFailure>(ConnectionFailure.None)
+  private subs: Subscription[] = []
 
   constructor (
-    private readonly apiService: ApiService,
-  ) {
-    merge(fromEvent(window, 'online'), fromEvent(window, 'offline'))
-    .subscribe(event => {
-      this.networkState$.next(event.type === 'online')
-    })
+    private readonly httpService: HttpService,
+    private readonly patch: PatchDbModel,
+  ) { }
 
-    this.networkState$
-    .subscribe(online => {
-      if (online) {
-        this.testInternet()
-      } else {
-        this.killHttp()
-        this.internetState$.next(false)
+  watch$ () {
+    return this.connectionFailure$.asObservable()
+  }
+
+  start () {
+    this.subs = [
+      this.patch.watch$('server-info')
+      .subscribe(data => {
+        if (!data) return
+        this.addrs = data['connection-addresses'] || {
+          tor: [],
+          clearnet: [],
+        }
+      }),
+
+      merge(fromEvent(window, 'online'), fromEvent(window, 'offline'))
+      .subscribe(event => {
+        this.networkState$.next(event.type === 'online')
+      }),
+
+      combineLatest([this.networkState$, this.patch.connectionStatus$()])
+      .subscribe(async ([network, connectionStatus]) => {
+        if (connectionStatus !== ConnectionStatus.Disconnected) {
+          this.connectionFailure$.next(ConnectionFailure.None)
+        } else if (!network) {
+          this.connectionFailure$.next(ConnectionFailure.Network)
+        } else {
+          this.connectionFailure$.next(ConnectionFailure.Diagnosing)
+          const torSuccess = await this.testAddrs(this.addrs.tor)
+          if (torSuccess) {
+            this.connectionFailure$.next(ConnectionFailure.Embassy)
+          } else {
+            const clearnetSuccess = await this.testAddrs(this.addrs.clearnet)
+            if (clearnetSuccess) {
+              this.connectionFailure$.next(ConnectionFailure.Tor)
+            } else {
+              this.connectionFailure$.next(ConnectionFailure.Internet)
+            }
+          }
+        }
+      }),
+    ]
+  }
+
+  stop () {
+    this.subs.forEach(sub => {
+      sub.unsubscribe()
+    })
+    this.subs = []
+  }
+
+  private async testAddrs (addrs: string[]): Promise<boolean> {
+    if (!addrs.length) return true
+
+    const results = await Promise.all(addrs.map(async addr => {
+      try {
+        await this.httpService.httpRequest({
+          method: Method.GET,
+          url: addr,
+        })
+        return true
+      } catch (e) {
+        return false
       }
-    })
-  }
-
-  monitor$ (): Observable<boolean> {
-    return this.internetState$.asObservable()
-  }
-
-  private testInternet (): void {
-    this.killHttp()
-
-    // ping server every 10 seconds
-    this.httpSubscription$ = timer(0, 10000)
-      .pipe(
-        switchMap(() => this.apiService.echo()),
-        retryWhen(errors =>
-          errors.pipe(
-            tap(val => {
-              console.error('Echo error: ', val)
-              this.internetState$.next(false)
-            }),
-            // restart after 2 seconds
-            delay(2000),
-          ),
-        ),
-      )
-      .subscribe(() => {
-        this.internetState$.next(true)
-      })
-  }
-
-  private killHttp () {
-    if (this.httpSubscription$) {
-      this.httpSubscription$.unsubscribe()
-      this.httpSubscription$ = undefined
-    }
+    }))
+    return results.includes(true)
   }
 }
 
-/**
- * Instance of this interface is used to report current connection status.
- */
- export interface ConnectionState {
-  /**
-   * "True" if browser has network connection. Determined by Window objects "online" / "offline" events.
-   */
-  network: boolean
-  /**
-   * "True" if browser has Internet access. Determined by heartbeat system which periodically makes request to heartbeat Url.
-   */
-  internet: boolean | null
-}
+export enum ConnectionFailure {
+  None = 'none',
+  Diagnosing = 'diagnosing',
+  Network = 'network',
+  Embassy = 'embassy',
+  Tor = 'tor',
+  Internet = 'internet',
+}

ui/src/app/services/pkg-status-rendering.service.ts

@@ -1,11 +1,6 @@
 import { HealthCheckResultLoading, MainStatusRunning, PackageDataEntry, PackageMainStatus, PackageState, Status } from '../models/patch-db/data-model'
-import { ConnectionState } from './connection.service'
-
-export function renderPkgStatus (pkg: PackageDataEntry, connection: ConnectionState): PkgStatusRendering {
-  if (!connection.network || !connection.internet) {
-    return { display: 'Connecting', color: 'medium', showDots: true, feStatus: FEStatus.Connecting }
-  }
 
+export function renderPkgStatus (pkg: PackageDataEntry): PkgStatusRendering {
   switch (pkg.state) {
     case PackageState.Installing: return { display: 'Installing', color: 'primary', showDots: true, feStatus: FEStatus.Installing }
     case PackageState.Updating: return { display: 'Updating', color: 'primary', showDots: true, feStatus: FEStatus.Updating }