start9 marketplace config

shift not unshift

move eos updates to embassy tab

selected id sub

roughly working

keep name in sync in case of change

delete commented code

64 img

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

@@ -22,7 +22,7 @@
     <ion-item
       [button]="mp.key !== patch.data.ui.marketplace['selected-id']"
       detail="false"
-      *ngFor="let mp of patch.data.ui.marketplace.options | keyvalue"
+      *ngFor="let mp of patch.data.ui.marketplace['known-hosts'] | keyvalue"
       (click)="presentAction(mp.key)"
     >
       <div

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

@@ -12,11 +12,8 @@ import { GenericFormPage } from 'src/app/modals/generic-form/generic-form.page'
 import { PatchDbService } from '../../../services/patch-db/patch-db.service'
 import { v4 } from 'uuid'
 import { MarketplaceService } from '../../marketplace-routes/marketplace.service'
-import {
-  DataModel,
-  UIData,
-  UIMarketplaceData,
-} from '../../../services/patch-db/data-model'
+import { UIMarketplaceData } from '../../../services/patch-db/data-model'
+import { ConfigService } from '../../../services/config.service'
 
 @Component({
   selector: 'marketplaces',
@@ -31,6 +28,7 @@ export class MarketplacesPage {
     private readonly errToast: ErrorToastService,
     private readonly actionCtrl: ActionSheetController,
     private readonly marketplaceService: MarketplaceService,
+    private readonly config: ConfigService,
     public readonly patch: PatchDbService,
   ) {}
 
@@ -95,10 +93,10 @@ export class MarketplacesPage {
   }
 
   private async connect(id: string): Promise<void> {
-    const marketplace = JSON.parse(
+    const marketplace: UIMarketplaceData = JSON.parse(
       JSON.stringify(this.patch.data.ui.marketplace),
     )
-    const newMarketplace = marketplace.options[id]
+    const newMarketplace = marketplace['known-hosts'][id]
 
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
@@ -141,7 +139,7 @@ export class MarketplacesPage {
   }
 
   private async delete(id: string): Promise<void> {
-    const marketplace = JSON.parse(
+    const marketplace: UIMarketplaceData = JSON.parse(
       JSON.stringify(this.patch.data.ui.marketplace),
     )
 
@@ -153,7 +151,7 @@ export class MarketplacesPage {
     await loader.present()
 
     try {
-      delete marketplace.options[id]
+      delete marketplace['known-hosts'][id]
       await this.api.setDbValue({ pointer: `/marketplace`, value: marketplace })
     } catch (e) {
       this.errToast.present(e)
@@ -168,7 +166,7 @@ export class MarketplacesPage {
     ) as UIMarketplaceData
 
     // no-op on duplicates
-    const currentUrls = Object.values(marketplace.options).map(
+    const currentUrls = Object.values(marketplace['known-hosts']).map(
       u => new URL(u.url).hostname,
     )
     if (currentUrls.includes(new URL(url).hostname)) return
@@ -184,7 +182,7 @@ export class MarketplacesPage {
     try {
       const id = v4()
       const { name } = await this.api.getMarketplaceData({}, url)
-      marketplace.options[id] = { name, url }
+      marketplace['known-hosts'][id] = { name, url }
     } catch (e) {
       this.errToast.present({ message: `Could not connect to ${url}` } as any)
       loader.dismiss()
@@ -208,7 +206,7 @@ export class MarketplacesPage {
     ) as UIMarketplaceData
 
     // no-op on duplicates
-    const currentUrls = Object.values(marketplace.options).map(
+    const currentUrls = Object.values(marketplace['known-hosts']).map(
       u => new URL(u.url).hostname,
     )
     if (currentUrls.includes(new URL(url).hostname)) return
@@ -223,7 +221,7 @@ export class MarketplacesPage {
     try {
       const id = v4()
       const { name } = await this.api.getMarketplaceData({}, url)
-      marketplace.options[id] = { name, url }
+      marketplace['known-hosts'][id] = { name, url }
       marketplace['selected-id'] = id
     } catch (e) {
       this.errToast.present({ message: `Could not connect to ${url}` } as any)

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

@@ -1,7 +1,12 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title *ngIf="!patch.loaded">Loading<span class="loading-dots"></span></ion-title>
-    <ion-title *ngIf="patch.loaded">{{ patch.data.ui.name || "Embassy-" + patch.data['server-info'].id }}</ion-title>
+    <ion-title *ngIf="!patch.loaded"
+      >Loading<span class="loading-dots"></span
+    ></ion-title>
+    <ion-title *ngIf="patch.loaded"
+      >{{ patch.data.ui.name || "Embassy-" + patch.data['server-info'].id
+      }}</ion-title
+    >
     <ion-buttons slot="end">
       <badge-menu-button></badge-menu-button>
     </ion-buttons>
@@ -19,28 +24,59 @@
   <ng-template #data>
     <ion-item-group>
       <div *ngFor="let cat of settings | keyvalue : asIsOrder">
-        <ion-item-divider><ion-text color="dark">{{ cat.key }}</ion-text></ion-item-divider>
-        <ion-item button *ngFor="let button of cat.value" [detail]="button.detail" [disabled]="button.disabled | async" (click)="button.action()">
+        <ion-item-divider
+          ><ion-text color="dark">{{ cat.key }}</ion-text></ion-item-divider
+        >
+        <ion-item
+          button
+          *ngFor="let button of cat.value"
+          [detail]="button.detail"
+          [disabled]="button.disabled | async"
+          (click)="button.action()"
+        >
           <ion-icon slot="start" [name]="button.icon"></ion-icon>
           <ion-label>
             <h2>{{ button.title }}</h2>
             <p *ngIf="button.description">{{ button.description }}</p>
+
+            <!-- "Create Backup" button only -->
             <p *ngIf="button.title === 'Create Backup'">
               <ng-container *ngIf="patch.data['server-info'].status as status">
-                <ion-text color="warning" *ngIf="status === ServerStatus.Running">
-                  Last Backup: {{ patch.data['server-info']['last-backup'] ? (patch.data['server-info']['last-backup'] | date: 'short') : 'never' }}
+                <ion-text
+                  color="warning"
+                  *ngIf="status === ServerStatus.Running"
+                >
+                  Last Backup: {{ patch.data['server-info']['last-backup'] ?
+                  (patch.data['server-info']['last-backup'] | date: 'short') :
+                  'never' }}
                 </ion-text>
                 <span *ngIf="status === ServerStatus.BackingUp" 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-spinner
+                    color="success"
+                    style="height: 12px; width: 12px; margin-right: 6px"
+                  ></ion-spinner>
+                  <ion-text color="success"> Backing up </ion-text>
                 </span>
               </ng-container>
             </p>
+
+            <!-- "Software Update" button only -->
+            <p *ngIf="button.title === 'Software Update'">
+              <ng-container
+                *ngIf="eosService.updateAvailable$ | async; else check"
+              >
+                <ion-text class="inline" color="success">
+                  <ion-icon name="repeat"></ion-icon>
+                  Update Available
+                </ion-text>
+              </ng-container>
+              <ng-template #check>
+                <i>Check for updates</i>
+              </ng-template>
+            </p>
           </ion-label>
         </ion-item>
       </div>
     </ion-item-group>
   </ng-template>
-</ion-content>
+</ion-content>

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

@@ -4,6 +4,7 @@ import {
   LoadingController,
   NavController,
   IonicSafeString,
+  ModalController,
 } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ActivatedRoute } from '@angular/router'
@@ -11,7 +12,11 @@ import { ErrorToastService } from 'src/app/services/error-toast.service'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { ServerStatus } from 'src/app/services/patch-db/data-model'
 import { Observable, of } from 'rxjs'
-import { map } from 'rxjs/operators'
+import { filter, map, take } from 'rxjs/operators'
+import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
+import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
+import { exists, isEmptyObject } from 'src/app/util/misc.util'
+import { EOSService } from 'src/app/services/eos.service'
 
 @Component({
   selector: 'server-show',
@@ -20,17 +25,57 @@ import { map } from 'rxjs/operators'
 })
 export class ServerShowPage {
   ServerStatus = ServerStatus
+  hasRecoveredPackage: boolean
 
   constructor(
     private readonly alertCtrl: AlertController,
+    private readonly modalCtrl: ModalController,
+    private readonly wizardBaker: WizardBaker,
     private readonly loadingCtrl: LoadingController,
     private readonly errToast: ErrorToastService,
     private readonly embassyApi: ApiService,
     private readonly navCtrl: NavController,
     private readonly route: ActivatedRoute,
+    public readonly eosService: EOSService,
     public readonly patch: PatchDbService,
   ) {}
 
+  ngOnInit() {
+    this.patch
+      .watch$('recovered-packages')
+      .pipe(filter(exists), take(1))
+      .subscribe(rps => {
+        this.hasRecoveredPackage = !isEmptyObject(rps)
+      })
+  }
+
+  async updateEos(): Promise<void> {
+    if (this.hasRecoveredPackage) {
+      const alert = await this.alertCtrl.create({
+        header: 'Cannot Update',
+        message:
+          'You cannot update EmbassyOS when you have unresolved recovered services.',
+        buttons: ['OK'],
+      })
+      await alert.present()
+    } else {
+      const {
+        version,
+        headline,
+        'release-notes': releaseNotes,
+      } = this.eosService.eos
+
+      await wizardModal(
+        this.modalCtrl,
+        this.wizardBaker.updateOS({
+          version,
+          headline,
+          releaseNotes,
+        }),
+      )
+    }
+  }
+
   async presentAlertRestart() {
     const alert = await this.alertCtrl.create({
       header: 'Confirm',
@@ -54,7 +99,6 @@ export class ServerShowPage {
   }
 
   async presentAlertShutdown() {
-    const sts = this.patch.data['server-info'].status
     const alert = await this.alertCtrl.create({
       header: 'Warning',
       message:
@@ -81,7 +125,7 @@ export class ServerShowPage {
     const alert = await this.alertCtrl.create({
       header: 'System Rebuild',
       message: new IonicSafeString(
-        `<ion-text color="warning">Important:</ion-text> This will tear down all service containers and rebuild them from scratch. This may take up to ${minutes} minutes to complete. During this time, you will lose all connectivity to your Embassy.`,
+        `<ion-text color="warning">Warning:</ion-text> This action will tear down all service containers and rebuild them from scratch. No data will be deleted. This action is useful if your system gets into a bad state, and it should only be performed if you are experiencing general performance or reliability issues. It may take up to ${minutes} minutes to complete. During this time, you will lose all connectivity to your Embassy.`,
       ),
       buttons: [
         {
@@ -151,6 +195,23 @@ export class ServerShowPage {
     }
   }
 
+  private async checkForEosUpdate(): Promise<void> {
+    const loader = await this.loadingCtrl.create({
+      spinner: 'lines',
+      message: 'Checking for updates',
+      cssClass: 'loader',
+    })
+    await loader.present()
+
+    try {
+      await this.eosService.getEOS()
+    } catch (e) {
+      this.errToast.present(e)
+    } finally {
+      loader.dismiss()
+    }
+  }
+
   settings: ServerSettings = {
     Backups: [
       {
@@ -179,6 +240,17 @@ export class ServerShowPage {
       },
     ],
     Insights: [
+      {
+        title: 'Software Update',
+        description: 'Get the latest version of EmbassyOS',
+        icon: 'cog-outline',
+        action: () =>
+          this.eosService.updateAvailable$.getValue()
+            ? this.updateEos()
+            : this.checkForEosUpdate(),
+        detail: false,
+        disabled: of(false),
+      },
       {
         title: 'About',
         description: 'Basic information about your Embassy',
@@ -303,12 +375,14 @@ export class ServerShowPage {
 }
 
 interface ServerSettings {
-  [key: string]: {
-    title: string
-    description: string
-    icon: string
-    action: Function
-    detail: boolean
-    disabled: Observable<boolean>
-  }[]
+  [key: string]: SettingBtn[]
+}
+
+interface SettingBtn {
+  title: string
+  description: string
+  icon: string
+  action: Function
+  detail: boolean
+  disabled: Observable<boolean>
 }