From c5585f7f35261f4305126c0a1a681bca4cfbe347 Mon Sep 17 00:00:00 2001 From: Matt Hill Date: Wed, 8 Sep 2021 21:51:01 -0600 Subject: [PATCH] fix ui address bug and streamline install flow --- .../install-wizard/prebaked-wizards.ts | 44 -------------- .../modals/generic-form/generic-form.page.ts | 1 - .../app-interfaces/app-interfaces.page.html | 4 +- .../app-interfaces/app-interfaces.page.ts | 14 +++-- .../apps-routes/app-list/app-list.page.ts | 2 - .../marketplace-show.page.html | 6 +- .../marketplace-show/marketplace-show.page.ts | 59 +++++++++++++++---- ui/src/app/pipes/install-state.pipe.ts | 1 - ui/src/app/services/api/api.fixures.ts | 2 +- .../services/api/embassy-mock-api.service.ts | 2 - ui/src/app/services/config.service.ts | 24 ++++++-- ui/src/app/services/http.service.ts | 1 - 12 files changed, 78 insertions(+), 82 deletions(-) diff --git a/ui/src/app/components/install-wizard/prebaked-wizards.ts b/ui/src/app/components/install-wizard/prebaked-wizards.ts index 5fe57fddd..d961c2400 100644 --- 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 diff --git a/ui/src/app/modals/generic-form/generic-form.page.ts b/ui/src/app/modals/generic-form/generic-form.page.ts index dc38d028a..001e534a9 100644 --- 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 { diff --git 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 index 8c76776ef..fcefea4c8 100644 --- 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 @@ - Web User Interface + User Interface - Other Interfaces + Machine Interfaces
diff --git 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 index 21411da2a..3b0d824e5 100644 --- 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 { diff --git 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 index 7cfc90c96..45803a141 100644 --- 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 = '' diff --git 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 index e53111275..3581606e2 100644 --- 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 @@ - + Install - + Update - + Downgrade diff --git 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 index 8247a1e01..b5ad813c3 100644 --- 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 { + 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() + } + } } diff --git a/ui/src/app/pipes/install-state.pipe.ts b/ui/src/app/pipes/install-state.pipe.ts index ca8fd9925..bddc54231 100644 --- 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 diff --git a/ui/src/app/services/api/api.fixures.ts b/ui/src/app/services/api/api.fixures.ts index 2bdce56fb..b0cfff34c 100644 --- 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': { }, }, diff --git a/ui/src/app/services/api/embassy-mock-api.service.ts b/ui/src/app/services/api/embassy-mock-api.service.ts index 8a655e68f..04b788a0b 100644 --- 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 diff --git a/ui/src/app/services/config.service.ts b/ui/src/app/services/config.service.ts index 4f2f9ccd9..8c3f5727b 100644 --- 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) +} diff --git a/ui/src/app/services/http.service.ts b/ui/src/app/services/http.service.ts index 947ba05b0..3727c5c9f 100644 --- 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()