fix nav to show from market and add more disk info

ui/src/app/modals/app-restore/app-restore.component.html

@@ -52,6 +52,11 @@
     <ion-item-group>
       <div *ngFor="let disk of disks">
         <ion-item-divider>{{ disk.logicalname }} - {{ disk.capacity | convertBytes }}</ion-item-divider>
+        <p class="item-subdivider" *ngIf="disk.vendor || disk.model">
+          {{ disk.vendor }}
+          <span *ngIf="disk.vendor && disk.model"> - </span>
+          {{ disk.model }}
+        </p>
         <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>

ui/src/app/pages/apps-routes/app-show/app-show.page.html

@@ -1,4 +1,3 @@
-<ng-container *ngIf="!!pkg">
 <ion-header>
   <ion-toolbar>
     <ion-buttons slot="start">
@@ -128,8 +127,9 @@
           </ion-item>
         </ng-container>
       </ng-container>
+      <!-- @TODO better maintenance messaging -->
       <ng-template #maintenance>
-          App is undergoing maintenance.
+        Service is undergoing maintenance.
       </ng-template>
     </ng-container>
   </ion-item-group>
@@ -155,4 +155,3 @@
     ></ion-progress-bar>
   </div>
 </ion-content>
-</ng-container>

ui/src/app/pages/apps-routes/app-show/app-show.page.ts

@@ -58,21 +58,13 @@ export class AppShowPage {
 
   async ngOnInit () {
     this.pkgId = this.route.snapshot.paramMap.get('pkgId')
+    this.setValues(this.patch.data['package-data'][this.pkgId])
+
     this.subs = [
       // 1
       this.patch.watch$('package-data', this.pkgId)
       .subscribe(pkg => {
-        this.pkg = pkg
+        this.setValues(pkg)
-        this.installProgress = !isEmptyObject(pkg['install-progress']) ? this.packageLoadingService.transform(pkg['install-progress']) : undefined
-        // we can safely ignore any current dependencies that are not defined in the service manifest
-        this.currentDependencies = { }
-        Object.entries(pkg.installed['current-dependencies']).forEach(([id, value]) => {
-          if (pkg.manifest.dependencies[id]) {
-            this.currentDependencies[id] = value
-          }
-        })
-        this.rendering = renderPkgStatus(pkg.state, pkg.installed?.status)
-        this.mainStatus = { ...pkg.installed?.status.main }
       }),
       // 2
       this.connectionService.watchFailure$()
@@ -174,6 +166,20 @@ export class AppShowPage {
     await modal.present()
   }
 
+  private setValues (pkg: PackageDataEntry): void {
+    this.pkg = pkg
+    this.installProgress = !isEmptyObject(pkg['install-progress']) ? this.packageLoadingService.transform(pkg['install-progress']) : undefined
+    // we can safely ignore any current dependencies that are not defined in the service manifest
+    this.currentDependencies = { }
+    Object.entries(pkg.installed?.['current-dependencies'] || { }).forEach(([id, value]) => {
+      if (pkg.manifest.dependencies[id]) {
+        this.currentDependencies[id] = value
+      }
+    })
+    this.mainStatus = { ...pkg.installed?.status.main }
+    this.rendering = renderPkgStatus(pkg.state, pkg.installed?.status)
+  }
+
   private async installDep (depId: string): Promise<void> {
     const title = this.pkg.installed['dependency-info'][depId].manifest.title
     const version = this.pkg.manifest.dependencies[depId].version

ui/src/app/pages/marketplace-routes/marketplace.service.ts

@@ -52,7 +52,7 @@ export class MarketplaceService {
     const pkgs = await this.api.getMarketplacePkgs({
       ids: [{ id, version: version || '*' }],
     })
-    const pkg = pkgs[0]
+    const pkg = pkgs.find(pkg => pkg.manifest.id == id)
     if (pkg) {
       this.pkgs[id] = pkg
     } else {

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

@@ -41,6 +41,11 @@
       <ion-item-group>
         <div *ngFor="let disk of disks">
           <ion-item-divider>{{ disk.logicalname }} - {{ disk.capacity | convertBytes }}</ion-item-divider>
+          <p class="item-subdivider" *ngIf="disk.vendor || disk.model">
+            {{ disk.vendor }}
+            <span *ngIf="disk.vendor && disk.model"> - </span>
+            {{ disk.model }}
+          </p>
           <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>

ui/src/app/services/api/api.fixures.ts

@@ -867,6 +867,8 @@ export module Mock {
   export const Disks: RR.GetDisksRes = [
     {
       logicalname: '/dev/sda',
+      model: null,
+      vendor: 'SSK',
       partitions: [
         {
           logicalname: 'sdba1',
@@ -878,11 +880,12 @@ export module Mock {
       capacity: 1000000000000,
       'embassy-os': {
         version: '0.3.0',
-        name: '', // @TODO what is this?
       },
     },
     {
       logicalname: '/dev/sdb',
+      model: 'JMS567 SATA 6Gb/s bridge',
+      vendor: 'Samsung',
       partitions: [
         {
           logicalname: 'sdba1',
@@ -900,7 +903,6 @@ export module Mock {
       capacity: 10000000000,
       'embassy-os': {
         version: '0.3.0',
-        name: '', // @TODO what is this?
       },
     },
   ]

ui/src/app/services/api/api.types.ts

@@ -290,17 +290,22 @@ export type PlatformType = 'cli' | 'ios' | 'ipad' | 'iphone' | 'android' | 'phab
 
 export interface DiskInfo {
   logicalname: string
-  partitions: {
+  vendor: string | null,
-    logicalname: string
+  model: string | null,
-    label: string | null
+  partitions: PartitionInfo[],
   capacity: number
-    used: number | null
+  'embassy-os': EmbassyOsDiskInfo | null
-  }[],
+}
-  capacity: number
+
-  'embassy-os': {
+export interface PartitionInfo {
-    version: string
+  logicalname: string,
-    name: string
+  label: string | null,
-  } | null
+  capacity: number,
+  used: number | null,
+}
+
+export interface EmbassyOsDiskInfo {
+  version: string,
 }
 
 export interface ServerSpecs {

ui/src/global.scss

@@ -58,6 +58,11 @@ $subheader-height: 48px;
   }
 }
 
+.item-subdivider {
+  padding: 0 16px;
+  margin-top: 0;
+}
+
 .loader {
   --spinner-color: var(--ion-color-warning) !important;
   z-index: 40000 !important;