selective backups and better drive selection interface (#1576)

* selective backups and better drive selection interface

* fix disabled checkbox and backup drives menu styling

* feat: package-ids

* only show services that are backing up on backup page

* refactor for performace and cleanliness

Co-authored-by: Matt Hill <matthill@Matt-M1.start9.dev>
Co-authored-by: Lucy Cifferello <12953208+elvece@users.noreply.github.com>
Co-authored-by: J M <mogulslayer@gmail.com>

frontend/projects/ui/src/app/pages/developer-routes/developer-list/developer-list.page.html

@@ -31,7 +31,7 @@
       fill="clear"
       (click)="presentAction(entry.key, $event)"
     >
-      <ion-icon name="ellipsis-horizontal-outline"></ion-icon>
+      <ion-icon name="ellipsis-horizontal"></ion-icon>
     </ion-button>
   </ion-item>
 </ion-content>

frontend/projects/ui/src/app/pages/server-routes/marketplaces/marketplaces.page.ts

@@ -5,7 +5,7 @@ import {
   ModalController,
 } from '@ionic/angular'
 import { ActionSheetButton } from '@ionic/core'
-import { ErrorToastService } from '@start9labs/shared'
+import { DestroyService, ErrorToastService } from '@start9labs/shared'
 import { AbstractMarketplaceService } from '@start9labs/marketplace'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ValueSpecObject } from 'src/app/pkg-config/config-types'
@@ -15,7 +15,12 @@ import { v4 } from 'uuid'
 import { UIMarketplaceData } from '../../../services/patch-db/data-model'
 import { ConfigService } from '../../../services/config.service'
 import { MarketplaceService } from 'src/app/services/marketplace.service'
-import { distinctUntilChanged, finalize, first } from 'rxjs/operators'
+import {
+  distinctUntilChanged,
+  finalize,
+  first,
+  takeUntil,
+} from 'rxjs/operators'
 
 type Marketplaces = {
   id: string | undefined
@@ -27,6 +32,7 @@ type Marketplaces = {
   selector: 'marketplaces',
   templateUrl: 'marketplaces.page.html',
   styleUrls: ['marketplaces.page.scss'],
+  providers: [DestroyService],
 })
 export class MarketplacesPage {
   selectedId: string | undefined
@@ -42,12 +48,13 @@ export class MarketplacesPage {
     private readonly marketplaceService: MarketplaceService,
     private readonly config: ConfigService,
     public readonly patch: PatchDbService,
+    private readonly destroy$: DestroyService,
   ) {}
 
   ngOnInit() {
     this.patch
       .watch$('ui', 'marketplace')
-      .pipe(distinctUntilChanged())
+      .pipe(distinctUntilChanged(), takeUntil(this.destroy$))
       .subscribe((mp: UIMarketplaceData | undefined) => {
         let marketplaces: Marketplaces = [
           {

frontend/projects/ui/src/app/pages/server-routes/server-backup/backing-up/backing-up.component.html

@@ -0,0 +1,63 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="embassy"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Backup Progress</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-grid *ngIf="pkgs$ | async as pkgs">
+    <ion-row *ngIf="backupProgress$ | async as backupProgress">
+      <ion-col>
+        <ion-item-group>
+          <ng-container *ngFor="let pkg of pkgs | keyvalue">
+            <ion-item *ngIf="backupProgress[pkg.key] as pkgProgress">
+              <ion-avatar slot="start">
+                <img [src]="pkg.value['static-files'].icon" />
+              </ion-avatar>
+              <ion-label> {{ pkg.value.manifest.title }} </ion-label>
+              <!-- complete -->
+              <ion-note
+                *ngIf="pkgProgress.complete; else incomplete"
+                class="inline"
+                slot="end"
+              >
+                <ion-icon name="checkmark" color="success"></ion-icon>
+                &nbsp;
+                <ion-text color="success">Complete</ion-text>
+              </ion-note>
+              <!-- incomplete -->
+              <ng-template #incomplete>
+                <ng-container
+                  *ngIf="pkg.key | pkgMainStatus | async as pkgStatus"
+                >
+                  <!-- active -->
+                  <ion-note
+                    *ngIf="
+                      pkgStatus === PackageMainStatus.BackingUp;
+                      else queued
+                    "
+                    class="inline"
+                    slot="end"
+                  >
+                    <ion-spinner
+                      color="dark"
+                      style="height: 12px; width: 12px; margin-right: 6px"
+                    ></ion-spinner>
+                    <ion-text color="dark">Backing up</ion-text>
+                  </ion-note>
+                  <!-- queued -->
+                  <ng-template #queued>
+                    <ion-note slot="end">Waiting...</ion-note>
+                  </ng-template>
+                </ng-container>
+              </ng-template>
+            </ion-item>
+          </ng-container>
+        </ion-item-group>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>

frontend/projects/ui/src/app/pages/server-routes/server-backup/backing-up/backing-up.component.ts

@@ -0,0 +1,50 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Pipe,
+  PipeTransform,
+} from '@angular/core'
+import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { take } from 'rxjs/operators'
+import { PackageMainStatus } from 'src/app/services/patch-db/data-model'
+import { EOSService } from 'src/app/services/eos.service'
+import { Observable } from 'rxjs'
+
+@Component({
+  selector: 'backing-up',
+  templateUrl: './backing-up.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BackingUpComponent {
+  readonly pkgs$ = this.patch.watch$('package-data').pipe(take(1))
+  readonly backupProgress$ = this.patch.watch$(
+    'server-info',
+    'status-info',
+    'backup-progress',
+  )
+
+  PackageMainStatus = PackageMainStatus
+
+  constructor(
+    public readonly eosService: EOSService,
+    public readonly patch: PatchDbService,
+  ) {}
+}
+
+@Pipe({
+  name: 'pkgMainStatus',
+})
+export class PkgMainStatusPipe implements PipeTransform {
+  transform(pkgId: string): Observable<PackageMainStatus> {
+    return this.patch.watch$(
+      'package-data',
+      pkgId,
+      'installed',
+      'status',
+      'main',
+      'status',
+    )
+  }
+
+  constructor(private readonly patch: PatchDbService) {}
+}

frontend/projects/ui/src/app/pages/server-routes/server-backup/server-backup.module.ts

@@ -2,9 +2,12 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
 import { ServerBackupPage } from './server-backup.page'
+import { BackingUpComponent } from './backing-up/backing-up.component'
 import { RouterModule, Routes } from '@angular/router'
 import { BackupDrivesComponentModule } from 'src/app/components/backup-drives/backup-drives.component.module'
 import { SharedPipesModule } from '@start9labs/shared'
+import { BackupSelectPageModule } from 'src/app/modals/backup-select/backup-select.module'
+import { PkgMainStatusPipe } from './backing-up/backing-up.component'
 
 const routes: Routes = [
   {
@@ -20,7 +23,8 @@ const routes: Routes = [
     RouterModule.forChild(routes),
     SharedPipesModule,
     BackupDrivesComponentModule,
+    BackupSelectPageModule,
   ],
-  declarations: [ServerBackupPage],
+  declarations: [ServerBackupPage, BackingUpComponent, PkgMainStatusPipe],
 })
 export class ServerBackupPageModule {}

frontend/projects/ui/src/app/pages/server-routes/server-backup/server-backup.page.html

@@ -1,55 +1,16 @@
+<!-- currently backing up -->
+<backing-up
+  *ngIf="backingUp$ | async; else notBackingUp"
+  style="height: 100%"
+></backing-up>
+
 <!-- not backing up -->
-<ng-container *ngIf="!backingUp">
+<ng-template #notBackingUp>
   <backup-drives-header title="Create Backup"></backup-drives-header>
   <ion-content class="ion-padding">
-    <backup-drives type="create" (onSelect)="presentModalPassword($event)"></backup-drives>
+    <backup-drives
+      type="create"
+      (onSelect)="presentModalSelect($event)"
+    ></backup-drives>
   </ion-content>
-</ng-container>
-
-<!-- currently backing up -->
-<ng-container *ngIf="backingUp">
-
-  <ion-header>
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-back-button defaultHref="embassy"></ion-back-button>
-      </ion-buttons>
-      <ion-title>Backup Progress</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <ion-content class="ion-padding">
-    <ion-grid>
-      <ion-row>
-        <ion-col>
-          <ion-item-group>
-            <ion-item *ngFor="let pkg of pkgs">
-              <ion-avatar slot="start">
-                <img [src]="pkg.entry['static-files'].icon" />
-              </ion-avatar>
-              <ion-label>
-                {{ pkg.entry.manifest.title }}
-              </ion-label>
-              <!-- complete -->
-              <ion-note *ngIf="pkg.complete" class="inline" slot="end">
-                <ion-icon name="checkmark" color="success"></ion-icon>
-                &nbsp;
-                <ion-text color="success">Complete</ion-text>
-              </ion-note>
-              <!-- active -->
-              <ion-note *ngIf="pkg.active" class="inline" slot="end">
-                <ion-spinner color="dark" style="height: 12px; width: 12px; margin-right: 6px;"></ion-spinner>
-                <ion-text color="dark">Backing up</ion-text>
-              </ion-note>
-              <!-- queued -->
-              <ion-note *ngIf="!pkg.complete && !pkg.active" slot="end">
-                Waiting...
-              </ion-note>
-            </ion-item>
-          </ion-item-group>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-  </ion-content>
-
-</ng-container>
+</ng-template>

frontend/projects/ui/src/app/pages/server-routes/server-backup/server-backup.page.ts

@@ -10,78 +10,73 @@ import {
   GenericInputOptions,
 } from 'src/app/modals/generic-input/generic-input.component'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
-import { Subscription } from 'rxjs'
-import { take } from 'rxjs/operators'
+import { skip, takeUntil } from 'rxjs/operators'
 import { MappedBackupTarget } from 'src/app/types/mapped-backup-target'
-import {
-  PackageDataEntry,
-  PackageMainStatus,
-} from 'src/app/services/patch-db/data-model'
 import * as argon2 from '@start9labs/argon2'
 import {
   CifsBackupTarget,
   DiskBackupTarget,
 } from 'src/app/services/api/api.types'
+import { BackupSelectPage } from 'src/app/modals/backup-select/backup-select.page'
+import { EOSService } from 'src/app/services/eos.service'
+import { DestroyService } from '@start9labs/shared'
 
 @Component({
   selector: 'server-backup',
   templateUrl: './server-backup.page.html',
   styleUrls: ['./server-backup.page.scss'],
+  providers: [DestroyService],
 })
 export class ServerBackupPage {
-  backingUp = false
-  pkgs: PkgInfo[] = []
-  subs: Subscription[]
+  target: MappedBackupTarget<CifsBackupTarget | DiskBackupTarget>
+  serviceIds: string[] = []
+
+  readonly backingUp$ = this.eosService.backingUp$
 
   constructor(
     private readonly loadingCtrl: LoadingController,
     private readonly modalCtrl: ModalController,
     private readonly embassyApi: ApiService,
-    private readonly patch: PatchDbService,
     private readonly navCtrl: NavController,
+    private readonly destroy$: DestroyService,
+    private readonly eosService: EOSService,
+    private readonly patch: PatchDbService,
   ) {}
 
   ngOnInit() {
-    this.subs = [
-      this.patch
-        .watch$('server-info', 'status-info', 'backing-up')
-        .pipe()
-        .subscribe(isBackingUp => {
-          if (isBackingUp) {
-            if (!this.backingUp) {
-              this.backingUp = true
-              this.subscribeToBackup()
-            }
-          } else {
-            if (this.backingUp) {
-              this.backingUp = false
-              this.pkgs.forEach(pkg => pkg.sub?.unsubscribe())
-              this.navCtrl.navigateRoot('/embassy')
-            }
-          }
-        }),
-    ]
+    this.backingUp$
+      .pipe(skip(1), takeUntil(this.destroy$))
+      .subscribe(isBackingUp => {
+        if (!isBackingUp) {
+          this.navCtrl.navigateRoot('/embassy')
+        }
+      })
   }
 
-  ngOnDestroy() {
-    this.subs.forEach(sub => sub.unsubscribe())
-    this.pkgs.forEach(pkg => pkg.sub?.unsubscribe())
-  }
-
-  async presentModalPassword(
+  async presentModalSelect(
     target: MappedBackupTarget<CifsBackupTarget | DiskBackupTarget>,
-  ): Promise<void> {
-    let message =
-      'Enter your master password to create an encrypted backup of your Embassy and all its services.'
-    if (!target.hasValidBackup) {
-      message =
-        message +
-        ' Since this is a fresh backup, it could take a while. Future backups will likely be much faster.'
-    }
+  ) {
+    this.target = target
 
+    const modal = await this.modalCtrl.create({
+      presentingElement: await this.modalCtrl.getTop(),
+      component: BackupSelectPage,
+    })
+
+    modal.onWillDismiss().then(res => {
+      if (res.data) {
+        this.serviceIds = res.data
+        this.presentModalPassword()
+      }
+    })
+
+    await modal.present()
+  }
+
+  async presentModalPassword(): Promise<void> {
     const options: GenericInputOptions = {
       title: 'Master Password Needed',
-      message,
+      message: 'Enter your master password to encrypt this backup.',
       label: 'Master Password',
       placeholder: 'Enter master password',
       useMask: true,
@@ -93,23 +88,20 @@ export class ServerBackupPage {
         argon2.verify(passwordHash, password)
 
         // first time backup
-        if (!target.hasValidBackup) {
-          await this.createBackup(target.id, password)
+        if (!this.target.hasValidBackup) {
+          await this.createBackup(password)
           // existing backup
         } else {
           try {
             const passwordHash =
-              target.entry['embassy-os']?.['password-hash'] || ''
+              this.target.entry['embassy-os']?.['password-hash'] || ''
 
             argon2.verify(passwordHash, password)
           } catch {
-            setTimeout(
-              () => this.presentModalOldPassword(target, password),
-              500,
-            )
+            setTimeout(() => this.presentModalOldPassword(password), 500)
             return
           }
-          await this.createBackup(target.id, password)
+          await this.createBackup(password)
         }
       },
     }
@@ -123,10 +115,7 @@ export class ServerBackupPage {
     await m.present()
   }
 
-  private async presentModalOldPassword(
-    target: MappedBackupTarget<CifsBackupTarget | DiskBackupTarget>,
-    password: string,
-  ): Promise<void> {
+  private async presentModalOldPassword(password: string): Promise<void> {
     const options: GenericInputOptions = {
       title: 'Original Password Needed',
       message:
@@ -136,10 +125,11 @@ export class ServerBackupPage {
       useMask: true,
       buttonText: 'Create Backup',
       submitFn: async (oldPassword: string) => {
-        const passwordHash = target.entry['embassy-os']?.['password-hash'] || ''
+        const passwordHash =
+          this.target.entry['embassy-os']?.['password-hash'] || ''
 
         argon2.verify(passwordHash, oldPassword)
-        await this.createBackup(target.id, password, oldPassword)
+        await this.createBackup(password, oldPassword)
       },
     }
 
@@ -153,7 +143,6 @@ export class ServerBackupPage {
   }
 
   private async createBackup(
-    id: string,
     password: string,
     oldPassword?: string,
   ): Promise<void> {
@@ -164,7 +153,8 @@ export class ServerBackupPage {
 
     try {
       await this.embassyApi.createBackup({
-        'target-id': id,
+        'target-id': this.target.id,
+        'package-ids': this.serviceIds,
         'old-password': oldPassword || null,
         password,
       })
@@ -172,53 +162,4 @@ export class ServerBackupPage {
       loader.dismiss()
     }
   }
-
-  private subscribeToBackup() {
-    this.patch
-      .watch$('package-data')
-      .pipe(take(1))
-      .subscribe(pkgs => {
-        const pkgArr = Object.keys(pkgs)
-          .sort()
-          .map(key => pkgs[key])
-        const activeIndex = pkgArr.findIndex(
-          pkg =>
-            pkg.installed?.status.main.status === PackageMainStatus.BackingUp,
-        )
-
-        this.pkgs = pkgArr.map((pkg, i) => ({
-          entry: pkg,
-          active: i === activeIndex,
-          complete: i < activeIndex,
-        }))
-
-        // subscribe to pkg
-        this.pkgs.forEach(pkg => {
-          pkg.sub = this.patch
-            .watch$(
-              'package-data',
-              pkg.entry.manifest.id,
-              'installed',
-              'status',
-              'main',
-              'status',
-            )
-            .subscribe(status => {
-              if (status === PackageMainStatus.BackingUp) {
-                pkg.active = true
-              } else if (pkg.active) {
-                pkg.active = false
-                pkg.complete = true
-              }
-            })
-        })
-      })
-  }
-}
-
-interface PkgInfo {
-  entry: PackageDataEntry
-  active: boolean
-  complete: boolean
-  sub?: Subscription
 }

frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html

@@ -52,17 +52,17 @@
                 <ng-container *ngIf="server['status-info'] as statusInfo">
                   <ion-text
                     color="warning"
-                    *ngIf="!statusInfo['backing-up'] && !statusInfo['update-progress']"
+                    *ngIf="!statusInfo['backup-progress'] && !statusInfo['update-progress']"
                   >
                     Last Backup: {{ server['last-backup'] ?
                     (server['last-backup'] | date: 'short') : 'never' }}
                   </ion-text>
-                  <span *ngIf="!!statusInfo['backing-up']" class="inline">
+                  <span *ngIf="!!statusInfo['backup-progress']" class="inline">
                     <ion-spinner
                       color="success"
                       style="height: 12px; width: 12px; margin-right: 6px"
                     ></ion-spinner>
-                    <ion-text color="success"> Backing up </ion-text>
+                    <ion-text color="success">Backing up</ion-text>
                   </span>
                 </ng-container>
               </p>