fix ui address bug and streamline install flow

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

@@ -11,13 +11,13 @@
   <ion-item-group>
     <!-- iff ui -->
     <ng-container *ngIf="ui">
-      <ion-item-divider>Web User Interface</ion-item-divider>
+      <ion-item-divider>User Interface</ion-item-divider>
       <app-interfaces-item [interface]="ui"></app-interfaces-item>
     </ng-container>
 
     <!-- other interface -->
     <ng-container *ngIf="other.length">
-      <ion-item-divider>Other Interfaces</ion-item-divider>
+      <ion-item-divider>Machine Interfaces</ion-item-divider>
       <div *ngFor="let interface of other" style="margin-bottom: 30px;">
         <app-interfaces-item [interface]="interface"></app-interfaces-item>
       </div>

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

@@ -1,6 +1,7 @@
 import { Component, Input, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { IonContent, ToastController } from '@ionic/angular'
+import { getUiInterfaceKey } from 'src/app/services/config.service'
 import { InstalledPackageDataEntry, InterfaceDef } from 'src/app/services/patch-db/data-model'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { copyToClipboard } from 'src/app/util/web.util'
@@ -29,13 +30,14 @@ export class AppInterfacesPage {
     const pkgId = this.route.snapshot.paramMap.get('pkgId')
     const pkg = this.patch.data['package-data'][pkgId]
     const interfaces = pkg.manifest.interfaces
-    const addressesMap = pkg.installed['interface-addresses']
-    const ui = interfaces['ui']
+    const uiKey = getUiInterfaceKey(interfaces)
 
-    if (ui) {
-      const uiAddresses = addressesMap['ui']
+    const addressesMap = pkg.installed['interface-addresses']
+
+    if (uiKey) {
+      const uiAddresses = addressesMap[uiKey]
       this.ui = {
-        def: ui,
+        def: interfaces[uiKey],
         addresses: {
           'lan-address': uiAddresses['lan-address'] ? 'https://' + uiAddresses['lan-address'] : null,
           'tor-address': uiAddresses['tor-address'] ? 'http://' + uiAddresses['tor-address'] : null,
@@ -44,7 +46,7 @@ export class AppInterfacesPage {
     }
 
     this.other = Object.keys(interfaces)
-      .filter(key => key !== 'ui')
+      .filter(key => key !== uiKey)
       .map(key => {
         const addresses = addressesMap[key]
         return {

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

@@ -50,7 +50,6 @@ export class AppListPage {
         }),
       )
       .subscribe(pkgs => {
-        console.log('PACKAGES LIST', pkgs)
         this.loading = false
 
         const ids = Object.keys(pkgs)
@@ -77,7 +76,6 @@ export class AppListPage {
           }
           // subscribe to pkg
           this.pkgs[id].sub = this.patch.watch$('package-data', id).subscribe(pkg => {
-            console.log('SOLO PKG', id, pkg)
             if (!pkg) return
             let bulbClass = 'bulb-on'
             let img = ''

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

@@ -49,17 +49,17 @@
           </ion-col>
           <ion-col sizeXl="3" sizeLg="3" sizeMd="3" sizeSm="12" sizeXs="12" class="ion-align-self-center">
             <!-- no localPkg -->
-            <ion-button *ngIf="!localPkg; else localPkg2" expand="block" (click)="install()">
+            <ion-button *ngIf="!localPkg; else localPkg2" expand="block" (click)="tryInstall()">
               Install
             </ion-button>
             <!-- localPkg -->
             <ng-template #localPkg2>
               <!-- not installing, updating, or removing -->
               <ng-container *ngIf="localPkg.state === PackageState.Installed">
-                <ion-button *ngIf="(localPkg.manifest.version | compareEmver : pkg.manifest.version) === -1" expand="block" (click)="update('update')">
+                <ion-button *ngIf="(localPkg.manifest.version | compareEmver : pkg.manifest.version) === -1" expand="block" (click)="presentModal('update')">
                   Update
                 </ion-button>
-                <ion-button *ngIf="(localPkg.manifest.version | compareEmver : pkg.manifest.version) === 1" expand="block" color="warning" (click)="update('downgrade')">
+                <ion-button *ngIf="(localPkg.manifest.version | compareEmver : pkg.manifest.version) === 1" expand="block" color="warning" (click)="presentModal('downgrade')">
                   Downgrade
                 </ion-button>
               </ng-container>

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

@@ -1,6 +1,6 @@
 import { Component, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { AlertController, IonContent, ModalController, NavController } from '@ionic/angular'
+import { AlertController, IonContent, LoadingController, ModalController, NavController } from '@ionic/angular'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { Emver } from 'src/app/services/emver.service'
@@ -12,6 +12,7 @@ import { PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-m
 import { MarketplaceService } from '../marketplace.service'
 import { Subscription } from 'rxjs'
 import { MarkdownPage } from 'src/app/modals/markdown/markdown.page'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
 
 @Component({
   selector: 'marketplace-show',
@@ -33,11 +34,13 @@ export class MarketplaceShowPage {
     private readonly route: ActivatedRoute,
     private readonly alertCtrl: AlertController,
     private readonly modalCtrl: ModalController,
+    private readonly loadingCtrl: LoadingController,
     private readonly errToast: ErrorToastService,
     private readonly wizardBaker: WizardBaker,
     private readonly navCtrl: NavController,
     private readonly emver: Emver,
     private readonly patch: PatchDbService,
+    private readonly embassyApi: ApiService,
     public readonly marketplaceService: MarketplaceService,
   ) { }
 
@@ -121,21 +124,34 @@ export class MarketplaceShowPage {
     await modal.present()
   }
 
-  async install () {
+  async tryInstall () {
     const { id, title, version, alerts } = this.marketplaceService.pkgs[this.pkgId].manifest
-    const { cancelled } = await wizardModal(
-      this.modalCtrl,
-      this.wizardBaker.install({
-        id,
-        title,
-        version,
-        installAlert: alerts.install,
-      }),
-    )
-    if (cancelled) return
+
+    if (!alerts.install) {
+      await this.install(id, version)
+    } else {
+      const alert = await this.alertCtrl.create({
+        header: title,
+        subHeader: version,
+        message: alerts.install,
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+          },
+          {
+            text: 'Install',
+            handler: () => {
+              this.install(id, version)
+            },
+          },
+        ],
+      })
+      await alert.present()
+    }
   }
 
-  async update (action: 'update' | 'downgrade') {
+  async presentModal (action: 'update' | 'downgrade') {
     const { id, title, version, dependencies, alerts } = this.marketplaceService.pkgs[this.pkgId].manifest
     const value = {
       id,
@@ -160,4 +176,21 @@ export class MarketplaceShowPage {
   dismissRec () {
     this.showRec = false
   }
+
+  private async install (id: string, version?: string): Promise<void> {
+    const loader = await this.loadingCtrl.create({
+      spinner: 'lines',
+      message: 'Beginning Installation',
+      cssClass: 'loader',
+    })
+    loader.present()
+
+    try {
+      await this.embassyApi.installPackage({ id, version })
+    } catch (e) {
+      this.errToast.present(e)
+    } finally {
+      loader.dismiss()
+    }
+  }
 }