rework modals and more

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'

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],
 })

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

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({

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'
 

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({

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'

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',

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',

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>

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,

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>

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({