better subscriptions

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

@@ -8,15 +8,15 @@
 </ion-header>
 
 <ion-content class="ion-padding-top">
-  <ng-container *ngIf="patch.data['server-info'][pkgId]?.installed as installed">
+  <ng-container *ngIf="patch.data['package-data'][pkgId] as pkg">
     <ion-item-group>
-      <ion-item button *ngFor="let action of installed.manifest.actions | keyvalue: asIsOrder" (click)="handleAction(installed, action)" >
+      <ion-item button *ngFor="let action of pkg.manifest.actions | keyvalue: asIsOrder" (click)="handleAction(pkg, action)" >
         <ion-label class="ion-text-wrap">
-          <h2><ion-text color="primary">{{ action.value.name }}</ion-text><ion-icon *ngIf="!(action.value['allowed-statuses'] | includes: installed.status.main.status)" color="danger" name="close-outline"></ion-icon></h2>
+          <h2><ion-text color="primary">{{ action.value.name }}</ion-text><ion-icon *ngIf="!(action.value['allowed-statuses'] | includes: pkg.installed.status.main.status)" color="danger" name="close-outline"></ion-icon></h2>
           <p><ion-text color="dark">{{ action.value.description }}</ion-text></p>
         </ion-label>
       </ion-item>
-      <ion-item button (click)="uninstall(installed.manifest)" >
+      <ion-item button (click)="uninstall(pkg.manifest)" >
         <ion-label class="ion-text-wrap">
           <h2><ion-text color="primary">Uninstall</ion-text></h2>
           <p><ion-text color="dark">This will uninstall the service from your Embassy and delete all data permanently.</ion-text></p>

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

@@ -5,7 +5,7 @@ import { AlertController, IonContent, ModalController, NavController } from '@io
 import { LoaderService } from 'src/app/services/loader.service'
 import { HttpErrorResponse } from '@angular/common/http'
 import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
-import { Action, InstalledPackageDataEntry, Manifest, PackageMainStatus } from 'src/app/services/patch-db/data-model'
+import { Action, Manifest, PackageDataEntry, PackageMainStatus } from 'src/app/services/patch-db/data-model'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { Subscription } from 'rxjs'
@@ -44,8 +44,8 @@ export class AppActionsPage {
     this.subs.forEach(sub => sub.unsubscribe())
   }
 
-  async handleAction (pkg: InstalledPackageDataEntry, action: { key: string, value: Action }) {
-    if ((action.value['allowed-statuses'] as PackageMainStatus[]).includes(pkg.status.main.status)) {
+  async handleAction (pkg: PackageDataEntry, action: { key: string, value: Action }) {
+    if ((action.value['allowed-statuses'] as PackageMainStatus[]).includes(pkg.installed.status.main.status)) {
       const alert = await this.alertCtrl.create({
         header: 'Confirm',
         message: `Are you sure you want to execute action "${action.value.name}"? ${action.value.warning || ''}`,

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

@@ -35,7 +35,7 @@
 
     <ng-container *ngIf="pkg">
       <!-- @TODO make sure this is how to determine if pkg is in needs_config -->
-      <ng-container *ngIf="pkg.manifest.config && !pkg.status.configured && !edited">
+      <ng-container *ngIf="pkg.manifest.config && !pkg.installed.status.configured && !edited">
         <ion-item class="notifier-item">
           <ion-label class="ion-text-wrap">
             <h2 style="display: flex; align-items: center; margin-bottom: 3px;">
@@ -91,7 +91,7 @@
 
       <!-- save button, always show -->
       <ion-button
-        [disabled]="invalid || (!edited && !added && !pkg.status.configured )"
+        [disabled]="invalid || (!edited && !added && !pkg.installed.status.configured )"
         fill="outline"
         expand="block"
         style="margin: 10px"

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

@@ -11,7 +11,7 @@ import { wizardModal } from 'src/app/components/install-wizard/install-wizard.co
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { ConfigSpec } from 'src/app/pkg-config/config-types'
 import { ConfigCursor } from 'src/app/pkg-config/config-cursor'
-import { InstalledPackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
+import { PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
 import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 
 @Component({
@@ -26,7 +26,7 @@ export class AppConfigPage {
 
   loadingText: string | undefined
 
-  pkg: InstalledPackageDataEntry
+  pkg: PackageDataEntry
   hasConfig = false
 
   mocalShowing = false
@@ -82,7 +82,7 @@ export class AppConfigPage {
           this.navCtrl.back()
         }
       }),
-      this.patch.watch$('package-data', pkgId, 'installed')
+      this.patch.watch$('package-data', pkgId)
       .pipe(
         tap(pkg => this.pkg = pkg),
         tap(() => this.loadingText = 'Fetching config spec...'),
@@ -156,7 +156,7 @@ export class AppConfigPage {
     }
   }
 
-  async save (pkg: InstalledPackageDataEntry) {
+  async save (pkg: PackageDataEntry) {
     return this.loader.of({
       message: `Saving config...`,
       spinner: 'lines',

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

@@ -10,12 +10,12 @@
 <ion-content>
     <ion-grid *ngIf="patch.data['package-data'][pkgId] as pkg">
       <ion-row>
-        <ion-col *ngFor="let interface of pkg.installed.manifest.interfaces | keyvalue: asIsOrder" sizeSm="12" sizeMd="6">
+        <ion-col *ngFor="let interface of pkg.manifest.interfaces | keyvalue: asIsOrder" sizeSm="12" sizeMd="6">
           <ion-card>
             <ion-card-header>
               <ion-card-title>{{ interface.value.name }}</ion-card-title>
               <ion-card-subtitle>{{ interface.value.description }}</ion-card-subtitle>
-              <ion-button style="margin-top: 12px;" *ngIf="interface.value.ui" [disabled]="!(pkg | isLaunchable)" fill="outline" color="dark" expand="block" (click)="launch(pkg.installed)">
+              <ion-button style="margin-top: 12px;" *ngIf="interface.value.ui" [disabled]="!(pkg | isLaunchable)" fill="outline" color="dark" expand="block" (click)="launch(pkg)">
                 Launch
                 <ion-icon slot="end" name="rocket-outline"></ion-icon>
               </ion-button>

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

@@ -46,8 +46,8 @@ export class AppInterfacesPage {
     await toast.present()
   }
 
-  launch (installed: InstalledPackageDataEntry): void {
-    window.open(this.config.launchableURL(installed), '_blank')
+  launch (pkg: PackageDataEntry): void {
+    window.open(this.config.launchableURL(pkg), '_blank')
   }
 
   asIsOrder () {

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

@@ -24,7 +24,7 @@
       <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]">
+            <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>
@@ -33,14 +33,11 @@
     
               <img style="position: absolute" class="main-img" [src]="pkg.value['static-files'].icon" alt="icon" />
               <img class="main-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
-              <img class="bulb-on" *ngIf="(pkg.key | displayBulb : 'green' : connected) | async" src="assets/img/running-bulb.png"/>
-              <img class="bulb-on" *ngIf="(pkg.key | displayBulb : 'red' : connected) | async" src="assets/img/issue-bulb.png"/>
-              <img class="bulb-on" *ngIf="(pkg.key | displayBulb : 'yellow' : connected) | async" src="assets/img/warning-bulb.png"/>
-              <img class="bulb-off" *ngIf="(pkg.key | displayBulb : 'off' : connected) | async" src="assets/img/off-bulb.png"/>
+              <img [class]="serviceInfo[pkg.key].bulbInfo.class" [src]="serviceInfo[pkg.key].bulbInfo.img"/>
 
               <ion-card-header>
-                <status *ngIf="connected" [pkgId]="pkg.key" size="calc(8px + .4vw)" weight="bold"></status>
-                <ion-card-title>{{ (pkg.value | manifest).title }}</ion-card-title>
+                <status *ngIf="connected" [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>

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

@@ -3,7 +3,8 @@ import { ConfigService } from 'src/app/services/config.service'
 import { ConnectionService } from 'src/app/services/connection.service'
 import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
-import { Subscription } from 'rxjs'
+import { combineLatest, Subscription } from 'rxjs'
+import { PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
 
 @Component({
   selector: 'app-list',
@@ -13,6 +14,13 @@ import { Subscription } from 'rxjs'
 export class AppListPage {
   connected: boolean
   subs: Subscription[] = []
+  serviceInfo: { [id: string]: {
+    bulbInfo: {
+      class: string
+      img: string
+    }
+    rendering: PkgStatusRendering
+  }} = { }
 
   constructor (
     private readonly config: ConfigService,
@@ -22,7 +30,48 @@ export class AppListPage {
 
   ngOnInit () {
     this.subs = [
-      this.patch.connected$().subscribe(c => this.connected = c),
+      combineLatest([
+        this.patch.connected$(),
+        this.patch.watch$('package-data'),
+      ])
+      .subscribe(([connected, pkgs]) => {
+        this.connected = connected
+
+        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,
+          }
+        })
+      }),
     ]
   }
 
@@ -33,7 +82,7 @@ export class AppListPage {
   launchUi (pkg: PackageDataEntry, event: Event): void {
     event.preventDefault()
     event.stopPropagation()
-    window.open(this.config.launchableURL(pkg.installed), '_blank')
+    window.open(this.config.launchableURL(pkg), '_blank')
   }
 
   asIsOrder () {

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

@@ -61,7 +61,7 @@
   </div>
 
   <div *ngIf="segmentValue === 'raw'" class="raw">
-    <pre [innerHTML]="pkg | manifest | json"></pre>
+    <pre [innerHTML]="pkg.manifest | json"></pre>
   </div>
 </ion-content>
 

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

@@ -33,7 +33,7 @@ export class AppRestorePage {
 
   ngOnInit () {
     this.pkgId = this.route.snapshot.paramMap.get('pkgId')
-    this.title = this.patch.data['package-data'][this.pkgId].installed.manifest.title
+    this.title = this.patch.data['package-data'][this.pkgId].manifest.title
 
     this.getExternalDisks()
   }

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

@@ -23,15 +23,15 @@
           <img [src]="pkg['static-files'].icon" />
         </ion-thumbnail>
         <ion-label class="ion-text-wrap">
-          <h1 style="font-family: 'Montserrat';" [class.less-large]="manifest.title.length > 20">
-            {{ manifest.title }}
+          <h1 style="font-family: 'Montserrat';" [class.less-large]="pkg.manifest.title.length > 20">
+            {{ pkg.manifest.title }}
           </h1>
-          <h5>{{ manifest.version | displayEmver }}</h5>
+          <h5>{{ pkg.manifest.version | displayEmver }}</h5>
         </ion-label>
       </ion-item>
 
       <div class="status-readout">
-        <status *ngIf="connected" size="large" weight="500" [pkgId]="pkgId"></status>
+        <status *ngIf="connected" size="large" weight="500" [rendering]="rendering"></status>
         <ion-button *ngIf="(pkgId | status | async) === FeStatus.NeedsConfig" expand="block" [routerLink]="['config']">
           Configure
         </ion-button>
@@ -71,7 +71,7 @@
         <!-- dependencies -->
         <ng-container *ngIf="!(pkg.installed['current-dependencies'] | empty)">
           <ion-item-divider id="dependencies">Dependencies</ion-item-divider>
-          <!-- A current-dependency is a subset of the manifest.dependencies that is currently required as determined by the service config. -->
+          <!-- A current-dependency is a subset of the pkg.manifest.dependencies that is currently required as determined by the service config. -->
           <ion-grid>
             <ion-row>
               <ion-col *ngFor="let dep of pkg.installed['current-dependencies'] | keyvalue" sizeXs="12" sizeMd="6">
@@ -80,8 +80,8 @@
                     <img [src]="patch.data['package-data'][dep.key] ? patch.data['package-data'][dep.key]['static-files'].icon : pkg.installed.status['dependency-errors'][dep.key]?.icon" />
                   </ion-thumbnail>
                   <ion-label class="ion-text-wrap">
-                    <h2 style="font-family: 'Montserrat'">{{ patch.data['package-data'][dep.key] ? (patch.data['package-data'][dep.key] | manifest).title : pkg.installed.status['dependency-errors'][dep.key]?.title }}</h2>
-                    <p>{{ manifest.dependencies[dep.key].version | displayEmver }}</p>
+                    <h2 style="font-family: 'Montserrat'">{{ patch.data['package-data'][dep.key] ? patch.data['package-data'][dep.key].manifest.title : pkg.installed.status['dependency-errors'][dep.key]?.title }}</h2>
+                    <p>{{ pkg.manifest.dependencies[dep.key].version | displayEmver }}</p>
                     <p><ion-text [color]="pkg.installed.status['dependency-errors'][dep.key] ? 'warning' : 'success'">{{ pkg.installed.status['dependency-errors'][dep.key] ? pkg.installed.status['dependency-errors'][dep.key].type : 'satisfied' }}</ion-text></p>
                   </ion-label>
 

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

@@ -4,13 +4,13 @@ import { ApiService } from 'src/app/services/api/api.service'
 import { ActivatedRoute, NavigationExtras } from '@angular/router'
 import { chill, isEmptyObject, Recommendation } from 'src/app/util/misc.util'
 import { LoaderService } from 'src/app/services/loader.service'
-import { Observable, of, Subscription } from 'rxjs'
+import { combineLatest, Observable, of, Subscription } from 'rxjs'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { ConfigService, getManifest } from 'src/app/services/config.service'
 import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { DependencyErrorConfigUnsatisfied, DependencyErrorNotInstalled, DependencyErrorType, Manifest, PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
-import { FEStatus } from 'src/app/services/pkg-status-rendering.service'
+import { FEStatus, PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
 import { ConnectionService } from 'src/app/services/connection.service'
 
 @Component({
@@ -24,11 +24,11 @@ export class AppShowPage {
   pkg: PackageDataEntry
   hideLAN: boolean
   buttons: Button[] = []
-  manifest: Manifest = { } as Manifest
   connected: boolean
   FeStatus = FEStatus
   PackageState = PackageState
   DependencyErrorType = DependencyErrorType
+  rendering: PkgStatusRendering
 
   @ViewChild(IonContent) content: IonContent
   subs: Subscription[] = []
@@ -49,10 +49,15 @@ export class AppShowPage {
   async ngOnInit () {
     this.pkgId = this.route.snapshot.paramMap.get('pkgId')
     this.pkg = this.patch.data['package-data'][this.pkgId]
-    // @TODO maybe re-fetch manifest if package state changes.
-    this.manifest = getManifest(this.pkg)
     this.subs = [
-      this.patch.connected$().subscribe(c => this.connected = c),
+      combineLatest([
+        this.patch.connected$(),
+        this.patch.watch$('package-data', this.pkgId),
+      ])
+      .subscribe(([connected, pkg]) => {
+        this.connected = connected
+        this.rendering = renderPkgStatus(pkg.state, pkg.installed.status)
+      }),
     ]
     this.setButtons()
   }
@@ -66,11 +71,11 @@ export class AppShowPage {
   }
 
   launchUiTab (): void {
-    window.open(this.config.launchableURL(this.pkg.installed), '_blank')
+    window.open(this.config.launchableURL(this.pkg), '_blank')
   }
 
   async stop (): Promise<void> {
-    const { id, title, version } = this.pkg.installed.manifest
+    const { id, title, version } = this.pkg.manifest
     await this.loader.of({
       message: `Stopping...`,
       spinner: 'lines',
@@ -99,7 +104,7 @@ export class AppShowPage {
   }
 
   async tryStart (): Promise<void> {
-    const message = this.pkg.installed.manifest.alerts.start
+    const message = this.pkg.manifest.alerts.start
     if (message) {
       this.presentAlertStart(message)
     } else {
@@ -108,13 +113,13 @@ export class AppShowPage {
   }
 
   async donate (): Promise<void> {
-    const url = this.manifest['donation-url']
+    const url = this.pkg.manifest['donation-url']
     if (url) {
       window.open(url, '_blank')
     } else {
       const alert = await this.alertCtrl.create({
         header: 'Not Accepting Donations',
-        message: `The developers of ${this.manifest.title} have not provided a donation URL. Please contact them directly if you insist on giving them money.`,
+        message: `The developers of ${this.pkg.manifest.title} have not provided a donation URL. Please contact them directly if you insist on giving them money.`,
         buttons: ['OK'],
       })
       await alert.present()
@@ -143,8 +148,8 @@ export class AppShowPage {
   }
 
   private async installDep (depId: string): Promise<void> {
-    const version = this.pkg.installed.manifest.dependencies[depId].version
-    const dependentTitle = this.pkg.installed.manifest.title
+    const version = this.pkg.manifest.dependencies[depId].version
+    const dependentTitle = this.pkg.manifest.title
 
     const installRec: Recommendation = {
       dependentId: this.pkgId,
@@ -164,7 +169,7 @@ export class AppShowPage {
     const configErrors = (this.pkg.installed.status['dependency-errors'][depId] as DependencyErrorConfigUnsatisfied).errors
 
     const description = `<ul>${configErrors.map(d => `<li>${d}</li>`).join('\n')}</ul>`
-    const dependentTitle = this.pkg.installed.manifest.title
+    const dependentTitle = this.pkg.manifest.title
 
     const configRecommendation: Recommendation = {
       dependentId: this.pkgId,

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

@@ -58,20 +58,20 @@
               <ion-label>
                 <h2 style="font-family: 'Montserrat';">{{ pkg.title }}</h2>
                 <p>{{ pkg.descriptionShort }}</p>
-                <ng-container *ngIf="patch.data['package-data'] as pkgI">
-                  <p *ngIf="pkgI.state === PackageState.Installed">
-                    <ion-text *ngIf="(pkg.version | compareEmver : pkgI.installed.manifest.version) === 0" color="success">Installed</ion-text>
-                    <ion-text *ngIf="(pkg.version | compareEmver : pkgI.installed.manifest.version) === 1" color="warning">Update Available</ion-text>
+                <ng-container *ngIf="patch.data['package-data'][pkg.id] as localPkg">
+                  <p *ngIf="localPkg.state === PackageState.Installed">
+                    <ion-text *ngIf="(pkg.version | compareEmver : localPkg.manifest.version) === 0" color="success">Installed</ion-text>
+                    <ion-text *ngIf="(pkg.version | compareEmver : localPkg.manifest.version) === 1" color="warning">Update Available</ion-text>
                   </p>
-                  <p *ngIf="pkgI.state === PackageState.Installing" style="display: flex; flex-direction: row; align-items: center;">
+                  <p *ngIf="localPkg.state === PackageState.Installing" style="display: flex; flex-direction: row; align-items: center;">
                     <ion-text color="primary">Installing</ion-text>
                     <ion-spinner name="crescent" style="height: 10px; width: 15px; margin-left: 3px; margin-right: -4px;" color="primary"></ion-spinner>
                   </p>
-                  <p *ngIf="pkgI.state === PackageState.Updating" style="display: flex; flex-direction: row; align-items: center;">
+                  <p *ngIf="localPkg.state === PackageState.Updating" style="display: flex; flex-direction: row; align-items: center;">
                     <ion-text color="primary">Updating</ion-text>
                     <ion-spinner name="crescent" style="height: 10px; width: 15px; margin-left: 3px; margin-right: -4px;" color="primary"></ion-spinner>
                   </p>
-                  <p *ngIf="pkgI.state === PackageState.Removing" style="display: flex; flex-direction: row; align-items: center;">
+                  <p *ngIf="localPkg.state === PackageState.Removing" style="display: flex; flex-direction: row; align-items: center;">
                     <ion-text color="danger">Removing</ion-text>
                     <ion-spinner name="crescent" style="height: 10px; width: 15px; margin-left: 3px; margin-right: -4px;" color="danger"></ion-spinner>
                   </p>

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

@@ -42,7 +42,7 @@
                   <!-- installed -->
                   <ng-template #installed>
                     <p>
-                      <ion-text color="medium">Installed at {{ installedPkg.installed.manifest.version | displayEmver }}</ion-text>
+                      <ion-text color="medium">Installed at {{ installedPkg.manifest.version | displayEmver }}</ion-text>
                     </p>
                   </ng-template>
                 </ng-template>
@@ -59,10 +59,10 @@
           <ng-template #installedPkg2>
             <!-- not installing, updating, or removing -->
             <ng-container *ngIf="installedPkg.state === PackageState.Installed">
-              <ion-button *ngIf="(installedPkg.installed.manifest.version | compareEmver : pkg.manifest.version) === -1" class="main-action-button" expand="block" (click)="update('update')">
+              <ion-button *ngIf="(installedPkg.manifest.version | compareEmver : pkg.manifest.version) === -1" class="main-action-button" expand="block" (click)="update('update')">
                 Update
               </ion-button>
-              <ion-button *ngIf="(installedPkg.installed.manifest.version | compareEmver : pkg.manifest.version) === 1" class="main-action-button" expand="block" color="warning" (click)="update('downgrade')">
+              <ion-button *ngIf="(installedPkg.manifest.version | compareEmver : pkg.manifest.version) === 1" class="main-action-button" expand="block" color="warning" (click)="update('downgrade')">
                 Downgrade
               </ion-button>
             </ng-container>