dont watch patch.data directly in TS (#371)

* dont watch patch.data directly in TS

* installs and uninstalls working

* minor repairs

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

@@ -1,4 +1,4 @@
-import { DockerIoFormat, Manifest, PackageDataEntry, PackageMainStatus, PackageState } from 'src/app/services/patch-db/data-model'
+import { DependencyErrorType, DockerIoFormat, Manifest, PackageDataEntry, PackageMainStatus, PackageState } from 'src/app/services/patch-db/data-model'
 import { MarketplacePkg, Metric, NotificationLevel, RR, ServerNotifications } from './api.types'
 
 export module Mock {
@@ -1347,56 +1347,56 @@ export module Mock {
   //   'install-progress': undefined,
   // }
 
-  // export const lnd: PackageDataEntry = {
-  //   state: PackageState.Installed,
-  //   'static-files': {
-  //     license: 'licenseUrl', // /public/package-data/lnd/0.21.1/LICENSE.md,
-  //     icon: 'assets/img/service-icons/lnd.png',
-  //     instructions: 'instructionsUrl', // /public/package-data/lnd/0.21.1/INSTRUCTIONS.md
-  //   },
-  //   manifest: MockManifestLnd,
-  //   installed: {
-  //     status: {
-  //       configured: true,
-  //       main: {
-  //         status: PackageMainStatus.Stopped,
-  //       },
-  //       'dependency-errors': {
-  //         'bitcoin-proxy': {
-  //           type: DependencyErrorType.NotInstalled,
-  //           title: Mock.MockManifestBitcoinProxy.title,
-  //           icon: 'assets/img/service-icons/bitcoin-proxy.png',
-  //         },
-  //       },
-  //     },
-  //     'interface-info': {
-  //       ip: '10.0.0.1',
-  //       addresses: {
-  //         rpc: {
-  //           'tor-address': 'lnd-rpc-address.onion',
-  //           'lan-address': 'lnd-rpc-address.local',
-  //         },
-  //         grpc: {
-  //           'tor-address': 'lnd-grpc-address.onion',
-  //           'lan-address': 'lnd-grpc-address.local',
-  //         },
-  //       },
-  //     },
-  //     'system-pointers': [],
-  //     'current-dependents': { },
-  //     'current-dependencies': {
-  //       'bitcoind': {
-  //         pointers: [],
-  //         'health-checks': [],
-  //       },
-  //       'bitcoin-proxy': {
-  //         pointers: [],
-  //         'health-checks': [],
-  //       },
-  //     },
-  //   },
-  //   'install-progress': undefined,
-  // }
+  export const lnd: PackageDataEntry = {
+    state: PackageState.Installed,
+    'static-files': {
+      license: 'licenseUrl', // /public/package-data/lnd/0.21.1/LICENSE.md,
+      icon: 'assets/img/service-icons/lnd.png',
+      instructions: 'instructionsUrl', // /public/package-data/lnd/0.21.1/INSTRUCTIONS.md
+    },
+    manifest: MockManifestLnd,
+    installed: {
+      status: {
+        configured: true,
+        main: {
+          status: PackageMainStatus.Stopped,
+        },
+        'dependency-errors': {
+          'bitcoin-proxy': {
+            type: DependencyErrorType.NotInstalled,
+            title: Mock.MockManifestBitcoinProxy.title,
+            icon: 'assets/img/service-icons/bitcoin-proxy.png',
+          },
+        },
+      },
+      'interface-info': {
+        ip: '10.0.0.1',
+        addresses: {
+          rpc: {
+            'tor-address': 'lnd-rpc-address.onion',
+            'lan-address': 'lnd-rpc-address.local',
+          },
+          grpc: {
+            'tor-address': 'lnd-grpc-address.onion',
+            'lan-address': 'lnd-grpc-address.local',
+          },
+        },
+      },
+      'system-pointers': [],
+      'current-dependents': { },
+      'current-dependencies': {
+        'bitcoind': {
+          pointers: [],
+          'health-checks': [],
+        },
+        'bitcoin-proxy': {
+          pointers: [],
+          'health-checks': [],
+        },
+      },
+    },
+    'install-progress': undefined,
+  }
 
   // export const DbDump: RR.GetDumpRes = {
   //   id: 1,

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

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'
 import { pauseFor } from '../../../util/misc.util'
 import { ApiService } from './embassy-api.service'
 import { Operation, PatchOp } from 'patch-db-client'
-import { PackageDataEntry, PackageMainStatus, PackageState, ServerStatus } from 'src/app/services/patch-db/data-model'
+import { DataModel, InstallProgress, PackageDataEntry, PackageMainStatus, PackageState, ServerStatus } from 'src/app/services/patch-db/data-model'
 import { RR, WithRevision } from '../api.types'
 import { parsePropertiesPermissive } from 'src/app/util/properties.util'
 import { Mock } from '../api.fixures'
@@ -325,18 +325,19 @@ export class MockApiService extends ApiService {
 
   async installPackageRaw (params: RR.InstallPackageReq): Promise<RR.InstallPackageRes> {
     await pauseFor(2000)
+    const initialProgress: InstallProgress = {
+      size: 120,
+      downloaded: 0,
+      'download-complete': false,
+      validated: 0,
+      'validation-complete': false,
+      unpacked: 0,
+      'unpack-complete': false,
+    }
     const pkg: PackageDataEntry = {
-      ...Mock.bitcoinproxy,
+      ...Mock[params.id],
       state: PackageState.Installing,
-      'install-progress': {
-        size: 100,
-        downloaded: 10,
-        'download-complete': false,
-        validated: 1,
-        'validation-complete': true,
-        read: 50,
-        'read-complete': false,
-      },
+      'install-progress': initialProgress,
     }
     const patch = [
       {
@@ -345,7 +346,11 @@ export class MockApiService extends ApiService {
         value: pkg,
       },
     ]
-    return this.http.rpcRequest<WithRevision<null>>({ method: 'db.patch', params: { patch } })
+    const res = await this.http.rpcRequest<WithRevision<null>>({ method: 'db.patch', params: { patch } })
+    setTimeout(async () => {
+      this.updateProgress(params.id, initialProgress)
+    }, 1000)
+    return res
   }
 
   async dryUpdatePackage (params: RR.DryUpdatePackageReq): Promise<RR.DryUpdatePackageRes> {
@@ -483,4 +488,45 @@ export class MockApiService extends ApiService {
     await pauseFor(2000)
     return { }
   }
+
+  private async updateProgress (id: string, initialProgress: InstallProgress) {
+    const phases = [
+      { progress: 'downloaded', completion: 'download-complete'},
+      { progress: 'validated', completion: 'validation-complete'},
+      { progress: 'unpacked', completion: 'unpack-complete'},
+    ]
+    for (let phase of phases) {
+      let i = initialProgress[phase.progress]
+      console.log('PHASE', phase)
+      console.log('Initial i', i)
+      while (i < initialProgress.size) {
+        console.log(i)
+        await pauseFor(1000)
+        i = Math.min(i + 40, initialProgress.size)
+        initialProgress[phase.progress] = i
+        if (i === initialProgress.size) {
+          initialProgress[phase.completion] = true
+        }
+        const patch = [
+          {
+            op: PatchOp.REPLACE,
+            path: `/package-data/${id}/install-progress`,
+            value: initialProgress,
+          },
+        ]
+        await this.http.rpcRequest<WithRevision<null>>({ method: 'db.patch', params: { patch } })
+      }
+    }
+
+    setTimeout(() => {
+      const patch = [
+        {
+          op: PatchOp.REPLACE,
+          path: `/package-data/${id}/state`,
+          value: PackageState.Installed,
+        },
+      ]
+      this.http.rpcRequest<WithRevision<null>>({ method: 'db.patch', params: { patch } })
+    }, 1000)
+  }
 }

ui/src/app/services/api/marketplace/marketplace-api.service.ts

@@ -1,14 +1,28 @@
 import { RR } from '../api.types'
 import { ConfigService } from '../../config.service'
 import { PatchDbService } from '../../patch-db/patch-db.service'
+import { ServerInfo } from '../../patch-db/data-model'
+import { AuthState } from '../../auth.service'
+import { takeWhile } from 'rxjs/operators'
 
 export abstract class MarketplaceApiService {
+  private server: ServerInfo
 
   constructor (
     readonly config: ConfigService,
     readonly patch: PatchDbService,
   ) { }
 
+  init (auth: AuthState) {
+    this.patch.watch$('server-info')
+    .pipe(
+      takeWhile(() => auth === AuthState.VERIFIED),
+    )
+    .subscribe(server => {
+      this.server = server
+    })
+  }
+
   abstract getEos (params: RR.GetMarketplaceEOSReq): Promise<RR.GetMarketplaceEOSRes>
 
   abstract getMarketplaceData (params: RR.GetMarketplaceDataReq): Promise<RR.GetMarketplaceDataRes>
@@ -20,11 +34,11 @@ export abstract class MarketplaceApiService {
   abstract getLatestVersion (params: RR.GetLatestVersionReq): Promise<RR.GetLatestVersionRes>
 
   getMarketplaceURL (type: 'eos' | 'package', defaultToTor = false): string {
-    const packageMarketplace = this.patch.data['server-info']['package-marketplace']
+    const packageMarketplace = this.server['package-marketplace']
     if (defaultToTor && !packageMarketplace) {
       return this.config.start9Marketplace.tor
     }
-    const eosMarketplace = this.patch.data['server-info']['eos-marketplace'] || this.config.start9Marketplace.clearnet
+    const eosMarketplace = this.server['eos-marketplace'] || this.config.start9Marketplace.clearnet
     if (type === 'eos') {
       return eosMarketplace
     } else {

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

@@ -17,7 +17,7 @@ export class AuthService {
   private readonly authState$: BehaviorSubject<AuthState> = new BehaviorSubject(AuthState.INITIALIZING)
 
   constructor (
-    private readonly api: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly storage: Storage,
   ) { }
 
@@ -31,7 +31,7 @@ export class AuthService {
   }
 
   async login (password: string): Promise<void> {
-    await this.api.login({ password })
+    await this.embassyApi.login({ password })
     await this.storage.set(this.LOGGED_IN_KEY, true)
     this.authState$.next(AuthState.VERIFIED)
   }

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

@@ -101,13 +101,6 @@ export function hasUi (interfaces: { [id: string]: InterfaceDef }): boolean {
   return hasTorUi(interfaces) || hasLanUi(interfaces)
 }
 
-export function getManifest (pkg: PackageDataEntry): Manifest {
-  if (pkg.state === PackageState.Installed) {
-    return pkg.manifest
-  }
-  return pkg['temp-manifest']
-}
-
 function removeProtocol (str: string): string {
   if (str.startsWith('http://')) return str.slice(7)
   if (str.startsWith('https://')) return str.slice(8)

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

@@ -2,8 +2,9 @@ import { Injectable } from '@angular/core'
 import { BehaviorSubject, combineLatest, fromEvent, merge, Subscription } from 'rxjs'
 import { ConnectionStatus, PatchDbService } from './patch-db/patch-db.service'
 import { HttpService, Method } from './http.service'
-import { distinctUntilChanged } from 'rxjs/operators'
+import { distinctUntilChanged, takeWhile } from 'rxjs/operators'
 import { ConfigService } from './config.service'
+import { AuthState } from './auth.service'
 
 @Injectable({
   providedIn: 'root',
@@ -23,16 +24,35 @@ export class ConnectionService {
     return this.connectionFailure$.asObservable()
   }
 
-  start () {
+  start (auth: AuthState) {
     this.subs = [
       merge(fromEvent(window, 'online'), fromEvent(window, 'offline'))
+      .pipe(
+        takeWhile(() => auth === AuthState.VERIFIED),
+      )
       .subscribe(event => {
         this.networkState$.next(event.type === 'online')
       }),
 
-      combineLatest([this.networkState$.pipe(distinctUntilChanged()), this.patch.watchConnection$().pipe(distinctUntilChanged())])
-      .subscribe(async ([network, connectionStatus]) => {
-        const addrs = this.patch.data['server-info']['connection-addresses']
+      combineLatest([
+        // 1
+        this.networkState$
+        .pipe(
+          distinctUntilChanged(),
+        ),
+        // 2
+        this.patch.watchConnection$()
+        .pipe(
+          distinctUntilChanged(),
+        ),
+        // 3
+        this.patch.watch$('server-info', 'connection-addresses')
+        .pipe(
+          takeWhile(() => auth === AuthState.VERIFIED),
+          distinctUntilChanged(),
+        ),
+      ])
+      .subscribe(async ([network, connectionStatus, addrs]) => {
         if (connectionStatus !== ConnectionStatus.Disconnected) {
           this.connectionFailure$.next(ConnectionFailure.None)
         } else if (!network) {
@@ -61,13 +81,6 @@ export class ConnectionService {
     ]
   }
 
-  stop () {
-    this.subs.forEach(sub => {
-      sub.unsubscribe()
-    })
-    this.subs = []
-  }
-
   private async testAddrs (addrs: string[]): Promise<boolean> {
     if (!addrs.length) return true
 

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

@@ -70,6 +70,12 @@ export class HttpService {
       this.fullUrl + httpOpts.url :
       httpOpts.url
 
+    Object.keys(httpOpts.params).forEach(key => {
+      if (httpOpts.params[key] === undefined) {
+        delete httpOpts.params[key]
+      }
+    })
+
     return {
       observe: 'events',
       responseType: 'json',

ui/src/app/services/patch-db/data-model.ts

@@ -62,8 +62,8 @@ export interface InstallProgress {
   'download-complete': boolean
   validated: number
   'validation-complete': boolean
-  read: number
-  'read-complete': boolean
+  unpacked: number
+  'unpack-complete': boolean
 }
 
 export interface InstalledPackageDataEntry {

ui/src/app/services/patch-db/patch-db.factory.ts

@@ -8,7 +8,7 @@ import { ApiService } from 'src/app/services/api/embassy/embassy-api.service'
 export function PatchDbServiceFactory (
   config: ConfigService,
   bootstrapper: LocalStorageBootstrap,
-  apiService: ApiService,
+  embassyApi: ApiService,
 ): PatchDbService {
 
   const { mocks, patchDb: { poll }, isConsulate } = config
@@ -17,13 +17,13 @@ export function PatchDbServiceFactory (
 
   if (mocks.enabled) {
     if (mocks.connection === 'poll') {
-      source = new PollSource({ ...poll }, apiService)
+      source = new PollSource({ ...poll }, embassyApi)
     } else {
       source = new WebsocketSource(`ws://localhost:${config.mocks.wsPort}/db`)
     }
   } else {
     if (isConsulate) {
-      source = new PollSource({ ...poll }, apiService)
+      source = new PollSource({ ...poll }, embassyApi)
     } else {
       const protocol = window.location.protocol === 'http:' ? 'ws' : 'wss'
       const host = window.location.host
@@ -31,5 +31,5 @@ export function PatchDbServiceFactory (
     }
   }
 
-  return new PatchDbService(source, apiService, bootstrapper)
+  return new PatchDbService(source, embassyApi, bootstrapper)
 }

ui/src/app/services/patch-db/patch-db.service.ts

@@ -20,10 +20,11 @@ export enum ConnectionStatus {
 })
 export class PatchDbService {
   connectionStatus$ = new BehaviorSubject(ConnectionStatus.Initializing)
-  data: DataModel
   private patchDb: PatchDB<DataModel>
   private patchSub: Subscription
 
+  get data () { return this.patchDb.store.cache.data }
+
   constructor (
     @Inject(PATCH_SOURCE) private readonly source: Source<DataModel>,
     @Inject(PATCH_HTTP) private readonly http: ApiService,
@@ -33,7 +34,6 @@ export class PatchDbService {
   async init (): Promise<void> {
     const cache = await this.bootstrapper.init()
     this.patchDb = new PatchDB([this.source, this.http], this.http, cache)
-    this.data = this.patchDb.store.cache.data
   }
 
   start (): void {
@@ -44,7 +44,7 @@ export class PatchDbService {
       .pipe(debounceTime(500))
       .subscribe({
         next: cache => {
-          console.log('saving cacheee: ', cache)
+          console.log('saving cacheee: ', JSON.parse(JSON.stringify(cache)))
           this.connectionStatus$.next(ConnectionStatus.Connected)
           this.bootstrapper.update(cache)
         },
@@ -82,8 +82,9 @@ export class PatchDbService {
 
   watch$: Store<DataModel>['watch$'] = (...args: (string | number)[]): Observable<DataModel> => {
     console.log('WATCHING', ...args)
-    return this.patchDb.store.watch$(...(args as [])).pipe(
-      tap(cache => console.log('CHANGE IN STORE', cache)),
+    return this.patchDb.store.watch$(...(args as []))
+    .pipe(
+      tap(data => console.log('CHANGE IN STORE', data, ...args)),
       catchError(e => {
         console.error(e)
         return of(e.message)

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

@@ -13,7 +13,7 @@ export class ServerConfigService {
 
   constructor (
     private readonly trackingModalCtrl: TrackingModalController,
-    private readonly apiService: ApiService,
+    private readonly embassyApi: ApiService,
     private readonly sshService: SSHService,
   ) { }
 
@@ -35,19 +35,19 @@ export class ServerConfigService {
 
   saveFns: { [key: string]: (val: any) => Promise<any> } = {
     autoCheckUpdates: async (value: boolean) => {
-      return this.apiService.setDbValue({ pointer: 'ui/auto-check-updates', value })
+      return this.embassyApi.setDbValue({ pointer: 'ui/auto-check-updates', value })
     },
     ssh: async (pubkey: string) => {
       return this.sshService.add(pubkey)
     },
     eosMarketplace: async (enabled: boolean) => {
-      return this.apiService.setEosMarketplace(enabled)
+      return this.embassyApi.setEosMarketplace(enabled)
     },
     // packageMarketplace: async (url: string) => {
-    //   return this.apiService.setPackageMarketplace({ url })
+    //   return this.embassyApi.setPackageMarketplace({ url })
     // },
     // password: async (password: string) => {
-    //   return this.apiService.updatePassword({ password })
+    //   return this.embassyApi.updatePassword({ password })
     // },
   }
 }

ui/src/app/services/startup-alerts.service.ts

@@ -5,17 +5,21 @@ import { WizardBaker } from '../components/install-wizard/prebaked-wizards'
 import { OSWelcomePage } from '../modals/os-welcome/os-welcome.page'
 import { displayEmver } from '../pipes/emver.pipe'
 import { RR } from './api/api.types'
-import { PatchDbService } from './patch-db/patch-db.service'
 import { ConfigService } from './config.service'
 import { Emver } from './emver.service'
 import { MarketplaceService } from '../pages/marketplace-routes/marketplace.service'
 import { MarketplaceApiService } from './api/marketplace/marketplace-api.service'
+import { DataModel, PackageDataEntry } from './patch-db/data-model'
+import { PatchDbService } from './patch-db/patch-db.service'
+import { filter, take } from 'rxjs/operators'
+import { isEmptyObject } from '../util/misc.util'
 
 @Injectable({
   providedIn: 'root',
 })
 export class StartupAlertsService {
   private checks: Check<any>[]
+  data: DataModel
 
   constructor (
     private readonly alertCtrl: AlertController,
@@ -57,7 +61,14 @@ export class StartupAlertsService {
   // Each promise fires more or less concurrently, so each c.check(server) is run concurrently
   // Then, since we await previousDisplay before c.display(res), each promise executing gets hung awaiting the display of the previous run
   async runChecks (): Promise<void> {
-    await this.checks
+    this.patch.watch$()
+    .pipe(
+      filter(data => !isEmptyObject(data)),
+      take(1),
+    )
+    .subscribe(async data => {
+      this.data = data
+      await this.checks
       .filter(c => !c.hasRun && c.shouldRun())
       // returning true in the below block means to continue to next modal
       // returning false means to skip all subsequent modals
@@ -76,18 +87,19 @@ export class StartupAlertsService {
         if (!checkRes) return true
         if (displayRes) return c.display(checkRes)
       }, Promise.resolve(true))
+    })
   }
 
   private shouldRunOsWelcome (): boolean {
-    return this.patch.data.ui['welcome-ack'] !== this.config.version
+    return this.data.ui['welcome-ack'] !== this.config.version
   }
 
   private shouldRunOsUpdateCheck (): boolean {
-    return this.patch.data.ui['auto-check-updates']
+    return this.data.ui['auto-check-updates']
   }
 
   private shouldRunAppsCheck (): boolean {
-    return this.patch.data.ui['auto-check-updates']
+    return this.data.ui['auto-check-updates']
   }
 
   private async osUpdateCheck (): Promise<RR.GetMarketplaceEOSRes | undefined> {
@@ -101,8 +113,8 @@ export class StartupAlertsService {
   }
 
   private async appsCheck (): Promise<boolean> {
-    const updates = await this.marketplaceService.getUpdates(this.patch.data['package-data'])
-    return !!updates.length
+    await this.marketplaceService.getUpdates(this.data['package-data'])
+    return !!this.marketplaceService.updates.length
   }
 
   private async displayOsWelcome (): Promise<boolean> {