drew updates

ui/src/app/pages/apps-routes/app-available-list/app-available-list.page.ts

@@ -73,7 +73,7 @@ export class AppAvailableListPage {
       this.modalCtrl,
       this.wizardBaker.updateOS({
         version: this.eos.version,
-        releaseNotes: this.eos.notes,
+        releaseNotes: this.eos['release-notes'],
       }),
     )
   }

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

@@ -97,10 +97,16 @@
 
     <ion-item-group>
       <!-- release notes -->
-      <ion-item-divider style="color: var(--ion-color-dark); font-weight: bold;">New in {{ pkg.manifest.version | displayEmver }}</ion-item-divider>
+      <ion-item-divider style="color: var(--ion-color-dark); font-weight: bold;">
+        New in {{ pkg.manifest.version | displayEmver }}
+        <ion-button [routerLink]="['notes']" style="position: absolute; right: 10px;" fill="clear" color="primary" >
+          Version History
+          <ion-icon slot="end" name="arrow-forward-outline"></ion-icon>
+        </ion-button>
+      </ion-item-divider>
       <ion-item lines="none">
         <ion-label style="display: flex; align-items: center; justify-content: space-between;" class="ion-text-wrap" >
-          <div id='release-notes' color="dark" [innerHTML]="pkg.manifest['release-notes'] | markdown"></div>
+          <div id='release-notes' [innerHTML]="pkg.manifest['release-notes'] | markdown"></div>
         </ion-label>
       </ion-item>
       <!-- description -->

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

@@ -23,7 +23,8 @@
         <ion-label>
           <div *ngFor="let health of pkg.installed.status.main.health | keyvalue : asIsOrder" class="align" style="margin-left: 12px;">
             <ion-icon *ngIf="health.value.result === 'success'" name="checkmark-outline" color="success"></ion-icon>
-            <ion-icon *ngIf="health.value.result === 'warming-up'" name="timer-outline" color="warning"></ion-icon>
+            <ion-icon *ngIf="health.value.result === 'starting'" name="timer-outline" color="warning"></ion-icon>
+            <ion-icon *ngIf="health.value.result === 'loading'" name="sync-circle-outline" color="warning"></ion-icon>
             <ion-icon *ngIf="health.value.result === 'failure'" name="close-outline" color="danger"></ion-icon>
             <ion-icon *ngIf="health.value.result === 'disabled'" name="remove-outline" color="medium"></ion-icon>
             <h2>{{ health.key }}</h2>

ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { Routes, RouterModule } from '@angular/router'
+import { IonicModule } from '@ionic/angular'
+import { AppReleaseNotesList } from './app-release-notes-list.page'
+import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
+import { SharingModule } from 'src/app/modules/sharing.module'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AppReleaseNotesList,
+  },
+]
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterModule.forChild(routes),
+    PwaBackComponentModule,
+    SharingModule,
+  ],
+  declarations: [AppReleaseNotesList],
+})
+export class AppReleaseNotesListModule { }

ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.html

@@ -0,0 +1,12 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <pwa-back-button></pwa-back-button>
+    </ion-buttons>
+    <ion-title>Version History</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content *ngIf="pkg">
+  hello
+</ion-content>

ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.scss

@@ -0,0 +1,3 @@
+.metric-note {
+  font-size: 16px;
+}

ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.ts

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
+import { PackageDataEntry } from 'src/app/models/patch-db/data-model'
+import { AvailableShow } from 'src/app/services/api/api-types'
+import { ApiService } from 'src/app/services/api/api.service'
+
+@Component({
+  selector: 'app-release-notes-list',
+  templateUrl: './app-release-notes-list.page.html',
+  styleUrls: ['./app-release-notes-list.page.scss'],
+})
+export class AppReleaseNotesList {
+  loading = true
+  pkgId: string
+  pkg: AvailableShow
+
+  constructor (
+    private readonly route: ActivatedRoute,
+    private readonly apiService: ApiService,
+
+  ) { }
+
+  ngOnInit () {
+    this.pkgId = this.route.snapshot.paramMap.get('pkgId')
+  }
+
+  async getPkg (version?: string): Promise<void> {
+    this.loading = true
+    try {
+      this.pkg = await this.apiService.getAvailableShow({ id: this.pkgId, version })
+    } catch (e) {
+      console.error(e)
+      this.error = e.message
+    } finally {
+      this.loading = false
+    }
+  }
+
+  asIsOrder (a: any, b: any) {
+    return 0
+  }
+}

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

@@ -63,6 +63,10 @@ const routes: Routes = [
     path: 'marketplace/:pkgId',
     loadChildren: () => import('./app-available-show/app-available-show.module').then(m => m.AppAvailableShowPageModule),
   },
+  {
+    path: 'marketplace/:pkgId/notes',
+    loadChildren: () => import('./app-release-notes-list/app-release-notes-list.module').then(m => m.AppReleaseNotesListModule),
+  },
 ]
 
 @NgModule({