fix ui address bug and streamline install flow

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

@@ -11,50 +11,6 @@ export class WizardBaker {
     private readonly embassyApi: ApiService,
   ) { }
 
-  install (values: {
-    id: string
-    title: string
-    version: string
-    installAlert?: string
-  }): InstallWizardComponent['params'] {
-    const { id, title, version, installAlert } = values
-
-    const action = 'install'
-    const toolbar: TopbarParams = { action, title, version }
-
-    const slideDefinitions: SlideDefinition[] = [
-      installAlert ? {
-        slide: {
-          selector: 'alert',
-          params: {
-            title: 'Warning',
-            message: installAlert,
-            titleColor: 'warning',
-          },
-        },
-        bottomBar: {
-          cancel: { afterLoading: { text: 'Cancel' } }, next: 'Next',
-        },
-      } : undefined,
-      {
-        slide: {
-          selector: 'complete',
-          params: {
-            action,
-            verb: 'beginning installation for',
-            title,
-            executeAction: () => this.embassyApi.installPackage({ id, version }),
-          },
-        },
-        bottomBar: {
-          cancel: { whileLoading: {  } },
-          finish: 'Dismiss',
-        },
-      },
-    ]
-    return { toolbar, slideDefinitions: slideDefinitions.filter(exists) }
-  }
-
   update (values: {
     id: string
     title: string

ui/src/app/modals/generic-form/generic-form.page.ts

@@ -33,7 +33,6 @@ export class GenericFormPage {
       text: '',
       handler: () => Promise.resolve(true),
     }
-    console.log(this.submitBtn)
   }
 
   async dismiss (): Promise<void> {

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 uiKey = getUiInterfaceKey(interfaces)
-    const ui = interfaces['ui']
 
-    if (ui) {
+    const addressesMap = pkg.installed['interface-addresses']
-      const uiAddresses = addressesMap['ui']
+
+    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,
+    if (!alerts.install) {
-      this.wizardBaker.install({
+      await this.install(id, version)
-        id,
+    } else {
-        title,
+      const alert = await this.alertCtrl.create({
-        version,
+        header: title,
-        installAlert: alerts.install,
+        subHeader: version,
-      }),
+        message: alerts.install,
-    )
+        buttons: [
-    if (cancelled) return
+          {
+            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()
+    }
+  }
 }

ui/src/app/pipes/install-state.pipe.ts

@@ -7,7 +7,6 @@ import { InstallProgress } from '../services/patch-db/data-model'
 export class InstallState implements PipeTransform {
 
   transform (loadData: InstallProgress): ProgressData {
-    console.log('LOAD DATA', loadData)
     let { downloaded, validated, unpacked, size, 'download-complete': downloadComplete, 'validation-complete': validationComplete, 'unpack-complete': unpackComplete } = loadData
     downloaded = downloadComplete ? size : downloaded
     validated = validationComplete ? size : validated

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

@@ -366,7 +366,7 @@ export module Mock {
       rpc: {
         name: 'RPC interface',
         description: 'Good for connecting to your node at a distance.',
-        ui: true,
+        ui: false,
         'tor-config': {
           'port-mapping': { },
         },

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

@@ -77,7 +77,6 @@ export class MockApiService extends ApiService {
     await pauseFor(2000)
     let entries
     if (Math.random() < .2) {
-      console.log('last page')
       entries = Mock.ServerLogs
     } else {
       const arrLength = params.limit ? Math.ceil(params.limit / Mock.ServerLogs.length) : 10
@@ -324,7 +323,6 @@ export class MockApiService extends ApiService {
     await pauseFor(2000)
     let entries
     if (Math.random() < .2) {
-      console.log('last page')
       entries =  Mock.PackageLogs
     } else {
       const arrLength = params.limit ? Math.ceil(params.limit / Mock.PackageLogs.length) : 10

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

@@ -67,31 +67,43 @@ export class ConfigService {
 }
 
 export function hasTorUi (interfaces: { [id: string]: InterfaceDef }): boolean {
-  return !!Object.values(interfaces).find(i => i.ui && i['tor-config'])
+  const int = getUiInterfaceValue(interfaces)
+  return !!int?.['tor-config']
 }
 
 export function hasLanUi (interfaces: { [id: string]: InterfaceDef }): boolean {
-  return !!Object.values(interfaces).find(i => i.ui && i['lan-config'])
+  const int = getUiInterfaceValue(interfaces)
+  return !!int?.['lan-config']
 }
 
 export function torUiAddress (pkg: PackageDataEntry): string {
-  return pkg.installed?.['interface-addresses']?.ui?.['tor-address']
+  const key = getUiInterfaceKey(pkg.manifest.interfaces)
+  return pkg.installed['interface-addresses'][key]['tor-address']
 }
 
 export function lanUiAddress (pkg: PackageDataEntry): string {
-  return pkg.installed?.['interface-addresses']?.ui?.['lan-address']
+  const key = getUiInterfaceKey(pkg.manifest.interfaces)
+  return pkg.installed['interface-addresses'][key]['lan-address']
 }
 
 export function hasUi (interfaces: { [id: string]: InterfaceDef }): boolean {
   return hasTorUi(interfaces) || hasLanUi(interfaces)
 }
 
-function removeProtocol (str: string): string {
+export function removeProtocol (str: string): string {
   if (str.startsWith('http://')) return str.slice(7)
   if (str.startsWith('https://')) return str.slice(8)
   return str
 }
 
-function removePort (str: string): string {
+export function removePort (str: string): string {
   return str.split(':')[0]
 }
+
+export function getUiInterfaceKey (interfaces: { [id: string]: InterfaceDef }): string {
+  return Object.keys(interfaces).find(key => interfaces[key].ui)
+}
+
+export function getUiInterfaceValue (interfaces: { [id: string]: InterfaceDef }): InterfaceDef {
+  return Object.values(interfaces).find(i => i.ui)
+}

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

@@ -79,7 +79,6 @@ export class HttpService {
       case Method.PATCH:  req = this.http.patch(url, httpOpts.body, options) as any; break
       case Method.DELETE: req = this.http.delete(url, options) as any; break
     }
-    console.log('REQUEST', options)
 
     return (httpOpts.timeout ? withTimeout(req, httpOpts.timeout) : req)
       .toPromise()