dont watch patch.data directly in TS (#371)

* dont watch patch.data directly in TS

* installs and uninstalls working

* minor repairs

ui/src/app/app.component.html

@@ -58,7 +58,6 @@
     <ion-icon name="close"></ion-icon>
     <ion-icon name="close-outline"></ion-icon>
     <ion-icon name="code-outline"></ion-icon>
-    <ion-icon name="cog-outline"></ion-icon>
     <ion-icon name="color-wand-outline"></ion-icon>
     <ion-icon name="construct-outline"></ion-icon>
     <ion-icon name="copy-outline"></ion-icon>
@@ -89,6 +88,7 @@
     <ion-icon name="reload-outline"></ion-icon>
     <ion-icon name="remove-outline"></ion-icon>
     <ion-icon name="save-outline"></ion-icon>
+    <ion-icon name="shield-checkmark-outline"></ion-icon>
     <ion-icon name="sync-circle-outline"></ion-icon>
     <ion-icon name="storefront-outline"></ion-icon>
     <ion-icon name="terminal-outline"></ion-icon>

ui/src/app/app.component.ts

@@ -16,6 +16,7 @@ import { ConnectionFailure, ConnectionService } from './services/connection.serv
 import { StartupAlertsService } from './services/startup-alerts.service'
 import { ConfigService } from './services/config.service'
 import { isEmptyObject } from './util/misc.util'
+import { MarketplaceApiService } from './services/api/marketplace/marketplace-api.service'
 
 @Component({
   selector: 'app-root',
@@ -56,12 +57,13 @@ export class AppComponent {
     private readonly storage: Storage,
     private readonly authService: AuthService,
     private readonly router: Router,
-    private readonly api: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly http: HttpService,
     private readonly alertCtrl: AlertController,
     private readonly loader: LoaderService,
     private readonly emver: Emver,
     private readonly connectionService: ConnectionService,
+    private readonly marketplaceApi: MarketplaceApiService,
     private readonly startupAlertsService: StartupAlertsService,
     private readonly toastCtrl: ToastController,
     private readonly patch: PatchDbService,
@@ -95,26 +97,30 @@ export class AppComponent {
         )
         .subscribe(_ => {
           this.showMenu = true
-          this.router.navigate([''], { replaceUrl: true })
+          // if on the login screen, route to dashboard
-          this.connectionService.start()
+          if (this.router.url.startsWith('/login')) {
+            this.router.navigate([''], { replaceUrl: true })
+          }
+          // start the connection monitor
+          this.connectionService.start(auth)
+          // watch connection to display connectivity issues
+          this.marketplaceApi.init(auth)
           // watch connection to display connectivity issues
           this.watchConnection(auth)
-          // watch router to highlight selected menu item
+          // // watch router to highlight selected menu item
           this.watchRouter(auth)
-          // watch status to display/hide maintenance page
+          // // watch status to display/hide maintenance page
           this.watchStatus(auth)
-          // watch version to refresh browser window
+          // // watch version to refresh browser window
           this.watchVersion(auth)
-          // watch unread notification count to display toast
+          // // watch unread notification count to display toast
           this.watchNotifications(auth)
-          // run startup alerts
+          // // run startup alerts
           this.startupAlertsService.runChecks()
         })
-
       // UNVERIFIED
       } else if (auth === AuthState.UNVERIFIED) {
         this.showMenu = false
-        this.connectionService.stop()
         this.patch.stop()
         this.storage.clear()
         this.router.navigate(['/login'], { replaceUrl: true })
@@ -220,7 +226,6 @@ export class AppComponent {
     this.patch.watch$('server-info', 'unread-notification-count')
     .pipe(
       takeWhile(() => auth === AuthState.VERIFIED),
-      finalize(() => console.log('FINALIZING!!!')),
     )
     .subscribe(count => {
       this.unreadCount = count
@@ -271,7 +276,7 @@ export class AppComponent {
 
   private async logout () {
     this.loader.of(LoadingSpinner('Logging out...'))
-    .displayDuringP(this.api.logout({ }))
+    .displayDuringP(this.embassyApi.logout({ }))
     .then(() => this.authService.setUnverified())
     .catch(e => this.setError(e))
   }

ui/src/app/components/install-wizard/prebaked-wizards.ts

@@ -8,7 +8,7 @@ import { InstallWizardComponent, SlideDefinition, TopbarParams } from './install
 @Injectable({ providedIn: 'root' })
 export class WizardBaker {
   constructor (
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
   ) { }
 
   install (values: {
@@ -43,7 +43,7 @@ export class WizardBaker {
             action,
             verb: 'beginning installation for',
             title,
-            executeAction: () => this.apiService.installPackage({ id, version }),
+            executeAction: () => this.embassyApi.installPackage({ id, version }),
           },
         },
         bottomBar: {
@@ -89,7 +89,7 @@ export class WizardBaker {
             action,
             verb: 'updating',
             title,
-            fetchBreakages: () => this.apiService.dryUpdatePackage({ id, version }).then(breakages => breakages),
+            fetchBreakages: () => this.embassyApi.dryUpdatePackage({ id, version }).then(breakages => breakages),
           },
         },
         bottomBar: {
@@ -104,7 +104,7 @@ export class WizardBaker {
             action,
             verb: 'beginning update for',
             title,
-            executeAction: () => this.apiService.installPackage({ id, version }),
+            executeAction: () => this.embassyApi.installPackage({ id, version }),
           },
         },
         bottomBar: {
@@ -149,7 +149,7 @@ export class WizardBaker {
             action,
             verb: 'beginning update for',
             title,
-            executeAction: () => this.apiService.updateServer({ }),
+            executeAction: () => this.embassyApi.updateServer({ }),
           },
         },
         bottomBar: {
@@ -191,7 +191,7 @@ export class WizardBaker {
             action,
             verb: 'downgrading',
             title,
-            fetchBreakages: () => this.apiService.dryUpdatePackage({ id, version }).then(breakages => breakages),
+            fetchBreakages: () => this.embassyApi.dryUpdatePackage({ id, version }).then(breakages => breakages),
           },
         },
         bottomBar: {
@@ -204,7 +204,7 @@ export class WizardBaker {
             action,
             verb: 'beginning downgrade for',
             title,
-            executeAction: () => this.apiService.installPackage({ id, version }),
+            executeAction: () => this.embassyApi.installPackage({ id, version }),
           },
         },
         bottomBar: {
@@ -246,7 +246,7 @@ export class WizardBaker {
             action,
             verb: 'uninstalling',
             title,
-            fetchBreakages: () => this.apiService.dryRemovePackage({ id }).then(breakages => breakages),
+            fetchBreakages: () => this.embassyApi.dryRemovePackage({ id }).then(breakages => breakages),
           },
         },
         bottomBar: { cancel: { whileLoading: { }, afterLoading: { text: 'Cancel' } }, next: 'Uninstall' },
@@ -258,7 +258,7 @@ export class WizardBaker {
             action,
             verb: 'uninstalling',
             title,
-            executeAction: () => this.apiService.removePackage({ id }),
+            executeAction: () => this.embassyApi.removePackage({ id }),
           },
         },
         bottomBar: { finish: 'Dismiss', cancel: { whileLoading: { } } },

ui/src/app/guards/maintenance.guard.ts

@@ -7,6 +7,7 @@ import { PatchDbService } from '../services/patch-db/patch-db.service'
   providedIn: 'root',
 })
 export class MaintenanceGuard implements CanActivate, CanActivateChild {
+
   constructor (
     private readonly router: Router,
     private readonly patch: PatchDbService,

ui/src/app/modals/markdown/markdown.page.ts

@@ -17,12 +17,12 @@ export class MarkdownPage {
   constructor (
     private readonly modalCtrl: ModalController,
     private readonly errToast: ErrorToastService,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
   ) { }
 
   async ngOnInit () {
     try {
-      this.content = await this.apiService.getStatic(this.contentUrl)
+      this.content = await this.embassyApi.getStatic(this.contentUrl)
     } catch (e) {
       console.error(e.message)
       this.errToast.present(e.message)

ui/src/app/modals/os-welcome/os-welcome.page.ts

@@ -13,12 +13,12 @@ export class OSWelcomePage {
 
   constructor (
     private readonly modalCtrl: ModalController,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly config: ConfigService,
   ) { }
 
   async dismiss () {
-    this.apiService.setDbValue({ pointer: '/welcome-ack', value: this.config.version })
+    this.embassyApi.setDbValue({ pointer: '/welcome-ack', value: this.config.version })
     .catch(console.error)
 
     // return false to skip subsequent alert modals (e.g. check for updates modals)

ui/src/app/modules/sharing.module.ts

@@ -8,7 +8,6 @@ import { TruncateCenterPipe, TruncateEndPipe } from '../pipes/truncate.pipe'
 import { MaskPipe } from '../pipes/mask.pipe'
 import { HasUiPipe, LaunchablePipe } from '../pipes/ui.pipe'
 import { EmptyPipe } from '../pipes/empty.pipe'
-import { StatusPipe } from '../pipes/status.pipe'
 import { NotificationColorPipe } from '../pipes/notification-color.pipe'
 
 @NgModule({
@@ -26,7 +25,6 @@ import { NotificationColorPipe } from '../pipes/notification-color.pipe'
         HasUiPipe,
         LaunchablePipe,
         EmptyPipe,
-        StatusPipe,
         NotificationColorPipe,
     ],
     imports: [],
@@ -44,7 +42,6 @@ import { NotificationColorPipe } from '../pipes/notification-color.pipe'
         HasUiPipe,
         LaunchablePipe,
         EmptyPipe,
-        StatusPipe,
         NotificationColorPipe,
     ],
 })

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

@@ -26,7 +26,7 @@ export class AppActionsPage {
 
   constructor (
     private readonly route: ActivatedRoute,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly modalCtrl: ModalController,
     private readonly alertCtrl: AlertController,
     private readonly loaderService: LoaderService,
@@ -123,7 +123,7 @@ export class AppActionsPage {
   private async executeAction (pkgId: string, actionId: string) {
     try {
       const res = await this.loaderService.displayDuringP(
-        this.apiService.executePackageAction({ id: pkgId, 'action-id': actionId }),
+        this.embassyApi.executePackageAction({ id: pkgId, 'action-id': actionId }),
       )
 
       const successAlert = await this.alertCtrl.create({

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

@@ -50,7 +50,7 @@ export class AppConfigPage {
     private readonly navCtrl: NavController,
     private readonly route: ActivatedRoute,
     private readonly wizardBaker: WizardBaker,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly loader: LoaderService,
     private readonly alertCtrl: AlertController,
     private readonly modalController: ModalController,
@@ -86,12 +86,12 @@ export class AppConfigPage {
       .pipe(
         tap(pkg => this.pkg = pkg),
         tap(() => this.loadingText = 'Fetching config spec...'),
-        concatMap(() => this.apiService.getPackageConfig({ id: pkgId })),
+        concatMap(() => this.embassyApi.getPackageConfig({ id: pkgId })),
         concatMap(({ spec, config }) => {
           const rec = history.state && history.state.configRecommendation as Recommendation
           if (rec) {
             this.loadingText = `Setting properties to accommodate ${rec.dependentTitle}...`
-            return from(this.apiService.dryConfigureDependency({ 'dependency-id': pkgId, 'dependent-id': rec.dependentId }))
+            return from(this.embassyApi.dryConfigureDependency({ 'dependency-id': pkgId, 'dependent-id': rec.dependentId }))
             .pipe(
               map(res => ({
                 spec,
@@ -162,7 +162,7 @@ export class AppConfigPage {
       spinner: 'lines',
       cssClass: 'loader',
     }).displayDuringAsync(async () => {
-      const breakages = await this.apiService.drySetPackageConfig({ id: pkg.manifest.id, config: this.config })
+      const breakages = await this.embassyApi.drySetPackageConfig({ id: pkg.manifest.id, config: this.config })
 
       if (!isEmptyObject(breakages.length)) {
         const { cancelled } = await wizardModal(
@@ -175,7 +175,7 @@ export class AppConfigPage {
         if (cancelled) return { skip: true }
       }
 
-      return this.apiService.setPackageConfig({ id: pkg.manifest.id, config: this.config })
+      return this.embassyApi.setPackageConfig({ id: pkg.manifest.id, config: this.config })
         .then(() => ({ skip: false }))
     })
     .then(({ skip }) => {

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

@@ -19,15 +19,17 @@ export class AppInstructionsPage {
   constructor (
     private readonly route: ActivatedRoute,
     private readonly errToast: ErrorToastService,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly patch: PatchDbService,
   ) { }
 
   async ngOnInit () {
     const pkgId = this.route.snapshot.paramMap.get('pkgId')
+
     const url = this.patch.data['package-data'][pkgId]['static-files'].instructions
+
     try {
-      this.instructions = await this.apiService.getStatic(url)
+      this.instructions = await this.embassyApi.getStatic(url)
     } catch (e) {
       console.error(e)
       this.errToast.present(e.message)
@@ -35,8 +37,4 @@ export class AppInstructionsPage {
       this.loading = false
     }
   }
-
-  ngAfterViewInit () {
-    this.content.scrollToPoint(undefined, 1)
-  }
 }

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

@@ -10,7 +10,7 @@
 <ion-content>
     <ion-grid *ngIf="patch.data['package-data'][pkgId] as pkg">
       <ion-row>
-        <ion-col *ngFor="let interface of pkg.manifest.interfaces | keyvalue: asIsOrder" sizeSm="12" sizeMd="6">
+        <ion-col *ngFor="let interface of pkg.manifest.interfaces | keyvalue: asIsOrder" sizeXs="12" sizeSm="12" sizeMd="6">
           <ion-card>
             <ion-card-header>
               <ion-card-title>{{ interface.value.name }}</ion-card-title>

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

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

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core'
 import { ConfigService } from 'src/app/services/config.service'
-import { ConnectionService } from 'src/app/services/connection.service'
+import { ConnectionFailure, ConnectionService } from 'src/app/services/connection.service'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
-import { combineLatest, Subscription } from 'rxjs'
+import { Subscription } from 'rxjs'
 import { PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
+import { distinctUntilChanged, filter } from 'rxjs/operators'
 
 @Component({
   selector: 'app-list',
@@ -12,70 +13,94 @@ import { PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status
   styleUrls: ['./app-list.page.scss'],
 })
 export class AppListPage {
-  connected: boolean
   subs: Subscription[] = []
-  serviceInfo: { [id: string]: {
+  connectionFailure: boolean
-    bulbInfo: {
+  pkgs: { [id: string]: {
+    entry: PackageDataEntry
+    bulb: {
       class: string
       img: string
     }
-    rendering: PkgStatusRendering
+    statusRendering: PkgStatusRendering | null
+    sub: Subscription | null
   }} = { }
 
   constructor (
     private readonly config: ConfigService,
-    public readonly connectionService: ConnectionService,
+    private readonly connectionService: ConnectionService,
     public readonly patch: PatchDbService,
   ) { }
 
   ngOnInit () {
     this.subs = [
-      combineLatest([
+      this.patch.watch$('package-data')
-        this.patch.connected$(),
+      .pipe(
-        this.patch.watch$('package-data'),
+        filter(obj => {
-      ])
+          return Object.keys(obj).length !== Object.keys(this.pkgs).length
-      .subscribe(([connected, pkgs]) => {
+        }),
-        this.connected = connected
+      )
+      .subscribe(pkgs => {
+        const ids = Object.keys(pkgs)
+        console.log('PKGSPKGS', ids)
 
-        Object.keys(pkgs).forEach(pkgId => {
+        Object.keys(this.pkgs).forEach(id => {
-          let bulbClass = 'bulb-on'
+          if (!ids.includes(id)) {
-          let img = ''
+            this.pkgs[id].sub.unsubscribe()
-
+            delete this.pkgs[id]
-          if (!this.connected) {
-            bulbClass = 'bulb-off',
-            img = 'assets/img/off-bulb.png'
-          }
-
-          const rendering = renderPkgStatus(pkgs[pkgId].state, pkgs[pkgId].installed.status)
-          switch (rendering.color) {
-            case 'danger':
-              img = 'assets/img/danger-bulb.png'
-              break
-            case 'success':
-              img = 'assets/img/success-bulb.png'
-              break
-            case 'warning':
-              img = 'assets/img/warning-bulb.png'
-              break
-            default:
-              bulbClass = 'bulb-off',
-              img = 'assets/img/off-bulb.png'
-              break
-          }
-
-          this.serviceInfo[pkgId] = {
-            bulbInfo: {
-              class: bulbClass,
-              img,
-            },
-            rendering,
           }
         })
+
+        ids.forEach(id => {
+          // if already subscribed, return
+          if (this.pkgs[id]) return
+          this.pkgs[id] = {
+            entry: pkgs[id],
+            bulb: {
+              class: 'bulb-off',
+              img: 'assets/img/off-bulb.png',
+            },
+            statusRendering: renderPkgStatus(pkgs[id].state, pkgs[id].installed?.status),
+            sub: null,
+          }
+          // subscribe to pkg
+          this.pkgs[id].sub = this.patch.watch$('package-data', id).subscribe(pkg => {
+            let bulbClass = 'bulb-on'
+            let img = ''
+            const statusRendering = renderPkgStatus(pkgs[id].state, pkgs[id].installed?.status)
+            switch (statusRendering.color) {
+              case 'danger':
+                img = 'assets/img/danger-bulb.png'
+                break
+              case 'success':
+                img = 'assets/img/success-bulb.png'
+                break
+              case 'warning':
+                img = 'assets/img/warning-bulb.png'
+                break
+              default:
+                bulbClass = 'bulb-off',
+                img = 'assets/img/off-bulb.png'
+                break
+            }
+            this.pkgs[id].entry = pkg
+            this.pkgs[id].bulb = {
+              class: bulbClass,
+              img,
+            }
+            this.pkgs[id].statusRendering = statusRendering
+          })
+        })
+      }),
+
+      this.connectionService.watchFailure$()
+      .subscribe(connectionFailure => {
+        this.connectionFailure = connectionFailure !== ConnectionFailure.None
       }),
     ]
   }
 
   ngOnDestroy () {
+    Object.values(this.pkgs).forEach(pkg => pkg.sub.unsubscribe())
     this.subs.forEach(sub => sub.unsubscribe())
   }
 

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

@@ -17,7 +17,7 @@ export class AppLogsPage {
   constructor (
     private readonly route: ActivatedRoute,
     private readonly errToast: ErrorToastService,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
   ) { }
 
   ngOnInit () {
@@ -29,7 +29,7 @@ export class AppLogsPage {
     this.logs = ''
 
     try {
-      const logs = await this.apiService.getPackageLogs({ id: this.pkgId })
+      const logs = await this.embassyApi.getPackageLogs({ id: this.pkgId })
       this.logs = logs.map(l => `${l.timestamp} ${l.log}`).join('\n\n')
       setTimeout(async () => await this.content.scrollToBottom(100), 200)
     } catch (e) {

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

@@ -3,7 +3,6 @@ import { ActivatedRoute } from '@angular/router'
 import { Subscription } from 'rxjs'
 import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
-import { getManifest } from 'src/app/services/config.service'
 import * as JsonPointer from 'json-pointer'
 import { IonContent } from '@ionic/angular'
 
@@ -56,7 +55,7 @@ export class AppManifestPage {
   }
 
   private setNode () {
-    this.node = JsonPointer.get(getManifest(this.pkg), this.pointer || '')
+    this.node = JsonPointer.get(this.pkg.manifest, this.pointer || '')
   }
 
   async goToNested (key: string): Promise<any> {

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

@@ -9,7 +9,7 @@
 
 <ion-content>
 
-  <ion-card>
+  <ion-card *ngIf="mainStatus">
     <ion-card-header>
       <ion-card-title>
         <ion-icon style="vertical-align: middle; padding-right: 12px;" name="medkit-outline"></ion-icon>
@@ -17,15 +17,15 @@
       </ion-card-title>
     </ion-card-header>
     <ion-card-content>
-      <ion-item *ngIf="pkg.installed?.status.main.health | empty; else health">
+      <ion-item *ngIf="mainStatus.health | empty; else health">
         <ion-label>
           No health checks
         </ion-label>
       </ion-item>
       <ng-template #health>
-        <ion-item *ngIf="!(pkg.installed?.status.main.health | empty); else noHealth" color="light" style="margin: 10px;">
+        <ion-item *ngIf="!(mainStatus.health | empty); else noHealth" color="light" style="margin: 10px;">
           <ion-label>
-            <div *ngFor="let health of pkg.installed.status.main.health | keyvalue : asIsOrder" class="align" style="margin-left: 12px;">
+            <div *ngFor="let health of mainStatus.health | keyvalue : asIsOrder" class="align" style="margin-left: 12px;">
               <ion-icon *ngIf="health.value.result === 'success'" name="checkmark-outline" color="success"></ion-icon>
               <ion-icon *ngIf="health.value.result === 'starting'" name="timer-outline" color="warning"></ion-icon>
               <ion-icon *ngIf="health.value.result === 'loading'" name="sync-circle-outline" color="warning"></ion-icon>

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

@@ -1,10 +1,11 @@
 import { Component, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { IonContent } from '@ionic/angular'
+import { Subscription } from 'rxjs'
 import { Metric } from 'src/app/services/api/api.types'
 import { ApiService } from 'src/app/services/api/embassy/embassy-api.service'
 import { ErrorToastService } from 'src/app/services/error-toast.service'
-import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
+import { MainStatus } from 'src/app/services/patch-db/data-model'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { pauseFor } from 'src/app/util/misc.util'
 
@@ -16,9 +17,10 @@ import { pauseFor } from 'src/app/util/misc.util'
 export class AppMetricsPage {
   loading = true
   pkgId: string
-  pkg: PackageDataEntry
+  mainStatus: MainStatus
   going = false
   metrics: Metric
+  subs: Subscription[] = []
 
   @ViewChild(IonContent) content: IonContent
 
@@ -26,12 +28,17 @@ export class AppMetricsPage {
     private readonly route: ActivatedRoute,
     private readonly errToast: ErrorToastService,
     private readonly patch: PatchDbService,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
   ) { }
 
   ngOnInit () {
     this.pkgId = this.route.snapshot.paramMap.get('pkgId')
-    this.pkg = this.patch.data['package-data'][this.pkgId]
+    this.subs = [
+      this.patch.watch$('package-data', this.pkgId, 'installed', 'status', 'main')
+      .subscribe(main => {
+        this.mainStatus = main
+      }),
+    ]
 
     this.startDaemon()
   }
@@ -42,6 +49,7 @@ export class AppMetricsPage {
 
   ngOnDestroy () {
     this.stopDaemon()
+    this.subs.forEach(sub => sub.unsubscribe())
   }
 
   async startDaemon (): Promise<void> {
@@ -58,7 +66,7 @@ export class AppMetricsPage {
 
   async getMetrics (): Promise<void> {
     try {
-      this.metrics = await this.apiService.getPkgMetrics({ id: this.pkgId})
+      this.metrics = await this.embassyApi.getPkgMetrics({ id: this.pkgId})
     } catch (e) {
       console.error(e)
       this.errToast.present(e.message)

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

@@ -30,7 +30,7 @@ export class AppPropertiesPage {
 
   constructor (
     private readonly route: ActivatedRoute,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly errToast: ErrorToastService,
     private readonly alertCtrl: AlertController,
     private readonly toastCtrl: ToastController,
@@ -41,16 +41,20 @@ export class AppPropertiesPage {
 
   async ngOnInit () {
     this.pkgId = this.route.snapshot.paramMap.get('pkgId')
-    this.running = this.patch.data['package-data'][this.pkgId].installed?.status.main.status === PackageMainStatus.Running
 
     await this.getProperties()
 
     this.subs = [
-      this.route.queryParams.subscribe(queryParams => {
+      this.route.queryParams
+      .subscribe(queryParams => {
         if (queryParams['pointer'] === this.pointer) return
         this.pointer = queryParams['pointer']
         this.node = JsonPointer.get(this.properties, this.pointer || '')
       }),
+      this.patch.watch$('package-data', this.pkgId, 'installed', 'status', 'main', 'status')
+      .subscribe(status => {
+        this.running = status === PackageMainStatus.Running
+      }),
     ]
   }
 
@@ -115,7 +119,7 @@ export class AppPropertiesPage {
   private async getProperties (): Promise<void> {
     this.loading = true
     try {
-      this.properties = await this.apiService.getPackageProperties({ id: this.pkgId })
+      this.properties = await this.embassyApi.getPackageProperties({ id: this.pkgId })
       this.node = JsonPointer.get(this.properties, this.pointer || '')
     } catch (e) {
       console.error(e)

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

@@ -21,7 +21,7 @@
       <ion-label class="ion-text-wrap">
         <p class="ion-padding-bottom"><ion-text color="warning">Warning</ion-text></p>
         <h2>
-          Restoring from backup will overwrite all current data for {{ title }} .
+          Restoring from backup will overwrite all current data for {{ patch.data['package-data'][pkgId].manifest.title }} .
         </h2>
       </ion-label>
     </ion-item>

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

@@ -6,6 +6,7 @@ import { DiskInfo } from 'src/app/services/api/api.types'
 import { ActivatedRoute } from '@angular/router'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { Subscription } from 'rxjs'
+import { take } from 'rxjs/operators'
 
 @Component({
   selector: 'app-restore',
@@ -26,15 +27,13 @@ export class AppRestorePage {
   constructor (
     private readonly route: ActivatedRoute,
     private readonly modalCtrl: ModalController,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly loadingCtrl: LoadingController,
-    private readonly patch: PatchDbService,
+    public readonly patch: PatchDbService,
   ) { }
 
   ngOnInit () {
     this.pkgId = this.route.snapshot.paramMap.get('pkgId')
-    this.title = this.patch.data['package-data'][this.pkgId].manifest.title
-
     this.getExternalDisks()
   }
 
@@ -49,7 +48,7 @@ export class AppRestorePage {
 
   async getExternalDisks (): Promise<void> {
     try {
-      this.disks = await this.apiService.getDisks({ })
+      this.disks = await this.embassyApi.getDisks({ })
       this.allPartitionsMounted = Object.values(this.disks).every(d => Object.values(d.partitions).every(p => p['is-mounted']))
     } catch (e) {
       console.error(e)
@@ -87,7 +86,7 @@ export class AppRestorePage {
     await loader.present()
 
     try {
-      await this.apiService.restorePackage({
+      await this.embassyApi.restorePackage({
         id: this.pkgId,
         logicalname,
         password,

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

@@ -40,7 +40,7 @@ export class AppShowPage {
     private readonly errToast: ErrorToastService,
     private readonly loader: LoaderService,
     private readonly modalCtrl: ModalController,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly wizardBaker: WizardBaker,
     private readonly config: ConfigService,
     public readonly patch: PatchDbService,
@@ -49,13 +49,13 @@ export class AppShowPage {
 
   async ngOnInit () {
     this.pkgId = this.route.snapshot.paramMap.get('pkgId')
-    this.pkg = this.patch.data['package-data'][this.pkgId]
     this.subs = [
       combineLatest([
         this.patch.connected$(),
         this.patch.watch$('package-data', this.pkgId),
       ])
       .subscribe(([connected, pkg]) => {
+        this.pkg = pkg
         this.connected = connected
         this.rendering = renderPkgStatus(pkg.state, pkg.installed.status)
       }),
@@ -82,7 +82,7 @@ export class AppShowPage {
       spinner: 'lines',
       cssClass: 'loader',
     }).displayDuringAsync(async () => {
-      const breakages = await this.apiService.dryStopPackage({ id })
+      const breakages = await this.embassyApi.dryStopPackage({ id })
 
       console.log('BREAKAGES', breakages)
 
@@ -100,7 +100,7 @@ export class AppShowPage {
         if (cancelled) return { }
       }
 
-      return this.apiService.stopPackage({ id }).then(chill)
+      return this.embassyApi.stopPackage({ id }).then(chill)
     }).catch(e => this.setError(e))
   }
 
@@ -211,7 +211,7 @@ export class AppShowPage {
       spinner: 'lines',
       cssClass: 'loader',
     }).displayDuringP(
-      this.apiService.startPackage({ id: this.pkgId }),
+      this.embassyApi.startPackage({ id: this.pkgId }),
     ).catch(e => this.setError(e))
   }
 
@@ -235,7 +235,8 @@ export class AppShowPage {
         title: 'Monitor',
         icon: 'medkit-outline',
         color: 'danger',
-        disabled: [],
+        // @TODO make the disabled check better. Don't want to list every status here. Monitor should be disabled except is pkg is running.
+        disabled: [FEStatus.Installing, FEStatus.Updating, FEStatus.Removing, FEStatus.BackingUp, FEStatus.Restoring],
       },
       {
         action: () => this.navCtrl.navigateForward(['config'], { relativeTo: this.route }),

ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.module.ts

@@ -5,6 +5,7 @@ import { IonicModule } from '@ionic/angular'
 import { AppReleaseNotes } from './app-release-notes.page'
 import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
+import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'
 
 const routes: Routes = [
   {
@@ -20,6 +21,7 @@ const routes: Routes = [
     RouterModule.forChild(routes),
     PwaBackComponentModule,
     SharingModule,
+    TextSpinnerComponentModule,
   ],
   declarations: [AppReleaseNotes],
 })

ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.html

@@ -8,7 +8,7 @@
 </ion-header>
 
 <ion-content>
-  <ion-spinner *ngIf="!marketplaceService.releaseNotes[pkgId]; else loaded" class="center" name="lines" color="warning"></ion-spinner>
+  <text-spinner *ngIf="!marketplaceService.releaseNotes[pkgId]; else loaded" text="Loading Release Notes"></text-spinner>
 
   <ng-template #loaded>
     <div *ngFor="let note of marketplaceService.releaseNotes[pkgId] | keyvalue : asIsOrder">

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

@@ -53,7 +53,7 @@
               <ion-label>
                 <h2 style="font-family: 'Montserrat';">{{ pkg.manifest.title }}</h2>
                 <p>{{ pkg.manifest.description.short }}</p>
-                <ng-container *ngIf="patch.data['package-data'][pkg.id] as localPkg">
+                <ng-container *ngIf="localPkgs[pkg.id] as localPkg">
                   <p *ngIf="localPkg.state === PackageState.Installed">
                     <ion-text *ngIf="(pkg.manifest.version | compareEmver : localPkg.manifest.version) === 0" color="success">Installed</ion-text>
                     <ion-text *ngIf="(pkg.manifest.version | compareEmver : localPkg.manifest.version) === 1" color="warning">Update Available</ion-text>

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

@@ -3,12 +3,12 @@ import { MarketplaceData, MarketplaceEOS, MarketplacePkg } from 'src/app/service
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { IonContent, ModalController } from '@ionic/angular'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
-import { PackageState } from 'src/app/services/patch-db/data-model'
 import { Subscription } from 'rxjs'
 import { ErrorToastService } from 'src/app/services/error-toast.service'
 import { MarketplaceService } from '../marketplace.service'
 import { MarketplaceApiService } from 'src/app/services/api/marketplace/marketplace-api.service'
+import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 
 @Component({
   selector: 'marketplace-list',
@@ -17,6 +17,8 @@ import { MarketplaceApiService } from 'src/app/services/api/marketplace/marketpl
 })
 export class MarketplaceListPage {
   @ViewChild(IonContent) content: IonContent
+  localPkgs: { [id: string]: PackageDataEntry }
+
   pageLoading = true
   pkgsLoading = true
 
@@ -37,7 +39,7 @@ export class MarketplaceListPage {
 
   constructor (
     private readonly marketplaceService: MarketplaceService,
-    private readonly marketplaceApiService: MarketplaceApiService,
+    private readonly marketplaceApi: MarketplaceApiService,
     private readonly modalCtrl: ModalController,
     private readonly errToast: ErrorToastService,
     private readonly wizardBaker: WizardBaker,
@@ -45,11 +47,16 @@ export class MarketplaceListPage {
   ) { }
 
   async ngOnInit () {
+    this.subs = [
+      this.patch.watch$('package-data').subscribe(pkgs => {
+        this.localPkgs = pkgs
+      }),
+    ]
 
     try {
       const [data, eos] = await Promise.all([
-        this.marketplaceApiService.getMarketplaceData({ }),
+        this.marketplaceApi.getMarketplaceData({ }),
-        this.marketplaceApiService.getEos({ }),
+        this.marketplaceApi.getEos({ }),
         this.getPkgs(),
       ])
       this.eos = eos
@@ -107,7 +114,7 @@ export class MarketplaceListPage {
         if (this.pkgs.length) {
           this.pkgsLoading = false
         }
-        await this.marketplaceService.getUpdates(this.patch.data['package-data'])
+        await this.marketplaceService.getUpdates(this.localPkgs)
         this.pkgs = this.marketplaceService.updates
       } else {
         const pkgs = await this.marketplaceService.getPkgs(

ui/src/app/pages/marketplace-routes/marketplace.service.ts

@@ -12,32 +12,30 @@ export class MarketplaceService {
   updates: MarketplacePkg[] = null
   releaseNotes: { [id: string]: {
     [version: string]: string
-  } }
+  } } = { }
 
   constructor (
-    private readonly marketplaceApiService: MarketplaceApiService,
+    private readonly marketplaceApi: MarketplaceApiService,
     private readonly emver: Emver,
   ) { }
 
-  async getUpdates (pkgData: { [id: string]: PackageDataEntry}) : Promise<MarketplacePkg[]>   {
+  async getUpdates (localPkgs: { [id: string]: PackageDataEntry }) : Promise<void>   {
-    const idAndCurrentVersions =  Object.keys(pkgData).map(key => ({ id: key, version: pkgData[key].manifest.version }))
+    const idAndCurrentVersions =  Object.keys(localPkgs).map(key => ({ id: key, version: localPkgs[key].manifest.version }))
-    console.log(JSON.stringify(idAndCurrentVersions))
+    const latestPkgs = (await this.marketplaceApi.getMarketplacePkgs({
-    const latestPkgs = (await this.marketplaceApiService.getMarketplacePkgs({
       ids: idAndCurrentVersions,
     }))
 
     const updates = latestPkgs.filter(latestPkg => {
       const latestVersion = latestPkg.manifest.version
-      const curVersion = pkgData[latestPkg.manifest.id]?.manifest.version
+      const curVersion = localPkgs[latestPkg.manifest.id]?.manifest.version
       return !!curVersion && this.emver.compare(latestVersion, curVersion) === 1
     })
 
     this.updates = updates
-    return updates
   }
 
   async getPkgs (category: string, query: string, page: number, perPage: number) : Promise<MarketplacePkg[]> {
-    const pkgs = await this.marketplaceApiService.getMarketplacePkgs({
+    const pkgs = await this.marketplaceApi.getMarketplacePkgs({
       category: category !== 'all' ? category : undefined,
       query,
       page: String(page),
@@ -51,7 +49,10 @@ export class MarketplaceService {
   }
 
   async getPkg (id: string, version?: string): Promise<void> {
-    const pkg = (await this.marketplaceApiService.getMarketplacePkgs({ ids: [{ id, version }]}))[0]
+    const pkgs = await this.marketplaceApi.getMarketplacePkgs({
+      ids: [{ id, version: version || '*' }],
+    })
+    const pkg = pkgs[0]
     if (pkg) {
       this.pkgs[id] = pkg
     } else {
@@ -60,7 +61,7 @@ export class MarketplaceService {
   }
 
   async getReleaseNotes (id: string): Promise<void> {
-    this.releaseNotes[id] = await this.marketplaceApiService.getReleaseNotes({ id })
+    this.releaseNotes[id] = await this.marketplaceApi.getReleaseNotes({ id })
   }
 }
 

ui/src/app/pages/notifications/notifications.page.ts

@@ -20,7 +20,7 @@ export class NotificationsPage {
   readonly perPage = 20
 
   constructor (
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly loader: LoaderService,
     private readonly errToast: ErrorToastService,
     private readonly alertCtrl: AlertController,
@@ -48,7 +48,7 @@ export class NotificationsPage {
   async getNotifications (): Promise<ServerNotifications> {
     let notifications: ServerNotifications = []
     try {
-      notifications = await this.apiService.getNotifications({ page: this.page, 'per-page': this.perPage })
+      notifications = await this.embassyApi.getNotifications({ page: this.page, 'per-page': this.perPage })
       this.needInfinite = notifications.length >= this.perPage
       this.page++
     } catch (e) {
@@ -65,7 +65,7 @@ export class NotificationsPage {
       spinner: 'lines',
       cssClass: 'loader',
     }).displayDuringP(
-      this.apiService.deleteNotification({ id }).then(() => {
+      this.embassyApi.deleteNotification({ id }).then(() => {
         this.notifications.splice(index, 1)
       }),
     ).catch(e => {

ui/src/app/pages/server-routes/developer-routes/dev-options/dev-options.page.html

@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding-top" *ngIf="patch.data['server-info] as server">
+<ion-content class="ion-padding-top" *ngIf="patch.data['server-info'] as server">
 
   <ion-item-group>
     <ion-item detail="true" button [routerLink]="['ssh-keys']">

ui/src/app/pages/server-routes/developer-routes/dev-ssh-keys/ssh.service.ts

@@ -10,7 +10,7 @@ export class SSHService {
   private readonly keys$ = new BehaviorSubject<SSHKeys>({ })
 
   constructor (
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
   ) { }
 
   watch$ () {
@@ -18,18 +18,18 @@ export class SSHService {
   }
 
   async getKeys (): Promise<void> {
-    const keys = await this.apiService.getSshKeys({ })
+    const keys = await this.embassyApi.getSshKeys({ })
     this.keys$.next(keys)
   }
 
   async add (pubkey: string): Promise<void> {
-    const key = await this.apiService.addSshKey({ pubkey })
+    const key = await this.embassyApi.addSshKey({ pubkey })
     const keys = this.keys$.getValue()
     this.keys$.next({ ...keys, ...key })
   }
 
   async delete (hash: string): Promise<void> {
-    await this.apiService.deleteSshKey({ hash })
+    await this.embassyApi.deleteSshKey({ hash })
     const keys = this.keys$.getValue()
 
     const filtered = Object.keys(keys)

ui/src/app/pages/server-routes/lan/lan.page.ts

@@ -26,7 +26,7 @@ export class LANPage {
     private readonly toastCtrl: ToastController,
     private readonly config: ConfigService,
     private readonly loader: LoaderService,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly patch: PatchDbService,
   ) { }
 
@@ -54,7 +54,7 @@ export class LANPage {
       spinner: 'lines',
       cssClass: 'loader',
     }).displayDuringAsync( async () => {
-      await this.apiService.refreshLan({ })
+      await this.embassyApi.refreshLan({ })
     }).catch(e => {
       console.error(e)
     })

ui/src/app/pages/server-routes/server-backup/server-backup.page.ts

@@ -17,7 +17,7 @@ export class ServerBackupPage {
 
   constructor (
     private readonly modalCtrl: ModalController,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly loadingCtrl: LoadingController,
   ) { }
 
@@ -32,7 +32,7 @@ export class ServerBackupPage {
 
   async getExternalDisks (): Promise<void> {
     try {
-      this.disks = await this.apiService.getDisks({ })
+      this.disks = await this.embassyApi.getDisks({ })
       this.allPartitionsMounted = Object.values(this.disks).every(d => Object.values(d.partitions).every(p => p['is-mounted']))
     } catch (e) {
       console.error(e)
@@ -70,7 +70,7 @@ export class ServerBackupPage {
     await loader.present()
 
     try {
-      await this.apiService.createBackup({ logicalname, password })
+      await this.embassyApi.createBackup({ logicalname, password })
     } catch (e) {
       console.error(e)
       this.error = e.message

ui/src/app/pages/server-routes/server-logs/server-logs.page.ts

@@ -15,7 +15,7 @@ export class ServerLogsPage {
 
   constructor (
     private readonly errToast: ErrorToastService,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
   ) { }
 
   ngOnInit () {
@@ -26,7 +26,7 @@ export class ServerLogsPage {
     this.logs = ''
     this.loading = true
     try {
-      const logs = await this.apiService.getServerLogs({ })
+      const logs = await this.embassyApi.getServerLogs({ })
       this.logs = logs.map(l => `${l.timestamp} ${l.log}`).join('\n\n')
       setTimeout(async () => await this.content.scrollToBottom(100), 200)
     } catch (e) {

ui/src/app/pages/server-routes/server-metrics/server-metrics.page.ts

@@ -16,7 +16,7 @@ export class ServerMetricsPage {
 
   constructor (
     private readonly errToast: ErrorToastService,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
   ) { }
 
   ngOnInit () {
@@ -41,7 +41,7 @@ export class ServerMetricsPage {
 
   async getMetrics (): Promise<void> {
     try {
-      this.metrics = await this.apiService.getServerMetrics({ })
+      this.metrics = await this.embassyApi.getServerMetrics({ })
     } catch (e) {
       console.error(e)
       this.errToast.present(e.message)

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

@@ -16,7 +16,7 @@ export class ServerShowPage {
   constructor (
     private readonly alertCtrl: AlertController,
     private readonly loader: LoaderService,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly navCtrl: NavController,
     private readonly route: ActivatedRoute,
   ) { }
@@ -73,7 +73,7 @@ export class ServerShowPage {
     this.loader
       .of(LoadingSpinner(`Restarting...`))
       .displayDuringAsync( async () => {
-        await this.apiService.restartServer({ })
+        await this.embassyApi.restartServer({ })
       })
       .catch(console.error)
   }
@@ -82,7 +82,7 @@ export class ServerShowPage {
     this.loader
       .of(LoadingSpinner(`Shutting down...`))
       .displayDuringAsync( async () => {
-        await this.apiService.shutdownServer({ })
+        await this.embassyApi.shutdownServer({ })
       })
       .catch(console.error)
   }
@@ -91,9 +91,9 @@ export class ServerShowPage {
     this.settings = {
       'Settings': [
         {
-          title: 'Preferences',
+          title: 'Privacy and Security',
-          icon: 'cog-outline',
+          icon: 'shield-checkmark-outline',
-          action: () => this.navCtrl.navigateForward(['preferences'], { relativeTo: this.route }),
+          action: () => this.navCtrl.navigateForward(['privacy'], { relativeTo: this.route }),
         },
         {
           title: 'LAN',

ui/src/app/pages/server-routes/wifi/wifi-add/wifi-add.page.ts

@@ -19,7 +19,7 @@ export class WifiAddPage {
   constructor (
     private readonly navCtrl: NavController,
     private readonly errToast: ErrorToastService,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly loader: LoaderService,
     private readonly wifiService: WifiService,
   ) { }
@@ -30,7 +30,7 @@ export class WifiAddPage {
       spinner: 'lines',
       cssClass: 'loader',
     }).displayDuringAsync(async () => {
-      await this.apiService.addWifi({
+      await this.embassyApi.addWifi({
         ssid: this.ssid,
         password: this.password,
         country: this.countryCode,
@@ -50,7 +50,7 @@ export class WifiAddPage {
       spinner: 'lines',
       cssClass: 'loader',
     }).displayDuringAsync(async () => {
-      await this.apiService.addWifi({
+      await this.embassyApi.addWifi({
         ssid: this.ssid,
         password: this.password,
         country: this.countryCode,

ui/src/app/pages/server-routes/wifi/wifi.page.ts

@@ -18,7 +18,7 @@ export class WifiListPage {
   subs: Subscription[] = []
 
   constructor (
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly loader: LoaderService,
     private readonly errToast: ErrorToastService,
     private readonly actionCtrl: ActionSheetController,
@@ -62,7 +62,7 @@ export class WifiListPage {
       spinner: 'lines',
       cssClass: 'loader',
     }).displayDuringAsync(async () => {
-      await this.apiService.connectWifi({ ssid })
+      await this.embassyApi.connectWifi({ ssid })
       this.wifiService.confirmWifi(ssid)
     }).catch(e => {
       console.error(e)
@@ -76,7 +76,7 @@ export class WifiListPage {
       spinner: 'lines',
       cssClass: 'loader',
     }).displayDuringAsync(async () => {
-      await this.apiService.deleteWifi({ ssid })
+      await this.embassyApi.deleteWifi({ ssid })
     }).catch(e => {
       console.error(e)
       this.errToast.present(e.message)

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

@@ -1,27 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core'
-import { combineLatest, Observable } from 'rxjs'
-import { map } from 'rxjs/operators'
-import { PatchDbService } from '../services/patch-db/patch-db.service'
-import { FEStatus, renderPkgStatus } from '../services/pkg-status-rendering.service'
-
-@Pipe({
-  name: 'status',
-})
-export class StatusPipe implements PipeTransform {
-
-  constructor (
-    private readonly patch: PatchDbService,
-  ) { }
-
-  transform (pkgId: string): Observable<FEStatus> {
-    return combineLatest([
-      this.patch.watch$('package-data', pkgId, 'state'),
-      this.patch.watch$('package-data', pkgId, 'installed', 'status'),
-    ])
-    .pipe(
-      map(([state, status]) => {
-        return renderPkgStatus(state, status).feStatus
-      }),
-    )
-  }
-}

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

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core'
-import { PackageDataEntry, Manifest } from '../services/patch-db/data-model'
+import { PackageDataEntry } from '../services/patch-db/data-model'
-import { ConfigService, getManifest, hasUi } from '../services/config.service'
+import { ConfigService, hasUi } from '../services/config.service'
 
 @Pipe({
   name: 'hasUi',
@@ -8,7 +8,7 @@ import { ConfigService, getManifest, hasUi } from '../services/config.service'
 export class HasUiPipe implements PipeTransform {
 
   transform (pkg: PackageDataEntry): boolean {
-    const interfaces = getManifest(pkg).interfaces
+    const interfaces = pkg.manifest.interfaces
     return hasUi(interfaces)
   }
 }

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

@@ -1,4 +1,4 @@
-import { DockerIoFormat, Manifest, PackageDataEntry, PackageMainStatus, PackageState } from 'src/app/services/patch-db/data-model'
+import { DependencyErrorType, DockerIoFormat, Manifest, PackageDataEntry, PackageMainStatus, PackageState } from 'src/app/services/patch-db/data-model'
 import { MarketplacePkg, Metric, NotificationLevel, RR, ServerNotifications } from './api.types'
 
 export module Mock {
@@ -1347,56 +1347,56 @@ export module Mock {
   //   'install-progress': undefined,
   // }
 
-  // export const lnd: PackageDataEntry = {
+  export const lnd: PackageDataEntry = {
-  //   state: PackageState.Installed,
+    state: PackageState.Installed,
-  //   'static-files': {
+    'static-files': {
-  //     license: 'licenseUrl', // /public/package-data/lnd/0.21.1/LICENSE.md,
+      license: 'licenseUrl', // /public/package-data/lnd/0.21.1/LICENSE.md,
-  //     icon: 'assets/img/service-icons/lnd.png',
+      icon: 'assets/img/service-icons/lnd.png',
-  //     instructions: 'instructionsUrl', // /public/package-data/lnd/0.21.1/INSTRUCTIONS.md
+      instructions: 'instructionsUrl', // /public/package-data/lnd/0.21.1/INSTRUCTIONS.md
-  //   },
+    },
-  //   manifest: MockManifestLnd,
+    manifest: MockManifestLnd,
-  //   installed: {
+    installed: {
-  //     status: {
+      status: {
-  //       configured: true,
+        configured: true,
-  //       main: {
+        main: {
-  //         status: PackageMainStatus.Stopped,
+          status: PackageMainStatus.Stopped,
-  //       },
+        },
-  //       'dependency-errors': {
+        'dependency-errors': {
-  //         'bitcoin-proxy': {
+          'bitcoin-proxy': {
-  //           type: DependencyErrorType.NotInstalled,
+            type: DependencyErrorType.NotInstalled,
-  //           title: Mock.MockManifestBitcoinProxy.title,
+            title: Mock.MockManifestBitcoinProxy.title,
-  //           icon: 'assets/img/service-icons/bitcoin-proxy.png',
+            icon: 'assets/img/service-icons/bitcoin-proxy.png',
-  //         },
+          },
-  //       },
+        },
-  //     },
+      },
-  //     'interface-info': {
+      'interface-info': {
-  //       ip: '10.0.0.1',
+        ip: '10.0.0.1',
-  //       addresses: {
+        addresses: {
-  //         rpc: {
+          rpc: {
-  //           'tor-address': 'lnd-rpc-address.onion',
+            'tor-address': 'lnd-rpc-address.onion',
-  //           'lan-address': 'lnd-rpc-address.local',
+            'lan-address': 'lnd-rpc-address.local',
-  //         },
+          },
-  //         grpc: {
+          grpc: {
-  //           'tor-address': 'lnd-grpc-address.onion',
+            'tor-address': 'lnd-grpc-address.onion',
-  //           'lan-address': 'lnd-grpc-address.local',
+            'lan-address': 'lnd-grpc-address.local',
-  //         },
+          },
-  //       },
+        },
-  //     },
+      },
-  //     'system-pointers': [],
+      'system-pointers': [],
-  //     'current-dependents': { },
+      'current-dependents': { },
-  //     'current-dependencies': {
+      'current-dependencies': {
-  //       'bitcoind': {
+        'bitcoind': {
-  //         pointers: [],
+          pointers: [],
-  //         'health-checks': [],
+          'health-checks': [],
-  //       },
+        },
-  //       'bitcoin-proxy': {
+        'bitcoin-proxy': {
-  //         pointers: [],
+          pointers: [],
-  //         'health-checks': [],
+          'health-checks': [],
-  //       },
+        },
-  //     },
+      },
-  //   },
+    },
-  //   'install-progress': undefined,
+    'install-progress': undefined,
-  // }
+  }
 
   // export const DbDump: RR.GetDumpRes = {
   //   id: 1,

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

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'
 import { pauseFor } from '../../../util/misc.util'
 import { ApiService } from './embassy-api.service'
 import { Operation, PatchOp } from 'patch-db-client'
-import { PackageDataEntry, PackageMainStatus, PackageState, ServerStatus } from 'src/app/services/patch-db/data-model'
+import { DataModel, InstallProgress, PackageDataEntry, PackageMainStatus, PackageState, ServerStatus } from 'src/app/services/patch-db/data-model'
 import { RR, WithRevision } from '../api.types'
 import { parsePropertiesPermissive } from 'src/app/util/properties.util'
 import { Mock } from '../api.fixures'
@@ -325,18 +325,19 @@ export class MockApiService extends ApiService {
 
   async installPackageRaw (params: RR.InstallPackageReq): Promise<RR.InstallPackageRes> {
     await pauseFor(2000)
+    const initialProgress: InstallProgress = {
+      size: 120,
+      downloaded: 0,
+      'download-complete': false,
+      validated: 0,
+      'validation-complete': false,
+      unpacked: 0,
+      'unpack-complete': false,
+    }
     const pkg: PackageDataEntry = {
-      ...Mock.bitcoinproxy,
+      ...Mock[params.id],
       state: PackageState.Installing,
-      'install-progress': {
+      'install-progress': initialProgress,
-        size: 100,
-        downloaded: 10,
-        'download-complete': false,
-        validated: 1,
-        'validation-complete': true,
-        read: 50,
-        'read-complete': false,
-      },
     }
     const patch = [
       {
@@ -345,7 +346,11 @@ export class MockApiService extends ApiService {
         value: pkg,
       },
     ]
-    return this.http.rpcRequest<WithRevision<null>>({ method: 'db.patch', params: { patch } })
+    const res = await this.http.rpcRequest<WithRevision<null>>({ method: 'db.patch', params: { patch } })
+    setTimeout(async () => {
+      this.updateProgress(params.id, initialProgress)
+    }, 1000)
+    return res
   }
 
   async dryUpdatePackage (params: RR.DryUpdatePackageReq): Promise<RR.DryUpdatePackageRes> {
@@ -483,4 +488,45 @@ export class MockApiService extends ApiService {
     await pauseFor(2000)
     return { }
   }
+
+  private async updateProgress (id: string, initialProgress: InstallProgress) {
+    const phases = [
+      { progress: 'downloaded', completion: 'download-complete'},
+      { progress: 'validated', completion: 'validation-complete'},
+      { progress: 'unpacked', completion: 'unpack-complete'},
+    ]
+    for (let phase of phases) {
+      let i = initialProgress[phase.progress]
+      console.log('PHASE', phase)
+      console.log('Initial i', i)
+      while (i < initialProgress.size) {
+        console.log(i)
+        await pauseFor(1000)
+        i = Math.min(i + 40, initialProgress.size)
+        initialProgress[phase.progress] = i
+        if (i === initialProgress.size) {
+          initialProgress[phase.completion] = true
+        }
+        const patch = [
+          {
+            op: PatchOp.REPLACE,
+            path: `/package-data/${id}/install-progress`,
+            value: initialProgress,
+          },
+        ]
+        await this.http.rpcRequest<WithRevision<null>>({ method: 'db.patch', params: { patch } })
+      }
+    }
+
+    setTimeout(() => {
+      const patch = [
+        {
+          op: PatchOp.REPLACE,
+          path: `/package-data/${id}/state`,
+          value: PackageState.Installed,
+        },
+      ]
+      this.http.rpcRequest<WithRevision<null>>({ method: 'db.patch', params: { patch } })
+    }, 1000)
+  }
 }

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

@@ -1,14 +1,28 @@
 import { RR } from '../api.types'
 import { ConfigService } from '../../config.service'
 import { PatchDbService } from '../../patch-db/patch-db.service'
+import { ServerInfo } from '../../patch-db/data-model'
+import { AuthState } from '../../auth.service'
+import { takeWhile } from 'rxjs/operators'
 
 export abstract class MarketplaceApiService {
+  private server: ServerInfo
 
   constructor (
     readonly config: ConfigService,
     readonly patch: PatchDbService,
   ) { }
 
+  init (auth: AuthState) {
+    this.patch.watch$('server-info')
+    .pipe(
+      takeWhile(() => auth === AuthState.VERIFIED),
+    )
+    .subscribe(server => {
+      this.server = server
+    })
+  }
+
   abstract getEos (params: RR.GetMarketplaceEOSReq): Promise<RR.GetMarketplaceEOSRes>
 
   abstract getMarketplaceData (params: RR.GetMarketplaceDataReq): Promise<RR.GetMarketplaceDataRes>
@@ -20,11 +34,11 @@ export abstract class MarketplaceApiService {
   abstract getLatestVersion (params: RR.GetLatestVersionReq): Promise<RR.GetLatestVersionRes>
 
   getMarketplaceURL (type: 'eos' | 'package', defaultToTor = false): string {
-    const packageMarketplace = this.patch.data['server-info']['package-marketplace']
+    const packageMarketplace = this.server['package-marketplace']
     if (defaultToTor && !packageMarketplace) {
       return this.config.start9Marketplace.tor
     }
-    const eosMarketplace = this.patch.data['server-info']['eos-marketplace'] || this.config.start9Marketplace.clearnet
+    const eosMarketplace = this.server['eos-marketplace'] || this.config.start9Marketplace.clearnet
     if (type === 'eos') {
       return eosMarketplace
     } else {

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

@@ -17,7 +17,7 @@ export class AuthService {
   private readonly authState$: BehaviorSubject<AuthState> = new BehaviorSubject(AuthState.INITIALIZING)
 
   constructor (
-    private readonly api: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly storage: Storage,
   ) { }
 
@@ -31,7 +31,7 @@ export class AuthService {
   }
 
   async login (password: string): Promise<void> {
-    await this.api.login({ password })
+    await this.embassyApi.login({ password })
     await this.storage.set(this.LOGGED_IN_KEY, true)
     this.authState$.next(AuthState.VERIFIED)
   }

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

@@ -101,13 +101,6 @@ export function hasUi (interfaces: { [id: string]: InterfaceDef }): boolean {
   return hasTorUi(interfaces) || hasLanUi(interfaces)
 }
 
-export function getManifest (pkg: PackageDataEntry): Manifest {
-  if (pkg.state === PackageState.Installed) {
-    return pkg.manifest
-  }
-  return pkg['temp-manifest']
-}
-
 function removeProtocol (str: string): string {
   if (str.startsWith('http://')) return str.slice(7)
   if (str.startsWith('https://')) return str.slice(8)

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

@@ -2,8 +2,9 @@ import { Injectable } from '@angular/core'
 import { BehaviorSubject, combineLatest, fromEvent, merge, Subscription } from 'rxjs'
 import { ConnectionStatus, PatchDbService } from './patch-db/patch-db.service'
 import { HttpService, Method } from './http.service'
-import { distinctUntilChanged } from 'rxjs/operators'
+import { distinctUntilChanged, takeWhile } from 'rxjs/operators'
 import { ConfigService } from './config.service'
+import { AuthState } from './auth.service'
 
 @Injectable({
   providedIn: 'root',
@@ -23,16 +24,35 @@ export class ConnectionService {
     return this.connectionFailure$.asObservable()
   }
 
-  start () {
+  start (auth: AuthState) {
     this.subs = [
       merge(fromEvent(window, 'online'), fromEvent(window, 'offline'))
+      .pipe(
+        takeWhile(() => auth === AuthState.VERIFIED),
+      )
       .subscribe(event => {
         this.networkState$.next(event.type === 'online')
       }),
 
-      combineLatest([this.networkState$.pipe(distinctUntilChanged()), this.patch.watchConnection$().pipe(distinctUntilChanged())])
+      combineLatest([
-      .subscribe(async ([network, connectionStatus]) => {
+        // 1
-        const addrs = this.patch.data['server-info']['connection-addresses']
+        this.networkState$
+        .pipe(
+          distinctUntilChanged(),
+        ),
+        // 2
+        this.patch.watchConnection$()
+        .pipe(
+          distinctUntilChanged(),
+        ),
+        // 3
+        this.patch.watch$('server-info', 'connection-addresses')
+        .pipe(
+          takeWhile(() => auth === AuthState.VERIFIED),
+          distinctUntilChanged(),
+        ),
+      ])
+      .subscribe(async ([network, connectionStatus, addrs]) => {
         if (connectionStatus !== ConnectionStatus.Disconnected) {
           this.connectionFailure$.next(ConnectionFailure.None)
         } else if (!network) {
@@ -61,13 +81,6 @@ export class ConnectionService {
     ]
   }
 
-  stop () {
-    this.subs.forEach(sub => {
-      sub.unsubscribe()
-    })
-    this.subs = []
-  }
-
   private async testAddrs (addrs: string[]): Promise<boolean> {
     if (!addrs.length) return true
 

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

@@ -70,6 +70,12 @@ export class HttpService {
       this.fullUrl + httpOpts.url :
       httpOpts.url
 
+    Object.keys(httpOpts.params).forEach(key => {
+      if (httpOpts.params[key] === undefined) {
+        delete httpOpts.params[key]
+      }
+    })
+
     return {
       observe: 'events',
       responseType: 'json',

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

@@ -62,8 +62,8 @@ export interface InstallProgress {
   'download-complete': boolean
   validated: number
   'validation-complete': boolean
-  read: number
+  unpacked: number
-  'read-complete': boolean
+  'unpack-complete': boolean
 }
 
 export interface InstalledPackageDataEntry {

ui/src/app/services/patch-db/patch-db.factory.ts

@@ -8,7 +8,7 @@ import { ApiService } from 'src/app/services/api/embassy/embassy-api.service'
 export function PatchDbServiceFactory (
   config: ConfigService,
   bootstrapper: LocalStorageBootstrap,
-  apiService: ApiService,
+  embassyApi: ApiService,
 ): PatchDbService {
 
   const { mocks, patchDb: { poll }, isConsulate } = config
@@ -17,13 +17,13 @@ export function PatchDbServiceFactory (
 
   if (mocks.enabled) {
     if (mocks.connection === 'poll') {
-      source = new PollSource({ ...poll }, apiService)
+      source = new PollSource({ ...poll }, embassyApi)
     } else {
       source = new WebsocketSource(`ws://localhost:${config.mocks.wsPort}/db`)
     }
   } else {
     if (isConsulate) {
-      source = new PollSource({ ...poll }, apiService)
+      source = new PollSource({ ...poll }, embassyApi)
     } else {
       const protocol = window.location.protocol === 'http:' ? 'ws' : 'wss'
       const host = window.location.host
@@ -31,5 +31,5 @@ export function PatchDbServiceFactory (
     }
   }
 
-  return new PatchDbService(source, apiService, bootstrapper)
+  return new PatchDbService(source, embassyApi, bootstrapper)
 }

ui/src/app/services/patch-db/patch-db.service.ts

@@ -20,10 +20,11 @@ export enum ConnectionStatus {
 })
 export class PatchDbService {
   connectionStatus$ = new BehaviorSubject(ConnectionStatus.Initializing)
-  data: DataModel
   private patchDb: PatchDB<DataModel>
   private patchSub: Subscription
 
+  get data () { return this.patchDb.store.cache.data }
+
   constructor (
     @Inject(PATCH_SOURCE) private readonly source: Source<DataModel>,
     @Inject(PATCH_HTTP) private readonly http: ApiService,
@@ -33,7 +34,6 @@ export class PatchDbService {
   async init (): Promise<void> {
     const cache = await this.bootstrapper.init()
     this.patchDb = new PatchDB([this.source, this.http], this.http, cache)
-    this.data = this.patchDb.store.cache.data
   }
 
   start (): void {
@@ -44,7 +44,7 @@ export class PatchDbService {
       .pipe(debounceTime(500))
       .subscribe({
         next: cache => {
-          console.log('saving cacheee: ', cache)
+          console.log('saving cacheee: ', JSON.parse(JSON.stringify(cache)))
           this.connectionStatus$.next(ConnectionStatus.Connected)
           this.bootstrapper.update(cache)
         },
@@ -82,8 +82,9 @@ export class PatchDbService {
 
   watch$: Store<DataModel>['watch$'] = (...args: (string | number)[]): Observable<DataModel> => {
     console.log('WATCHING', ...args)
-    return this.patchDb.store.watch$(...(args as [])).pipe(
+    return this.patchDb.store.watch$(...(args as []))
-      tap(cache => console.log('CHANGE IN STORE', cache)),
+    .pipe(
+      tap(data => console.log('CHANGE IN STORE', data, ...args)),
       catchError(e => {
         console.error(e)
         return of(e.message)

ui/src/app/services/server-config.service.ts

@@ -13,7 +13,7 @@ export class ServerConfigService {
 
   constructor (
     private readonly trackingModalCtrl: TrackingModalController,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly sshService: SSHService,
   ) { }
 
@@ -35,19 +35,19 @@ export class ServerConfigService {
 
   saveFns: { [key: string]: (val: any) => Promise<any> } = {
     autoCheckUpdates: async (value: boolean) => {
-      return this.apiService.setDbValue({ pointer: 'ui/auto-check-updates', value })
+      return this.embassyApi.setDbValue({ pointer: 'ui/auto-check-updates', value })
     },
     ssh: async (pubkey: string) => {
       return this.sshService.add(pubkey)
     },
     eosMarketplace: async (enabled: boolean) => {
-      return this.apiService.setEosMarketplace(enabled)
+      return this.embassyApi.setEosMarketplace(enabled)
     },
     // packageMarketplace: async (url: string) => {
-    //   return this.apiService.setPackageMarketplace({ url })
+    //   return this.embassyApi.setPackageMarketplace({ url })
     // },
     // password: async (password: string) => {
-    //   return this.apiService.updatePassword({ password })
+    //   return this.embassyApi.updatePassword({ password })
     // },
   }
 }

ui/src/app/services/startup-alerts.service.ts

@@ -5,17 +5,21 @@ import { WizardBaker } from '../components/install-wizard/prebaked-wizards'
 import { OSWelcomePage } from '../modals/os-welcome/os-welcome.page'
 import { displayEmver } from '../pipes/emver.pipe'
 import { RR } from './api/api.types'
-import { PatchDbService } from './patch-db/patch-db.service'
 import { ConfigService } from './config.service'
 import { Emver } from './emver.service'
 import { MarketplaceService } from '../pages/marketplace-routes/marketplace.service'
 import { MarketplaceApiService } from './api/marketplace/marketplace-api.service'
+import { DataModel, PackageDataEntry } from './patch-db/data-model'
+import { PatchDbService } from './patch-db/patch-db.service'
+import { filter, take } from 'rxjs/operators'
+import { isEmptyObject } from '../util/misc.util'
 
 @Injectable({
   providedIn: 'root',
 })
 export class StartupAlertsService {
   private checks: Check<any>[]
+  data: DataModel
 
   constructor (
     private readonly alertCtrl: AlertController,
@@ -57,7 +61,14 @@ export class StartupAlertsService {
   // Each promise fires more or less concurrently, so each c.check(server) is run concurrently
   // Then, since we await previousDisplay before c.display(res), each promise executing gets hung awaiting the display of the previous run
   async runChecks (): Promise<void> {
-    await this.checks
+    this.patch.watch$()
+    .pipe(
+      filter(data => !isEmptyObject(data)),
+      take(1),
+    )
+    .subscribe(async data => {
+      this.data = data
+      await this.checks
       .filter(c => !c.hasRun && c.shouldRun())
       // returning true in the below block means to continue to next modal
       // returning false means to skip all subsequent modals
@@ -76,18 +87,19 @@ export class StartupAlertsService {
         if (!checkRes) return true
         if (displayRes) return c.display(checkRes)
       }, Promise.resolve(true))
+    })
   }
 
   private shouldRunOsWelcome (): boolean {
-    return this.patch.data.ui['welcome-ack'] !== this.config.version
+    return this.data.ui['welcome-ack'] !== this.config.version
   }
 
   private shouldRunOsUpdateCheck (): boolean {
-    return this.patch.data.ui['auto-check-updates']
+    return this.data.ui['auto-check-updates']
   }
 
   private shouldRunAppsCheck (): boolean {
-    return this.patch.data.ui['auto-check-updates']
+    return this.data.ui['auto-check-updates']
   }
 
   private async osUpdateCheck (): Promise<RR.GetMarketplaceEOSRes | undefined> {
@@ -101,8 +113,8 @@ export class StartupAlertsService {
   }
 
   private async appsCheck (): Promise<boolean> {
-    const updates = await this.marketplaceService.getUpdates(this.patch.data['package-data'])
+    await this.marketplaceService.getUpdates(this.data['package-data'])
-    return !!updates.length
+    return !!this.marketplaceService.updates.length
   }
 
   private async displayOsWelcome (): Promise<boolean> {