feature done

ui/src/app/app.component.html

@@ -165,11 +165,29 @@
       <ion-menu-button></ion-menu-button>
     </section>
   </ion-content>
-  <!-- <ion-footer *ngIf="patch.data && patch.data['server-info'] && patch.data['server-info']['update-status']">
-    <ion-toolbar>
-      <ion-title>{{ patch.data['server-info']['update-status'] }}</ion-title>
+  <ion-footer
+    [ngStyle]="{
+      'max-height': osUpdateProgress ? '100px' : '0px',
+      'overflow': 'hidden',
+      'transition-property': 'max-height',
+      'transition-duration': '1s',
+      'transition-delay': '.05s'
+    }"
+  >
+    <ion-toolbar style="border-top: 1px solid var(--ion-color-dark);" color="light">
+      <ion-list>
+        <ion-list-header>
+          <ion-label>Install Progress</ion-label>
+        </ion-list-header>
+        <div style="padding: 0 15px;">
+          <ion-progress-bar
+            color="secondary"
+            [value]="osUpdateProgress && osUpdateProgress.downloaded / osUpdateProgress.size"
+          ></ion-progress-bar>
+        </div>
+      </ion-list>
     </ion-toolbar>
-  </ion-footer> -->
+  </ion-footer>
 </ion-app>
 
 

ui/src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Storage } from '@ionic/storage-angular'
 import { AuthService, AuthState } from './services/auth.service'
 import { ApiService } from './services/api/embassy-api.service'
 import { Router, RoutesRecognized } from '@angular/router'
-import { debounceTime, distinctUntilChanged, filter, take } from 'rxjs/operators'
+import { debounceTime, distinctUntilChanged, filter, finalize, take, takeUntil, takeWhile } from 'rxjs/operators'
 import { AlertController, IonicSafeString, LoadingController, ToastController } from '@ionic/angular'
 import { Emver } from './services/emver.service'
 import { SplitPaneTracker } from './services/split-pane.service'
@@ -14,7 +14,7 @@ import { ServerStatus } from './services/patch-db/data-model'
 import { ConnectionFailure, ConnectionService } from './services/connection.service'
 import { StartupAlertsService } from './services/startup-alerts.service'
 import { ConfigService } from './services/config.service'
-import { debounce, isEmptyObject } from './util/misc.util'
+import { debounce, isEmptyObject, pauseFor } from './util/misc.util'
 import { ErrorToastService } from './services/error-toast.service'
 import { Subscription } from 'rxjs'
 
@@ -40,6 +40,7 @@ export class AppComponent {
   serverName: string
   unreadCount: number
   subscriptions: Subscription[] = []
+  osUpdateProgress: { size: number, downloaded: number }
   appPages = [
     {
       title: 'Services',
@@ -243,10 +244,35 @@ export class AppComponent {
         this.showMenu = true
         this.router.navigate([''], { replaceUrl: true })
       }
-      if ([ServerStatus.Updating, ServerStatus.BackingUp].includes(status) && !route.startsWith(maintenance)) {
+      if (ServerStatus.BackingUp === status && !route.startsWith(maintenance)) {
         this.showMenu = false
         this.router.navigate([maintenance], { replaceUrl: true })
       }
+      if (ServerStatus.Updating === status) {
+        this.watchUpdateProgress()
+      }
+    })
+  }
+
+  private watchUpdateProgress (): Subscription {
+    return this.patch.watch$('server-info', 'update-progress')
+    .pipe(
+      filter(progress => !!progress),
+      takeWhile(progress => progress.downloaded < progress.size),
+      finalize(async () => {
+        const maintenance = '/maintenance'
+        const route = this.router.url
+        if (!route.startsWith(maintenance)) {
+          this.showMenu = false
+          this.router.navigate([maintenance], { replaceUrl: true })
+        }
+        if (this.osUpdateProgress) this.osUpdateProgress.downloaded = this.osUpdateProgress.size
+        await pauseFor(200)
+        this.osUpdateProgress = undefined
+      }),
+    )
+    .subscribe(progress => {
+      this.osUpdateProgress = progress
     })
   }
 

ui/src/app/components/install-wizard/prebaked-wizards.ts

@@ -105,7 +105,10 @@ export class WizardBaker {
             action,
             verb: 'beginning update for',
             title,
-            executeAction: () => this.embassyApi.updateServer({ }),
+            executeAction: async () => {
+              this.embassyApi.updateServer({ })
+              return
+            },
           },
         },
         bottomBar: {

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

@@ -105,7 +105,7 @@ export class MockApiService extends ApiService {
       size: 10000,
       downloaded: 0,
     }
-    console.log('here')
+
     const patch = [
       {
         op: PatchOp.REPLACE,
@@ -119,8 +119,10 @@ export class MockApiService extends ApiService {
       },
     ]
     const res = await this.http.rpcRequest<WithRevision<null>>({ method: 'db.patch', params: { patch } })
+    console.log('update progress created')
     await this.updateOSProgress(initialProgress.size)
 
+    console.log('about to update')
     setTimeout(async () => {
       const patch = [
         {
@@ -134,10 +136,11 @@ export class MockApiService extends ApiService {
           value: '3.1.0',
         },
         {
-          op: PatchOp.REPLACE,
+          op: PatchOp.REMOVE,
           path: '/server-info/update-progress',
         },
       ]
+
       await this.http.rpcRequest<WithRevision<null>>({ method: 'db.patch', params: { patch } })
       // quickly revert patch to proper version to prevent infinite refresh loop
       const patch2 = [