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

* dont watch patch.data directly in TS

* installs and uninstalls working

* minor repairs

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 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>
-        <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-danger)">Embassy</span></h2>
+      <p class="ion-text-wrap">Get started by installing your first service.</p>
     </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.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>
+    <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>
+        <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]: {
-    bulbInfo: {
+  connectionFailure: boolean
+  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.connected$(),
-        this.patch.watch$('package-data'),
-      ])
-      .subscribe(([connected, pkgs]) => {
-        this.connected = connected
+      this.patch.watch$('package-data')
+      .pipe(
+        filter(obj => {
+          return Object.keys(obj).length !== Object.keys(this.pkgs).length
+        }),
+      )
+      .subscribe(pkgs => {
+        const ids = Object.keys(pkgs)
+        console.log('PKGSPKGS', ids)
 
-        Object.keys(pkgs).forEach(pkgId => {
-          let bulbClass = 'bulb-on'
-          let img = ''
-
-          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,
+        Object.keys(this.pkgs).forEach(id => {
+          if (!ids.includes(id)) {
+            this.pkgs[id].sub.unsubscribe()
+            delete this.pkgs[id]
           }
         })
+
+        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 }),