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>
2026-03-30 20:14:49 +00:00 · 2021-07-22 16:14:57 -06:00
parent dc923ea6fb
commit 4c294566d7
17 changed files with 120 additions and 50 deletions
--- a/ui/src/app/guards/maintenance.guard.ts
+++ b/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 {
--- a/ui/src/app/guards/unmaintenance.guard.ts
+++ b/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'

--- a/ui/src/app/modules/sharing.module.ts
+++ b/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,
--- a/ui/src/app/pages/apps-routes/app-instructions/app-instructions.page.ts
+++ b/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)
--- a/ui/src/app/pages/apps-routes/app-list/app-list.page.html
+++ b/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>
--- a/ui/src/app/pages/apps-routes/app-list/app-list.page.scss
+++ b/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;
+}
--- 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
@@ -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)) {
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.html
+++ b/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()">
-        Launch Web Interface
-        <ion-icon slot="end" name="rocket-outline"></ion-icon>
-      </ion-button>
+
+      <ng-container *ngIf="pkg.state === PackageState.Installed">
+        <ion-button size="small" *ngIf="(pkg | hasUi)" [disabled]="!(pkg | isLaunchable)" class="launch-button" expand="block" (click)="launchUiTab()">
+          Launch Web Interface
+          <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>
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
+++ b/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[] = []
--- a/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
+++ b/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;">
-                    <ion-text color="primary">Installing</ion-text>
-                    <ion-spinner name="crescent" style="height: 10px; width: 15px; margin-left: 3px; margin-right: -4px;" color="primary"></ion-spinner>
+                  <p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : localPkg.state">
+                    <ion-text color="primary">{{ localPkg.state | titlecase }}...{{ (localPkg['install-progress'] | installState).totalProgress }}%</ion-text>
                  </p>
-                  <p *ngIf="localPkg.state === PackageState.Updating" style="display: flex; flex-direction: row; align-items: center;">
-                    <ion-text color="primary">Updating</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.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 *ngIf="localPkg.state === PackageState.Removing">
+                    <ion-text color="warning">{{ localPkg.state | Removing }}</ion-text>
+                    <ion-spinner name="dots" color="warning"></ion-spinner>
                  </p>
                </ng-container>
              </ion-label>
--- 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
@@ -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 -->
-                  <p *ngIf="!installedPkg; else local">
+                  <!-- no localPkg -->
+                  <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>
-                        <ion-text color="medium">Installed at {{ installedPkg.manifest.version | displayEmver }}</ion-text>
-                      </p>
-                    </ng-template>
+                    <p *ngIf="localPkg.state === PackageState.Installed">
+                      <ion-text color="medium">Installed at {{ localPkg.manifest.version | displayEmver }}</ion-text>
+                    </p>
+                    <!-- installing, updating -->
+                    <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 -->
-            <ion-button *ngIf="!installedPkg; else installedPkg2" class="main-action-button" expand="block" (click)="install()">
+            <!-- no localPkg -->
+            <ion-button *ngIf="!localPkg; else localPkg2" class="main-action-button" expand="block" (click)="install()">
              Install
            </ion-button>
-            <!-- installedPkg -->
-            <ng-template #installedPkg2>
+            <!-- localPkg -->
+            <ng-template #localPkg2>
              <!-- not installing, updating, or removing -->
-              <ng-container *ngIf="installedPkg.state === PackageState.Installed">
-                <ion-button *ngIf="(installedPkg.manifest.version | compareEmver : pkg.manifest.version) === -1" class="main-action-button" expand="block" (click)="update('update')">
+              <ng-container *ngIf="localPkg.state === PackageState.Installed">
+                <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>
--- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.scss
+++ b/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)
      }
    }
  }
--- 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
@@ -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
      }),
    ]

--- a/ui/src/app/pipes/install-state.pipe.ts
+++ b/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
+}
--- a/ui/src/app/services/api/embassy/embassy-mock-api.service.ts
+++ b/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
--- a/ui/src/app/services/api/marketplace/marketplace-mock-api.service.ts
+++ b/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
      }, { })
    }
--- a/ui/src/app/services/patch-db/patch-db.service.ts
+++ b/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 {