rework modals and more

2026-03-30 20:14:49 +00:00 · 2021-07-05 20:26:42 -06:00
parent b16ef3c621
commit 01c6b91c52
84 changed files with 380 additions and 508 deletions
--- a/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
+++ b/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
@@ -4,8 +4,8 @@ import { ApiService } from 'src/app/services/api/api.service'
 import { AlertController, IonContent, ModalController, NavController } from '@ionic/angular'
 import { LoaderService } from 'src/app/services/loader.service'
 import { HttpErrorResponse } from '@angular/common/http'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
-import { Action, InstalledPackageDataEntry, Manifest, PackageMainStatus } from 'src/app/models/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
+import { Action, InstalledPackageDataEntry, Manifest, PackageMainStatus } from 'src/app/services/patch-db/data-model'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { Subscription } from 'rxjs'
--- a/ui/src/app/pages/apps-routes/app-config/app-config.module.ts
+++ b/ui/src/app/pages/apps-routes/app-config/app-config.module.ts
@@ -10,8 +10,6 @@ import { AppConfigObjectPageModule } from 'src/app/modals/app-config-object/app-
 import { AppConfigUnionPageModule } from 'src/app/modals/app-config-union/app-config-union.module'
 import { AppConfigValuePageModule } from 'src/app/modals/app-config-value/app-config-value.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
-import { RecommendationButtonComponentModule } from 'src/app/components/recommendation-button/recommendation-button.component.module'
-import { InformationPopoverComponentModule } from 'src/app/components/information-popover/information-popover.component.module'

 const routes: Routes = [
  {
@@ -32,8 +30,6 @@ const routes: Routes = [
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
-    RecommendationButtonComponentModule,
-    InformationPopoverComponentModule,
  ],
  declarations: [AppConfigPage],
 })
--- a/ui/src/app/pages/apps-routes/app-config/app-config.page.ts
+++ b/ui/src/app/pages/apps-routes/app-config/app-config.page.ts
@@ -1,20 +1,18 @@
 import { Component, ViewChild } from '@angular/core'
-import { NavController, AlertController, ModalController, PopoverController, IonContent } from '@ionic/angular'
+import { NavController, AlertController, ModalController, IonContent } from '@ionic/angular'
 import { ActivatedRoute } from '@angular/router'
 import { ApiService } from 'src/app/services/api/api.service'
-import { isEmptyObject } from 'src/app/util/misc.util'
+import { isEmptyObject, Recommendation } from 'src/app/util/misc.util'
 import { LoaderService } from 'src/app/services/loader.service'
 import { TrackingModalController } from 'src/app/services/tracking-modal-controller.service'
 import { from, fromEvent, of, Subscription } from 'rxjs'
 import { catchError, concatMap, map, take, tap } from 'rxjs/operators'
-import { Recommendation } from 'src/app/components/recommendation-button/recommendation-button.component'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
-import { InformationPopoverComponent } from 'src/app/components/information-popover/information-popover.component'
 import { ConfigSpec } from 'src/app/pkg-config/config-types'
 import { ConfigCursor } from 'src/app/pkg-config/config-cursor'
-import { InstalledPackageDataEntry, PackageState } from 'src/app/models/patch-db/data-model'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { InstalledPackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'

@Component({
  selector: 'app-config',
@@ -31,7 +29,7 @@ export class AppConfigPage {
  pkg: InstalledPackageDataEntry
  hasConfig = false

-  backButtonDefense = false
+  mocalShowing = false
  packageState = PackageState

  rec: Recommendation | null = null
@@ -57,7 +55,6 @@ export class AppConfigPage {
    private readonly alertCtrl: AlertController,
    private readonly modalController: ModalController,
    private readonly trackingModalCtrl: TrackingModalController,
-    private readonly popoverController: PopoverController,
    private readonly patch: PatchDbModel,
  ) { }

@@ -71,17 +68,17 @@ export class AppConfigPage {
        }
      }),
      fromEvent(window, 'popstate').subscribe(() => {
-        this.backButtonDefense = false
+        this.mocalShowing = false
        this.trackingModalCtrl.dismissAll()
      }),
      this.trackingModalCtrl.onCreateAny$().subscribe(() => {
-        if (!this.backButtonDefense) {
+        if (!this.mocalShowing) {
          window.history.pushState(null, null, window.location.href + '/edit')
-          this.backButtonDefense = true
+          this.mocalShowing = true
        }
      }),
      this.trackingModalCtrl.onDismissAny$().subscribe(() => {
-        if (!this.trackingModalCtrl.anyModals && this.backButtonDefense === true) {
+        if (!this.trackingModalCtrl.anyModals && this.mocalShowing === true) {
          this.navCtrl.back()
        }
      }),
@@ -135,28 +132,6 @@ export class AppConfigPage {
    this.subs.forEach(sub => sub.unsubscribe())
  }

-  async presentPopover (title: string, description: string, ev: any) {
-    const information = `
-      <div style="font-size: medium; font-style: italic; margin: 5px 0px;">
-        ${title}
-      </div>
-      <div>
-        ${description}
-      </div>
-    `
-    const popover = await this.popoverController.create({
-      component: InformationPopoverComponent,
-      event: ev,
-      translucent: false,
-      showBackdrop: true,
-      backdropDismiss: true,
-      componentProps: {
-        information,
-      },
-    })
-    return await popover.present()
-  }
-
  setConfig (spec: ConfigSpec, config: object, dependencyConfig?: object) {
    this.rootCursor = dependencyConfig ? new ConfigCursor(spec, config, null, dependencyConfig) : new ConfigCursor(spec, config)
    this.spec = this.rootCursor.spec().spec
--- a/ui/src/app/pages/apps-routes/app-instructions/app-instructions.page.ts
+++ b/ui/src/app/pages/apps-routes/app-instructions/app-instructions.page.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router'
 import { IonContent } from '@ionic/angular'
 import { Subscription } from 'rxjs'
 import { concatMap, take, tap } from 'rxjs/operators'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { ApiService } from 'src/app/services/api/api.service'

@Component({
--- a/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
+++ b/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
@@ -2,8 +2,8 @@ import { Component, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { IonContent, ToastController } from '@ionic/angular'
 import { Subscription } from 'rxjs'
-import { InstalledPackageDataEntry, PackageDataEntry } from 'src/app/models/patch-db/data-model'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { InstalledPackageDataEntry, PackageDataEntry } from 'src/app/services/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { ConfigService } from 'src/app/services/config.service'
 import { copyToClipboard } from 'src/app/util/web.util'

--- a/ui/src/app/pages/apps-routes/app-list/app-list.page.ts
+++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.ts
@@ -1,8 +1,8 @@
 import { Component } from '@angular/core'
 import { ConfigService } from 'src/app/services/config.service'
 import { ConnectionService } from 'src/app/services/connection.service'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
-import { PackageDataEntry } from 'src/app/models/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
+import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
 import { Subscription } from 'rxjs'

@Component({
--- a/ui/src/app/pages/apps-routes/app-manifest/app-manifest.page.ts
+++ b/ui/src/app/pages/apps-routes/app-manifest/app-manifest.page.ts
@@ -1,8 +1,8 @@
 import { Component, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { Subscription } from 'rxjs'
-import { PackageDataEntry } from 'src/app/models/patch-db/data-model'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { getManifest } from 'src/app/services/config.service'
 import * as JsonPointer from 'json-pointer'
 import { IonContent } from '@ionic/angular'
--- a/ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.ts
+++ b/ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.ts
@@ -2,8 +2,8 @@ import { Component, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { IonContent } from '@ionic/angular'
 import { Subscription } from 'rxjs'
-import { PackageDataEntry } from 'src/app/models/patch-db/data-model'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'

@Component({
  selector: 'app-metrics',
--- a/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts
+++ b/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts
@@ -6,10 +6,10 @@ import { copyToClipboard } from 'src/app/util/web.util'
 import { AlertController, IonContent, NavController, PopoverController, ToastController } from '@ionic/angular'
 import { PackageProperties } from 'src/app/util/properties.util'
 import { QRComponent } from 'src/app/components/qr/qr.component'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import * as JsonPointer from 'json-pointer'
 import { FEStatus } from 'src/app/services/pkg-status-rendering.service'
-import { PackageMainStatus } from 'src/app/models/patch-db/data-model'
+import { PackageMainStatus } from 'src/app/services/patch-db/data-model'

@Component({
  selector: 'app-properties',
--- a/ui/src/app/pages/apps-routes/app-restore/app-restore.page.html
+++ b/ui/src/app/pages/apps-routes/app-restore/app-restore.page.html
@@ -57,7 +57,7 @@
            </ion-card-header>
            <ion-card-content>
              <ion-item-group>
-                <ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key, partition.value)">
+                <ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key)">
                  <ion-icon slot="start" name="save-outline"></ion-icon>
                  <ion-label>
                    <h2>{{ partition.value.label || partition.key }} ({{ partition.value.size || 'unknown size' }})</h2>
--- a/ui/src/app/pages/apps-routes/app-restore/app-restore.page.ts
+++ b/ui/src/app/pages/apps-routes/app-restore/app-restore.page.ts
@@ -4,7 +4,7 @@ import { ApiService } from 'src/app/services/api/api.service'
 import { BackupConfirmationComponent } from 'src/app/modals/backup-confirmation/backup-confirmation.component'
 import { DiskInfo, PartitionInfoEntry } from 'src/app/services/api/api-types'
 import { ActivatedRoute } from '@angular/router'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { Subscription } from 'rxjs'

@Component({
@@ -69,10 +69,10 @@ export class AppRestorePage {
    }
  }

-  async presentModal (logicalname: string, partition: PartitionInfoEntry): Promise<void> {
+  async presentModal (logicalname: string): Promise<void> {
    const m = await this.modalCtrl.create({
      componentProps: {
-        name: partition.label || logicalname,
+        type: 'restore',
      },
      cssClass: 'alertlike-modal',
      component: BackupConfirmationComponent,
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.html
+++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.html
@@ -33,16 +33,16 @@
  
      <div class="status-readout">
        <status *ngIf="connected" size="large" weight="500" [pkg]="pkg"></status>
-        <ion-button *ngIf="pkg.status === FeStatus.NeedsConfig" expand="block" [routerLink]="['config']">
+        <ion-button *ngIf="(pkg | status) === FeStatus.NeedsConfig" expand="block" [routerLink]="['config']">
          Configure
        </ion-button>
-        <ion-button *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : pkg.status" expand="block" color="danger" (click)="stop()">
+        <ion-button *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : (pkg | status)" expand="block" color="danger" (click)="stop()">
          Stop
        </ion-button>
-        <ion-button *ngIf="pkg.status === FeStatus.DependencyIssue" expand="block" (click)="scrollToRequirements()">
+        <ion-button *ngIf="(pkg | status) === FeStatus.DependencyIssue" expand="block" (click)="scrollToRequirements()">
          Fix
        </ion-button>
-        <ion-button *ngIf="pkg.status === FeStatus.Stopped" expand="block" color="success" (click)="tryStart()">
+        <ion-button *ngIf="(pkg | status) === FeStatus.Stopped" expand="block" color="success" (click)="tryStart()">
          Start
        </ion-button>
      </div>
@@ -86,23 +86,23 @@
                    <p><ion-text [color]="pkg.installed.status['dependency-errors'][dep.key] ? 'warning' : 'success'">{{ pkg.installed.status['dependency-errors'][dep.key] ? pkg.installed.status['dependency-errors'][dep.key].type : 'satisfied' }}</ion-text></p>
                  </ion-label>

-                  <ion-button *ngIf="!pkg.installed.status['dependency-errors'][dep.key] || (pkg.installed.status['dependency-errors'][dep.key] && [DependencyErrorType.InterfaceHealthChecksFailed, DependencyErrorType.HealthChecksFailed] | includes : pkg.installed.status['dependency-errors'][dep.key].type)" slot="end" size="small" color="dark" [routerLink]="['/services', dep.key]" fill="outline">
+                  <ion-button *ngIf="!pkg.installed.status['dependency-errors'][dep.key] || (pkg.installed.status['dependency-errors'][dep.key] && [DependencyErrorType.InterfaceHealthChecksFailed, DependencyErrorType.HealthChecksFailed] | includes : pkg.installed.status['dependency-errors'][dep.key].type)" slot="end" size="small" [routerLink]="['/services', dep.key]">
                    View
                  </ion-button>

                  <ng-container *ngIf="pkg.installed.status['dependency-errors'][dep.key]">
-                    <ion-button *ngIf="!localDep" slot="end" size="small" color="dark" (click)="fixDep('install', dep.key)" fill="outline">
+                    <ion-button *ngIf="!localDep" slot="end" size="small" (click)="fixDep('install', dep.key)">
                      Install
                    </ion-button>

                    <ng-container *ngIf="localDep && localDep.state === PackageState.Installed">
-                      <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.NotRunning" slot="end" size="small" color="dark" [routerLink]="['/services', dep.key]" fill="outline">
+                      <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.NotRunning" slot="end" size="small" [routerLink]="['/services', dep.key]">
                        Start
                      </ion-button>
-                      <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.IncorrectVersion" slot="end" size="small" color="dark" (click)="fixDep('update', dep.key)" fill="outline">
+                      <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.IncorrectVersion" slot="end" size="small" (click)="fixDep('update', dep.key)">
                        Update
                      </ion-button>
-                      <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.ConfigUnsatisfied" slot="end" size="small" color="dark" (click)="fixDep('configure', dep.key)" fill="outline">
+                      <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.ConfigUnsatisfied" slot="end" size="small" (click)="fixDep('configure', dep.key)">
                        Configure
                      </ion-button>
                    </ng-container>
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
+++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
@@ -2,17 +2,16 @@ import { Component, ViewChild } from '@angular/core'
 import { AlertController, NavController, ModalController, IonContent } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/api.service'
 import { ActivatedRoute, NavigationExtras } from '@angular/router'
-import { chill, isEmptyObject } from 'src/app/util/misc.util'
+import { chill, isEmptyObject, Recommendation } from 'src/app/util/misc.util'
 import { LoaderService } from 'src/app/services/loader.service'
 import { Observable, of, Subscription } from 'rxjs'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { ConfigService, getManifest } from 'src/app/services/config.service'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
-import { DependencyErrorConfigUnsatisfied, DependencyErrorNotInstalled, DependencyErrorType, Manifest, PackageDataEntry, PackageState } from 'src/app/models/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
+import { DependencyErrorConfigUnsatisfied, DependencyErrorNotInstalled, DependencyErrorType, Manifest, PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
 import { FEStatus } from 'src/app/services/pkg-status-rendering.service'
 import { ConnectionService } from 'src/app/services/connection.service'
-import { Recommendation } from 'src/app/components/recommendation-button/recommendation-button.component'

@Component({
  selector: 'app-show',
@@ -80,7 +79,9 @@ export class AppShowPage {
    }).displayDuringAsync(async () => {
      const breakages = await this.apiService.dryStopPackage({ id })

-      if (isEmptyObject(breakages.length)) {
+      console.log('BREAKAGES', breakages)
+
+      if (!isEmptyObject(breakages)) {
        const { cancelled } = await wizardModal(
          this.modalCtrl,
          this.wizardBaker.stop({
--- a/ui/src/app/pages/maintenance/maintenance.page.ts
+++ b/ui/src/app/pages/maintenance/maintenance.page.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core'
-import { ServerStatus } from 'src/app/models/patch-db/data-model'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { ServerStatus } from 'src/app/services/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'

@Component({
  selector: 'Maintenance',
--- a/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
+++ b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
@@ -1,6 +1,6 @@
 <ion-header>
  <ion-toolbar>
-    <ion-title>Embassy Marketplace</ion-title>
+    <ion-title>Service Marketplace</ion-title>
    <ion-buttons slot="end">
      <badge-menu-button></badge-menu-button>
    </ion-buttons>
--- a/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts
+++ b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts
@@ -4,8 +4,8 @@ import { MarketplaceData, MarketplaceEOS, AvailablePreview } from 'src/app/servi
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { ModalController } from '@ionic/angular'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
-import { PackageDataEntry, PackageState } from 'src/app/models/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
+import { PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
 import { Subscription } from 'rxjs'

@Component({
--- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts
+++ b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts
@@ -7,7 +7,6 @@ import { SharingModule } from 'src/app/modules/sharing.module'
 import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module'
 import { StatusComponentModule } from 'src/app/components/status/status.component.module'
-import { RecommendationButtonComponentModule } from 'src/app/components/recommendation-button/recommendation-button.component.module'
 import { InstallWizardComponentModule } from 'src/app/components/install-wizard/install-wizard.component.module'

 const routes: Routes = [
@@ -25,7 +24,6 @@ const routes: Routes = [
    RouterModule.forChild(routes),
    SharingModule,
    PwaBackComponentModule,
-    RecommendationButtonComponentModule,
    BadgeMenuComponentModule,
    InstallWizardComponentModule,
  ],
--- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
+++ b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
@@ -155,72 +155,65 @@
                  <p>{{ pkg.categories.join(', ') }}</p>
                </ion-label>
              </ion-item>
-              <ion-item detail="false">
+              <ion-item button detail="false" (click)="presentAlertVersions()">
                <ion-label>
                  <h2>Other Versions</h2>
                  <p>Click to view other versions</p>
                </ion-label>
-                <ion-button slot="end" fill="clear" (click)="presentAlertVersions()">
-                  <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
-                </ion-button>
+                <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
              </ion-item>
-              <ion-item detail="false">
+              <ion-item button detail="false" (click)="presentModalMd(pkg.manifest.)">
                <ion-label>
                  <h2>License</h2>
                  <p>{{ pkg.manifest.license }}</p>
                </ion-label>
-                <ion-button slot="end" fill="clear" (click)="presentModalLicense()">
-                  <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
-                </ion-button>
+                <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+              </ion-item>
+              <ion-item button detail="false" (click)="presentModalMd('instructions')">
+                <ion-label>
+                  <h2>Instructions</h2>
+                  <p>Click to view instructions</p>
+                </ion-label>
+                <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
              </ion-item>
            </ion-item-group>
          </ion-col>
-          <ion-col>
+          <ion-col sizeSm="12" sizeMd="6">
            <ion-item-group>
-              <ion-item detail="false">
+              <ion-item [href]="pkg.manifest['upstream-repo']" target="_blank" detail="false">
                <ion-label>
                  <h2>Source Repository</h2>
                  <p>{{ pkg.manifest['upstream-repo'] }}</p>
                </ion-label>
-                <ion-button slot="end" fill="clear" [href]="pkg.manifest['upstream-repo']" target="_blank">
-                  <ion-icon slot="icon-only" name="open-outline"></ion-icon>
-                </ion-button>
+                <ion-icon slot="end" name="open-outline"></ion-icon>
              </ion-item>
-              <ion-item detail="false">
+              <ion-item [href]="pkg.manifest['wrapper-repo']" target="_blank" detail="false">
                <ion-label>
                  <h2>Wrapper Repository</h2>
                  <p>{{ pkg.manifest['wrapper-repo'] }}</p>
                </ion-label>
-                <ion-button slot="end" fill="clear" [href]="pkg.manifest['wrapper-repo']" target="_blank">
-                  <ion-icon slot="icon-only" name="open-outline"></ion-icon>
-                </ion-button>
+                <ion-icon slot="end" name="open-outline"></ion-icon>
              </ion-item>
-              <ion-item detail="false">
+              <ion-item [href]="pkg.manifest['support-site']" target="_blank" detail="false">
                <ion-label>
                  <h2>Support Site</h2>
                  <p>{{ pkg.manifest['support-site'] }}</p>
                </ion-label>
-                <ion-button slot="end" fill="clear" [href]="pkg.manifest['support-site']" target="_blank">
-                  <ion-icon slot="icon-only" name="open-outline"></ion-icon>
-                </ion-button>
+                <ion-icon slot="end" name="open-outline"></ion-icon>
              </ion-item>
-              <ion-item detail="false">
+              <ion-item [href]="pkg.manifest['marketing-site']" target="_blank" detail="false">
                <ion-label>
                  <h2>Marketing Site</h2>
                  <p>{{ pkg.manifest['marketing-site'] }}</p>
                </ion-label>
-                <ion-button slot="end" fill="clear" [href]="pkg.manifest['marketing-site']" target="_blank">
-                  <ion-icon slot="icon-only" name="open-outline"></ion-icon>
-                </ion-button>
+                <ion-icon slot="end" name="open-outline"></ion-icon>
              </ion-item>
-              <ion-item *ngIf="pkg.manifest['donation-url'] as donationUrl" detail="false">
+              <ion-item *ngIf="pkg.manifest['donation-url'] as donationUrl" [href]="donationUrl" target="_blank" detail="false">
                <ion-label>
                  <h2>Donation Site</h2>
                  <p>{{ donationUrl }}</p>
                </ion-label>
-                <ion-button slot="end" fill="clear" [href]="donationUrl" target="_blank">
-                  <ion-icon slot="icon-only" name="open-outline"></ion-icon>
-                </ion-button>
+                <ion-icon slot="end" name="open-outline"></ion-icon>
              </ion-item>
            </ion-item-group>
          </ion-col>
--- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts
+++ b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts
@@ -1,16 +1,16 @@
 import { Component } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { AlertController, ModalController, NavController } from '@ionic/angular'
-import { Recommendation } from 'src/app/components/recommendation-button/recommendation-button.component'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { Emver } from 'src/app/services/emver.service'
 import { displayEmver } from 'src/app/pipes/emver.pipe'
-import { pauseFor } from 'src/app/util/misc.util'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
-import { PackageDataEntry, PackageState } from 'src/app/models/patch-db/data-model'
+import { pauseFor, Recommendation } from 'src/app/util/misc.util'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
+import { PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
 import { MarketplaceService } from '../marketplace.service'
 import { Subscription } from 'rxjs'
+import { MarkdownPage } from 'src/app/modals/markdown/markdown.page'

@Component({
  selector: 'marketplace-show',
@@ -35,7 +35,7 @@ export class MarketplaceShowPage {
    private readonly navCtrl: NavController,
    private readonly emver: Emver,
    private readonly patch: PatchDbModel,
-    public marketplaceService: MarketplaceService,
+    public readonly marketplaceService: MarketplaceService,
  ) { }

  async ngOnInit () {
@@ -95,6 +95,17 @@ export class MarketplaceShowPage {
    await alert.present()
  }

+  async presentModalMd (content: string) {
+    const modal = await this.modalCtrl.create({
+      componentProps: {
+        content,
+      },
+      component: MarkdownPage,
+    })
+
+    await modal.present()
+  }
+
  async install () {
    const { id, title, version, dependencies, alerts } = this.marketplaceService.pkgs[this.pkgId].manifest
    const { cancelled } = await wizardModal(
--- a/ui/src/app/pages/server-routes/developer-routes/dev-options/dev-options.page.ts
+++ b/ui/src/app/pages/server-routes/developer-routes/dev-options/dev-options.page.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core'
 import { ServerConfigService } from 'src/app/services/server-config.service'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
-import { ServerInfo } from 'src/app/models/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
+import { ServerInfo } from 'src/app/services/patch-db/data-model'
 import { Subscription } from 'rxjs'

@Component({
--- a/ui/src/app/pages/server-routes/lan/lan.page.ts
+++ b/ui/src/app/pages/server-routes/lan/lan.page.ts
@@ -4,7 +4,7 @@ import { copyToClipboard } from 'src/app/util/web.util'
 import { ConfigService } from 'src/app/services/config.service'
 import { LoaderService } from 'src/app/services/loader.service'
 import { ApiService } from 'src/app/services/api/api.service'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { Subscription } from 'rxjs'

@Component({
--- a/ui/src/app/pages/server-routes/preferences/preferences.page.html
+++ b/ui/src/app/pages/server-routes/preferences/preferences.page.html
@@ -10,10 +10,6 @@
 <ion-content class="ion-padding-top">

  <ion-item-group>
-    <ion-item button (click)="presentModalValueEdit('name', ui['server-name'])">
-      <ion-label>Embassy Name</ion-label>
-      <ion-note slot="end">{{ ui['server-name'] }}</ion-note>
-    </ion-item>
    <ion-item button (click)="presentModalValueEdit('autoCheckUpdates', ui['auto-check-updates'])">
      <ion-label>Auto Check for Updates</ion-label>
      <ion-note slot="end">{{ ui['auto-check-updates'] }}</ion-note>
--- a/ui/src/app/pages/server-routes/preferences/preferences.page.ts
+++ b/ui/src/app/pages/server-routes/preferences/preferences.page.ts
@@ -1,8 +1,8 @@
 import { Component } from '@angular/core'
 import { ServerConfigService } from 'src/app/services/server-config.service'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { Subscription } from 'rxjs'
-import { UIData } from 'src/app/models/patch-db/data-model'
+import { UIData } from 'src/app/services/patch-db/data-model'

@Component({
  selector: 'preferences',
--- a/ui/src/app/pages/server-routes/server-backup/server-backup.page.html
+++ b/ui/src/app/pages/server-routes/server-backup/server-backup.page.html
@@ -52,7 +52,7 @@
            </ion-card-header>
            <ion-card-content>
              <ion-item-group>
-                <ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key, partition.value)">
+                <ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key)">
                  <ion-icon slot="start" name="save-outline"></ion-icon>
                  <ion-label>
                    <h2>{{ partition.value.label || partition.key }} ({{ partition.value.size || 'unknown size' }})</h2>
--- a/ui/src/app/pages/server-routes/server-backup/server-backup.page.ts
+++ b/ui/src/app/pages/server-routes/server-backup/server-backup.page.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core'
 import { LoadingController, ModalController } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/api.service'
 import { BackupConfirmationComponent } from 'src/app/modals/backup-confirmation/backup-confirmation.component'
-import { DiskInfo, PartitionInfoEntry } from 'src/app/services/api/api-types'
+import { DiskInfo } from 'src/app/services/api/api-types'

@Component({
  selector: 'server-backup',
@@ -42,10 +42,10 @@ export class ServerBackupPage {
    }
  }

-  async presentModal (logicalname: string, partition: PartitionInfoEntry): Promise<void> {
+  async presentModal (logicalname: string): Promise<void> {
    const m = await this.modalCtrl.create({
      componentProps: {
-        name: partition.label || logicalname,
+        type: 'backup',
      },
      cssClass: 'alertlike-modal',
      component: BackupConfirmationComponent,
--- a/ui/src/app/pages/server-routes/server-routing.module.ts
+++ b/ui/src/app/pages/server-routes/server-routing.module.ts
@@ -26,6 +26,10 @@ const routes: Routes = [
    path: 'preferences',
    loadChildren: () => import('./preferences/preferences.module').then(m => m.PreferencesPageModule),
  },
+  {
+    path: 'preferences/edit',
+    loadChildren: () => import('./preferences/preferences.module').then(m => m.PreferencesPageModule),
+  },
  {
    path: 'wifi',
    loadChildren: () => import('./wifi/wifi.module').then(m => m.WifiListPageModule),
--- a/ui/src/app/pages/server-routes/server-show/server-show.page.html
+++ b/ui/src/app/pages/server-routes/server-show/server-show.page.html
@@ -1,6 +1,6 @@
 <ion-header>
  <ion-toolbar>
-    <ion-title>{{ patch.watch$('ui', 'server-name') | async }}</ion-title>
+    <ion-title>Embassy</ion-title>
    <ion-buttons slot="end">
      <badge-menu-button></badge-menu-button>
    </ion-buttons>
--- a/ui/src/app/pages/server-routes/server-show/server-show.page.ts
+++ b/ui/src/app/pages/server-routes/server-show/server-show.page.ts
@@ -3,8 +3,6 @@ import { LoadingOptions } from '@ionic/core'
 import { AlertController, NavController } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/api.service'
 import { LoaderService } from 'src/app/services/loader.service'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
-import { ServerStatus } from 'src/app/models/patch-db/data-model'
 import { ActivatedRoute } from '@angular/router'

@Component({
@@ -13,7 +11,6 @@ import { ActivatedRoute } from '@angular/router'
  styleUrls: ['server-show.page.scss'],
 })
 export class ServerShowPage {
-  ServerStatus = ServerStatus
  settings: ServerSettings = { }

  constructor (
@@ -22,7 +19,6 @@ export class ServerShowPage {
    private readonly apiService: ApiService,
    private readonly navCtrl: NavController,
    private readonly route: ActivatedRoute,
-    public readonly patch: PatchDbModel,
  ) { }

  ngOnInit () {
@@ -77,7 +73,6 @@ export class ServerShowPage {
    this.loader
      .of(LoadingSpinner(`Restarting...`))
      .displayDuringAsync( async () => {
-        // this.serverModel.markUnreachable()
        await this.apiService.restartServer({ })
      })
      .catch(console.error)
@@ -87,7 +82,6 @@ export class ServerShowPage {
    this.loader
      .of(LoadingSpinner(`Shutting down...`))
      .displayDuringAsync( async () => {
-        // this.serverModel.markUnreachable()
        await this.apiService.shutdownServer({ })
      })
      .catch(console.error)
--- a/ui/src/app/pages/server-routes/server-specs/server-specs.page.html
+++ b/ui/src/app/pages/server-routes/server-specs/server-specs.page.html
@@ -7,7 +7,7 @@
  </ion-toolbar>
 </ion-header>

-<ion-content class="ion-padding-top">
+<ion-content>

  <ion-item-divider>Basic</ion-item-divider>

--- a/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts
+++ b/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts
@@ -1,8 +1,8 @@
 import { Component } from '@angular/core'
 import { ToastController } from '@ionic/angular'
 import { copyToClipboard } from 'src/app/util/web.util'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
-import { ServerInfo } from 'src/app/models/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
+import { ServerInfo } from 'src/app/services/patch-db/data-model'
 import { Subscription } from 'rxjs'

@Component({
--- a/ui/src/app/pages/server-routes/wifi/wifi.page.html
+++ b/ui/src/app/pages/server-routes/wifi/wifi.page.html
@@ -29,7 +29,7 @@
    <ng-container *ngIf="wifi">
      <ion-item button detail="false" *ngFor="let ssid of wifi.ssids" (click)="presentAction(ssid, wifi)">
        <ion-label>{{ ssid }}</ion-label>
-        <ion-icon *ngIf="ssid === wifi.connected" name="wifi" color="success"></ion-icon>
+        <ion-note slot="end" *ngIf="ssid === wifi.connected"><ion-text color="success">Connected</ion-text></ion-note>
      </ion-item>
    </ng-container>
  </ion-item-group>
--- a/ui/src/app/pages/server-routes/wifi/wifi.page.ts
+++ b/ui/src/app/pages/server-routes/wifi/wifi.page.ts
@@ -4,8 +4,8 @@ import { ApiService } from 'src/app/services/api/api.service'
 import { ActionSheetButton } from '@ionic/core'
 import { WifiService } from './wifi.service'
 import { LoaderService } from 'src/app/services/loader.service'
-import { WiFiInfo } from 'src/app/models/patch-db/data-model'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { WiFiInfo } from 'src/app/services/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { Subscription } from 'rxjs'

@Component({
--- a/ui/src/app/pages/server-routes/wifi/wifi.service.ts
+++ b/ui/src/app/pages/server-routes/wifi/wifi.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'
 import { AlertController, ToastController } from '@ionic/angular'
 import { merge, Observable, timer } from 'rxjs'
 import { filter, map, take, tap } from 'rxjs/operators'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'

@Injectable({
  providedIn: 'root',