Progress bar (#377)

* looking for unnecessary watches

* on init data initialization

* prog pipe

* install progress everywhere

* titlecase status

* include updateing state in app show for install progress

Co-authored-by: Drew Ansbacher <drew.ansbacher@spiredigital.com>
Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>

ui/src/app/guards/maintenance.guard.ts

@@ -22,7 +22,7 @@ export class MaintenanceGuard implements CanActivate, CanActivateChild {
   }
 
   private runServerStatusCheck (): boolean {
-    if ([ServerStatus.Updating, ServerStatus.BackingUp].includes(this.patch.data['server-info']?.status)) {
+    if ([ServerStatus.Updating, ServerStatus.BackingUp].includes(this.patch.getData()['server-info']?.status)) {
       this.router.navigate(['/maintenance'], { replaceUrl: true })
       return false
     } else {

ui/src/app/guards/unmaintenance.guard.ts

@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core'
 import { CanActivate, Router } from '@angular/router'
-import { tap } from 'rxjs/operators'
 import { ServerStatus } from '../services/patch-db/data-model'
 import { PatchDbService } from '../services/patch-db/patch-db.service'
 

ui/src/app/modules/sharing.module.ts

@@ -9,6 +9,7 @@ import { MaskPipe } from '../pipes/mask.pipe'
 import { HasUiPipe, LaunchablePipe } from '../pipes/ui.pipe'
 import { EmptyPipe } from '../pipes/empty.pipe'
 import { NotificationColorPipe } from '../pipes/notification-color.pipe'
+import { InstallState } from '../pipes/install-state.pipe'
 
 @NgModule({
     declarations: [
@@ -16,6 +17,7 @@ import { NotificationColorPipe } from '../pipes/notification-color.pipe'
         EmverSatisfiesPipe,
         TypeofPipe,
         IncludesPipe,
+        InstallState,
         MarkdownPipe,
         AnnotationStatusPipe,
         TruncateCenterPipe,
@@ -40,6 +42,7 @@ import { NotificationColorPipe } from '../pipes/notification-color.pipe'
         MaskPipe,
         EmverDisplayPipe,
         HasUiPipe,
+        InstallState,
         LaunchablePipe,
         EmptyPipe,
         NotificationColorPipe,

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

@@ -26,7 +26,7 @@ export class AppInstructionsPage {
   async ngOnInit () {
     const pkgId = this.route.snapshot.paramMap.get('pkgId')
 
-    const url = this.patch.data['package-data'][pkgId]['static-files'].instructions
+    const url = this.patch.getData()['package-data'][pkgId]['static-files'].instructions
 
     try {
       this.instructions = await this.embassyApi.getStatic(url)

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

@@ -36,7 +36,8 @@
             <img *ngIf="!connectionFailure" [class]="pkg.value.bulb.class" [src]="pkg.value.bulb.img" />
 
             <ion-card-header>
-              <status [rendering]="pkg.value.statusRendering" size="calc(8px + .4vw)" weight="bold"></status>
+              <status *ngIf="[PackageState.Installed, PackageState.Removing] | includes : pkg.value.entry.state" [rendering]="pkg.value.statusRendering" size="calc(8px + .4vw)" weight="bold"></status>
+              <p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : pkg.value.entry.state" class="installing-status"><ion-text color="primary">{{ pkg.value.entry.state | titlecase }}...{{ (pkg.value.entry['install-progress'] | installState).totalProgress }}%</ion-text></p>
               <ion-card-title>{{ pkg.value.entry.manifest.title }}</ion-card-title>
             </ion-card-header>
           </ion-card>

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

@@ -78,3 +78,9 @@
   position: absolute;
   right: 0px;
 }
+
+.installing-status {
+  font-size: calc(8px + .4vw);
+  font-weight: bold;
+  margin: 0;
+}

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

@@ -2,10 +2,10 @@ import { Component } from '@angular/core'
 import { ConfigService } from 'src/app/services/config.service'
 import { ConnectionFailure, ConnectionService } from 'src/app/services/connection.service'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
-import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
+import { PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
 import { Subscription } from 'rxjs'
 import { PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
-import { distinctUntilChanged, filter } from 'rxjs/operators'
+import { filter } from 'rxjs/operators'
 
 @Component({
   selector: 'app-list',
@@ -24,6 +24,7 @@ export class AppListPage {
     statusRendering: PkgStatusRendering | null
     sub: Subscription | null
   }} = { }
+  PackageState = PackageState
 
   constructor (
     private readonly config: ConfigService,
@@ -41,7 +42,6 @@ export class AppListPage {
       )
       .subscribe(pkgs => {
         const ids = Object.keys(pkgs)
-        console.log('PKGSPKGS', ids)
 
         Object.keys(this.pkgs).forEach(id => {
           if (!ids.includes(id)) {

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

@@ -25,7 +25,7 @@
           <h5>{{ pkg.manifest.version | displayEmver }}</h5>
         </ion-label>
       </ion-item>
-
+      
       <div class="status-readout">
         <status size="large" weight="500" [rendering]="rendering"></status>
         <ion-button *ngIf="rendering.feStatus === FeStatus.NeedsConfig" expand="block" [routerLink]="['config']">
@@ -41,13 +41,36 @@
           Start
         </ion-button>
       </div>
-  
+
-      <ion-button size="small" *ngIf="pkg | hasUi" [disabled]="!(pkg | isLaunchable)" class="launch-button" expand="block" (click)="launchUiTab()">
+      <ng-container *ngIf="pkg.state === PackageState.Installed">
-        Launch Web Interface
+        <ion-button size="small" *ngIf="(pkg | hasUi)" [disabled]="!(pkg | isLaunchable)" class="launch-button" expand="block" (click)="launchUiTab()">
-        <ion-icon slot="end" name="rocket-outline"></ion-icon>
+          Launch Web Interface
-      </ion-button>
+          <ion-icon slot="end" name="rocket-outline"></ion-icon>
+        </ion-button>
+      </ng-container>
     </div>
 
+    <div *ngIf="[PackageState.Installing, PackageState.Updating] | includes : pkg.state" style="padding: 16px;">
+      <p>Downloading: {{ (pkg['install-progress'] | installState).downloadProgress }}%</p>
+      <ion-progress-bar 
+        [color]="pkg['install-progress']['download-complete'] ? 'success' : 'secondary'" 
+        [value]="(pkg['install-progress'] | installState).downloadProgress / 100"
+      ></ion-progress-bar>
+
+      <p>Validating: {{ (pkg['install-progress'] | installState).validateProgress }}%</p>
+      <ion-progress-bar
+        [color]="pkg['install-progress']['validation-complete'] ? 'success' : 'secondary'" 
+        [value]="(pkg['install-progress'] | installState).validateProgress / 100"
+      ></ion-progress-bar>
+
+      <p>Installing: {{ (pkg['install-progress'] | installState).unpackProgress }}%</p>
+      <ion-progress-bar 
+        [color]="pkg['install-progress']['unpack-complete'] ? 'success' : 'secondary'" 
+        [value]="(pkg['install-progress'] | installState).unpackProgress / 100"
+      ></ion-progress-bar>
+    </div>
+
+
     <ng-container *ngIf="!([FeStatus.Installing, FeStatus.Updating, FeStatus.Removing] | includes : rendering.feStatus)">
       <ion-grid class="ion-text-center" style="margin: 0 6px;">
         <ion-row>

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

@@ -28,6 +28,7 @@ export class AppShowPage {
   PackageState = PackageState
   DependencyErrorType = DependencyErrorType
   rendering: PkgStatusRendering
+  Math = Math
 
   @ViewChild(IonContent) content: IonContent
   subs: Subscription[] = []

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

@@ -58,17 +58,12 @@
                     <ion-text *ngIf="(pkg.manifest.version | compareEmver : localPkg.manifest.version) === 0" color="success">Installed</ion-text>
                     <ion-text *ngIf="(pkg.manifest.version | compareEmver : localPkg.manifest.version) === 1" color="warning">Update Available</ion-text>
                   </p>
-                  <p *ngIf="localPkg.state === PackageState.Installing" style="display: flex; flex-direction: row; align-items: center;">
+                  <p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : localPkg.state">
-                    <ion-text color="primary">Installing</ion-text>
+                    <ion-text color="primary">{{ localPkg.state | titlecase }}...{{ (localPkg['install-progress'] | installState).totalProgress }}%</ion-text>
-                    <ion-spinner name="crescent" style="height: 10px; width: 15px; margin-left: 3px; margin-right: -4px;" color="primary"></ion-spinner>
                   </p>
-                  <p *ngIf="localPkg.state === PackageState.Updating" style="display: flex; flex-direction: row; align-items: center;">
+                  <p *ngIf="localPkg.state === PackageState.Removing">
-                    <ion-text color="primary">Updating</ion-text>
+                    <ion-text color="warning">{{ localPkg.state | Removing }}</ion-text>
-                    <ion-spinner name="crescent" style="height: 10px; width: 15px; margin-left: 3px; margin-right: -4px;" color="primary"></ion-spinner>
+                    <ion-spinner name="dots" color="warning"></ion-spinner>
-                  </p>
-                  <p *ngIf="localPkg.state === PackageState.Removing" style="display: flex; flex-direction: row; align-items: center;">
-                    <ion-text color="danger">Removing</ion-text>
-                    <ion-spinner name="crescent" style="height: 10px; width: 15px; margin-left: 3px; margin-right: -4px;" color="danger"></ion-spinner>
                   </p>
                 </ng-container>
               </ion-label>

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

@@ -25,41 +25,43 @@
                 <h1 class="header-title">{{ pkg.manifest.title }}</h1>
                 <p class="header-version">{{ pkg.manifest.version | displayEmver }}</p>
                 <div class="header-status">
-                  <!-- no installedPkg -->
+                  <!-- no localPkg -->
-                  <p *ngIf="!installedPkg; else local">
+                  <p *ngIf="!localPkg; else local">
                     <ion-text color="medium">Not Installed</ion-text>
                   </p>
-                  <!-- installedPkg -->
+                  <!-- localPkg -->
                   <ng-template #local>
-                    <p *ngIf="installedPkg.state !== PackageState.Installed; else installed">
-                      <!-- installing, updating, removing -->
-                      <ion-text [color]="installedPkg.state === PackageState.Removing ? 'danger' : 'primary'">{{ installedPkg.state }}</ion-text>
-                      <ion-spinner class="dots dots-medium" name="dots" [color]="installedPkg.state === PackageState.Removing ? 'danger' : 'primary'"></ion-spinner>
-                    </p>
                     <!-- installed -->
-                    <ng-template #installed>
+                    <p *ngIf="localPkg.state === PackageState.Installed">
-                      <p>
+                      <ion-text color="medium">Installed at {{ localPkg.manifest.version | displayEmver }}</ion-text>
-                        <ion-text color="medium">Installed at {{ installedPkg.manifest.version | displayEmver }}</ion-text>
+                    </p>
-                      </p>
+                    <!-- installing, updating -->
-                    </ng-template>
+                    <p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : localPkg.state">
+                      <ion-text color="primary">{{ localPkg.state | titlecase }}...{{ (localPkg['install-progress'] | installState).totalProgress }}%</ion-text>
+                    </p>
+                    <!-- removing -->
+                    <p *ngIf="localPkg.state === PackageState.Removing">
+                      <ion-text color="warning">{{ localPkg.state | titlecase }}</ion-text>
+                      <ion-spinner name="dots" color="warning"></ion-spinner>
+                    </p>
                   </ng-template>
                 </div>
               </div>
             </div>
           </ion-col>
           <ion-col sizeXl="3" sizeLg="3" sizeMd="3" sizeSm="12" sizeXs="12" class="ion-align-self-center">
-            <!-- no installedPkg -->
+            <!-- no localPkg -->
-            <ion-button *ngIf="!installedPkg; else installedPkg2" class="main-action-button" expand="block" (click)="install()">
+            <ion-button *ngIf="!localPkg; else localPkg2" class="main-action-button" expand="block" (click)="install()">
               Install
             </ion-button>
-            <!-- installedPkg -->
+            <!-- localPkg -->
-            <ng-template #installedPkg2>
+            <ng-template #localPkg2>
               <!-- not installing, updating, or removing -->
-              <ng-container *ngIf="installedPkg.state === PackageState.Installed">
+              <ng-container *ngIf="localPkg.state === PackageState.Installed">
-                <ion-button *ngIf="(installedPkg.manifest.version | compareEmver : pkg.manifest.version) === -1" class="main-action-button" expand="block" (click)="update('update')">
+                <ion-button *ngIf="(localPkg.manifest.version | compareEmver : pkg.manifest.version) === -1" class="main-action-button" expand="block" (click)="update('update')">
                   Update
                 </ion-button>
-                <ion-button *ngIf="(installedPkg.manifest.version | compareEmver : pkg.manifest.version) === 1" class="main-action-button" expand="block" color="warning" (click)="update('downgrade')">
+                <ion-button *ngIf="(localPkg.manifest.version | compareEmver : pkg.manifest.version) === 1" class="main-action-button" expand="block" color="warning" (click)="update('downgrade')">
                   Downgrade
                 </ion-button>
               </ng-container>

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

@@ -21,7 +21,7 @@
     .header-status {
       p {
         margin: 0;
-        font-size: calc(6px + 1vw)
+        font-size: calc(16px + 1vw)
       }
     }
   }

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

@@ -22,7 +22,7 @@ export class MarketplaceShowPage {
   @ViewChild(IonContent) content: IonContent
   loading = true
   pkgId: string
-  installedPkg: PackageDataEntry
+  localPkg: PackageDataEntry
   PackageState = PackageState
   rec: Recommendation | null = null
   showRec = true
@@ -48,7 +48,7 @@ export class MarketplaceShowPage {
     this.subs = [
       this.patch.watch$('package-data', this.pkgId)
       .subscribe(pkg => {
-        this.installedPkg = pkg
+        this.localPkg = pkg
       }),
     ]
 

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

@@ -0,0 +1,39 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import { InstallProgress } from '../services/patch-db/data-model'
+
+@Pipe({
+  name: 'installState',
+})
+export class InstallState implements PipeTransform {
+
+  transform (loadData: InstallProgress): ProgressData {
+    const { downloaded, validated, unpacked, size } = loadData
+
+    const downloadWeight = 1
+    const validateWeight = .2
+    const unpackWeight = .7
+
+    const numerator = Math.floor(
+      downloadWeight * downloaded +
+      validateWeight * validated +
+      unpackWeight * unpacked)
+
+    const denominator = Math.floor(loadData.size * (downloadWeight + validateWeight + unpackWeight))
+
+    return {
+      totalProgress: Math.round(100 * numerator / denominator),
+      downloadProgress: Math.round(100 * downloaded / size),
+      validateProgress: Math.round(100 * validated / size),
+      unpackProgress: Math.round(100 * unpacked / size),
+      isComplete: loadData['download-complete'] && loadData['validation-complete'] && loadData['unpack-complete'],
+    }
+  }
+}
+
+export interface ProgressData {
+  totalProgress: number
+  downloadProgress: number
+  validateProgress: number
+  unpackProgress: number
+  isComplete: boolean
+}

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

@@ -485,12 +485,11 @@ export class MockApiService extends ApiService {
     ]
     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)
+        i = Math.min(i + 5, initialProgress.size)
         initialProgress[phase.progress] = i
         if (i === initialProgress.size) {
           initialProgress[phase.completion] = true

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

@@ -85,7 +85,7 @@ export class MarketplaceMockApiService extends MarketplaceApiService {
     if (this.useLocal(url)) {
       await pauseFor(2000)
       return params.ids.reduce((obj, id) => {
-        obj[id] = this.patch.data['package-data']?.[id]?.manifest.version.replace('0', '1')
+        obj[id] = this.patch.getData()['package-data']?.[id]?.manifest.version.replace('0', '1')
         return obj
       }, { })
     }

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

@@ -22,8 +22,9 @@ export class PatchDbService {
   connectionStatus$ = new BehaviorSubject(ConnectionStatus.Initializing)
   private patchDb: PatchDB<DataModel>
   private patchSub: Subscription
+  data: DataModel
 
-  get data () { return this.patchDb.store.cache.data }
+  getData () { return this.patchDb.store.cache.data }
 
   constructor (
     @Inject(PATCH_SOURCE) private readonly source: Source<DataModel>,
@@ -34,6 +35,7 @@ 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 {