fix manifest page

ui/src/app/pages/apps-routes/app-manifest/app-manifest.module.ts

@@ -5,6 +5,7 @@ import { IonicModule } from '@ionic/angular'
 import { AppManifestPage } from './app-manifest.page'
 import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
+import { FormsModule } from '@angular/forms'
 
 const routes: Routes = [
   {
@@ -17,6 +18,7 @@ const routes: Routes = [
   imports: [
     CommonModule,
     IonicModule,
+    FormsModule,
     RouterModule.forChild(routes),
     PwaBackComponentModule,
     SharingModule,

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

@@ -3,43 +3,65 @@
     <ion-buttons slot="start">
       <pwa-back-button></pwa-back-button>
     </ion-buttons>
-    <ion-title>Manifest</ion-title>
+    <ion-title>Package Manifest</ion-title>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-segment [(ngModel)]="segmentValue">
+      <ion-segment-button value="formatted">
+        <ion-label>Formatted</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="raw">
+        <ion-label>Raw</ion-label>
+      </ion-segment-button>
+    </ion-segment>
   </ion-toolbar>
 </ion-header>
 
-<ion-content *ngIf="pkg">
+<ion-content *ngIf="pkg" class="ion-padding">
-  <ion-item *ngIf="error" style="margin-bottom: 16px;">
+
-    <ion-text class="ion-text-wrap" color="danger">{{ error }}</ion-text>
+  <div *ngIf="segmentValue === 'formatted'" style="background-color: var(--ion-color-light);">
-  </ion-item>
+    <ion-toolbar>
-  
+      <ion-title>Formatted Manifest</ion-title>
-  <ion-item-group *ngIf="node | typeof === 'object'">
+      <ion-buttons slot="start" *ngIf="!!pointer">
-    <div *ngFor="let prop of node | keyvalue : asIsOrder">
+        <ion-button (click)="handleFormattedBack()">
-      <!-- object/array -->
+          <ion-icon slot="icon-only" name="arrow-back-outline"></ion-icon>
-      <ng-container *ngIf="['object', 'array'] | includes : (prop.value | typeof); else notObj">
+        </ion-button>
-        <ion-item button detail="true" *ngIf="!(prop.value | empty)" (click)="goToNested(prop.key)">
+      </ion-buttons>
-          <ion-label class="ion-text-wrap">
+    </ion-toolbar>
-            <h2>{{ prop.key }}</h2>
+    <!-- node is object -->
-          </ion-label>
+    <ion-item-group *ngIf="(node | typeof) === 'object'">
-        </ion-item>
+      <div *ngFor="let prop of node | keyvalue : asIsOrder">
-      </ng-container>
+        <!-- object/array -->
-      <!-- not object/array -->
+        <ng-container *ngIf="['object', 'array'] | includes : (prop.value | typeof); else notObj">
-      <ng-template #notObj>
+          <ion-item button detail="true" *ngIf="!(prop.value | empty)" (click)="goToNested(prop.key)">
-        <ion-item *ngIf="prop.value">
+            <ion-label class="ion-text-wrap">
-          <ion-label class="ion-text-wrap">
+              <h2>{{ prop.key }}</h2>
-            <h2>{{ prop.key }}</h2>
+            </ion-label>
-            <p>{{ prop.value }}</p>
+          </ion-item>
-          </ion-label>
+        </ng-container>
-        </ion-item>
+        <!-- not object/array -->
-      </ng-template>
+        <ng-template #notObj>
-    </div>
+          <ion-item *ngIf="prop.value">
-  </ion-item-group>
+            <ion-label class="ion-text-wrap">
-  <!-- Arrays -->
+              <h2>{{ prop.key }}</h2>
-  <ion-item-group *ngIf="node | typeof === 'array'">
+              <p>{{ prop.value }}</p>
-    <ion-item *ngFor="let prop of node">
+            </ion-label>
-      <ion-label class="ion-text-wrap">
+          </ion-item>
-        {{ prop }}
+        </ng-template>
-      </ion-label>
+      </div>
-    </ion-item>
+    </ion-item-group>
-  </ion-item-group>
+    <!-- node is array -->
+    <ion-item-group *ngIf="(node | typeof) === 'array'">
+      <ion-item *ngFor="let prop of node">
+        <ion-label class="ion-text-wrap">
+          {{ prop }}
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+  </div>
+
+  <div *ngIf="segmentValue === 'raw'" class="raw">
+    <pre [innerHTML]="pkg | manifest | json"></pre>
+  </div>
 </ion-content>
 

ui/src/app/pages/apps-routes/app-manifest/app-manifest.page.scss

@@ -1,3 +1,8 @@
-.metric-note {
+.raw {
-  font-size: 16px;
+  background-color: var(--ion-color-light);
+  pre {
+    margin: 0;
+    padding: 12px;
+    white-space: pre-wrap;
+  }
 }

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

@@ -1,12 +1,10 @@
 import { Component } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { NavController } from '@ionic/angular'
-import * as JsonPointer from 'json-pointer'
 import { Subscription } from 'rxjs'
-import { distinctUntilChanged } from 'rxjs/operators'
 import { PackageDataEntry } from 'src/app/models/patch-db/data-model'
 import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
 import { getManifest } from 'src/app/services/config.service'
+import * as JsonPointer from 'json-pointer'
 
 @Component({
   selector: 'app-manifest',
@@ -19,11 +17,11 @@ export class AppManifestPage {
   pointer: string
   node: object
   subs: Subscription[]
+  segmentValue: 'formatted' | 'raw' = 'formatted'
 
   constructor (
     private readonly route: ActivatedRoute,
     private readonly patch: PatchDbModel,
-    private readonly navCtrl: NavController,
   ) { }
 
   ngOnInit () {
@@ -35,12 +33,6 @@ export class AppManifestPage {
         this.pkg = pkg
         this.setNode()
       }),
-      this.route.queryParams
-      .pipe(distinctUntilChanged())
-      .subscribe(queryParams => {
-        this.pointer = queryParams['pointer']
-        this.setNode()
-      }),
     ]
 
     this.setNode()
@@ -50,16 +42,20 @@ export class AppManifestPage {
     this.subs.forEach(sub => sub.unsubscribe())
   }
 
-  setNode () {
+  handleFormattedBack () {
+    const arr = this.pointer.split('/')
+    arr.pop()
+    this.pointer = arr.join('/')
+    this.setNode()
+  }
+
+  private setNode () {
     this.node = JsonPointer.get(getManifest(this.pkg), this.pointer || '')
   }
 
   async goToNested (key: string): Promise<any> {
-    this.navCtrl.navigateForward(`/services/installed/${this.pkgId}/manifest`, {
+    this.pointer = `${this.pointer || ''}/${key}`
-      queryParams: {
+    this.setNode()
-        pointer: `${this.pointer || ''}/${key}`,
-      },
-    })
   }
 
   asIsOrder (a: any, b: any) {

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

@@ -3,7 +3,7 @@
     <ion-buttons slot="start">
       <pwa-back-button></pwa-back-button>
     </ion-buttons>
-    <ion-title>Monitor</ion-title>
+    <ion-title>Health</ion-title>
   </ion-toolbar>
 </ion-header>
 

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

@@ -3,7 +3,7 @@
     <ion-buttons slot="start">
       <pwa-back-button></pwa-back-button>
     </ion-buttons>
-    <ion-title>Restore From Backup</ion-title>
+    <ion-title>Restore Backup</ion-title>
     <ion-buttons slot="end">
       <ion-button (click)="doRefresh()" color="primary">
         <ion-icon slot="icon-only" name="reload-outline"></ion-icon>