fix ui address bug and streamline install flow

2026-03-26 10:21:52 +00:00 · 2021-09-08 21:51:01 -06:00
parent 45d945db2e
commit c5585f7f35
12 changed files with 78 additions and 82 deletions
--- a/ui/src/app/components/install-wizard/prebaked-wizards.ts
+++ b/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
--- a/ui/src/app/modals/generic-form/generic-form.page.ts
+++ b/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> {
--- a/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.html
+++ b/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>
--- a/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
+++ b/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 {
--- a/ui/src/app/pages/apps-routes/app-list/app-list.page.ts
+++ b/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 = ''
--- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
+++ b/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>
--- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts
+++ b/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()
+    }
+  }
 }
--- a/ui/src/app/pipes/install-state.pipe.ts
+++ b/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
--- a/ui/src/app/services/api/api.fixures.ts
+++ b/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': { },
        },
--- a/ui/src/app/services/api/embassy-mock-api.service.ts
+++ b/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
--- a/ui/src/app/services/config.service.ts
+++ b/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)
+}
--- a/ui/src/app/services/http.service.ts
+++ b/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()