Feat/update progress (#1944)

* uodate FE to show progress once calculated

* update mocks

* only show progress when known

Co-authored-by: Aiden McClelland <me@drbonez.dev>

backend/src/update/mod.rs

@@ -135,7 +135,7 @@ async fn maybe_do_update(
     };
 
     status.update_progress = Some(UpdateProgress {
-        size: Some(100),
+        size: None,
         downloaded: 0,
     });
     status.save(&mut tx).await?;
@@ -301,7 +301,7 @@ async fn copy_ssh_host_keys() -> Result<(), Error> {
 async fn sync_boot() -> Result<(), Error> {
     Rsync::new(
         "/media/embassy/next/boot/",
-        "/boot",
+        "/boot/",
         RsyncOptions {
             delete: false,
             force: false,

frontend/projects/ui/src/app/app/footer/footer.component.html

@@ -4,13 +4,30 @@
   [@heightCollapse]="animation"
 >
   <ion-list class="list">
+    <!-- show progress -->
+    <ng-container *ngIf="progress.size !== null; else calculating">
       <ion-list-header>
-      <ion-label>Downloading EOS: {{ getProgress(progress) }}%</ion-label>
+        <ion-label
+          >Downloading:
+          {{ getProgress(progress.size, progress.downloaded) }}%</ion-label
+        >
       </ion-list-header>
       <ion-progress-bar
         class="progress"
         color="secondary"
-      [value]="getProgress(progress) / 100"
+        [value]="getProgress(progress.size, progress.downloaded) / 100"
       ></ion-progress-bar>
+    </ng-container>
+    <!-- show calculating -->
+    <ng-template #calculating>
+      <ion-list-header>
+        <ion-label>Calculating download size</ion-label>
+      </ion-list-header>
+      <ion-progress-bar
+        class="progress"
+        color="secondary"
+        type="indeterminate"
+      ></ion-progress-bar>
+    </ng-template>
   </ion-list>
 </ion-toolbar>

frontend/projects/ui/src/app/app/footer/footer.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { heightCollapse } from '../../util/animations'
 import { PatchDB } from 'patch-db-client'
 import { map } from 'rxjs/operators'
-import { DataModel, ServerInfo } from '../../services/patch-db/data-model'
+import { DataModel } from '../../services/patch-db/data-model'
 
 @Component({
   selector: 'footer[appFooter]',
@@ -26,10 +26,7 @@ export class FooterComponent {
 
   constructor(private readonly patch: PatchDB<DataModel>) {}
 
-  getProgress({
-    downloaded,
-    size,
-  }: NonNullable<ServerInfo['status-info']['update-progress']>): number {
-    return Math.round((100 * (downloaded || 1)) / (size || 1))
+  getProgress(size: number, downloaded: number): number {
+    return Math.round((100 * downloaded) / (size || 1))
   }
 }

frontend/projects/ui/src/app/components/toast-container/update-toast/update-toast.component.html

@@ -1,7 +1,7 @@
 <toast
   *ngIf="visible$ | async as message"
   class="success-toast"
-  header="EOS download complete!"
+  header="embassyOS download complete!"
   (dismiss)="onDismiss()"
 >
   Restart your Embassy for these updates to take effect. It can take several

frontend/projects/ui/src/app/modals/app-recover-select/to-options.pipe.ts

@@ -40,7 +40,7 @@ export class ToOptionsPipe implements PipeTransform {
   }
 
   private compare(version: string): boolean {
-    // checks to see if backup was made on a newer version of EOS
+    // checks to see if backup was made on a newer version of eOS
     return this.emver.compare(version, this.config.version) === 1
   }
 }

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

@@ -232,12 +232,12 @@ export class MockApiService extends ApiService {
   async updateServer(url?: string): Promise<RR.UpdateServerRes> {
     await pauseFor(2000)
     const initialProgress = {
-      size: 10000,
+      size: null,
       downloaded: 0,
     }
 
     setTimeout(() => {
-      this.updateOSProgress(initialProgress.size)
+      this.updateOSProgress()
     }, 500)
 
     const patch = [
@@ -916,8 +916,19 @@ export class MockApiService extends ApiService {
     }, 1000)
   }
 
-  private async updateOSProgress(size: number) {
+  private async updateOSProgress() {
+    let size = 10000
     let downloaded = 0
+
+    const patch0 = [
+      {
+        op: PatchOp.REPLACE,
+        path: `/server-info/status-info/update-progress/size`,
+        value: size,
+      },
+    ]
+    this.mockRevision(patch0)
+
     while (downloaded < size) {
       await pauseFor(250)
       downloaded += 500

frontend/projects/ui/src/app/services/patch-data.service.ts

@@ -22,7 +22,7 @@ export class PatchDataService extends Observable<DataModel> {
     switchMap(() => this.patch.watch$()),
     take(1),
     tap(({ ui }) => {
-      // check for updates to EOS and services
+      // check for updates to eOS and services
       this.checkForUpdates()
       // show eos welcome message
       this.showEosWelcome(ui['ack-welcome'])

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

@@ -12,7 +12,7 @@ export interface DataModel {
 export interface UIData {
   name: string | null
   'pkg-order': string[]
-  'ack-welcome': string // EOS emver
+  'ack-welcome': string // eOS emver
   marketplace: UIMarketplaceData
   dev: DevData
   gaming: {

libs/helpers/src/rsync.rs

@@ -98,6 +98,7 @@ impl Rsync {
             })
             .lines();
             while let Some(line) = lines.next_line().await? {
+                if line.contains(" to-chk=0/") {
                     if let Some(percentage) = line
                         .split_ascii_whitespace()
                         .find_map(|col| col.strip_suffix("%"))
@@ -110,6 +111,7 @@ impl Rsync {
                         }
                     }
                 }
+            }
             Ok(())
         })
         .into();