initial update progress commit

ui/src/app/app.component.html

@@ -1,4 +1,5 @@
 <ion-app>
+  <ion-content>
     <ion-split-pane [disabled]="!showMenu" (ionSplitPaneVisible)="splitPaneVisible($event)" contentId="main-content">
       <ion-menu contentId="main-content" type="overlay">
         <ion-content color="light" scrollY="false">
@@ -45,7 +46,9 @@
         </ion-content>
       </ion-menu>
       <ion-router-outlet id="main-content"></ion-router-outlet>
+      
     </ion-split-pane>
+
     <section id="preload" style="display: none;">
       <!-- 3rd party components -->
       <qr-code value="hello"></qr-code>
@@ -161,6 +164,12 @@
       <ion-toolbar></ion-toolbar>
       <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-toolbar>
+  </ion-footer> -->
 </ion-app>
 
 

ui/src/app/app.component.ts

@@ -74,9 +74,8 @@ export class AppComponent {
     private readonly connectionService: ConnectionService,
     private readonly startupAlertsService: StartupAlertsService,
     private readonly toastCtrl: ToastController,
-    private readonly loadingCtrl: LoadingController,
     private readonly errToast: ErrorToastService,
-    private readonly patch: PatchDbService,
+    public readonly patch: PatchDbService,
     private readonly config: ConfigService,
     readonly splitPane: SplitPaneTracker,
   ) {

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

@@ -7,11 +7,20 @@ import { PatchDbService } from '../services/patch-db/patch-db.service'
   providedIn: 'root',
 })
 export class MaintenanceGuard implements CanActivate, CanActivateChild {
+  serverStatus: ServerStatus
+  isFullyDownloaded: boolean = false
 
   constructor (
     private readonly router: Router,
     private readonly patch: PatchDbService,
-  ) { }
+  ) {
+    this.patch.watch$('server-info', 'status').subscribe(status => {
+      this.serverStatus = status
+    })
+    this.patch.watch$('server-info', 'update-progress').subscribe(progress => {
+      this.isFullyDownloaded = !!progress && (progress.size === progress.downloaded)
+    })
+  }
 
   canActivate (): boolean {
     return this.runServerStatusCheck()
@@ -22,7 +31,7 @@ export class MaintenanceGuard implements CanActivate, CanActivateChild {
   }
 
   private runServerStatusCheck (): boolean {
-    if ([ServerStatus.Updating, ServerStatus.BackingUp].includes(this.patch.getData()['server-info']?.status)) {
+    if (ServerStatus.BackingUp === this.serverStatus || !this.isFullyDownloaded) {
       this.router.navigate(['/maintenance'], { replaceUrl: true })
       return false
     } else {

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

@@ -8,6 +8,8 @@ import { PatchDbService } from '../services/patch-db/patch-db.service'
 })
 export class UnmaintenanceGuard implements CanActivate {
   serverStatus: ServerStatus
+  isFullyDownloaded: boolean = false
+
 
   constructor (
     private readonly router: Router,
@@ -16,14 +18,17 @@ export class UnmaintenanceGuard implements CanActivate {
     this.patch.watch$('server-info', 'status').subscribe(status => {
       this.serverStatus = status
     })
+    this.patch.watch$('server-info', 'update-progress').subscribe(progress => {
+      this.isFullyDownloaded = !!progress && (progress.size === progress.downloaded)
+    })
   }
 
   canActivate (): boolean {
-    if (![ServerStatus.Updating, ServerStatus.BackingUp].includes(this.serverStatus)) {
+    if (ServerStatus.BackingUp === this.serverStatus || this.isFullyDownloaded) {
+      return true
+    } else {
       this.router.navigate([''], { replaceUrl: true })
       return false
-    } else {
-      return true
     }
   }
 }

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

@@ -101,14 +101,26 @@ export class MockApiService extends ApiService {
 
   async updateServerRaw (params: RR.UpdateServerReq): Promise<RR.UpdateServerRes> {
     await pauseFor(2000)
+    const initialProgress = {
+      size: 10000,
+      downloaded: 0,
+    }
     const patch = [
       {
         op: PatchOp.REPLACE,
         path: '/server-info/status',
         value: ServerStatus.Updating,
       },
+      {
+        op: PatchOp.REPLACE,
+        path: '/server-info/update-progress',
+        value: initialProgress,
+      },
     ]
     const res = await this.http.rpcRequest<WithRevision<null>>({ method: 'db.patch', params: { patch } })
+
+    await this.updateOSProgress(initialProgress.size)
+
     setTimeout(async () => {
       const patch = [
         {
@@ -121,6 +133,10 @@ export class MockApiService extends ApiService {
           path: '/server-info/version',
           value: '3.1.0',
         },
+        {
+          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
@@ -132,7 +148,7 @@ export class MockApiService extends ApiService {
         },
       ]
       this.http.rpcRequest<WithRevision<null>>({ method: 'db.patch', params: { patch: patch2 } })
-    }, this.revertTime)
+    }, 10000)
 
     return res
   }
@@ -564,4 +580,29 @@ export class MockApiService extends ApiService {
       this.http.rpcRequest<WithRevision<null>>({ method: 'db.patch', params: { patch } })
     }, 1000)
   }
+
+  private async updateOSProgress (size: number) {
+    let downloaded = 0
+    while (downloaded < size) {
+      await pauseFor(250)
+      downloaded += 500
+      const patch = [
+        {
+          op: PatchOp.REPLACE,
+          path: `/server-info/update-progress/downloaded`,
+          value: downloaded,
+        },
+      ]
+      await this.http.rpcRequest<WithRevision<null>>({ method: 'db.patch', params: { patch } })
+    }
+
+    const patch = [
+      {
+        op: PatchOp.REPLACE,
+        path: `/server-info/update-progress/downloaded`,
+        value: size,
+      },
+    ]
+    await this.http.rpcRequest<WithRevision<null>>({ method: 'db.patch', params: { patch } })
+  }
 }

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

@@ -21,6 +21,10 @@ export interface ServerInfo {
   'eos-marketplace': URL
   'package-marketplace': URL | null // uses EOS marketplace if null
   'unread-notification-count': number
+  'update-progress'?: {
+    size: number
+    downloaded: number
+  }
   specs: {
     cpu: string
     disk: string