update disks type, bring back server name, and better gifs for loading and updating

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

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
 import { ServerBackupPage } from './server-backup.page'
 import { RouterModule, Routes } from '@angular/router'
-import { BackupConfirmationComponentModule } from 'src/app/modals/backup-confirmation/backup-confirmation.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
 
 const routes: Routes = [
@@ -18,7 +17,6 @@ const routes: Routes = [
     CommonModule,
     IonicModule,
     RouterModule.forChild(routes),
-    BackupConfirmationComponentModule,
     SharingModule,
   ],
   declarations: [

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

@@ -13,7 +13,7 @@
     <ion-item class="ion-margin-bottom">
       <ion-label>
         <h2>
-          Select the drive where you want to create a backup of your Embassy, including all your installed services.
+          Select the drive where you want to create a backup of your Embassy.
         </h2>
       </ion-label>
     </ion-item>
@@ -38,22 +38,14 @@
     <!-- loaded -->
     <ng-container *ngIf="!loading">
 
-      <ion-item *ngIf="allPartitionsMounted">
-        <ion-text class="ion-text-wrap" color="warning">No partitions available. To begin a backup, insert a storage device into your Embassy.</ion-text>
-      </ion-item>
-
       <ion-item-group>
-        <div *ngFor="let disk of disks | keyvalue">
-          <ion-item-divider>{{ disk.key }} - {{ disk.value.size }}</ion-item-divider>
-          <ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key)">
+        <div *ngFor="let disk of disks">
+          <ion-item-divider>{{ disk.logicalname }} - {{ disk.capacity | convertBytes }}</ion-item-divider>
+          <ion-item button *ngFor="let partition of disk.partitions" (click)="presentModal(partition.logicalname)">
             <ion-icon slot="start" name="save-outline" size="large"></ion-icon>
             <ion-label>
-              <h1>{{ partition.value.label || partition.key }}</h1>
-              <h2>{{ partition.value.size || 'unknown size' }}</h2>
-              <p *ngIf="!partition.value['is-mounted']; else unavailable"><ion-text color="success">Available</ion-text></p>
-              <ng-template #unavailable>
-                <p><ion-text color="danger">Unavailable</ion-text></p>
-              </ng-template>
+              <h1>{{ partition.label || partition.logicalname }}</h1>
+              <h2>{{ partition.capacity | convertBytes }}</h2>
             </ion-label>
           </ion-item>
         </div>

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

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core'
 import { ModalController } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { BackupConfirmationComponent } from 'src/app/modals/backup-confirmation/backup-confirmation.component'
+import { GenericInputComponent } from 'src/app/modals/generic-input/generic-input.component'
 import { DiskInfo } from 'src/app/services/api/api.types'
 import { ErrorToastService } from 'src/app/services/error-toast.service'
 
@@ -11,7 +11,7 @@ import { ErrorToastService } from 'src/app/services/error-toast.service'
   styleUrls: ['./server-backup.page.scss'],
 })
 export class ServerBackupPage {
-  disks: DiskInfo
+  disks: DiskInfo[]
   loading = true
   allPartitionsMounted: boolean
 
@@ -33,7 +33,6 @@ export class ServerBackupPage {
   async getExternalDisks (): Promise<void> {
     try {
       this.disks = await this.embassyApi.getDisks({ })
-      this.allPartitionsMounted = Object.values(this.disks).every(d => Object.values(d.partitions).every(p => p['is-mounted']))
     } catch (e) {
       this.errToast.present(e)
     } finally {
@@ -52,7 +51,7 @@ export class ServerBackupPage {
         submitFn: async (value: string) => await this.create(logicalname, value),
       },
       cssClass: 'alertlike-modal',
-      component: BackupConfirmationComponent,
+      component: GenericInputComponent,
     })
 
     return await m.present()